strapi-plugin-comments 2.1.2 → 2.1.3

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;

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

@@ -1,21 +0,0 @@
-/**
- *
- * Status badge
- *
- */
-
-// @ts-nocheck
-
-import React from "react";
-import { Typography } from "@strapi/design-system/Typography";
-import { StatusBadge as StatusBadgeStyled } from "./styles";
-
-const StatusBadge = ({ children, textColor, ...rest }) => (
-  <StatusBadgeStyled {...rest}>
-    <Typography variant="omega" fontWeight="semibold" textColor={textColor}>
-      {children}
-    </Typography>
-  </StatusBadgeStyled>
-);
-
-export default StatusBadge;

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

@@ -1,19 +0,0 @@
-// @ts-nocheck
-
-import styled from "styled-components";
-import { Badge } from "@strapi/design-system/Badge";
-
-export const StatusBadge = styled(Badge)`
-  padding: 5px 8px;
-  border: 1px ${({ theme, color }) => theme.colors[`${color}200`]} solid;
-
-  overflow: hidden;
-
-  text-overflow: ellipsis;
-
-  cursor: default;
-
-  span {
-    text-transform: none;
-  }
-`;

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

@@ -1,58 +0,0 @@
-// @ts-nocheck
-
-import React, { useRef, useState } from "react";
-import PropTypes from "prop-types";
-import { Button } from "@strapi/design-system/Button";
-import { Box } from "@strapi/design-system/Box";
-import { Filter } from "@strapi/icons";
-import {
-  FilterListURLQuery,
-  FilterPopoverURLQuery,
-} from "@strapi/helper-plugin";
-import { getMessage } from "../../utils";
-
-const TableFilters = ({ displayedFilters }) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const buttonRef = useRef();
-
-  const handleToggle = () => {
-    setIsVisible((prev) => !prev);
-  };
-
-  return (
-    <>
-      <Box paddingTop={1} paddingBottom={1}>
-        <Button
-          variant="tertiary"
-          ref={buttonRef}
-          startIcon={<Filter />}
-          onClick={handleToggle}
-          size="S"
-        >
-          {getMessage("page.discover.table.filters")}
-        </Button>
-        {isVisible && (
-          <FilterPopoverURLQuery
-            displayedFilters={displayedFilters}
-            isVisible={isVisible}
-            onToggle={handleToggle}
-            source={buttonRef}
-          />
-        )}
-      </Box>
-      <FilterListURLQuery filtersSchema={displayedFilters} />
-    </>
-  );
-};
-
-TableFilters.propTypes = {
-  displayedFilters: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      metadatas: PropTypes.shape({ label: PropTypes.string }),
-      fieldSchema: PropTypes.shape({ type: PropTypes.string }),
-    })
-  ).isRequired,
-};
-
-export default TableFilters;

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

@@ -1,37 +0,0 @@
-// @ts-nocheck
-
-import React from "react";
-import PropTypes from "prop-types";
-import { Box } from "@strapi/design-system/Box";
-import { Flex } from "@strapi/design-system/Flex";
-import { PaginationURLQuery, PageSizeURLQuery } from "@strapi/helper-plugin";
-
-const TablePagination = ({ pagination }) => {
-  return (
-    <Box paddingTop={4}>
-      <Flex alignItems="flex-end" justifyContent="space-between">
-        <PageSizeURLQuery trackedEvent="willChangeNumberOfEntriesPerPage" />
-        <PaginationURLQuery pagination={pagination} />
-      </Flex>
-    </Box>
-  );
-};
-
-TablePagination.defaultProps = {
-  pagination: {
-    pageCount: 0,
-    pageSize: 10,
-    total: 0,
-  },
-};
-
-TablePagination.propTypes = {
-  pagination: PropTypes.shape({
-    page: PropTypes.number,
-    pageCount: PropTypes.number,
-    pageSize: PropTypes.number,
-    total: PropTypes.number,
-  }),
-};
-
-export default TablePagination;

package/admin/src/components/icons/comments.tsx

@@ -1,15 +0,0 @@
-// @ts-nocheck
-
-import React from "react";
-
-const initSize = 576;
-
-const CommentsIcon = ({ width = 24, height = 24 }) => (
-  <svg viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
-    <g style={{ transform: `scale(${width / initSize})` }}>
-      <path d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z" />
-    </g>
-  </svg>
-);
-
-export default CommentsIcon;

package/admin/src/components/icons/index.ts

@@ -1,6 +0,0 @@
-import CommentsIcon from "./comments";
-import ReviewIcon from "./review";
-import LockIcon from "./lock";
-import UnlockIcon from "./unlock";
-
-export { CommentsIcon, ReviewIcon, LockIcon, UnlockIcon };

package/admin/src/components/icons/lock.tsx

@@ -1,27 +0,0 @@
-// @ts-nocheck
-
-import React from "react";
-
-const initSize = 330;
-
-const LockIcon = ({ width, height, size = 16 }) => (
-  <svg
-    width={width || size}
-    height={height || size}
-    viewBox={`0 0 ${width || size} ${height || size}`}
-    style={{ width: `${width || size}px`, height: `${height || size}px` }}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g style={{ transform: `scale(${(width || size) / initSize})` }}>
-      <path
-        d="M165,330c63.411,0,115-51.589,115-115c0-29.771-11.373-56.936-30-77.379V85c0-46.869-38.131-85-85-85
-      S80.001,38.131,80.001,85v52.619C61.373,158.064,50,185.229,50,215C50,278.411,101.589,330,165,330z M180,219.986V240
-      c0,8.284-6.716,15-15,15s-15-6.716-15-15v-20.014c-6.068-4.565-10-11.824-10-19.986c0-13.785,11.215-25,25-25s25,11.215,25,25
-      C190,208.162,186.068,215.421,180,219.986z M110.001,85c0-30.327,24.673-55,54.999-55c30.327,0,55,24.673,55,55v29.029
-      C203.652,105.088,184.91,100,165,100c-19.909,0-38.651,5.088-54.999,14.028V85z"
-      />
-    </g>
-  </svg>
-);
-
-export default LockIcon;

package/admin/src/components/icons/review.tsx

@@ -1,25 +0,0 @@
-// @ts-nocheck
-
-import React from "react";
-
-const initSize = 16;
-
-const ReviewIcon = ({ width, height, size = 16 }) => (
-  <svg
-    width={width || size}
-    height={height || size}
-    viewBox={`0 0 ${width || size} ${height || size}`}
-    style={{ width: `${width || size}px`, height: `${height || size}px` }}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g style={{ transform: `scale(${(width || size) / initSize})` }}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0 4a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H4a4 4 0 01-4-4V4zm6.996.165a1.017 1.017 0 112.012 0L8 11 6.996 4.165zM8 11a1 1 0 110 2 1 1 0 010-2z"
-      />
-    </g>
-  </svg>
-);
-
-export default ReviewIcon;

package/admin/src/components/icons/unlock.tsx

@@ -1,25 +0,0 @@
-// @ts-nocheck
-
-import React from "react";
-
-const initSize = 330;
-
-const UnlockIcon = ({ width, height, size = 16 }) => (
-  <svg
-    width={width || size}
-    height={height || size}
-    viewBox={`0 0 ${width || size} ${height || size}`}
-    style={{ width: `${width || size}px`, height: `${height || size}px` }}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g style={{ transform: `scale(${(width || size) / initSize})` }}>
-      <path
-        d="M15,160c8.283,0,15-6.716,15-15V85c0-30.327,24.672-55,55-55c30.326,0,55,24.673,55,55v42.893
-      c-24.479,21.105-40,52.327-40,87.107c0,63.411,51.588,115,115,115c63.41,0,115-51.589,115-115s-51.59-115-115-115
-      c-15.961,0-31.172,3.271-45,9.174V85c0-46.869-38.131-85-85-85S0,38.131,0,85v60C0,153.284,6.715,160,15,160z"
-      />
-    </g>
-  </svg>
-);
-
-export default UnlockIcon;

package/admin/src/hooks/useConfig.ts

@@ -1,58 +0,0 @@
-// @ts-nocheck
-
-import { useQuery, useMutation, useQueryClient } from "react-query";
-import {
-  fetchConfig,
-  restartStrapi,
-  restoreConfig,
-  updateConfig,
-} from "../pages/Settings/utils/api";
-import pluginId from "../pluginId";
-
-const useConfig = (toggleNotification) => {
-  const queryClient = useQueryClient();
-
-  const fetch = useQuery("get-config", () => fetchConfig(toggleNotification));
-
-  const handleError = (type, callback = () => {}) => {
-    toggleNotification({
-      type: "warning",
-      message: `${pluginId}.page.settings.notification.${type}.error`,
-    });
-    callback();
-  };
-
-  const handleSuccess = (
-    type,
-    callback = () => {},
-    invalidateQueries = true
-  ) => {
-    if (invalidateQueries) {
-      queryClient.invalidateQueries("get-config");
-    }
-    toggleNotification({
-      type: "success",
-      message: `${pluginId}.page.settings.notification.${type}.success`,
-    });
-    callback();
-  };
-
-  const submitMutation = useMutation(updateConfig, {
-    onSuccess: () => handleSuccess("submit"),
-    onError: () => handleError("submit"),
-  });
-
-  const restoreMutation = useMutation(restoreConfig, {
-    onSuccess: () => handleSuccess("restore"),
-    onError: () => handleError("restore"),
-  });
-
-  const restartMutation = useMutation(restartStrapi, {
-    onSuccess: () => handleSuccess("restart", () => {}, false),
-    onError: () => handleError("restart"),
-  });
-
-  return { fetch, restartMutation, submitMutation, restoreMutation };
-};
-
-export default useConfig;

package/admin/src/index.ts

@@ -1,98 +0,0 @@
-// @ts-ignore
-import { prefixPluginTranslations } from "@strapi/helper-plugin";
-import * as pluginPkg from "../../package.json";
-import { pluginId } from "./pluginId";
-import Initializer from "./components/Initializer";
-import PluginIcon from "./components/PluginIcon";
-import pluginPermissions from "./permissions";
-import reducers from "./reducers";
-import { ToBeFixed } from "../../types";
-
-const { name, displayName } = pluginPkg.strapi;
-
-export default {
-  register(app: ToBeFixed) {
-    app.addMenuLink({
-      to: `/plugins/${pluginId}/discover`,
-      badgeContent: 1,
-      icon: PluginIcon,
-      intlLabel: {
-        id: `${pluginId}.plugin.name`,
-        defaultMessage: displayName,
-      },
-      Component: async () => {
-        const component = await import(
-          /* webpackChunkName: "[request]" */ "./pages/App"
-        );
-
-        return component;
-      },
-      permissions: pluginPermissions.access,
-    });
-
-    app.createSettingSection(
-      {
-        id: pluginId,
-        intlLabel: {
-          id: `${pluginId}.plugin.section`,
-          defaultMessage: `${displayName} plugin`,
-        },
-      },
-      [
-        {
-          intlLabel: {
-            id: `${pluginId}.plugin.section.item`,
-            defaultMessage: "Configuration",
-          },
-          id: "comments",
-          to: `/settings/${pluginId}`,
-          Component: async () => {
-            const component = await import(
-              /* webpackChunkName: "documentation-settings" */ "./pages/Settings"
-            );
-
-            return component;
-          },
-          permissions: pluginPermissions.settings,
-        },
-      ]
-    );
-
-    app.addReducers(reducers);
-    app.registerPlugin({
-      id: pluginId,
-      initializer: Initializer,
-      isReady: false,
-      name,
-    });
-  },
-
-  // bootstrap(app: ToBeFixed) {
-  //   // app.injectContentManagerComponent('editView', 'informations', {
-  //   //     name: 'comments-link',
-  //   //     Component: () => 'TODO: Comments count',
-  //   // });
-  // },
-
-  async registerTrads({ locales }: ToBeFixed) {
-    const importedTrads = await Promise.all(
-      locales.map((locale: ToBeFixed) => {
-        return import(`./translations/${locale}.json`)
-          .then(({ default: data }) => {
-            return {
-              data: prefixPluginTranslations(data, pluginId),
-              locale,
-            };
-          })
-          .catch(() => {
-            return {
-              data: {},
-              locale,
-            };
-          });
-      })
-    );
-
-    return Promise.resolve(importedTrads);
-  },
-};