@logora/debate 0.1.0 → 0.1.1

package/src/components/vote/vote_box/VoteBox.jsx

@@ -1,420 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from "prop-types";
-import { useLocation } from 'react-router';
-import { useConfig } from '@logora/debate/data/config_provider';
-import { useDataProvider } from '@logora/debate/data/data_provider';
-import { useAuth } from "@logora/debate/auth/use_auth";
-import { useIntl, FormattedMessage } from 'react-intl';
-import { useAuthRequired } from '@logora/debate/hooks/use_auth_required';
-import { useToast } from '@logora/debate/dialog/toast_provider';
-import useSessionStorageState from '@rooks/use-sessionstorage-state';
-import { useTranslatedContent } from '@logora/debate/translation/translated_content';
-import { Link } from '@logora/debate/action/link';
-import { ProgressBar } from "@logora/debate/progress/progress_bar";
-import { Icon } from "@logora/debate/icons/icon";
-import { Button } from '@logora/debate/action/button';
-import { Tooltip } from '@logora/debate/dialog/tooltip';
-import { useResponsive } from '@logora/debate/hooks/use_responsive';
-import cx from 'classnames';
-import styles from './VoteBox.module.scss';
-
-export const VoteBox = ({ numberVotes, votePositions, voteableType, voteableId, redirectUrl, displayColumn, textAlignLeft, showTotal = true, voteBoxClassName, buttonContainerClassName, buttonClassName, showResultClassName, onVote, disabled = false, showVotesCommentsNumber = false, commentsCount }) => {
-    const [isLoadingVote, setIsLoadingVote] = useState(true);
-    const [currentVote, setCurrentVote] = useState(undefined);
-    const [showResults, setShowResults] = useState(false);
-    const [totalVotes, setTotalVotes] = useState(parseFloat(numberVotes.total) || Object.values(numberVotes).reduce((sum, value) => sum + parseFloat(value), 0) || 0);
-    const firstPosition = useTranslatedContent(votePositions[0]?.name, votePositions[0]?.language, "name", votePositions[0]?.translation_entries);
-    const secondPosition = useTranslatedContent(votePositions[1]?.name, votePositions[1]?.language, "name", votePositions[1]?.translation_entries);
-    const neutralPosition = useTranslatedContent(votePositions[2]?.name, votePositions[2]?.language, "name", votePositions[2]?.translation_entries);
-    const [savedVote, setSavedVote, removeSavedVote] = useSessionStorageState("storedUserVote", {});
-    const [savedUserSide, setSavedUserSide, removeSavedUserSide] = useSessionStorageState("userSide", {});
-    const { toast } = useToast() || {};
-    const { isMobile } = useResponsive();
-
-
-    const initVotesCount = () => {
-        const votesCountObj = {};
-        votePositions?.forEach(position =>
-            votesCountObj[position.id] = {
-                count: parseFloat(numberVotes[position.id]) || 0,
-                percentage: totalVotes === 0 ? 0 : Math.round(100 * ((numberVotes[position.id] || 0) / (totalVotes)))
-            }
-        );
-
-        return votesCountObj;
-    }
-    const [votesCount, setVotesCount] = useState(initVotesCount());
-
-    const requireAuthentication = useAuthRequired();
-    const location = useLocation();
-    const api = useDataProvider();
-    const config = useConfig();
-    const intl = useIntl();
-    const { isLoggedIn, isLoggingIn } = useAuth();
-
-
-    useEffect(() => {
-        if (isLoggingIn === false) {
-            if (isLoggedIn) {
-                getVote(voteableId);
-            } else {
-                setIsLoadingVote(false);
-            }
-        }
-    }, [isLoggingIn, isLoggedIn])
-
-    useEffect(() => {
-        if (isLoadingVote === false && !redirectUrl) {
-            const [initVote, positionId] = getStoredVote();
-            if (initVote) {
-                if (!positionId) {
-                    setShowResults(true);
-                } else {
-                    handleVote(positionId);
-                }
-            }
-        }
-    }, [isLoadingVote])
-
-    useEffect(() => {
-        if (onVote) {
-            onVote(currentVote);
-        }
-    }, [currentVote])
-
-    const getStoredVote = () => {
-        if (savedVote && Object.keys(savedVote).length !== 0) {
-          const isSameTarget =
-            savedVote.groupId === voteableId &&
-            savedVote.voteableType === voteableType;
-      
-          if (!isSameTarget) {
-            removeSavedVote();
-            return [false, false];
-          }
-      
-          return [true, savedVote.positionId];
-        }
-      
-        const urlParams = new URLSearchParams(
-          typeof window !== "undefined" ? window.location.search : location.search
-        );
-        const initVote = Boolean(urlParams.get("initVote"));
-        const positionId = parseInt(urlParams.get('positionId')) || false;
-
-        return [initVote, positionId];
-      };
-
-    const getVote = (debateId) => {
-        setIsLoadingVote(true);
-        if (onVote) {
-            onVote(currentVote);
-        }
-        api.getOneWithToken("votes", `${voteableType.toLowerCase()}/${debateId}`, {}).then(response => {
-            if (response.data.data.resource) {
-                setCurrentVote(response.data.data.resource);
-                setShowResults(true);
-                setIsLoadingVote(false);
-            } else {
-                setIsLoadingVote(false);
-                setShowResults(false);
-            }
-        }).catch(error => {
-            setIsLoadingVote(false);
-        });
-    }
-
-    const getPercentageValue = (voteCount, totalVotes) => {
-        return totalVotes === 0 ? 0 : Math.round(100 * (voteCount / (totalVotes)));
-    }
-
-    const voteAction = (positionId) => {
-        const data = {
-            voteable_id: voteableId,
-            voteable_type: voteableType || 'Group',
-            position_id: positionId
-        }
-        const userSideToSave = {
-            groupId: voteableId,
-            voteableType: voteableType,
-            positionId: positionId
-        }
-        setSavedUserSide(userSideToSave);
-        if (currentVote) {
-            updateVote(positionId, currentVote.position_id);
-            showResults === false && toggleResults();
-            if (positionId !== currentVote.position_id) {
-                api.update("votes", currentVote.id, data).then(response => {
-                    if (response.data.success) {
-                        setCurrentVote(response.data.data.resource);
-                        toast(intl.formatMessage({ id: "header.vote_confirm_modal", defaultMessage: "Your vote has been saved !" }), { type: "success" });
-                    }
-                });
-            }
-        } else {
-            addVote(positionId);
-            toggleResults();
-            api.create("votes", data).then(response => {
-                if (response.data.success) {
-                    setCurrentVote(response.data.data.resource);
-                    toast(intl.formatMessage({ id: "header.vote_confirm_modal", defaultMessage: "Your vote has been saved !" }), { type: "success" });
-                }
-            });
-        }
-    }
-
-    const addVote = (positionId) => {
-        const newCount = votesCount[positionId].count + 1;
-        const newTotal = totalVotes + 1;
-        const newVotesCount = {};
-        votePositions.forEach((element) => {
-            if (positionId === element.id) {
-                newVotesCount[element.id] = { count: newCount, percentage: getPercentageValue(newCount, newTotal) };
-            } else {
-                const newElementCount = votesCount[element.id].count;
-                newVotesCount[element.id] = { count: newElementCount, percentage: getPercentageValue(newElementCount, newTotal) };
-            }
-        });
-        setVotesCount(newVotesCount);
-        setTotalVotes(newTotal);
-    }
-
-    const updateVote = (newPosition, previousPosition) => {
-        if (previousPosition !== newPosition) {
-            const newVotesCount = {
-                ...votesCount,
-                [previousPosition]: {
-                    count: votesCount[previousPosition].count - 1,
-                    percentage: getPercentageValue(votesCount[previousPosition].count - 1, totalVotes)
-                },
-                [newPosition]: {
-                    count: votesCount[newPosition].count + 1,
-                    percentage: getPercentageValue(votesCount[newPosition].count + 1, totalVotes)
-                }
-            }
-            setVotesCount(newVotesCount);
-        }
-    }
-
-    const getRedirectUrl = (positionId) => {
-        let searchParams = new URLSearchParams({
-            initVote: "true",
-            ...(positionId && { positionId: positionId })
-        });
-        return redirectUrl + `?${searchParams.toString()}`;
-    }
-
-    const handleVote = (positionId) => {
-        if (isLoggedIn) {
-            if (Object.keys(votesCount).includes(positionId.toString())) {
-                voteAction(positionId);
-                removeSavedVote();
-            }
-        } else {
-            if (Object.keys(votesCount).includes(positionId.toString())) {
-                const voteToSave = {
-                    groupId: voteableId,
-                    voteableType: voteableType,
-                    positionId: positionId
-                }
-                setSavedVote(voteToSave);
-            }
-            requireAuthentication({ loginAction: "vote" });
-        }
-    }
-
-    const toggleResults = () => {
-        if (showResults) { removeSavedUserSide(); }
-        setShowResults(!showResults);
-    }
-
-    const displayVotePosition = (position, index) => {
-        let currentPositionName;
-        if (index === 0) { currentPositionName = firstPosition.translatedContent }
-        else if (index === 1) { currentPositionName = secondPosition.translatedContent }
-        else if (index === 2) { currentPositionName = neutralPosition.translatedContent }
-
-        const isButton = (typeof window !== "undefined" && !redirectUrl);
-
-        return (
-            <div key={index} className={cx(styles.voteAction, { [styles.buttonAlignLeft]: styles.buttonAlignLeft })}>
-                <Button
-                    data-tid={"action_vote"}
-                    type="button"
-                    title={currentPositionName}
-                    className={cx(styles.voteButton, { [styles.textAlignLeft]: textAlignLeft, [buttonClassName]: buttonClassName })}
-                    onClick={isButton ? (() => handleVote(position.id)) : null}
-                    disabled={disabled}
-                    data-testid={"voteButton"}
-                    to={isButton ? null : getRedirectUrl(position.id)}
-                    target={isButton ? null : "_top"}
-                    rel={isButton ? null : "nofollow"}
-                    external={isButton ? null : true}
-                >
-                    <div data-tid={"action_vote"} className={cx(styles.voteButtonThesis, { [styles.voteButtonThesisSynthesisMobile]: !displayColumn })}>{currentPositionName}</div>
-                </Button>
-            </div>
-        );
-    }
-
-    const handleShowResults = () => {
-        if (isLoggedIn || config.actions?.unloggedVoteResults === true) {
-            setShowResults(true);
-        } else {
-            requireAuthentication({ loginAction: "vote" });
-        }
-    }
-
-    return (
-        <div className={cx(styles.voteBox, { [voteBoxClassName]: voteBoxClassName })} >
-            <>
-                {showResults || disabled ? (
-                    <div className={styles.voteResultsBox} data-testid={"voteResultsBox"}>
-                        <div className={styles.voteResults}>
-                            {
-                                votePositions.map((value, index) => {
-                                    let currentPositionName;
-                                    if (index === 0) { currentPositionName = firstPosition.translatedContent }
-                                    else if (index === 1) { currentPositionName = secondPosition.translatedContent }
-                                    else if (index === 2) { currentPositionName = neutralPosition.translatedContent }
-                                    return (
-                                        <div key={index}>
-                                            <div className={index > 0 ? cx(styles.voteProgressHeader, styles.voteProgressHeaderAgainst) : styles.voteProgressHeader}>
-                                                {currentPositionName} {(currentVote && currentVote.position_id === value.id) ? <span title={intl.formatMessage({ id: "vote.vote_box.vote_side" }) + currentPositionName} className={styles.sideIcon} aria-hidden="true"><Icon name="checkbox" width={16} height={16} /></span> : null}
-                                            </div>
-                                            <ProgressBar
-                                                progress={votesCount[value.id].percentage / 100}
-                                                goal={1}
-                                                className={styles.progress}
-                                                innerClassName={styles.progressBar}
-                                            >
-                                                {votesCount[value.id].percentage}%
-                                            </ProgressBar>
-                                        </div>
-                                    );
-                                })
-                            }
-                        </div>
-                        <div className={styles.voteBoxFooter}>
-                            {showTotal && (
-                                <div className={styles.voteResultsNumberVoters}>
-                                    <FormattedMessage id="vote.vote_box.votes" values={{ votesCount: totalVotes }} defaultMessage="{votesCount} votes" />
-                                </div>
-                            )}
-                            {!disabled &&
-                                <div>
-                                    {currentVote ? (
-                                        <button data-tid={"action_edit_vote"} className={styles.voteActionButton} type="button" onClick={toggleResults}>
-                                            <FormattedMessage id="vote.vote_box.update" defaultMessage="Modify" />
-                                        </button>
-                                    ) : (
-                                        !config?.actions?.hideSHowResultButton && (
-                                            <button
-                                                type="button"
-                                                className={styles.voteActionButton}
-                                                onClick={() => setShowResults(false)}
-                                            >
-                                                <FormattedMessage id="vote.vote_box.back" defaultMessage="Back to vote" />
-                                            </button>
-                                        )
-                                    )}
-                                </div>
-                            }
-                        </div>
-                    </div>
-                ) : (
-                    <div className={styles.voteBoxActions}>
-                        <div className={cx(styles.voteBoxActionsBody, { [styles.voteBoxActionsBodyColumn]: displayColumn, [buttonContainerClassName]: buttonContainerClassName })}>
-                            {votePositions.map((value, index) => displayVotePosition(value, index))}
-                        </div>
-                        {showVotesCommentsNumber && (
-                            <div className={styles.voteCommentCounts}>
-                                <Tooltip
-                                    position={isMobile ? "right" : "bottom"}
-                                    text={intl.formatMessage({ id: "info.votes_count", defaultMessage: "Votes" })}
-                                >
-                                    <div className={styles.debateNumberItem}>
-                                        <Icon name="votebox" width={20} height={20} />
-                                        <div className={styles.debateNumberLabel}>
-                                            <FormattedMessage id="vote.vote_box.votes" values={{ votesCount: totalVotes }} defaultMessage="{votesCount} votes" />
-                                        </div>
-                                    </div>
-                                </Tooltip>
-                                <Tooltip
-                                    position={isMobile ? "right" : "bottom"}
-                                    text={intl.formatMessage({ id: "info.arguments_count", defaultMessage: "Comments" })}
-                                >
-                                    <div className={styles.debateNumberItem}>
-                                        <Icon name="chat" width={20} height={20} />
-                                        <div className={styles.debateNumberLabel}>
-                                            <FormattedMessage id="vote.vote_box.comments" values={{ count: commentsCount ?? 0 }} defaultMessage="{count} comments" />
-                                        </div>
-                                    </div>
-                                </Tooltip>
-                            </div>
-                        )}
-
-                        <div className={cx(styles.voteBoxActions, styles.voteBoxShowResultContainer, { [showResultClassName]: showResultClassName })}>
-                            <div className={styles.voteBoxShowResult}>
-                                {typeof window !== "undefined" && !redirectUrl ? (
-                                    !config?.actions?.hideSHowResultButton && (
-                                        <button
-                                            type="button"
-                                            onClick={handleShowResults}
-                                            data-tid="show_vote_result"
-                                            data-testid="show-result"
-                                            className={styles.showResultButton}
-                                        >
-                                            <span className={cx(styles.boldShowResult, styles.outlined)}>
-                                                <FormattedMessage id="vote.vote_box.show_result" defaultMessage="Show result" />
-                                            </span>
-                                        </button>
-                                    )
-                                ) :
-                                    <Link to={getRedirectUrl(null)} rel="nofollow" data-tid="show_vote_result" target="_top" external data-testid={"show-result"}>
-                                        <span className={cx(styles.boldShowResult, styles.outlined)}><FormattedMessage id="vote.vote_box.show_result" defaultMessage="Show result" /></span>
-                                    </Link>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </>
-        </div>
-    )
-}
-
-VoteBox.propTypes = {
-    /** Array containing the debate positions */
-    votePositions: PropTypes.array.isRequired,
-    /** Type of vote */
-    voteableType: PropTypes.string,
-    /** The id of the element */
-    voteableId: PropTypes.number.isRequired,
-    /** Object containing all the votes and the total */
-    numberVotes: PropTypes.object.isRequired,
-    /** The redirect url after voting */
-    redirectUrl: PropTypes.string,
-    /** Show total number of votes below positions */
-    showTotal: PropTypes.bool,
-    /** If true, activate the column layout */
-    displayColumn: PropTypes.bool,
-    /** If true, display buttons in full width*/
-    textAlignLeft: PropTypes.bool,
-    /** CSS class name of the vote box  */
-    voteBoxClassName: PropTypes.string,
-    /** CSS class name of the button container */
-    buttonContainerClassName: PropTypes.string,
-    /** CSS class name of the button */
-    buttonClassName: PropTypes.string,
-    /** CSS class name of the show result text */
-    showResultClassName: PropTypes.string,
-    /** Callback function */
-    onVote: PropTypes.func,
-    /** Disabled vote buttons and show result */
-    disabled: PropTypes.bool,
-    /** Show the votes and comments counters */
-    showVotesCommentsNumber: PropTypes.bool,
-    /** Number of comments to display in the counters */
-    commentsCount: PropTypes.number,
-};

package/src/components/vote/vote_box/VoteBox.module.scss

@@ -1,254 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-@use 'styles/flex' as flex;
-@use 'styles/display' as display;
-
-.voteBox {
-    display: flex !important;
-    flex-direction: row !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 100%;
-}
-
-.voteResultsBox {
-    display: flex !important;
-    flex-direction: column !important;
-    @include spacing.p(0, xs);
-    width: 100%;
-}
-
-.voteResults {
-    @include spacing.p(0, xs);
-}
-
-.voteProgressHeader {
-    @include spacing.mb(1, xs);
-    display: flex !important;
-    align-items: center !important;
-    font-size: theme.$font-size-normal;
-    @include display.line-clamp(1);
-}
-
-.voteProgressHeaderAgainst {
-    @include spacing.mt(2.5, xs);
-}
-
-.voteResultsNumberVoters {
-    display: flex !important;
-    align-items: center !important;
-    @include spacing.p(0, xs);
-    font-size: theme.$font-size-normal;
-    color: theme.$text-secondary;
-}
-
-.voteBoxFooter {
-    display: flex !important;
-    flex-direction: row !important;
-    align-items: center !important;
-    justify-content: space-between !important;
-    @include spacing.mt(3, xs);
-    @include spacing.p(0, xs);
-}
-
-.voteBoxActions {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    justify-content: center;
-    gap: spacing.$spacer;
-    color: theme.$text-secondary;
-    width: 100%;
-}
-
-.voteBoxActionsBody {
-    display: grid !important;
-    grid-template-columns: repeat(2, 1fr);
-    gap: spacing.$spacer-md;
-    @include spacing.p(0, xs);
-    width: 100%;
-}
-
-.voteBoxActionsBodyColumn {
-    grid-template-columns: 1fr;
-}
-
-.voteAction {
-    display: flex !important;
-    flex-direction: row !important;
-    align-items: center !important;
-    justify-content: center !important;
-    @include spacing.p(0, xs);
-    max-width: 100% !important;
-    width: 100% !important;
-    text-align: center;
-
-    &.buttonAlignLeft {
-        justify-content: flex-start !important;
-    }
-}
-
-button.voteButton,
-a.voteButton {
-    -webkit-appearance: initial !important;
-    width: 100%;
-    @include display.hyphens(auto);
-    @include spacing.p(2, xs);
-}
-
-.textAlignLeft {
-    justify-content: flex-start !important;
-}
-
-.voteBoxShowResultContainer {
-    display: flex !important;
-    flex-direction: row !important;
-    justify-content: center;
-    flex-wrap: wrap !important;
-    margin-top: .5em;
-}
-
-.voteBoxShowResult {
-    cursor: pointer;
-
-    a {
-        color: inherit;             
-        text-decoration: none;        
-        background: none !important;
-
-        &:hover {
-            text-decoration: none;
-            background: none !important;
-        }
-    }
-
-    .boldShowResult {
-        font-weight: theme.$font-weight-bold;
-        color: theme.$text-primary;
-    }
-}
-
-.outlined {
-    padding: 7px 15px;
-    border-radius: theme.$box-border-radius;
-    border: 1px solid theme.$text-primary !important;
-    white-space: nowrap;
-
-}
-
-.voteButtonThesis {
-    display: block;
-    text-align: left;
-    @include display.line-clamp(2);
-}
-
-@include display.media-breakpoint-down(sm) {
-    .voteButtonThesisSynthesisMobile {
-        text-align: center !important;
-    }
-}
-
-.voteBoxActionsBody .voteAction:first-child .voteButton {
-    background-color: theme.$for-primary !important;
-    border-color: theme.$for-primary !important;
-    border: 1px solid theme.$for-primary !important;
-
-    &:hover {
-        background-color: theme.$for-primary !important;
-        border-color: theme.$for-primary !important;
-        border: 1px solid theme.$for-primary !important;
-    }
-}
-
-.voteBoxActionsBody .voteAction:nth-child(2) .voteButton {
-    background-color: theme.$against-primary !important;
-    border-color: theme.$against-primary !important;
-    border: 1px theme.$against-primary !important;
-
-    &:hover {
-        background-color: theme.$against-primary !important;
-        border-color: theme.$against-primary !important;
-        border: 1px theme.$against-primary !important;
-    }
-}
-
-.voteBoxActionsBody .voteAction:nth-child(3) .voteButton {
-    background-color: theme.$text-light !important;
-    color: theme.$third-position-color-primary !important;
-    border-color: theme.$third-position-color-primary !important;
-    border: 1px solid theme.$third-position-color-primary !important;
-
-    &:hover {
-        background-color: theme.$text-light !important;
-        color: theme.$third-position-color-primary !important;
-        border-color: theme.$third-position-color-primary !important;
-        border: 1px solid theme.$third-position-color-primary !important;
-    }
-}
-
-.voteActionButton {
-    cursor: pointer;
-    -webkit-appearance: initial !important;
-    background: none;
-    border: none;
-    color: theme.$text-secondary !important;
-    font-size: inherit;
-    padding: 0;
-    font-weight: theme.$font-weight-bold;
-}
-
-.sideIcon {
-    svg {
-        margin-left: 5px;
-        fill: theme.$text-primary;
-    }
-}
-
-.progress {
-    border-radius: 10px;
-    height: 25px;
-    color: theme.$text-secondary;
-}
-
-.progressBar {
-    border-radius: 10px;
-    height: 25px;
-}
-
-.voteResults>div:first-child .progress .progressBar {
-    background-color: theme.$for-primary !important;
-}
-
-.voteResults>div:nth-child(2) .progress .progressBar {
-    background-color: theme.$against-primary !important;
-}
-
-.voteResults div:nth-child(3) .progress .progressBar {
-    background-color: theme.$third-position-color-primary !important;
-}
-
-.voteCommentCounts {
-    display: flex;
-    align-items: center;
-    gap: spacing.$spacer-xl;
-    width: 100%;
-    @include spacing.mt(1, xs);
-}
-
-.debateNumberItem {
-    display: flex;
-    align-items: center;
-    gap: spacing.$spacer-sm;
-    font-size: theme.$font-size-normal;
-    color: theme.$text-primary;
-}
-
-.showResultButton {
-    background: none;
-    border: 0;
-    padding: 0;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-  }
-