strapi-plugin-comments 1.0.2 → 2.0.0-beta.3

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

@@ -0,0 +1,109 @@
+/*
+ *
+ * Details
+ *
+ */
+
+import React, { useRef, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { useRouteMatch } from 'react-router-dom';
+import { Layout, HeaderLayout, TwoColsLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Box } from '@strapi/design-system/Box';
+import { Link } from '@strapi/design-system/Link';
+import { Loader } from '@strapi/design-system/Loader';
+import { Stack } from '@strapi/design-system/Stack';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { ArrowLeft } from '@strapi/icons';
+
+import { isEmpty } from 'lodash';
+import {
+  LoadingIndicatorPage,
+  useTracking,
+  useNotification,
+  useRBAC,
+  useFocusWhenNavigate,
+} from '@strapi/helper-plugin';
+import getMessage from '../../utils/getMessage';
+import { fetchDetailsData, fetchContentTypeData } from './utils/api';
+import pluginPermissions from '../../permissions';
+import { getUrl } from '../../utils';
+import Nav from '../../components/Nav';
+import { REGEX } from '../../utils/constants';
+import EntityDetails from '../../components/EntityDetails';
+import DiscussionThread from '../../components/DiscussionThread';
+import DiscussionStatus from '../../components/DiscussionStatus';
+
+const Details = () => {
+  useFocusWhenNavigate();
+
+  const {
+    params: { id },
+  } = useRouteMatch(getUrl(`discover/:id`));
+
+  const { notifyStatus } = useNotifyAT();
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
+  const toggleNotification = useNotification();
+
+  const viewPermissions = useMemo(() => {
+    return { view: pluginPermissions.view };
+  }, []);
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canView },
+  } = useRBAC(viewPermissions);
+
+  const { isLoading: isLoadingForData, data, isFetching } = useQuery(
+    ['get-details-data', id],
+    () => fetchDetailsData(id, toggleNotification),
+    {
+      initialData: { },
+    }
+  );
+
+  const { entity, level, selected } = data;
+  const entityUidValid = entity?.uid && REGEX.uid.test(entity?.uid);
+
+  const { data: contentTypeData } = useQuery(
+    ['get-additional-data', entity?.uid],
+    () => fetchContentTypeData(entity?.uid, toggleNotification),
+    {
+      enabled: !!entity?.uid, 
+      suspense: !entityUidValid,
+    }
+  )
+
+  const isLoading = isLoadingForData || isFetching;
+
+  return <Box background="neutral100">
+          <Layout sideNav={<Nav />}>
+            {(isLoading || isLoadingForPermissions) && isEmpty(data) ? (<LoadingIndicatorPage />) : (
+            <>
+              <HeaderLayout 
+                navigationAction={
+                <Link startIcon={<ArrowLeft />} to={getUrl(`discover`)}>
+                  { getMessage('HeaderLayout.link.go-back', 'Back', false) }
+                </Link>}
+                title={ getMessage('page.details.header') } 
+                subtitle={ getMessage('page.details.header.description') } as="h2" />
+              <ContentLayout>
+                <TwoColsLayout 
+                  startCol={<DiscussionThread level={level} selected={selected} isReloading={isLoading} />} 
+                  endCol={ <Stack size={2}>
+                    <DiscussionStatus item={selected} />
+                    { !contentTypeData?.schema ? (<Box padding={4}>
+                        <Loader small>Fetching entity...</Loader>
+                      </Box>) : 
+                      (<EntityDetails data={entity} schema={contentTypeData?.schema} />)
+                    }
+                  </Stack>
+                  } 
+                />
+              </ContentLayout>
+            </>) }
+          </Layout>
+        </Box>;
+}
+
+export default Details;

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

@@ -0,0 +1,41 @@
+import { getApiURL, axiosInstance, handleAPIError } from '../../../utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchDetailsData = async (id, toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(getApiURL(`moderate/single/${id}`));
+
+    return data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};
+
+export const fetchContentTypeData = async (uid, toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(`/content-type-builder/content-types/${uid}`);
+    return data?.data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};
+
+export const blockItem = id => {
+  return axiosInstance.patch(getApiURL(`moderate/single/${id}/block`));
+};
+
+export const unblockItem = id => {
+  return axiosInstance.patch(getApiURL(`moderate/single/${id}/unblock`));
+};
+
+export const blockItemThread = id => {
+  return axiosInstance.patch(getApiURL(`moderate/thread/${id}/block`));
+};
+
+export const unblockItemThread = id => {
+  return axiosInstance.patch(getApiURL(`moderate/thread/${id}/unblock`));
+};
+
+export const resolveReport = ({ id, reportId }) => {
+  return axiosInstance.patch(getApiURL(`moderate/single/${id}/report/${reportId}/resolve`));
+};

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

@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useMutation, useQueryClient } from 'react-query';
+import { first, isEmpty, orderBy } from 'lodash';
+import { Badge } from '@strapi/design-system/Badge';
+import { Box } from '@strapi/design-system/Box'; 
+import { Button } from '@strapi/design-system/Button'; 
+import { Divider } from '@strapi/design-system/Divider'; 
+import { Flex } from '@strapi/design-system/Flex'; 
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Link } from '@strapi/design-system/Link';
+import { Stack } from '@strapi/design-system/Stack';
+import { Tr, Td } from '@strapi/design-system/Table'; 
+import { Typography } from '@strapi/design-system/Typography'; 
+import { Eye, Lock } from '@strapi/icons';
+import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { getMessage, handleAPIError } from '../../../../utils';
+import { COMMENT_STATUS } from '../../../../utils/constants';
+import ReportsReviewModal from '../../../../components/ReportsReviewModal';
+import ReportsReviewTable from '../../../../components/ReportsReviewTable';
+import { blockItem, blockItemThread, resolveReport } from '../../../Details/utils/api';
+import pluginId from '../../../../pluginId';
+import { ReviewIcon, LockIcon } from '../../../../components/icons';
+
+const DiscoverTableRow = ({ config, item, onClick }) => {
+
+    const { id, reports } = item;
+
+    const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
+    const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
+
+    const { formatDate } = useIntl();
+    const toggleNotification = useNotification();
+    const queryClient = useQueryClient();
+    const { lockApp, unlockApp } = useOverlayBlocker();
+
+    const onSuccess = (message, stateAction = () => {}, indalidate = true) => async () => {
+        if (indalidate) {
+            await queryClient.invalidateQueries('get-data');
+        }
+        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 blockItemMutation = useMutation(blockItem, {
+        onSuccess: onSuccess(
+            'page.details.actions.comment.block.confirmation.success', 
+            setReportsReviewVisible
+        ),
+        onError,
+        refetchActive: false,
+    });
+    const blockItemThreadMutation = useMutation(blockItemThread, {
+        onSuccess: onSuccess(
+            'page.details.actions.thread.block.confirmation.success', 
+            setReportsReviewVisible
+        ),
+        onError,
+        refetchActive: false,
+    });
+
+    const handleReportsReviewClick = () => setReportsReviewVisible(true);
+    const handleBlockItemClick = async () => {
+        lockApp();
+        blockItemMutation.mutate(id);
+    };
+    const handleBlockItemThreadClick = async () => {
+        lockApp();
+        blockItemThreadMutation.mutate(id);
+    };
+    const handleReportsReviewClose = async () => {
+        await queryClient.invalidateQueries('get-data');
+        setReportsReviewVisible(false);
+    };
+
+    const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading || resolveReportMutation.isLoading;
+    const openReports = reports?.filter(_ => !_.resolved);
+    const hasReports = !isEmpty(openReports);
+    const reviewFlowEnabled = hasReports && !(item.blocked || item.blockedThread);
+
+    const handleClick = () => onClick();
+    const handleBlockButtonsStateChange = disabled => setBlockButtonsDisabled(disabled);
+
+    const renderStatus = ({ blocked, blockedThread }) => {
+        let status = blocked || blockedThread ? COMMENT_STATUS.BLOCKED : COMMENT_STATUS.OPEN;
+        if (reviewFlowEnabled) {
+            status = COMMENT_STATUS.TO_REVIEW;
+        }
+        let color = 'secondary';
+        switch (status) {
+            case COMMENT_STATUS.OPEN:
+                color = 'success';
+                break;
+            case COMMENT_STATUS.TO_REVIEW:
+                color = 'warning';
+                break;
+            case COMMENT_STATUS.BLOCKED:
+                color = 'danger';
+                break;
+        };
+        return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage({
+            id: `page.discover.table.header.status.${status}`,
+            props: {
+                count: openReports.length
+            }
+        }, status) }</Badge>);
+      };
+    
+      const renderEntryTitle = entry => {
+        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(_ => _)
+        );
+      };
+    
+      const renderEntryUrl = entry => `/content-manager/collectionType/${entry.uid}/${entry.id}`;
+
+    return (
+        <Tr key={item.id}>
+            <Td style={{ maxWidth: '40vw' }}>
+                <Typography textColor="neutral800" ellipsis>{item.content}</Typography>
+            </Td>
+            <Td>
+                <Typography textColor="neutral800">{item.threadOf?.id || '-'}</Typography>
+            </Td>
+            <Td>
+                <Link to={ renderEntryUrl(item.related) }>{ renderEntryTitle(item.related) }</Link>
+            </Td>
+            <Td>
+                <Typography textColor="neutral800">{ formatDate(item.updatedAt || item.createdAt, { dateStyle: 'long', timeStyle: 'short' }) }</Typography>
+            </Td>
+            <Td>
+                <Typography textColor="neutral800">{ renderStatus(item) }</Typography>
+            </Td>
+            <Td>
+                <Flex direction="column" alignItems="flex-end">
+                    <Stack size={reviewFlowEnabled ? 2 : 1} horizontal>
+                        { reviewFlowEnabled && (<IconButton onClick={handleReportsReviewClick} label={ getMessage('page.discover.table.reports.review') } icon={<ReviewIcon />} />)}
+                        <IconButton onClick={handleClick} label={ getMessage('page.discover.table.action.display') } icon={<Eye />} />
+                    </Stack>
+                </Flex>
+                { reviewFlowEnabled && (<ReportsReviewModal 
+                    isVisible={reportsReviewVisible}
+                    isActionAsync={isLoading}
+                    onClose={handleReportsReviewClose}
+                    startActions={<>
+                        <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
+                            { getMessage(`page.details.actions.comment.block`, 'Block comment') }
+                        </Button>
+                        { item.gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
+                            { getMessage(`page.details.actions.thread.block`, 'Block thread') }
+                        </Button>) }
+                    </>}
+                    item={item}>
+                        <Typography variant="sigma" textColor="neutral600" id="reports-list">
+                            { getMessage('page.details.panel.discussion.warnings.reports.list', 'List') }
+                        </Typography>
+                        <Box paddingTop={2} paddingBottom={6}>
+                            <Divider />
+                        </Box>
+                        <ReportsReviewTable
+                                commentId={item.id} 
+                                items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
+                                mutation={resolveReportMutation}
+                                onBlockButtonsStateChange={handleBlockButtonsStateChange}
+                            />
+                </ReportsReviewModal>) }
+            </Td>
+        </Tr>
+    );
+};
+
+DiscoverTableRow.propTypes = {
+    config: PropTypes.object.isRequired,
+    item: PropTypes.object.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
+
+export default DiscoverTableRow;

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

@@ -0,0 +1,157 @@
+/*
+ *
+ * Discover
+ *
+ */
+
+import React, { memo, useRef, useMemo } from 'react';
+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 { Box } from '@strapi/design-system/Box';
+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 {
+  EmptyStateLayout,
+  SearchURLQuery,
+  LoadingIndicatorPage,
+  useTracking,
+  useNotification,
+  useRBAC,
+  useFocusWhenNavigate,
+  useQueryParams,
+} from '@strapi/helper-plugin';
+import getMessage from '../../utils/getMessage';
+import { fetchData } from './utils/api';
+import pluginPermissions from '../../permissions';
+
+import getUrl from '../../utils/getUrl';
+import Nav from '../../components/Nav';
+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 = ({ config }) => {
+  useFocusWhenNavigate();
+
+  const { push } = useHistory();
+  const { notifyStatus } = useNotifyAT();
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
+  const toggleNotification = useNotification();
+  const [{ query: queryParams }] = useQueryParams();
+  const _q = queryParams?._q || '';
+
+  const viewPermissions = useMemo(() => {
+    return { view: pluginPermissions.view };
+  }, []);
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canView },
+  } = useRBAC(viewPermissions);
+
+  const { isLoading: isLoadingForData, data: { result, pagination = {} }, isFetching } = useQuery(
+    ['get-data', queryParams],
+    () => fetchData(queryParams, toggleNotification),
+    {
+      initialData: { },
+    }
+  );
+
+  const handleClickDisplay = id => {
+    push(getUrl(`discover/${id}`));
+  };
+
+  const isLoading = isLoadingForData || isFetching;
+  const { total } = pagination;
+
+  const emptyLayout = {
+    comments: {
+      id: getMessage('page.discover.table.empty'),
+      defaultMessage: "You don't have any comments yet.",
+    },
+    search: {
+      id: getMessage('page.discover.table.empty.search'),
+      defaultMessage: 'No comments match the search.',
+    },
+  };
+
+
+
+  const emptyContent = _q ? 'search' : 'comments';
+  
+  const COL_COUNT = 6;
+
+  return <Box background="neutral100">
+          <Layout sideNav={<Nav />}>
+            {isLoading || isLoadingForPermissions ? (<LoadingIndicatorPage />) : (
+            <>
+              <HeaderLayout title={ getMessage('page.discover.header') } subtitle={ `${total} ${ getMessage('page.discover.header.count')}` } as="h2" />
+              <ActionLayout 
+                    startActions={<>
+                      <SearchURLQuery
+                        label={ getMessage('search.label', 'Search', false) }
+                      />
+                      <TableFilters displayedFilters={filtersSchema} />
+                    </>} />
+              <ContentLayout>
+                { !isEmpty(result) ? (<>
+                <Table colCount={COL_COUNT} rowCount={result.length}>
+                  <Thead>
+                    <Tr>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.message') }</Typography>
+                      </Th>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.thread') }</Typography>
+                      </Th>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.entry') }</Typography>
+                      </Th>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.lastUpdate') }</Typography>
+                      </Th>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.status') }</Typography>
+                      </Th>
+                      <Th>
+                        <VisuallyHidden>{ getMessage('page.discover.table.header.actions') }</VisuallyHidden>
+                      </Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {result.map(entry => (<DiscoverTableRow config={config} item={entry} onClick={() => handleClickDisplay(entry.id)}/>))}
+                  </Tbody>
+                </Table>
+                <TablePagination pagination={{ pageCount: pagination?.pageCount || 1 }} />
+                </>) : (<EmptyStateLayout content={emptyLayout[emptyContent]} />) }
+              </ContentLayout>
+            </>) }
+          </Layout>
+        </Box>;
+}
+
+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

@@ -0,0 +1,14 @@
+import { stringify } from 'qs';
+
+import { getApiURL, axiosInstance, handleAPIError } from '../../../utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchData = async (queryParams, toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(getApiURL(`moderate/all${queryParams ? `?${stringify(queryParams, { encode: false })}` : ''}`));
+
+    return data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};

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

@@ -0,0 +1,9 @@
+const filtersSchema = [
+    {
+      name: 'content',
+      metadatas: { label: 'Message' },
+      fieldSchema: { type: 'string' },
+    },
+  ];
+  
+  export default filtersSchema;

package/admin/src/permissions.js

@@ -1,34 +1,14 @@
 const pluginPermissions = {
-  // This permission regards the main component (App) and is used to tell
-  // If the plugin link should be displayed in the menu
-  // And also if the plugin is accessible. This use case is found when a user types the url of the
-  // plugin directly in the browser
-  main: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.block.comment', subject: null },
-    { action: 'plugins::comments.moderate.block.thread', subject: null },
-    { action: 'plugins::comments.moderate.reports', subject: null },
-  ],
-  open: [
-    { action: 'plugins::comments.read', subject: null },
-  ],
-  moderate: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.block.comment', subject: null },
-    { action: 'plugins::comments.moderate.block.thread', subject: null },
-  ],
-  moderateComments: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.block.comment', subject: null },
-  ],
-  moderateThreads: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.block.thread', subject: null },
-  ],
-  moderateReports: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.reports', subject: null },
-  ],
-};
-
-export default pluginPermissions;
+    access: [
+      { action: 'plugin::comments.read', subject: null },
+      { action: 'plugin::comments.reports.read', subject: null },
+      { action: 'plugin::comments.discovery.read', subject: null },
+      { action: 'plugin::comments.settings.read', subject: null },
+    ],
+    discover: [{ action: 'plugin::comments.read', subject: null }],
+    moderate: [{ action: 'plugin::comments.moderate', subject: null }],
+    reports: [{ action: 'plugin::comments.reports.read', subject: null }],
+    reportsReview: [{ action: 'plugin::comments.reports.action', subject: null }],
+  };
+  
+  export default pluginPermissions;

package/admin/src/pluginId.js

@@ -1,7 +1,5 @@
 const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
 
 module.exports = pluginId;

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;