strapi-plugin-comments 1.0.4 → 2.0.0-beta.4

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

@@ -0,0 +1,146 @@
+/**
+ *
+ * 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,
+    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 (<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) {
+          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;
+
+    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,
+    onBlockButtonsStateChange: 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/components/icons/index.js

@@ -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

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

@@ -0,0 +1,18 @@
+
+import React from 'react';
+
+const initSize = 24;
+
+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 strokeWidth="1" d="M5.5,21 C7.98528137,21 10,18.9852814 10,16.5 C10,14.0147186 7.98528137,12 5.5,12 C3.01471863,12 1,14.0147186 1,16.5 C1,18.9852814 3.01471863,21 5.5,21 Z M1,16 L1,7 L1,6.5 C1,4.01471863 3.01471863,2 5.5,2 L6,2 M23,16 L23,7 L23,6.5 C23,4.01471863 20.9852814,2 18.5,2 L18,2 M18.5,21 C20.9852814,21 23,18.9852814 23,16.5 C23,14.0147186 20.9852814,12 18.5,12 C16.0147186,12 14,14.0147186 14,16.5 C14,18.9852814 16.0147186,21 18.5,21 Z M10,17 C10,17 10,15 12,15 C14,15 14,17 14,17"/>
+    </g>
+  </svg>
+
+  export default ReviewIcon;

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

@@ -0,0 +1,20 @@
+
+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/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,71 @@
+/**
+ *
+ * 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 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.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,26 @@
+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:
+        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;
+
+  return config;
+};
+
+export default makeAppView;
+export { appView, selectConfig };

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

@@ -0,0 +1,12 @@
+import { getApiURL, axiosInstance, handleAPIError } 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) {
+    handleAPIError(err, toggleNotification);
+  }
+};

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);