@logora/debate 0.1.0

package/src/components/input/argument_input/ArgumentInput.jsx

@@ -0,0 +1,420 @@
+import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
+import { FormattedMessage } from "react-intl";
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useList } from '@logora/debate/list/list_provider';
+import { useModal } from '@logora/debate/dialog/modal';
+import { useDataProvider } from '@logora/debate/data/data_provider';
+import { useFormValidation } from '@logora/debate/forms/use_form_validation';
+import { useInput } from "@logora/debate/input/input_provider";
+import { useConfig } from '@logora/debate/data/config_provider';
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+import { useIntl } from 'react-intl';
+import { useLocation } from "react-router";
+import { useAuthRequired } from '@logora/debate/hooks/use_auth_required';
+import useSessionStorageState from '@rooks/use-sessionstorage-state';
+import { useToast } from '@logora/debate/dialog/toast_provider';
+import { Avatar } from '@logora/debate/user/avatar';
+import { AuthorBox } from '@logora/debate/user/author_box';
+import { TogglePosition } from '@logora/debate/input/toggle_position';
+import { Icon } from '@logora/debate/icons/icon';
+import TextEditor from "@logora/debate/input/text_editor";
+const SideModal = lazy(() => import('@logora/debate/modal/side_modal'));
+import cx from 'classnames';
+import styles from './ArgumentInput.module.scss';
+import PropTypes from "prop-types";
+
+export const ArgumentInput = ({ argumentListId, avatarSize = 48, disabled = false, positions = [], disabledPositions = [], groupId, groupName, groupType, hideSourceAction = false, isReply = false, onSubmit, parentId, placeholder, positionId, focusOnInit = false, activeOnInit = false, userGuideUrl, hideUserGuideLink = false, hideCharCount = false, disableAutoActivate = false}) => {
+    const intl = useIntl();
+    const api = useDataProvider();
+    const list = useList();
+    const config = useConfig();
+    const { focus, setFocus, setReset, inputContent, setInputContent, setInputRichContent } = useInput();
+    const { isLoggedIn, currentUser } = useAuth();
+    const { errors, validate } = useFormValidation();
+    const { isMobile } = useResponsive();
+    const location = useLocation();
+    // REFS
+    const inputForm = useRef(null);
+    // STATE
+    const [sources, setSources] = useState([]);
+    const [argumentContent, setArgumentContent] = useState("");
+    const [argumentRichContent, setArgumentRichContent] = useState(null);
+    const [userPositionId, setUserPositionId] = useState(null);
+    const [argumentId, setArgumentId] = useState(null);
+    const [flash, setFlash] = useState(false);
+    const [inputActivation, setInputActivation] = useState(false);
+    const [editElement, setEditElement] = useState({});
+    const [savedArgument, setSavedArgument] = useSessionStorageState("userSide", {});
+    const [inputDisabledForVisitors, setInputDisabledForVisitors] = useState(!isLoggedIn && config?.actions?.disableInputForVisitor);
+    const requireAuthentication = useAuthRequired();
+    const { showModal } = useModal();
+    const { toast } = useToast() || {};
+    const urlParams = new URLSearchParams(typeof window !== "undefined" ? window.location.search : location.search);
+
+    useEffect(() => {
+        setInputDisabledForVisitors(!isLoggedIn && config?.actions?.disableInputForVisitor);
+    }, [isLoggedIn, config]);
+    // Checks if the user has the role of editor or moderator
+    const isEditorOrModerator = currentUser?.role === "editor" || currentUser?.role === "moderator"
+    const userIsBanned = currentUser?.moderation_status === "banned";
+
+    useEffect(() => {
+        let positionIdParam = null;
+        if (typeof window !== 'undefined') {
+            positionIdParam = urlParams.get('positionId');
+        }
+
+        if (positionId && positionId != positions[2]?.id && positions?.find(pos => pos.id === positionId)) {
+            setUserPositionId(positionId);
+        } else if (positionIdParam && positionIdParam != positions[2]?.id) {
+            setUserPositionId(positionIdParam);
+        } else {
+            if (savedArgument && (savedArgument.groupId == groupId) && (savedArgument.positionId != positions[2]?.id)) {
+                setUserPositionId(savedArgument.positionId);
+            }
+        }
+    }, [positionId])
+
+    useEffect(() => {
+        if (activeOnInit) {
+            handleTextEditorActivation();
+            setFocus(true);
+        }
+    }, [activeOnInit])
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const initFocus = focusOnInit || urlParams.get('initArgument');
+            if (initFocus === true || initFocus === 'true') {
+                setFocus(true);
+                flashEditor();
+            }
+        }
+    }, [])
+
+    useEffect(() => {
+        if (focus) {
+            scrollToEditor();
+            setFocus(false);
+        }
+    }, [focus])
+
+    useEffect(() => {
+        if (inputContent?.id) {
+            setEditArgument(inputContent);
+            setFocus(true);
+        }
+    }, [inputContent])
+
+    const setEditArgument = (eElement) => {
+        setEditElement(eElement);
+        setInputActivation(true);
+        setSources(eElement.sources);
+        setArgumentContent(eElement.content);
+        setArgumentRichContent(eElement.rich_content);
+        setArgumentId(eElement.id);
+        scrollToEditor();
+        setUserPositionId(eElement.position?.id);
+        const rawContent = JSON.parse(eElement.rich_content);
+        if (rawContent.hasOwnProperty("root")) {
+            setInputRichContent(eElement.rich_content);
+        } else {
+            setInputContent(eElement.content);
+        }
+    }
+
+    const scrollToEditor = () => {
+        inputForm.current.scrollIntoView(false);
+    }
+
+    const resetInputs = () => {
+        setArgumentContent("");
+        setArgumentRichContent(null);
+        setEditElement({});
+        setArgumentId(null);
+        setSources([]);
+        setReset(true);
+    }
+
+    const handleChooseSide = (positionId) => {
+        setUserPositionId(positionId);
+        submitArgument(positionId);
+    }
+
+    const showSideModal = () => {
+        showModal(
+            <Suspense fallback={null}>
+                <SideModal
+                    modalTitle={intl.formatMessage({ id: "modal.side_modal.modal_title", defaultMessage: "Choose your side" })}
+                    onChooseSide={handleChooseSide}
+                    positions={positions}
+                    title={groupName}
+                    disabledPositions={!isReply && disabledPositions}
+                    isNeutral={savedArgument && (savedArgument.groupId == groupId) && (savedArgument.positionId === (positions[2]?.id))}
+                />
+            </Suspense>
+        );
+    }
+
+    const handleFormSubmit = () => {
+        if (isLoggedIn) {
+            if (argumentId) {
+                updateArgument();
+            } else {
+                if ((!positions || positions?.length === 0) || (!disabledPositions?.find(pos => pos?.id === userPositionId) && userPositionId) || (isEditorOrModerator && isReply)) {
+                    submitArgument(isReply && isEditorOrModerator && positions[0]?.id);
+                } else {
+                    showSideModal();
+                }
+            }
+        } else {
+            requireAuthentication({ loginAction: "argument" });
+        }
+    }
+
+    const handleChange = (content, richContent) => {
+        if (inputDisabledForVisitors) {
+            requireAuthentication({ loginAction: "argument" });
+        } else {
+            setArgumentContent(content);
+            setArgumentRichContent(richContent);
+            validate({ content: content }, [{ content: ["url", null] }])
+        }
+    }
+
+    const handleSourcesChange = (newSource) => {
+        setSources(newSource);
+    }
+
+    const argumentValidationRules = [
+        { content: ["length", 3] },
+        { content: ["required", null] },
+        { content: ["url", null] },
+        ...((!positions || positions?.length === 0) ? [] : [{ position_id: ["required", null] }])
+    ]
+
+    const submitArgument = (position) => {
+        const userPosition = position ? position : userPositionId;
+        const data = {
+            content: argumentContent,
+            rich_content: argumentRichContent,
+            group_id: groupId,
+            ...(groupType && { group_type: groupType }),
+            ...(userPosition && { position_id: userPosition }),
+            is_reply: Boolean(parentId),
+            message_id: parentId || null,
+            source_ids: sources?.map(source => source.id),
+        };
+
+        if (validate(data, argumentValidationRules)) {
+            if (userPosition && positions && positions.map(position => position.id).includes(userPosition)) {
+                const argumentToSave = {
+                    groupId: groupId,
+                    positionId: userPosition
+                }
+                setSavedArgument(argumentToSave);
+            }
+            resetInputs();
+            api.create("messages", data).then(response => {
+                if (response.data.success) {
+                    if (parentId) {
+                        onSubmit(response.data.data.resource);
+                        toast(intl.formatMessage({ id: "alert.argument_create", defaultMessage: "Your contribution has been sent !" }), { type: "success", points: intl.formatMessage({ id: "alert.reply_gain", defaultMessage: " " }) });
+                    } else {
+                        const argument = response.data.data.resource;
+                        let listId = argumentListId;
+                        if (userPosition && !isMobile) {
+                            listId = `argumentList${argument.position.id}`;
+                        }
+                        onSubmit?.(argumentContent, positions.find(pos => pos.id === userPosition) || null);
+                        list.add(listId, [argument]);
+                        toast(intl.formatMessage({ id: "alert.argument_create", defaultMessage: "Your contribution has been sent !" }), { type: "success", points: intl.formatMessage({ id: "alert.argument_create_gain", defaultMessage: "Up to 10 eloquence points" }), category: "ARGUMENT", contentKey: currentUser.messages_count === 2 ? "alert.third_argument" : "alert.first_argument" });
+                    }
+                    if (typeof window !== 'undefined') {
+                        window.dispatchEvent(
+                            new CustomEvent("logora:user_content:created", {
+                                detail: {
+                                    content: response.data.data?.resource
+                                }
+                            })
+                        );
+                    }
+                }
+            });
+        }
+    }
+
+    const updateArgument = () => {
+        const data = {
+            content: argumentContent,
+            rich_content: argumentRichContent,
+            source_ids: sources?.map(source => source.id),
+            ...(userPositionId && { position_id: userPositionId }),
+        };
+
+        if (validate(data, argumentValidationRules)) {
+            api.update("messages", argumentId, data).then(response => {
+                if (response.data.success) {
+                    const argument = response.data.data.resource;
+                    let listId = argumentListId;
+                    if (userPositionId && !isMobile) {
+                        listId = `argumentList${argument.position?.id}`;
+                    }
+                    if (editElement?.position?.id != argument.position?.id && !isMobile && !argument.is_reply) {
+                        const oldListId = `argumentList${editElement.position.id}`;
+                        const newListId = `argumentList${argument.position.id}`;
+                        list.remove(oldListId, [argument]);
+                        list.add(newListId, [argument]);
+                    } else {
+                        list.update(listId, [argument]);
+                    }
+                    toast(intl.formatMessage({ id: "alert.argument_modify" }), { type: "success" });
+                    resetInputs();
+                }
+            });
+        }
+    }
+
+    const flashEditor = () => {
+        if (!flash) {
+            setFlash(true);
+            const timer = setTimeout(() => {
+                setFlash(false);
+            }, 2000);
+            return () => clearTimeout(timer);
+        }
+    }
+
+    const handleTextEditorActivation = () => {
+        if (inputDisabledForVisitors) {
+            requireAuthentication({ loginAction: "argument" });
+        } else {
+            setInputActivation(true);
+        }
+    }
+
+    const displayArgumentLimitWarning = () => {
+        let disabledPosition = disabledPositions.find(pos => pos.id === userPositionId);
+        if (disabledPosition) {
+            return intl.formatMessage({ id: "info.argument_side_limit", defaultMessage: "You have reached the argument limit (10) for position {position}." }, { position: disabledPosition.name })
+        }
+    }
+
+    return (
+        <div className={styles.inputContainer}>
+            {disabled && (<div className={styles.disabledInputMask}>{userIsBanned ? intl.formatMessage({ id: "input.argument_input.user_banned", defaultMessage: "You are banned from the debate space." }) : intl.formatMessage({ id: "info.debate_is_inactive", defaultMessage: "Debate is closed" })}</div>)}
+            <div className={cx(styles.argumentInput, { [styles.flash]: flash, [styles.replyInputContainer]: isReply })}>
+                <div data-tid={"action_add_argument"} ref={inputForm}>
+                    <div className={styles.argumentInputBox}>
+                        {positions.length > 0 && isLoggedIn && (!isReply || !isEditorOrModerator) &&
+                            <div className={styles.userPosition}>
+                                <div>{intl.formatMessage({ id: "input.position", defaultMessage: "Your position" })}</div>
+                                <TogglePosition
+                                    activeLabel={userPositionId === positions[0].id ? 0 : (userPositionId === positions[1].id ? 1 : null)}
+                                    firstLabel={positions[0]}
+                                    secondLabel={positions[1]}
+                                    onChange={(label) => setUserPositionId(positions[label].id)}
+                                />
+                            </div>
+                        }
+                        <div className={cx(styles.argumentTextInputBox, { [styles.argumentTextInputBoxisTablet]: !isMobile, [styles.replyEditorRow]: isReply })}>
+                            <div className={cx(styles.argumentAuthorContainer, { [styles.argumentAuthorContainerMobile]: isMobile, [styles.argumentAuthorContainerActivated]: (!isMobile && inputActivation) || isReply })}>
+                                {(!isMobile && inputActivation) || isReply ?
+                                    <Avatar avatarUrl={currentUser.image_url} userName={currentUser.full_name} size={avatarSize} />
+                                    :
+                                    <AuthorBox
+                                        fullName={currentUser?.full_name || intl.formatMessage({ id: "default_author.full_name" })}
+                                        avatarUrl={currentUser?.image_url}
+                                        points={currentUser?.points || 0}
+                                        slug={currentUser?.hash_id}
+                                    />
+                                }
+
+                            </div>
+                            <div onClick={handleTextEditorActivation} data-testid="argument-input" className={cx(styles.textEditorBox, { [styles.replyTextEditorBox]: isReply })}>
+                                <TextEditor
+                                    handleChange={(value, rawValue) => { handleChange(value, rawValue); }}
+                                    handleSourcesChange={(sources) => { handleSourcesChange(sources); }}
+                                    placeholder={placeholder}
+                                    aria-label={intl.formatMessage({id: "input.argument_input.aria_label", defaultMessage: "Message input field" })}
+                                    onSubmit={handleFormSubmit}
+                                    sources={sources}
+                                    hideSourceAction={hideSourceAction || inputDisabledForVisitors}
+                                    uid={`Argument${groupId}`}
+                                    onActivation={handleTextEditorActivation}
+                                    showStylesControls={inputActivation}
+                                    disabled={disabled || inputDisabledForVisitors || userIsBanned}
+                                    maxLength={inputDisabledForVisitors ? false : config?.actions?.argumentMaxLength}
+                                    disableRichText={config?.actions?.disableRichText || inputDisabledForVisitors}
+                                    shortBar={isReply}
+                                    hideSubmit={inputDisabledForVisitors}
+                                    allowedDomains={config?.allowed_sources}
+                                    active={activeOnInit}
+                                    hideCharCount={hideCharCount} 
+                                    disableAutoActivate={disableAutoActivate}
+                                />
+                                {(errors?.content) && <div className={styles.argumentInputWarning}>{errors && Object.values(errors).map((e, index) => <div key={index}>{e}</div>)}</div>}
+                                {inputActivation && disabledPositions?.find(pos => pos.id === userPositionId) &&
+                                    <div className={cx(styles.argumentInputWarning, styles.disabledPositionWarning)}>
+                                        <Icon name="announcement" className={styles.warningIcon} height={20} width={20} />
+                                        <div className={styles.argumentInputWarningText}>{displayArgumentLimitWarning()}</div>
+                                    </div>
+                                }
+                                {inputActivation && userGuideUrl && !hideUserGuideLink &&(
+                                    <div className={styles.guideMessage}>
+                                        <FormattedMessage
+                                            id="alert.guide_message"
+                                            defaultMessage={"Contributions must comply with our {userCharter}."}
+                                            values={{
+                                                userCharter: (
+                                                    <a className={styles.guideMessage} href={userGuideUrl} target="_blank" >
+                                                        <FormattedMessage id="alert.user_charter" defaultMessage="user charter" />
+                                                    </a>
+                                                ),
+                                            }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+ArgumentInput.propTypes = {
+    /** Id of the list */
+    argumentListId: PropTypes.string,
+    /** Size of the user avatar */
+    avatarSize: PropTypes.number,
+    /** If true, disables the input */
+    disabled: PropTypes.bool,
+    /** Positions in the debate */
+    positions: PropTypes.array,
+    /** If true, disables the position */
+    disabledPositions: PropTypes.array,
+    /** Id of the group */
+    groupId: PropTypes.number,
+    /** Name of the group */
+    groupName: PropTypes.string,
+    /** Type of the group */
+    groupType: PropTypes.string,
+    /** If true, hide source button */
+    hideSourceAction: PropTypes.bool,
+    /** If true, slightly modify the design and submit */
+    isReply: PropTypes.bool,
+    /** Callback function when submit */
+    onSubmit: PropTypes.func,
+    /** Id of the parent, if reply */
+    parentId: PropTypes.number,
+    /** Placeholder to display */
+    placeholder: PropTypes.string.isRequired,
+    /** Position of the argument */
+    positionId: PropTypes.number,
+    /** Focus input on initialization */
+    focusOnInit: PropTypes.bool,
+    /** URL leading to the user charter or moderation rules */
+    userGuideUrl: PropTypes.string,
+};

package/src/components/input/argument_input/ArgumentInput.module.scss

@@ -0,0 +1,166 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/flex' as flex;
+@use 'styles/display' as display;
+
+.inputContainer {
+    position: relative;
+}
+
+.argumentInput {
+    width: 100%;
+    @include spacing.p(4, sm);
+    @include spacing.p(3, xs);
+    background-color: theme.$background-color-primary;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border-main-container;
+    border-radius: theme.$box-border-radius;
+    z-index: 1;
+    -webkit-transition: box-shadow 0.8s ease-in-out;
+    -moz-transition: box-shadow 0.8s ease-in-out;
+    -o-transition: box-shadow 0.8s ease-in-out;
+    transition: box-shadow 0.8s ease-in-out;
+
+    &.flash, &.flash:hover, &.flash:focus-within {
+        box-shadow: 0 0 15px theme.$call-primary;
+    }
+}
+
+.argumentInputBox {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    gap: spacing.$spacer-xs;
+}
+
+.userPosition {
+    display: flex !important;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: spacing.$spacer;
+    color: theme.$text-primary;
+    width: fit-content;
+}
+
+.argumentTextInputBox {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    gap: spacing.$spacer-lg;
+    &.argumentTextInputBoxisTablet {
+        flex-direction: row !important;
+    }
+    @include display.media-breakpoint-down(xs) {
+        gap: spacing.$spacer-xs;
+    }
+}
+
+.argumentAuthorContainer {
+    @include spacing.mt(2, xs);
+    overflow: hidden;
+    min-width: 175px;
+    max-width: 230px;
+    &.argumentAuthorContainerActivated {
+        min-width: initial;
+        max-width: initial;
+        overflow: initial;
+    }
+}
+
+.argumentAuthorContainerMobile {
+    width: max-content;
+    max-width: initial;
+}
+
+.textEditorBox {
+    width: 100%;
+    @include spacing.pt(2, sm);
+    @include spacing.pt(0, xs);
+}
+
+.argumentInputWarning {
+    font-size: theme.$font-size-extra-small;
+    color: theme.$cancel-primary;
+    @include spacing.mt(3, xs);
+    svg.warningIcon {
+        fill: transparent !important;
+        min-width: 20px;
+        min-height: 20px;
+        circle {
+            stroke: theme.$cancel-primary;
+            stroke-width: 1.5px;
+        }
+        path {
+            fill: theme.$cancel-primary;
+        }
+    }
+    &.disabledPositionWarning {
+        display: flex !important;
+        align-items: center !important;
+        gap: spacing.$spacer-sm;
+    }
+}
+
+.disabledInputMask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    opacity: 0.9;
+    background: theme.$text-tertiary;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-style: italic;
+}
+
+.replyInputContainer {
+    transition: margin-top 2s;
+    position: relative;
+
+    background-color: theme.$background-color-primary;
+    border-radius: theme.$box-border-radius;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border;
+    
+    @include spacing.mt(2, xs);
+    @include spacing.p(3, xs);
+
+    &::before {
+        content: "";
+        border-left: 4px solid theme.$text-secondary;
+        position: absolute;
+        width: 4px;
+        height: 10px;
+        top: -10px;
+        left: 4em;
+    }
+}
+
+.replyEditorRow {
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: flex-start !important;
+    align-items: flex-start !important;
+    gap: spacing.$spacer !important;
+    width: 100%;
+}
+
+.replyTextEditorBox {
+    @include spacing.pt(0, xs);
+}
+
+.guideMessage {
+    font-size: theme.$font-size-small;
+    color: theme.$text-secondary;
+    white-space: nowrap;
+    margin-top: 1rem; 
+    white-space: normal; 
+    word-break: break-word; 
+    a {
+        font-size: theme.$font-size-small;
+        color: theme.$announcement-text-primary !important;
+        text-decoration: underline !important;
+    }
+}