strapi-plugin-comments 2.1.0-beta.1 → 2.1.2

package/admin/src/components/DiscussionThreadItemReviewAction/index.tsx

@@ -0,0 +1,180 @@
+// @ts-nocheck
+
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useMutation, useQueryClient } from "react-query";
+import { isNil, isEmpty, orderBy } from "lodash";
+import { Button } from "@strapi/design-system/Button";
+import { IconButton } from "@strapi/design-system/IconButton";
+import { useNotification, useOverlayBlocker } from "@strapi/helper-plugin";
+import { ReviewIcon, LockIcon } from "../icons";
+import { resolveReport } from "../../pages/utils/api";
+import { getMessage, handleAPIError } from "../../utils";
+import ReportsReviewTable from "../ReportsReviewTable";
+import ReportsReviewModal from "../ReportsReviewModal";
+import { pluginId } from "../../pluginId";
+
+const DiscussionThreadItemReviewAction = ({
+  item,
+  isAnyActionLoading: isAnyActionLoading,
+  queryToInvalidate,
+  areBlockButtonsDisabled,
+  allowedActions: { canModerate, canAccessReports, canReviewReports },
+  blockItemMutation,
+  blockItemThreadMutation,
+  onBlockButtonsStateChange,
+  onBlockActionClick,
+}) => {
+  const { reports } = item;
+
+  const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
+
+  const toggleNotification = useNotification();
+  const queryClient = useQueryClient();
+  const { unlockApp } = useOverlayBlocker();
+
+  const onSuccess =
+    (message, stateAction = () => {}, indalidate = true) =>
+    async () => {
+      if (indalidate) {
+        await queryClient.invalidateQueries(queryToInvalidate);
+      }
+      toggleNotification({
+        type: "success",
+        message: `${pluginId}.${message}`,
+      });
+      stateAction(false);
+      unlockApp();
+    };
+
+  const onError = (err) => {
+    handleAPIError(err, toggleNotification);
+  };
+
+  const resolveReportMutation = useMutation(resolveReport, {
+    onSuccess: onSuccess(
+      "page.details.panel.discussion.warnings.reports.dialog.confirmation.success",
+      () => {},
+      false
+    ),
+    onError,
+    refetchActive: false,
+  });
+
+  const handleBlockActionClick = () => setReportsReviewVisible(false);
+
+  const handleReportsReviewClick = () => {
+    if (canAccessReports) {
+      setReportsReviewVisible(true);
+    }
+  };
+  const handleBlockItemClick = async () => {
+    if (canModerate) {
+      await onBlockActionClick(blockItemMutation, handleBlockActionClick);
+    }
+  };
+  const handleBlockItemThreadClick = async () => {
+    if (canModerate) {
+      await onBlockActionClick(blockItemThreadMutation, handleBlockActionClick);
+    }
+  };
+
+  const handleReportsReviewClose = async () => {
+    await queryClient.invalidateQueries(queryToInvalidate);
+    setReportsReviewVisible(false);
+  };
+
+  const isLoading = isAnyActionLoading && resolveReportMutation.isLoading;
+  const openReports = reports?.filter((_) => !_.resolved);
+  const hasReports = !isEmpty(openReports);
+  const reviewFlowEnabled =
+    canAccessReports && hasReports && !(item.blocked || item.blockedThread);
+
+  if (reviewFlowEnabled) {
+    return (
+      <>
+        <IconButton
+          onClick={handleReportsReviewClick}
+          label={getMessage("page.discover.table.reports.review")}
+          icon={<ReviewIcon />}
+        />
+        <ReportsReviewModal
+          isVisible={reportsReviewVisible}
+          isActionAsync={isLoading}
+          allowedActions={{ canModerate, canAccessReports, canReviewReports }}
+          onClose={handleReportsReviewClose}
+          startActions={
+            <Button onClick={handleReportsReviewClose} variant="tertiary">
+              {getMessage(
+                "compontents.confirmation.dialog.button.cancel",
+                "Cancel"
+              )}
+            </Button>
+          }
+          endActions={
+            canModerate && (
+              <>
+                <Button
+                  onClick={handleBlockItemClick}
+                  variant="danger-light"
+                  startIcon={<LockIcon />}
+                  disabled={areBlockButtonsDisabled}
+                >
+                  {getMessage(
+                    `page.details.actions.comment.block`,
+                    "Block comment"
+                  )}
+                </Button>
+                {item.gotThread && (
+                  <Button
+                    onClick={handleBlockItemThreadClick}
+                    variant="danger"
+                    startIcon={<LockIcon />}
+                    disabled={areBlockButtonsDisabled}
+                  >
+                    {getMessage(
+                      `page.details.actions.thread.block`,
+                      "Block thread"
+                    )}
+                  </Button>
+                )}
+              </>
+            )
+          }
+          item={item}
+        >
+          <ReportsReviewTable
+            commentId={item.id}
+            items={orderBy(
+              reports,
+              ["resolved", "createdAt"],
+              ["DESC", "DESC"]
+            )}
+            mutation={resolveReportMutation}
+            allowedActions={{ canAccessReports, canReviewReports }}
+            onBlockButtonsStateChange={onBlockButtonsStateChange}
+          />
+        </ReportsReviewModal>
+      </>
+    );
+  }
+  return null;
+};
+
+DiscussionThreadItemReviewAction.propTypes = {
+  item: PropTypes.object.isRequired,
+  isLoading: PropTypes.bool,
+  queryToInvalidate: PropTypes.string.isRequired,
+  areBlockButtonsDisabled: PropTypes.bool,
+  allowedActions: PropTypes.shape({
+    canModerate: PropTypes.bool,
+    canAccessReports: PropTypes.bool,
+    canReviewReports: PropTypes.bool,
+  }),
+  blockItemMutation: PropTypes.func.isRequired,
+  blockItemThreadMutation: PropTypes.func.isRequired,
+  onBlockButtonsStateChange: PropTypes.func.isRequired,
+  onBlockActionClick: PropTypes.func.isRequired,
+};
+
+export default DiscussionThreadItemReviewAction;

package/admin/src/components/FormSwitch/index.tsx

@@ -0,0 +1,35 @@
+/**
+ *
+ * Form Switch
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import { Stack } from "@strapi/design-system/Stack";
+import { Typography } from "@strapi/design-system/Typography";
+import { StyledSwitch } from "./styles";
+
+const FormSwitch = ({ label, hint, ...props }) => (
+  <Stack size={1}>
+    {label && (
+      <Typography
+        variant="pi"
+        as="label"
+        fontWeight="bold"
+        textColor="neutral800"
+      >
+        {label}
+      </Typography>
+    )}
+    <StyledSwitch label={label} {...props} />
+    {hint && (
+      <Typography variant="pi" as="label" textColor="neutral600">
+        {hint}
+      </Typography>
+    )}
+  </Stack>
+);
+
+export default FormSwitch;

package/admin/src/components/FormSwitch/styles.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+
+import styled from "styled-components";
+import { Switch } from "@strapi/design-system/Switch";
+
+export const StyledSwitch = styled(Switch)`
+  & > div > span {
+    font-size: 12px;
+  }
+`;

package/admin/src/components/IconButton/styles.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+
+import styled from "styled-components";
+import { IconButtonGroup } from "@strapi/design-system/IconButton";
+
+export const IconButtonGroupStyled = styled(IconButtonGroup)`
+  ${({ isSingle }) =>
+    isSingle &&
+    `
+        span:first-child button {
+            border-radius: 4px;
+        }
+    `}
+  ${({ withMargin }) =>
+    withMargin &&
+    `
+        margin-left: .5rem;
+    `}
+`;

package/admin/src/components/Initializer/index.tsx

@@ -0,0 +1,28 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+// @ts-nocheck
+
+import { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { pluginId } from "../../pluginId";
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef();
+  ref.current = setPlugin;
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+// Initializer.propTypes = {
+//   setPlugin: PropTypes.func.isRequired,
+// };
+
+export default Initializer;

package/admin/src/components/LoadingIndicatorOverlay/index.tsx

@@ -0,0 +1,19 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import { LoadingIndicatorPage } from "@strapi/helper-plugin";
+import { LoadingIndicatorOverlayWrapper } from "./styles";
+
+const LoadingIndicatorOverlay = () => (
+  <LoadingIndicatorOverlayWrapper>
+    <LoadingIndicatorPage />
+  </LoadingIndicatorOverlayWrapper>
+);
+
+export default LoadingIndicatorOverlay;

package/admin/src/components/LoadingIndicatorOverlay/styles.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import styled from "styled-components";
+import { Box } from "@strapi/design-system/Box";
+
+export const LoadingIndicatorOverlayWrapper = styled(Box)`
+  height: 100% !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 1;
+
+  & > div {
+    height: 100% !important;
+  }
+`;
+
+export const LoadingIndicatorContainer = styled((props) => props.as)`
+  position: relative;
+`;

package/admin/src/components/Nav/index.tsx

@@ -0,0 +1,61 @@
+/*
+ *
+ * Nav
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import {
+  SubNav,
+  SubNavHeader,
+  SubNavSection,
+  SubNavSections,
+  SubNavLink,
+} from "@strapi/design-system/SubNav";
+import { ExclamationMarkCircle, Apps } from "@strapi/icons";
+import getMessage from "../../utils/getMessage";
+
+// import PropTypes from 'prop-types';
+import getUrl from "../../utils/getUrl";
+
+const Nav = ({ visible = false, hasNewComments, hasNewReports }) => {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <SubNav ariaLabel="Comments sub nav">
+      <SubNavHeader label={getMessage("plugin.name")} />
+      <SubNavSections>
+        <SubNavLink
+          to={getUrl("dashboard")}
+          withBullet={hasNewComments}
+          icon={<Apps />}
+        >
+          {getMessage("nav.item.updates")}
+        </SubNavLink>
+        <SubNavSection label={getMessage("nav.header.moderation")}>
+          <SubNavLink to={getUrl("discover")} icon={<Apps />}>
+            {getMessage("nav.item.discover")}
+          </SubNavLink>
+          <SubNavLink
+            to={getUrl("reports")}
+            withBullet={hasNewReports}
+            icon={<Apps />}
+          >
+            {getMessage("nav.item.reports")}
+          </SubNavLink>
+        </SubNavSection>
+        <SubNavSection label={getMessage("nav.header.settings")}>
+          <SubNavLink to={getUrl("settings")} icon={<Apps />}>
+            {getMessage("nav.item.settings")}
+          </SubNavLink>
+        </SubNavSection>
+      </SubNavSections>
+    </SubNav>
+  );
+};
+
+export default Nav;

package/admin/src/components/PluginIcon/index.tsx

@@ -0,0 +1,14 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import CommentsIcon from "../icons/comments";
+
+const PluginIcon = () => <CommentsIcon />;
+
+export default PluginIcon;

package/admin/src/components/ReportsReviewModal/index.tsx

@@ -0,0 +1,71 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  ModalLayout,
+  ModalBody,
+  ModalHeader,
+  ModalFooter,
+} from "@strapi/design-system/ModalLayout";
+import { Typography } from "@strapi/design-system/Typography";
+import { getMessage } from "../../utils";
+import DiscussionThreadItem from "../DiscussionThreadItem";
+
+const ReportsReviewModal = ({
+  isVisible = false,
+  item,
+  children,
+  onClose,
+  startActions,
+  endActions,
+}) =>
+  isVisible && (
+    <ModalLayout onClose={onClose}>
+      <ModalHeader>
+        <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
+          {getMessage(
+            "page.details.panel.discussion.warnings.reports.dialog.header",
+            "Open reports"
+          )}
+        </Typography>
+      </ModalHeader>
+      <ModalBody>
+        <DiscussionThreadItem
+          as="div"
+          {...item}
+          root
+          preview
+          isSelected={true}
+        />
+        {children}
+      </ModalBody>
+      <ModalFooter
+        variant="tertiary"
+        startActions={startActions}
+        endActions={endActions}
+      />
+    </ModalLayout>
+  );
+
+ReportsReviewModal.propTypes = {
+  isVisible: PropTypes.bool,
+  startActions: PropTypes.array,
+  endActions: PropTypes.array,
+  item: PropTypes.object.isRequired,
+  children: PropTypes.array.isRequired,
+  allowedActions: PropTypes.shape({
+    canModerate: PropTypes.bool,
+    canAccessReports: PropTypes.bool,
+    canReviewReports: PropTypes.bool,
+  }),
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ReportsReviewModal;

package/admin/src/components/ReportsReviewTable/index.tsx

@@ -0,0 +1,233 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+
+import React, { useState, useEffect } from "react";
+import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+import { isEmpty } from "lodash";
+import { BaseCheckbox } from "@strapi/design-system/BaseCheckbox";
+import { Flex } from "@strapi/design-system/Flex";
+import {
+  Table,
+  Thead,
+  Tbody,
+  TFooter,
+  Tr,
+  Th,
+  Td,
+} from "@strapi/design-system/Table";
+import { Typography } from "@strapi/design-system/Typography";
+import { VisuallyHidden } from "@strapi/design-system/VisuallyHidden";
+import { Check } from "@strapi/icons";
+import { useOverlayBlocker } from "@strapi/helper-plugin";
+import { getMessage } from "../../utils";
+import { REPORT_REASON, REPORT_STATUS } from "../../utils/constants";
+import StatusBadge from "../StatusBadge";
+import { ActionButton } from "../ActionButton/styles";
+
+const ReportsReviewTable = ({
+  commentId,
+  items,
+  mutation,
+  allowedActions: { canAccessReports, canReviewReports },
+  onBlockButtonsStateChange,
+}) => {
+  const [storedItems, setStoredItems] = useState([]);
+
+  const { formatDate } = useIntl();
+
+  const { lockApp } = useOverlayBlocker();
+
+  const renderStatus = (resolved) => {
+    const status = resolved ? REPORT_STATUS.RESOLVED : REPORT_STATUS.OPEN;
+    let color = "alternative";
+    switch (status) {
+      case REPORT_STATUS.RESOLVED:
+        color = "success";
+        break;
+      case REPORT_STATUS.OPEN:
+        color = "danger";
+    }
+    return (
+      <StatusBadge
+        backgroundColor={`${color}100`}
+        textColor={`${color}600`}
+        color={color}
+      >
+        {getMessage(
+          `page.details.panel.discussion.warnings.reports.dialog.status.${status}`,
+          status
+        )}
+      </StatusBadge>
+    );
+  };
+
+  const renderReason = (reason) => {
+    let color = "neutral";
+    switch (reason) {
+      case REPORT_REASON.DISCRIMINATION:
+        color = "danger";
+        break;
+      case REPORT_REASON.BAD_LANGUAGE:
+        color = "warning";
+    }
+    return (
+      <StatusBadge
+        backgroundColor={`${color}100`}
+        textColor={`${color}600`}
+        color={color}
+      >
+        {getMessage(
+          `page.details.panel.discussion.warnings.reports.dialog.reason.${reason}`,
+          reason
+        )}
+      </StatusBadge>
+    );
+  };
+
+  const handleClickResolve = async (reportId) => {
+    if (canReviewReports) {
+      lockApp();
+      const item = await mutation.mutateAsync({
+        id: commentId,
+        reportId,
+      });
+      if (item) {
+        const updatedItems = storedItems.map((_) => ({
+          ..._,
+          resolved: reportId === _.id ? true : _.resolved,
+        }));
+        setStoredItems(updatedItems);
+        onBlockButtonsStateChange(
+          updatedItems.filter((_) => !_.resolved).length === 0
+        );
+      }
+    }
+  };
+
+  useEffect(() => {
+    setStoredItems(items);
+  }, []);
+
+  if (isEmpty(storedItems)) {
+    return null;
+  }
+
+  const COL_COUNT = 6;
+
+  if (canAccessReports) {
+    return (
+      <Table colCount={COL_COUNT} rowCount={storedItems.length}>
+        <Thead>
+          <Tr>
+            <Th>
+              <BaseCheckbox aria-label="Select all entries" />
+            </Th>
+            <Th>
+              <Typography variant="sigma">
+                {getMessage(
+                  "page.details.panel.discussion.warnings.reports.dialog.reason"
+                )}
+              </Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">
+                {getMessage(
+                  "page.details.panel.discussion.warnings.reports.dialog.content"
+                )}
+              </Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">
+                {getMessage(
+                  "page.details.panel.discussion.warnings.reports.dialog.createdAt"
+                )}
+              </Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">
+                {getMessage(
+                  "page.details.panel.discussion.warnings.reports.dialog.status"
+                )}
+              </Typography>
+            </Th>
+            {canReviewReports && (
+              <Th>
+                <VisuallyHidden>
+                  {getMessage(
+                    "page.details.panel.discussion.warnings.reports.dialog.actions"
+                  )}
+                </VisuallyHidden>
+              </Th>
+            )}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {storedItems.map((entry) => (
+            <Tr key={entry.id}>
+              <Td>
+                <BaseCheckbox aria-label={`Select report`} />
+              </Td>
+              <Td>
+                <Typography textColor="neutral800">
+                  {renderReason(entry.reason)}
+                </Typography>
+              </Td>
+              <Td>
+                <Typography textColor="neutral800">{entry.content}</Typography>
+              </Td>
+              <Td>
+                <Typography textColor="neutral800">
+                  {formatDate(entry.createdAt, {
+                    dateStyle: "short",
+                    timeStyle: "short",
+                  })}
+                </Typography>
+              </Td>
+              <Td>{renderStatus(entry.resolved)}</Td>
+              {canReviewReports && (
+                <Td>
+                  {!entry.resolved && (
+                    <Flex direction="column" alignItems="flex-end">
+                      <ActionButton
+                        isSingle
+                        onClick={() => handleClickResolve(entry.id)}
+                        startIcon={<Check />}
+                        variant="success"
+                      >
+                        {getMessage(
+                          "page.details.panel.discussion.warnings.reports.dialog.actions.resolve",
+                          "resolve"
+                        )}
+                      </ActionButton>
+                    </Flex>
+                  )}
+                </Td>
+              )}
+            </Tr>
+          ))}
+        </Tbody>
+        {/* <TFooter /> */}
+      </Table>
+    );
+  }
+  return null;
+};
+
+ReportsReviewTable.propTypes = {
+  commentId: PropTypes.oneOfType(PropTypes.string, PropTypes.number).isRequired,
+  items: PropTypes.array.isRequired,
+  mutation: PropTypes.func.isRequired,
+  allowedActions: PropTypes.shape({
+    canAccessReports: PropTypes.bool,
+    canReviewReports: PropTypes.bool,
+  }),
+  onBlockButtonsStateChange: PropTypes.func.isRequired,
+};
+
+export default ReportsReviewTable;