@logora/debate 0.1.0

package/src/components/user_content/content_footer/ContentFooter.jsx

@@ -0,0 +1,234 @@
+import React, { lazy, Suspense } from "react";
+import { useConfig } from '@logora/debate/data/config_provider';
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useInput } from "@logora/debate/input/input_provider";
+import { useReportContent } from "@logora/debate/user_content/use_report_content";
+import { useDeleteContent } from "@logora/debate/user_content/use_delete_content";
+import { useIntl } from "react-intl";
+import { useModal } from '@logora/debate/dialog/modal';
+import { Dropdown } from '@logora/debate/dialog/dropdown';
+import { Icon } from '@logora/debate/icons/icon';
+import { ShareButton } from '@logora/debate/share/share_button';
+import { Link } from '@logora/debate/action/link';
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+const ShareModal = lazy(() => import('@logora/debate/share/share_modal'));
+import cx from "classnames";
+import styles from "./ContentFooter.module.scss";
+import PropTypes from "prop-types";
+
+export const ContentFooter = ({ resource,
+    reportType,
+    deleteType,
+    deleteListId,
+    softDelete = false,
+    disabled = false,
+    children,
+    enableReply,
+    handleReplyTo,
+    showActions = true,
+    showShareButton = true,
+    shareModal,
+    shareUrl,
+    shareTitle,
+    shareText,
+    shareModalTitle,
+    showShareCode,
+    shareCode,
+    showShareText,
+    enableEdition = true,
+    enableDeletion = true,
+    enableReport = true,
+    containerClassName,
+    voteActionClassName,
+    replyRedirectUrl
+}) => {
+
+    const intl = useIntl();
+    const config = useConfig();
+    const { currentUser } = useAuth();
+    const { showModal } = useModal();
+    const { setInputContent } = useInput() || {};
+    const { reportContent } = useReportContent(reportType, resource.id);
+    const { deleteContent } = useDeleteContent(resource, deleteType, deleteListId, softDelete);
+    const { elementWidth } = useResponsive();
+
+    const currentUserIsAuthor = () => {
+        if (!currentUser?.id) {
+            return false;
+        }
+        return resource.author?.id === currentUser?.id || resource.debate_suggestion?.author?.id === currentUser?.id;
+    };
+
+    const handleEdit = () => {
+        setInputContent(resource);
+    };
+
+    const isEditable = () => {
+        if (resource.created_at && config.actions?.editionTime) {
+            const limitDate = new Date(new Date(resource.created_at).setSeconds(new Date(resource.created_at).getSeconds() + config.actions?.editionTime));
+            const now = new Date();
+            return now < limitDate;
+        }
+        return true;
+    }
+
+    const handleShowShareModal = () => {
+        showModal(
+            <Suspense fallback={null}>
+                <ShareModal
+                    shareUrl={shareUrl}
+                    shareTitle={shareTitle}
+                    shareText={shareText}
+                    title={shareModalTitle}
+                    showShareCode={showShareCode}
+                    shareCode={shareCode}
+                />
+            </Suspense>
+        );
+    }
+
+    const onKeyActivate = (action) => (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          action();
+        }
+      };
+
+    return (
+        <div className={cx(styles.container, containerClassName)}>
+            <div
+                onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onClick();
+                    }
+                }} className={cx(styles.voteAction, voteActionClassName)} data-tid={"action_vote_argument"}>
+                {children}
+            </div>
+            {!disabled && enableReply &&
+                <div data-tid={"action_reply_argument"} data-testid="reply-button">
+
+                    {replyRedirectUrl ? (
+                        <Link
+                            to={replyRedirectUrl}
+                            className={styles.replyAction}
+                            tabIndex='0'
+                            data-testid="action-reply-button"
+                        >
+                            <Icon name="reply" data-tid={"action_reply_argument"} height={17} width={17} />
+                            {!(elementWidth < 768) && <span className={styles.replyText}>{intl.formatMessage({ id: "user_content.content_footer.reply", defaultMessage: "Reply" })}</span>}
+                        </Link>
+                    ) : (
+                        <button
+                            type="button"
+                            className={styles.replyAction}
+                            onClick={handleReplyTo}
+                            data-testid="action-reply-button"
+                        >
+                            <Icon name="reply" data-tid={"action_reply_argument"} height={17} width={17} />
+                            {!(elementWidth < 768) && <span className={styles.replyText}>{intl.formatMessage({ id: "user_content.content_footer.reply", defaultMessage: "Reply" })}</span>}
+                        </button>
+                    )}
+                </div>
+            }
+            {showShareButton &&
+                <ShareButton
+                    shareUrl={shareUrl}
+                    shareTitle={shareTitle}
+                    shareText={shareText}
+                    showShareCode={showShareCode}
+                    shareCode={shareCode}
+                    showText={!(elementWidth < 768) && showShareText}
+                    iconSize={17}
+                />
+            }
+            {showActions &&
+                <div className={styles.moreAction} title={intl.formatMessage({ id: "user_content.content_footer.more", defaultMessage: "More options" })}>
+                    <Dropdown className={styles.moreActionDropdown} horizontalPosition={'right'}>
+                        <Icon name="ellipsis" width={17} height={17} data-testid="dropdown" aria-label={intl.formatMessage({ id: "user_content.content_footer.menu.aria_label", defaultMessage: "opens menu" })}
+                        />
+                        <div>
+                            {currentUserIsAuthor() &&
+                                <>
+                                    {!disabled && enableEdition && isEditable() &&
+                                        <div data-tid={"action_edit_argument"} className={styles.dropdownItem} tabIndex='0' onClick={handleEdit} onKeyDown={onKeyActivate(handleEdit)}>
+                                            {intl.formatMessage({ id: "user_content.content_footer.update", defaultMessage: "Update" })}
+                                        </div>
+                                    }
+                                    {enableDeletion &&
+                                        <div data-tid={"action_delete_argument"} className={styles.dropdownItem} tabIndex='0' onClick={deleteContent} onKeyDown={onKeyActivate(deleteContent)}>
+                                            {intl.formatMessage({ id: "user_content.content_footer.delete", defaultMessage: "Delete" })}
+                                        </div>
+                                    }
+                                </>
+                            }
+                            {enableReport &&
+                                <div data-tid={"action_report_argument"} className={styles.dropdownItem} tabIndex='0' onClick={reportContent} data-testid="report-content" onKeyDown={onKeyActivate(reportContent)}>
+                                    {intl.formatMessage({ id: "user_content.content_footer.report", defaultMessage: "Report" })}
+                                </div>
+                            }
+                            {shareModal &&
+                                <div data-tid={"action_share_argument"} className={styles.dropdownItem} tabIndex='0' onClick={handleShowShareModal} onKeyDown={onKeyActivate(handleShowShareModal)}>
+                                    {intl.formatMessage({ id: "user_content.content_footer.share", defaultMessage: "Share" })}
+                                </div>
+                            }
+                        </div>
+                    </Dropdown>
+                </div>
+            }
+        </div>
+    );
+};
+
+ContentFooter.propTypes = {
+    /** Resource object */
+    resource: PropTypes.object,
+    /** Report type */
+    reportType: PropTypes.string,
+    /** Delete type */
+    deleteType: PropTypes.string,
+    /** Delete list id */
+    deleteListId: PropTypes.string,
+    /** If true, will use PATCH method to delete content instead of DELETE */
+    softDelete: PropTypes.bool,
+    /** If true, disabled replies and dropdown actions */
+    disabled: PropTypes.bool,
+    /** Show reply button */
+    enableReply: PropTypes.bool,
+    /** Callback function */
+    handleReplyTo: PropTypes.func,
+    /** If true, show dropdown actions */
+    showActions: PropTypes.bool,
+    /** If true, show share button action */
+    showShareButton: PropTypes.bool,
+    /** If true, show share modal action in the dropdown */
+    shareModal: PropTypes.bool,
+    /** Url to share */
+    shareUrl: PropTypes.string,
+    /** Title of the content that will be shared */
+    shareTitle: PropTypes.string,
+    /** Description of the shared content */
+    shareText: PropTypes.string,
+    /** Title passed to the modal */
+    shareModalTitle: PropTypes.string,
+    /** If true, show copy code action */
+    showShareCode: PropTypes.bool,
+    /** Code to share */
+    shareCode: PropTypes.string,
+    /** If true, show "Share" text next to icon */
+    showShareText: PropTypes.bool,
+    /** Item to be displayed on the left */
+    children: PropTypes.node,
+    /** If true, content can be edited */
+    enableEdition: PropTypes.bool,
+    /** If true, content can be deleted */
+    enableDeletion: PropTypes.bool,
+    /** If true, content can be reported */
+    enableReport: PropTypes.bool,
+    /** Custom style for container */
+    containerClassName: PropTypes.string,
+    /** Custom style for children container */
+    voteActionClassName: PropTypes.string,
+    /** Clicking reply redirects to this URL instead of inline reply */
+    replyRedirectUrl: PropTypes.string,
+};

package/src/components/user_content/content_footer/ContentFooter.module.scss

@@ -0,0 +1,79 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.container {
+    font-size: theme.$font-size-normal;
+    font-weight: theme.$font-weight-normal;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: spacing.$spacer-lg;
+
+    @include display.media-breakpoint-down(sm) {
+        font-size: theme.$font-size-normal;
+    }
+}
+
+.container[max-width~="1280px"] {
+    .replyAction {
+        font-size: theme.$font-size-extra-small;
+    }
+}
+
+.voteAction {
+    padding: 0 !important;
+}
+
+.moreAction {
+    display: flex;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer;
+    text-align: right;
+}
+
+.moreActionDropdown {
+    display: flex !important;
+}
+
+.replyAction {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    -webkit-user-select: none;
+
+    .replyAction:focus-visible {
+		outline: revert;
+	  }
+
+    .replyText {
+        @include spacing.ml(2, xs);
+    }
+}
+
+.dropdownItem {
+    display: block;
+    width: 100%;
+    clear: both;
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+    text-align: left;
+    font-size: theme.$font-size-small;
+    @include spacing.p(2, xs);
+    @include spacing.px(3, xs);
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.03);
+    }
+}