strapi-plugin-comments 2.0.11 → 2.1.1

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;

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

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

@@ -0,0 +1,19 @@
+// @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.js → index.tsx}

@@ -1,17 +1,22 @@
-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';
+// @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);
+    setIsVisible((prev) => !prev);
   };
 
   return (
@@ -24,7 +29,7 @@ const TableFilters = ({ displayedFilters }) => {
           onClick={handleToggle}
           size="S"
         >
-          {getMessage('page.discover.table.filters')}
+          {getMessage("page.discover.table.filters")}
         </Button>
         {isVisible && (
           <FilterPopoverURLQuery

package/admin/src/components/TablePagination/{index.js → index.tsx}

@@ -1,8 +1,10 @@
-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';
+// @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 (
@@ -32,4 +34,4 @@ TablePagination.propTypes = {
   }),
 };
 
-export default TablePagination;
+export default TablePagination;

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

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

@@ -0,0 +1,6 @@
+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.js → lock.tsx}

@@ -1,22 +1,27 @@
+// @ts-nocheck
 
-import React from 'react';
+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
+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"/>
+      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;
+export default LockIcon;

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

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

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

@@ -0,0 +1,58 @@
+// @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.js → index.ts}

@@ -1,15 +1,17 @@
-import { prefixPluginTranslations } from '@strapi/helper-plugin';
-import 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';
+// @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) {
+  register(app: ToBeFixed) {
     app.addMenuLink({
       to: `/plugins/${pluginId}/discover`,
       badgeContent: 1,
@@ -19,7 +21,9 @@ export default {
         defaultMessage: displayName,
       },
       Component: async () => {
-        const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
+        const component = await import(
+          /* webpackChunkName: "[request]" */ "./pages/App"
+        );
 
         return component;
       },
@@ -38,15 +42,15 @@ export default {
         {
           intlLabel: {
             id: `${pluginId}.plugin.section.item`,
-            defaultMessage: 'Configuration',
+            defaultMessage: "Configuration",
           },
-          id: 'comments',
+          id: "comments",
           to: `/settings/${pluginId}`,
           Component: async () => {
             const component = await import(
-              /* webpackChunkName: "documentation-settings" */ './pages/Settings'
+              /* webpackChunkName: "documentation-settings" */ "./pages/Settings"
             );
-    
+
             return component;
           },
           permissions: pluginPermissions.settings,
@@ -63,16 +67,16 @@ export default {
     });
   },
 
-  bootstrap(app) {
-    // app.injectContentManagerComponent('editView', 'informations', {
-    //     name: 'comments-link',
-    //     Component: () => 'TODO: Comments count',
-    // });
-  },
-  
-  async registerTrads({ locales }) {
+  // 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 => {
+      locales.map((locale: ToBeFixed) => {
         return import(`./translations/${locale}.json`)
           .then(({ default: data }) => {
             return {

package/admin/src/pages/App/index.tsx

@@ -0,0 +1,67 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+// @ts-nocheck
+import React from "react";
+import { connect } from "react-redux";
+import { bindActionCreators, compose } from "redux";
+import { Switch, Route } from "react-router-dom";
+import { useQuery } from "react-query";
+import {
+  NotFound,
+  LoadingIndicatorPage,
+  useNotification,
+} from "@strapi/helper-plugin";
+
+import ComingSoonPage from "../ComingSoonPage";
+import getUrl from "../../utils/getUrl";
+import Discover from "../Discover";
+import Details from "../Details";
+import { fetchConfig } from "./utils/api";
+import { setConfig } from "./reducer/actions";
+import makeAppView from "./reducer/selectors";
+
+const App = ({ setConfig }) => {
+  const toggleNotification = useNotification();
+
+  const { isLoading, isFetching } = useQuery(
+    "get-config",
+    () => fetchConfig(toggleNotification),
+    {
+      initialData: {},
+      onSuccess: (response) => {
+        setConfig(response);
+      },
+    }
+  );
+
+  if (isLoading || isFetching) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <div>
+      <Switch>
+        <Route path={getUrl("dashboard")} component={ComingSoonPage} exact />
+        <Route path={getUrl("discover")} component={Discover} exact />
+        <Route path={getUrl("discover/:id")} component={Details} exact />
+        <Route path={getUrl("reports")} component={ComingSoonPage} exact />
+        <Route path={getUrl("settings")} component={ComingSoonPage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+};
+
+const mapStateToProps = makeAppView();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ setConfig }, dispatch);
+}
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(withConnect)(App);

package/admin/src/pages/App/reducer/actions.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+
+import { GET_CONFIG, SET_CONFIG } from "./constants";
+
+export const setConfig = (data) => ({
+  data,
+  type: SET_CONFIG,
+});
+
+export const getConfig = () => ({ type: GET_CONFIG });

package/admin/src/pages/App/reducer/constants.ts

@@ -0,0 +1,4 @@
+export const REDUCER_NAME = "plugin-comments_app";
+
+export const SET_CONFIG = "SET_CONFIG";
+export const GET_CONFIG = "GET_CONFIG";