strapi-plugin-comments 2.0.0-beta.1 → 2.0.0-beta.5

package/admin/src/pages/Discover/index.js

@@ -5,21 +5,18 @@
  */
 
 import React, { memo, useRef, useMemo } from 'react';
-import { useIntl } from 'react-intl';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
+import isEqual from 'react-fast-compare';
 import { useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { isEmpty } from 'lodash';
-import { Badge } from '@strapi/design-system/Badge';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox'; 
 import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex'; 
-import { IconButton } from '@strapi/design-system/IconButton';
 import { Layout, HeaderLayout, ActionLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Table, Thead, Tbody, Tr, Th, Td } from '@strapi/design-system/Table'; 
 import { Typography } from '@strapi/design-system/Typography'; 
 import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'; 
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Eye } from '@strapi/icons';
 
 import {
   EmptyStateLayout,
@@ -37,12 +34,13 @@ import pluginPermissions from '../../permissions';
 
 import getUrl from '../../utils/getUrl';
 import Nav from '../../components/Nav';
-import { COMMENT_STATUS } from '../../utils/constants';
 import TablePagination from '../../components/TablePagination';
 import filtersSchema from './utils/filtersSchema';
 import TableFilters from '../../components/TableFilters';
+import makeAppView from '../App/reducer/selectors';
+import DiscoverTableRow from './components/DiscoverTableRow';
 
-const Discover = () => {
+const Discover = ({ config }) => {
   useFocusWhenNavigate();
 
   const { push } = useHistory();
@@ -50,7 +48,6 @@ const Discover = () => {
   const { trackUsage } = useTracking();
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
-  const { formatDate } = useIntl();
   const [{ query: queryParams }] = useQueryParams();
   const _q = queryParams?._q || '';
 
@@ -64,7 +61,7 @@ const Discover = () => {
   } = useRBAC(viewPermissions);
 
   const { isLoading: isLoadingForData, data: { result, pagination = {} }, isFetching } = useQuery(
-    ['get-providers', queryParams],
+    ['get-data', queryParams],
     () => fetchData(queryParams, toggleNotification),
     {
       initialData: { },
@@ -89,25 +86,14 @@ const Discover = () => {
     },
   };
 
-  const renderStatus = ({ blocked, blockedThread }) => {
-    const status = blocked || blockedThread ? COMMENT_STATUS.BLOCKED : COMMENT_STATUS.OPEN;
-    let color = 'secondary';
-    switch (status) {
-        case COMMENT_STATUS.OPEN:
-            color = 'success';
-            break;
-        case COMMENT_STATUS.BLOCKED:
-            color = 'danger';
-    };
-    return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage(`page.discover.table.header.status.${status}`, status) }</Badge>);
-  };
+
 
   const emptyContent = _q ? 'search' : 'comments';
   
   const COL_COUNT = 7;
 
   return <Box background="neutral100">
-          <Layout sideNav={<Nav />}>
+          <Layout>
             {isLoading || isLoadingForPermissions ? (<LoadingIndicatorPage />) : (
             <>
               <HeaderLayout title={ getMessage('page.discover.header') } subtitle={ `${total} ${ getMessage('page.discover.header.count')}` } as="h2" />
@@ -124,7 +110,7 @@ const Discover = () => {
                   <Thead>
                     <Tr>
                       <Th>
-                        <BaseCheckbox aria-label="Select all entries" />
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.id') }</Typography>
                       </Th>
                       <Th>
                         <Typography variant="sigma">{ getMessage('page.discover.table.header.message') }</Typography>
@@ -147,31 +133,7 @@ const Discover = () => {
                     </Tr>
                   </Thead>
                   <Tbody>
-                    {result.map(entry => <Tr key={entry.id}>
-                        <Td>
-                          <BaseCheckbox aria-label={`Select ${entry.content}`} />
-                        </Td>
-                        <Td style={{ maxWidth: '40vw' }}>
-                          <Typography textColor="neutral800" ellipsis>{entry.content}</Typography>
-                        </Td>
-                        <Td>
-                          <Typography textColor="neutral800">{entry.threadOf?.id || '-'}</Typography>
-                        </Td>
-                        <Td>
-                          <Typography textColor="neutral800">{entry.related?.id}</Typography>
-                        </Td>
-                        <Td>
-                          <Typography textColor="neutral800">{ formatDate(entry.updatedAt || entry.createdAt, { dateStyle: 'long', timeStyle: 'short' }) }</Typography>
-                        </Td>
-                        <Td>
-                          <Typography textColor="neutral800">{ renderStatus(entry) }</Typography>
-                        </Td>
-                        <Td>
-                          <Flex direction="column" alignItems="flex-end">
-                            <IconButton onClick={() => handleClickDisplay(entry.id)} label={ getMessage('page.discover.table.action.display') } icon={<Eye />} />
-                          </Flex>
-                        </Td>
-                      </Tr>)}
+                    {result.map(entry => (<DiscoverTableRow key={`comment-${entry.id}`} config={config} item={entry} onClick={() => handleClickDisplay(entry.id)}/>))}
                   </Tbody>
                 </Table>
                 <TablePagination pagination={{ pageCount: pagination?.pageCount || 1 }} />
@@ -182,4 +144,17 @@ const Discover = () => {
         </Box>;
 }
 
-export default memo(Discover);
+const mapStateToProps = makeAppView();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    { },
+    dispatch
+  );
+}
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps
+);
+
+export default compose(withConnect)(memo(Discover, isEqual));

package/admin/src/pages/Discover/utils/api.js

@@ -1,23 +1,14 @@
 import { stringify } from 'qs';
-import { isEmpty } from 'lodash';
 
-import { getApiURL, axiosInstance } from '../../../utils';
+import { getApiURL, axiosInstance, handleAPIError } from '../../../utils';
 
 // eslint-disable-next-line import/prefer-default-export
 export const fetchData = async (queryParams, toggleNotification) => {
   try {
-    console.log('api');
-    console.log(queryParams);
-    console.log(getApiURL(`moderate/all${!isEmpty(queryParams) ? `?${stringify(queryParams, { encode: false })}` : ''}`));
     const { data } = await axiosInstance.get(getApiURL(`moderate/all${queryParams ? `?${stringify(queryParams, { encode: false })}` : ''}`));
 
     return data;
   } catch (err) {
-    toggleNotification({
-      type: 'warning',
-      message: { id: 'notification.error' },
-    });
-
-    throw new Error('error');
+    handleAPIError(err, toggleNotification);
   }
 };

package/admin/src/pages/{Details/utils → utils}/api.js

@@ -1,9 +1,13 @@
-import { getApiURL, axiosInstance, handleAPIError } from '../../../utils';
+import { stringify } from 'qs';
+import { isEmpty } from 'lodash';
+
+import { getApiURL, axiosInstance, handleAPIError } from '../../utils';
 
 // eslint-disable-next-line import/prefer-default-export
-export const fetchDetailsData = async (id, toggleNotification) => {
+export const fetchDetailsData = async (id, queryParams, toggleNotification) => {
   try {
-    const { data } = await axiosInstance.get(getApiURL(`moderate/single/${id}`));
+    const stringifiedProps = !isEmpty(queryParams) ? `?${stringify(queryParams, { encode: false })}` : '';
+    const { data } = await axiosInstance.get(getApiURL(`moderate/single/${id}${stringifiedProps}`));
 
     return data;
   } catch (err) {
@@ -28,6 +32,14 @@ export const unblockItem = id => {
   return axiosInstance.patch(getApiURL(`moderate/single/${id}/unblock`));
 };
 
+export const approveItem = id => {
+  return axiosInstance.patch(getApiURL(`moderate/single/${id}/approve`));
+};
+
+export const rejectItem = id => {
+  return axiosInstance.patch(getApiURL(`moderate/single/${id}/reject`));
+};
+
 export const blockItemThread = id => {
   return axiosInstance.patch(getApiURL(`moderate/thread/${id}/block`));
 };

package/admin/src/reducers.js

@@ -0,0 +1,8 @@
+import appReducer from './pages/App/reducer';
+import { REDUCER_NAME } from './pages/App/reducer/constants';
+
+const reducers = {
+    [`${REDUCER_NAME}`]: appReducer,
+};
+
+export default reducers;

package/admin/src/translations/en.json

@@ -7,23 +7,29 @@
     "nav.item.discover": "Discover",
     "nav.item.reports": "Reports",
     "nav.item.settings": "Settings",
+    "page.common.item.status.OPEN": "OPEN",
+    "page.common.item.status.BLOCKED": "BLOCKED",
+    "page.common.item.status.APPROVED": "APPROVED",
+    "page.common.item.status.TO_REVIEW": "TO REVIEW ({count, number})",
+    "page.common.item.status.REJECTED": "REJECTED",
+    "page.common.item.status.REMOVED": "REMOVED BY AUTHOR",
     "page.updates.header": "Recent updates",
     "page.discover.header": "Discover threads",
     "page.discover.header.count": "entries found",
+    "page.discover.table.header.id": "ID",
     "page.discover.table.header.message": "Message",
     "page.discover.table.header.thread": "Thread of",
     "page.discover.table.header.entry": "Entry",
     "page.discover.table.header.lastUpdate": "Last update",
     "page.discover.table.header.status": "Status",
-    "page.discover.table.header.status.OPEN": "OPEN",
-    "page.discover.table.header.status.BLOCKED": "BLOCKED",
-    "page.discover.table.header.status.TO_REVIEW": "TO REVIEW",
-    "page.discover.table.header.actions": "Status",
+    "page.discover.table.header.actions": "Actions",
+    "page.discover.table.cell.thread": "Comment #{id}",
     "page.discover.table.action.display": "Display",
     "page.discover.table.action.reports": "Reports",
     "page.discover.table.empty": "You don't have any comments yet.",
     "page.discover.table.empty.search": "No comments match the search.",
     "page.discover.table.filters": "Filtering",
+    "page.discover.table.reports.review": "Review reports",
     "page.details.header": "Discussion panel",
     "page.details.header.description": "Drilldown and manage discussion related to the entity",
     "page.details.panel.discussion": "Discussion",
@@ -51,6 +57,7 @@
     "page.details.panel.status.open": "OPEN",
     "page.details.panel.status.blocked": "BLOCKED",
     "page.details.panel.status.pending": "PENDING",
+    "page.details.panel.loading": "Fetching entity...",
     "page.details.actions.comment.block": "Block comment",
     "page.details.actions.comment.block.confirmation.header": "Moderation: Block comment",
     "page.details.actions.comment.block.confirmation.description": "Do you really want to block this comment?",
@@ -66,6 +73,11 @@
     "page.details.actions.thread.block.confirmation.success": "Thread has been blocked",
     "page.details.actions.thread.unblock": "Unblock thread",
     "page.details.actions.thread.unblock.confirmation.success": "Thread has been unblocked",
+    "page.details.actions.comment.approve.confirmation.success": "Comment has been approved",
+    "page.details.actions.comment.reject.confirmation.success": "Comment has been rejected",
+    "page.details.filters.label": "View",
+    "page.details.filters.removed.show": "Show removed",
+    "page.details.filters.removed.hide": "Hide removed",
     "page.coming.soon": "Wait for what is coming soon...",
     "compontents.confirmation.dialog.header": "Confirmation",
     "compontents.confirmation.dialog.description": "Do you really want to perform this action?",

package/admin/src/utils/constants.js

@@ -16,13 +16,10 @@ export const REPORT_REASON = {
 };
 
 export const COMMENT_STATUS = {
+  'UNKNOWN': 'UNKNOWN',
   'BLOCKED': 'BLOCKED',
   'OPEN': 'OPEN',
+  'REMOVED': 'REMOVED',
   'TO_REVIEW': 'TO_REVIEW',
-};
-
-export const REGEX = {
-  uid: new RegExp(/^(?<type>[a-z]+)\:{2}(?<api>[a-z]+)\.{1}(?<contentType>[a-z]+)$/gmi),
-  relatedUid: new RegExp(/^(?<uid>[a-z]+\:{2}[a-z]+\.[a-z]+)\:{1}(?<id>[0-9]+)$/gmi),
-  email: new RegExp(/\S+@\S+\.\S+/),
+  ...APPROVAL_STATUS,
 };

package/admin/src/utils/getMessage.js

@@ -1,14 +1,21 @@
 
 import { useIntl } from 'react-intl';
+import { isString } from 'lodash';
 
 import pluginId from '../pluginId';
 
-const getMessage = (id, defaultMessage, inPluginScope = true) => {
+const getMessage = (input, defaultMessage = '', inPluginScope = true) => {
     const { formatMessage } = useIntl();
+    let formattedId = ''
+    if (isString(input)) {
+        formattedId = input;
+    } else {
+        formattedId = input?.id;
+    }
     return formatMessage({
-        id: `${inPluginScope ? pluginId : 'app.component'}.${id}`,
+        id: `${inPluginScope ? pluginId : 'app.components'}.${formattedId}`,
         defaultMessage,
-    })
+    }, input?.props || undefined)
 };
 
 export default getMessage;

package/admin/src/utils/getRelatedGroups.js

@@ -1,5 +1,3 @@
-import { REGEX } from "./constants";
-
-const getRelatedGroups = related => related.split(REGEX.relatedUid).filter(s => s && s.length > 0);
+const getRelatedGroups = (related, config) => related.split(config.regex.relatedUid).filter(s => s && s.length > 0);
 
 export default getRelatedGroups;

package/admin/src/utils/handleAPIError.js

@@ -2,7 +2,7 @@
 const handleAPIError = (err = null, toggleNotification = null) => {
     toggleNotification({
         type: 'warning',
-        message: { id: 'notification.error' },
+        message: 'app.components.notification.error',
     });
 
     if (err) {

package/admin/src/utils/index.js

@@ -1,6 +1,8 @@
 export { default as axiosInstance } from './axiosInstance';
-export { default as getApiURL } from './getApiURL';
+export { default as getApiURL } from './getApiUrl';
 export { default as getUrl } from './getUrl';
 export { default as getMessage } from './getMessage';
 export { default as handleAPIError } from './handleAPIError';
-export { default as getRelatedGroups } from './getRelatedGroups';
+export { default as getRelatedGroups } from './getRelatedGroups';
+export { default as resolveCommentStatus } from './resolveCommentStatus';
+export { default as resolveCommentStatusColor } from './resolveCommentStatusColor';

package/admin/src/utils/renderEntryTitle.js

@@ -0,0 +1,14 @@
+import { first } from 'lodash';
+
+const renderEntryTitle = (entry, config = {}) => {
+    const { entryLabel } = config;
+    const rule = entry.uid in entryLabel ? entryLabel[entry.uid] : entryLabel['*'];
+    return first(
+      Object.keys(entry)
+        .filter(_ => (rule === _) || rule.includes(_))
+        .map(_ => entry[_])
+        .filter(_ => _)
+    );
+  };
+
+export default renderEntryTitle;

package/admin/src/utils/resolveCommentStatus.js

@@ -0,0 +1,30 @@
+import { isNil } from 'lodash';
+import { COMMENT_STATUS } from './constants';
+
+const resolveCommentStatus = ({ removed, blocked, blockedThread, approvalStatus, reviewFlowEnabled }) => {
+    const gotApprovalFlow = !isNil(approvalStatus);
+
+    if (reviewFlowEnabled) {
+        return COMMENT_STATUS.TO_REVIEW;
+    }
+
+    if (removed) {
+        return COMMENT_STATUS.REMOVED;
+    } 
+    
+    if (blocked || blockedThread) {
+        return COMMENT_STATUS.BLOCKED;
+    } 
+    
+    if (gotApprovalFlow) {
+        const status = approvalStatus.toUpperCase();
+        if (Object.keys(COMMENT_STATUS).includes(status)) {
+            return status;
+        }
+        return COMMENT_STATUS.UNKNOWN;
+    }
+
+    return COMMENT_STATUS.OPEN;
+}
+
+export default resolveCommentStatus;

package/admin/src/utils/resolveCommentStatusColor.js

@@ -0,0 +1,22 @@
+import { isNil } from 'lodash';
+import { COMMENT_STATUS } from './constants';
+
+const resolveCommentStatusColor = (status) => {
+    if (Object.keys(COMMENT_STATUS).includes(status)) {
+        switch (status) {
+            case COMMENT_STATUS.REMOVED:
+                return 'secondary';
+            case COMMENT_STATUS.TO_REVIEW:
+            case COMMENT_STATUS.REJECTED:
+                return 'warning';
+            case COMMENT_STATUS.BLOCKED:
+                return 'danger';
+            case COMMENT_STATUS.OPEN:
+            case COMMENT_STATUS.APPROVED:
+                return 'success';
+        };
+    }
+    return 'secondary';
+}
+
+export default resolveCommentStatusColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-comments",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.5",
   "description": "Strapi - Comments plugin",
   "strapi": {
     "name": "comments",
@@ -15,6 +15,7 @@
     "url": "https://github.com/VirtusLab-Open-Source/strapi-plugin-comments"
   },
   "dependencies": {
+    "@strapi/utils": "^4.0.5",
     "bad-words": "^3.0.4"
   },
   "devDependencies": {
@@ -23,6 +24,9 @@
     "jest-cli": "^26.0.1",
     "jest-styled-components": "^7.0.2"
   },
+  "peerDependencies": {
+    "@strapi/strapi": "4.x"
+  },
   "author": {
     "name": "VirtusLab // Mateusz Ziarko",
     "email": "mziarko@virtuslab.com",
@@ -41,8 +45,8 @@
     }
   ],
   "engines": {
-    "node": ">=12.x. <=16.x.x",
-    "npm": ">=6.0.0"
+    "node": ">=14.x.x <=17.x.x",
+    "npm": ">=7.x.x"
   },
   "keywords": ["strapi", "plugin", "comments"],
   "license": "MIT"

package/server/config/index.js

@@ -1,6 +1,11 @@
 'use strict';
 
 module.exports = {
-  default: {},
+  default: {
+    approvalFlow: [],
+    entryLabel: {
+      '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject']
+    },
+  },
   validator() {},
 };

package/server/controllers/admin.js

@@ -16,11 +16,11 @@ module.exports = {
   },
 
   async findOne(ctx) {
-    const { params = {} } = ctx;
+    const { params = {}, query } = ctx;
     const { id } = parseParams(params);
     try {
       return await this.getService()
-        .findOneAndThread(id);
+        .findOneAndThread(id, query);
     } catch (e) {
       throwError(ctx, e);
     }
@@ -101,28 +101,12 @@ module.exports = {
     }
   },
 
-  async config() {
-    const configRelatedContentTypes = _.get(strapi.config, ['plugins', 'comments', 'relatedContentTypes'], {});
-    const contentsTypes = this.getContentsTypes();
-    const relatedContentTypes = Object
-      .keys(configRelatedContentTypes)
-      .reduce((acc, currentKey) => {
-          const current = configRelatedContentTypes[currentKey];
-          const { key } = contentsTypes.find(content => content.value === currentKey) || {};
-          return {
-            ...acc,
-            [currentKey]: {
-              ...current,
-              globalName: _.snakeCase(key),
-            },
-          };
-        },
-        {},
-      );
-    return {
-      relatedContentTypes,
-      contentsTypes,
-    };
+  async config(ctx) {
+    try {
+      return await this.getService().config();
+    } catch (e) {
+      throwError(ctx, e);
+    }
   },
 
   getContentsTypes() {

package/server/controllers/client.js

@@ -16,8 +16,14 @@ module.exports = {
     try {
       return this.getService('common')
         .findAllFlat({
-          ...query,
-          related: relation,
+          query: {
+            ...query,
+            $or: [{ removed: { $null: true } }, { removed: false }],
+            related: relation,
+          },
+          populate: {
+            threadOf: true,
+          },
         });
     } catch (e) {
       throwError(ctx, e);
@@ -34,6 +40,9 @@ module.exports = {
             ...query,
             related: relation,
           },
+          populate: {
+            threadOf: true,
+          },
           dropBlockedThreads: true,
         });
     } catch (e) {