strapi-plugin-comments 2.0.11 → 2.1.1

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

@@ -0,0 +1,99 @@
+/**
+ *
+ * Approval Flow Actions
+ *
+ */
+
+// @ts-nocheck
+import React from "react";
+import PropTypes from "prop-types";
+import { useMutation, useQueryClient } from "react-query";
+import { IconButton } from "@strapi/design-system/IconButton";
+import { Check, Cross } from "@strapi/icons";
+import { useNotification, useOverlayBlocker } from "@strapi/helper-plugin";
+import { getMessage, handleAPIError } from "../../utils";
+import { approveItem, rejectItem } from "../../pages/utils/api";
+import { pluginId } from "../../pluginId";
+
+const DiscussionThreadItemApprovalFlowActions = ({
+  id,
+  allowedActions: { canModerate },
+  queryToInvalidate,
+}) => {
+  const toggleNotification = useNotification();
+  const queryClient = useQueryClient();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+
+  const onSuccess = (message) => async () => {
+    if (queryToInvalidate) {
+      await queryClient.invalidateQueries(queryToInvalidate);
+    }
+    toggleNotification({
+      type: "success",
+      message: `${pluginId}.${message}`,
+    });
+    unlockApp();
+  };
+
+  const onError = (err) => {
+    handleAPIError(err, toggleNotification);
+  };
+
+  const approveItemMutation = useMutation(approveItem, {
+    onSuccess: onSuccess(
+      "page.details.actions.comment.approve.confirmation.success"
+    ),
+    onError,
+    refetchActive: false,
+  });
+  const rejectItemMutation = useMutation(rejectItem, {
+    onSuccess: onSuccess(
+      "page.details.actions.comment.reject.confirmation.success"
+    ),
+    onError,
+    refetchActive: false,
+  });
+
+  const handleApproveClick = () => {
+    if (canModerate) {
+      lockApp();
+      approveItemMutation.mutate(id);
+    }
+  };
+
+  const handleRejectClick = () => {
+    if (canModerate) {
+      lockApp();
+      rejectItemMutation.mutate(id);
+    }
+  };
+
+  if (canModerate) {
+    return (
+      <>
+        <IconButton
+          icon={<Check />}
+          label={getMessage("page.details.actions.comment.approve", "Approve")}
+          onClick={handleApproveClick}
+        />
+        <IconButton
+          icon={<Cross />}
+          label={getMessage("page.details.actions.comment.reject", "Reject")}
+          onClick={handleRejectClick}
+        />
+      </>
+    );
+  }
+  return null;
+};
+
+DiscussionThreadItemApprovalFlowActions.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  queryToInvalidate: PropTypes.string,
+  allowedActions: PropTypes.shape({
+    canModerate: PropTypes.bool,
+  }),
+  wrapped: PropTypes.bool,
+};
+
+export default DiscussionThreadItemApprovalFlowActions;

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

@@ -0,0 +1,8 @@
+// @ts-nocheck
+
+import styled from "styled-components";
+import { IconButtonGroup } from "@strapi/design-system/IconButton";
+
+export const DiscussionThreadItemActionsGroupWrapper = styled(IconButtonGroup)`
+  margin-left: 0.5rem;
+`;

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

@@ -0,0 +1,62 @@
+/**
+ *
+ * Discussion thread - Item footer
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Box } from "@strapi/design-system/Box";
+import { Typography } from "@strapi/design-system/Typography";
+import {
+  DiscussionThreadItemFooterMeta,
+  DiscussionThreadItemFooterStyled,
+} from "./styles";
+import UserAvatar from "../Avatar";
+
+const DiscussionThreadItemFooter = ({
+  children,
+  author,
+  createdAt,
+  updatedAt,
+}) => {
+  const { formatDate } = useIntl();
+
+  const dateTime = formatDate(updatedAt || createdAt, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+  const { name, avatar } = author;
+
+  return (
+    <DiscussionThreadItemFooterStyled as={Box} paddingTop={2} direction="row">
+      <DiscussionThreadItemFooterMeta size={3} horizontal>
+        <UserAvatar avatar={avatar} name={name} />
+        <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+          {name}
+        </Typography>
+        <Typography variant="pi" textColor="neutral600">
+          {dateTime}
+        </Typography>
+      </DiscussionThreadItemFooterMeta>
+      {children}
+    </DiscussionThreadItemFooterStyled>
+  );
+};
+
+DiscussionThreadItemFooter.propTypes = {
+  author: PropTypes.shape({
+    id: PropTypes.oneOfType(PropTypes.string, PropTypes.number).isRequired,
+    name: PropTypes.string.isRequired,
+    email: PropTypes.string,
+    avatar: PropTypes.oneOfType(PropTypes.string, PropTypes.object),
+  }).isRequired,
+  createdAt: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string,
+  children: PropTypes.array,
+};
+
+export default DiscussionThreadItemFooter;

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

@@ -0,0 +1,15 @@
+// @ts-nocheck
+
+import styled from "styled-components";
+import { Flex } from "@strapi/design-system/Flex";
+import { Stack } from "@strapi/design-system/Stack";
+
+export const DiscussionThreadItemFooterStyled = styled(Flex)`
+  width: 100%;
+`;
+
+export const DiscussionThreadItemFooterMeta = styled(Stack)`
+  * + * {
+    margin-left: 8px;
+  }
+`;

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.js → index.tsx}

@@ -4,9 +4,11 @@
  *
  */
 
-import { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import pluginId from '../../pluginId';
+// @ts-nocheck
+
+import { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { pluginId } from "../../pluginId";
 
 const Initializer = ({ setPlugin }) => {
   const ref = useRef();
@@ -19,8 +21,8 @@ const Initializer = ({ setPlugin }) => {
   return null;
 };
 
-Initializer.propTypes = {
-  setPlugin: PropTypes.func.isRequired,
-};
+// 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.js → index.tsx}

@@ -4,8 +4,10 @@
  *
  */
 
-import React from 'react';
-import CommentsIcon from "../icons/comments"
+// @ts-nocheck
+
+import React from "react";
+import CommentsIcon from "../icons/comments";
 
 const PluginIcon = () => <CommentsIcon />;
 

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;