strapi-plugin-comments 1.0.2-beta.1 → 2.0.0-beta.2

package/admin/src/components/ReportsReviewTable/index.js

@@ -0,0 +1,142 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+ import React, { useState, useEffect } from 'react';
+ import { useIntl } from 'react-intl';
+ import PropTypes from 'prop-types';
+ import { isEmpty } from 'lodash';
+ import { Badge } from '@strapi/design-system/Badge'; 
+ import { Button } from '@strapi/design-system/Button'; 
+ 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';
+
+const ReportsReviewTable = ({ 
+    commentId,
+    items,
+    mutation
+}) => {
+
+    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 (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage(`page.details.panel.discussion.warnings.reports.dialog.status.${status}`, status) }</Badge>);
+    };
+
+    const renderReason = reason => {
+        let color = 'neutral';
+        switch (reason) {
+            case REPORT_REASON.DISCRIMINATION:
+                color = 'danger';
+                break;
+            case REPORT_REASON.BAD_LANGUAGE:
+                color = 'warning';
+        };
+        return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage(`page.details.panel.discussion.warnings.reports.dialog.reason.${reason}`, reason) }</Badge>);
+    };
+
+    const handleClickResolve = async (reportId) => {
+        lockApp();
+        const item = await mutation.mutateAsync({
+            id: commentId,
+            reportId,
+        });
+        console.log(item);
+        if (item) {
+            setStoredItems(storedItems.map(_ => ({
+                ..._,
+                resolved: reportId === _.id ? true : _.resolved,
+            })));
+        }
+    }
+
+    useEffect(() => {
+        setStoredItems(items);
+    }, []);
+
+    if (isEmpty(storedItems)) {
+        return null;
+    }
+
+    const COL_COUNT = 6;
+
+    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>
+            <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>
+                <Typography textColor="neutral800">{ renderStatus(entry.resolved) }</Typography>
+              </Td>
+              <Td>
+                  { !entry.resolved && (<Flex direction="column" alignItems="flex-end">
+                        <Button onClick={() => handleClickResolve(entry.id)} startIcon={<Check />} variant="success">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.actions.resolve', 'resolve') }</Button>
+                    </Flex>) }
+              </Td>
+            </Tr>)}
+        </Tbody>
+        {/* <TFooter /> */}
+      </Table>)
+};
+
+ReportsReviewTable.propTypes = {
+    commentId: PropTypes.string.isRequired,
+    items: PropTypes.array.isRequired,
+    mutation: PropTypes.func.isRequired,
+};
+
+  export default ReportsReviewTable;

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

@@ -0,0 +1,53 @@
+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.js

@@ -0,0 +1,35 @@
+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.js

@@ -0,0 +1,9 @@
+
+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/index.js

@@ -1,49 +1,65 @@
+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 pluginLogo from './assets/images/logo.svg';
-import App from './containers/App';
-import Initializer from './containers/Initializer';
-import lifecycles from './lifecycles';
-import trads from './translations';
+import reducers from './reducers';
 
-export default strapi => {
-  const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
+const name = pluginPkg.strapi.name;
 
-  const icon = pluginPkg.strapi.icon;
-  const name = pluginPkg.strapi.name;
-  const plugin = {
-    blockerComponent: null,
-    blockerComponentProps: {},
-    description: pluginDescription,
-    icon,
-    id: pluginId,
-    initializer: Initializer,
-    injectedComponents: [],
-    isReady: false,
-    isRequired: pluginPkg.strapi.required || false,
-    layout: null,
-    lifecycles,
-    mainComponent: App,
-    name,
-    pluginLogo,
-    preventComponentRendering: false,
-    trads,
-    menu: {
-      pluginsSectionLinks: [
-        {
-          destination: `/plugins/${pluginId}`,
-          icon,
-          name,
-          label: {
-            id: `${pluginId}.plugin.name`,
-            defaultMessage: 'COMMENTS',
-          },
-          permissions: pluginPermissions.main,
-        },
-      ],
-    },
-  };
+export default {
+  register(app) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}/discover`,
+      badgeContent: 1,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: name,
+      },
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
 
-  return strapi.registerPlugin(plugin);
+        return component;
+      },
+      permissions: pluginPermissions,
+    });
+    app.addReducers(reducers);
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    });
+  },
+
+  bootstrap(app) {
+    // app.injectContentManagerComponent('editView', 'informations', {
+    //     name: 'comments-link',
+    //     Component: () => 'TODO: Comments count',
+    // });
+  },
+  
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(`./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -0,0 +1,60 @@
+/**
+ *
+ * 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)
+ *
+ */
+
+import React, { useReducer } from 'react';
+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 initReducer from './reducer/init';
+import reducer, { initialState } from './reducer';
+import { setConfig } from './reducer/actions';
+
+const App = () => {
+
+  const toggleNotification = useNotification();
+  const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
+    initReducer(initialState)
+  );
+
+  const { isLoading, isFetching } = useQuery(
+    'get-config', () => fetchConfig(toggleNotification),
+    {
+      initialData: { },
+      onSuccess: (response) => {
+        dispatch(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>
+  );
+};
+
+export default App;

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

@@ -0,0 +1,8 @@
+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.js

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

package/admin/src/pages/App/reducer/index.js

@@ -0,0 +1,27 @@
+import produce from 'immer'; // current
+import { set } from 'lodash';
+import { GET_CONFIG, SET_CONFIG } from './constants';
+
+const initialState = {
+  config: {},
+};
+
+const reducer = (state = initialState, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, draftState => {
+    switch (action.type) {
+      case SET_CONFIG: {
+        set(draftState, 'config', action.data);
+        break;
+      }
+      case GET_CONFIG: {
+        return draftState?.config;
+      }
+      default:
+        console.log('draftState', draftState);
+        return draftState;
+    }
+  });
+
+export default reducer;
+export { initialState };

package/admin/src/pages/App/reducer/init.js

@@ -0,0 +1,7 @@
+const initReducer = (initialState) => {
+    return {
+      ...initialState,
+    };
+  };
+  
+  export default initReducer;

package/admin/src/pages/App/reducer/selectors.js

@@ -0,0 +1,35 @@
+
+   
+import { createSelector } from 'reselect';
+import { initialState } from './';
+import { REDUCER_NAME } from './constants';
+
+/**
+ * Direct selector to the listView state domain
+ */
+const appView = () => state => state[REDUCER_NAME] || initialState;
+
+/**
+ * Other specific selectors
+ */
+
+/**
+ * Default selector used by listView
+ */
+
+const makeAppView = () =>
+  createSelector(
+    appView(),
+    substate => {
+      return substate;
+    }
+  );
+
+const selectConfig = state => {
+  const { config } = state[REDUCER_NAME];
+
+  return config;
+};
+
+export default makeAppView;
+export { appView, selectConfig };

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

@@ -0,0 +1,20 @@
+import { stringify } from 'qs';
+import { isEmpty } from 'lodash';
+
+import { getApiURL, axiosInstance } from '../../../utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchConfig = async (toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(getApiURL(`moderate/config`));
+
+    return data;
+  } catch (err) {
+    toggleNotification({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    throw new Error('error');
+  }
+};

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

@@ -0,0 +1,25 @@
+/*
+ *
+ * Coming soon page
+ *
+ */
+
+import React, { memo } from 'react';
+import { Box } from '@strapi/design-system/Box';
+import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
+import { Layout } from '@strapi/design-system/Layout';
+import { Illo } from '@strapi/icons';
+import getMessage from '../../utils/getMessage';
+import Nav from '../../components/Nav';
+
+const ComingSoonPage = () => {
+  return (<Box background="neutral100">
+  <Layout sideNav={<Nav />}>
+    <Box padding={8} background="neutral100">
+        <EmptyStateLayout icon={<Illo />} content={getMessage('page.coming.soon')} />
+      </Box>
+  </Layout>
+</Box>);
+}
+
+export default memo(ComingSoonPage);

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('button.back.label', '', 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;