strapi-plugin-comments 2.1.1 → 2.1.4

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

@@ -1,180 +0,0 @@
-// @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

@@ -1,35 +0,0 @@
-/**
- *
- * 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

@@ -1,10 +0,0 @@
-// @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

@@ -1,19 +0,0 @@
-// @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

@@ -1,28 +0,0 @@
-/**
- *
- * 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

@@ -1,19 +0,0 @@
-/**
- *
- * 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

@@ -1,21 +0,0 @@
-// @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

@@ -1,61 +0,0 @@
-/*
- *
- * 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

@@ -1,14 +0,0 @@
-/**
- *
- * 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

@@ -1,71 +0,0 @@
-/**
- *
- * 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

@@ -1,233 +0,0 @@
-/**
- *
- * 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;