strapi-plugin-comments 2.0.11 → 2.1.1

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

@@ -1,49 +0,0 @@
-/*
- *
- * Nav
- *
- */
-
-import React from 'react';
-import {
-  SubNav,
-  SubNavHeader,
-  SubNavSection,
-  SubNavSections,
-  SubNavLink,
-} from '@strapi/design-system/SubNav';
-import { ExclamationMarkCircle, Apps } from '@strapi/icons';
-import getMessage from '../../utils/getMessage';
-
-// import PropTypes from 'prop-types';
-import getUrl from '../../utils/getUrl';
-
-const Nav = ({ visible = false, hasNewComments, hasNewReports }) => {
-  if (!visible) {
-    return null;
-  }
-
-  return <SubNav ariaLabel="Comments sub nav">
-    <SubNavHeader label={getMessage('plugin.name')} />
-    <SubNavSections>
-      <SubNavLink to={ getUrl('dashboard') } withBullet={hasNewComments} icon={<Apps />}>
-        { getMessage('nav.item.updates') }
-      </SubNavLink>
-      <SubNavSection label={getMessage('nav.header.moderation')}>
-        <SubNavLink to={ getUrl('discover') } icon={<Apps />}>
-          { getMessage('nav.item.discover') }
-        </SubNavLink>
-        <SubNavLink to={ getUrl('reports') } withBullet={hasNewReports} icon={<Apps />}>
-          { getMessage('nav.item.reports') }
-        </SubNavLink>
-      </SubNavSection>
-      <SubNavSection label={getMessage('nav.header.settings')}>
-        <SubNavLink to={ getUrl('settings') } icon={<Apps />}>
-          { getMessage('nav.item.settings') }
-        </SubNavLink>
-      </SubNavSection>
-    </SubNavSections>
-  </SubNav>;
-}
-
-export default Nav;

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

@@ -1,48 +0,0 @@
-/**
- *
- * Entity Details
- *
- */
-
- import React from 'react';
- import PropTypes from 'prop-types';
- import { ModalLayout, ModalBody, ModalHeader, ModalFooter } from '@strapi/design-system/ModalLayout';
- import { Typography } from '@strapi/design-system/Typography';
-import { getMessage } from '../../utils';
-import DiscussionThreadItem from '../DiscussionThreadItem';
-
-const ReportsReviewModal = ({ 
-    isVisible = false,
-    item,
-    children, 
-    onClose, 
-    startActions,
-    endActions,
-}) => ( isVisible && 
-    (<ModalLayout onClose={onClose}>
-        <ModalHeader>
-            <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.header', 'Open reports') }</Typography>
-        </ModalHeader>
-        <ModalBody>
-            <DiscussionThreadItem as="div" {...item} root preview isSelected={true} />
-            { children }
-        </ModalBody>
-        <ModalFooter variant="tertiary" startActions={startActions} endActions={endActions} />
-    </ModalLayout>)
-  );
-
-  ReportsReviewModal.propTypes = {
-    isVisible: PropTypes.bool,
-    startActions: PropTypes.array,
-    endActions: PropTypes.array,
-    item: PropTypes.object.isRequired,
-    children: PropTypes.array.isRequired,
-    allowedActions: PropTypes.shape({
-        canModerate: PropTypes.bool, 
-        canAccessReports: PropTypes.bool,
-        canReviewReports: PropTypes.bool, 
-    }),
-    onClose: PropTypes.func.isRequired,
-};
-
-  export default ReportsReviewModal;

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

@@ -1,160 +0,0 @@
-/**
- *
- * Entity Details
- *
- */
-
- 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.js

@@ -1,17 +0,0 @@
-/**
- *
- * Status badge
- *
- */
-
- 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.js

@@ -1,17 +0,0 @@
-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/icons/comments.js

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

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

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

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

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-/*
- *
- * 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/components/DetailsEntity/index.js

@@ -1,84 +0,0 @@
-/**
- *
- * Entity Details
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { capitalize, isNil, isEmpty, first, take } from 'lodash';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { getMessage } from '../../../../utils';
-import DetailsFilters from '../DetailsFilters';
-
-const DetailsEntity = ({ 
-    data = {}, 
-    schema = {}, 
-    config = {}, 
-    filters,
-    onFiltersChange
-}) => {
-    const { entryLabel = {} } = config;
-    const { attributes = {} } = schema;
-    const keys = Object.keys(attributes);
-    const entityLabelKey = first(entryLabel[data?.uid]);
- 
-    const FIELDS_LIMIT = 5;
-    const itemKeys = take(
-        keys.filter(_ => (attributes[_].type === 'string') && !isNil(data[_]) && (_ !== entityLabelKey)),
-        FIELDS_LIMIT
-    );
-
-    const formatLabel = (label = '') => label.split('_')
-        .map(_ => capitalize(_))
-        .join(' ');
-
-    const entityIsRenderable = data && !isEmpty(data) && !isEmpty(itemKeys);
-
-    return (<Box padding={4}>
-        { entityIsRenderable && (<Box marginBottom={4}>
-            <Typography variant="sigma" textColor="neutral600" id="entity-details">
-                { getMessage('page.details.panel.entity', 'Details') }
-            </Typography>
-            <Box paddingTop={2} paddingBottom={4}>
-                <Divider />
-            </Box>
-            <Stack size={itemKeys.length}>
-                <Flex direction="column" alignItems="flex-start">
-                    <Typography fontWeight="bold">{ formatLabel(entityLabelKey) }</Typography>
-                    <Typography>{ data[entityLabelKey] }</Typography>
-                </Flex>
-                {  itemKeys.map(_ => 
-                    (<Flex key={`prop_${_}`} direction="column" alignItems="flex-start">
-                        <Typography fontWeight="bold">{ formatLabel(_) }</Typography>
-                        <Typography>{ data[_] }</Typography>
-                    </Flex>))
-                }
-            </Stack>
-        </Box>) }
-        <Box>
-            <Typography variant="sigma" textColor="neutral600" id="view-filters">
-                { getMessage('page.details.filters.label', 'View') }
-            </Typography>
-            <Box paddingTop={2} paddingBottom={4}>
-                <Divider />
-            </Box>
-            <DetailsFilters data={filters} onChange={onFiltersChange} />
-        </Box>
-    </Box>);
-};
-
-DetailsEntity.propTypes = {
-    data: PropTypes.object.isRequired,
-    schema: PropTypes.object.isRequired,
-    config: PropTypes.object.isRequired,
-    filters: PropTypes.object.isRequired,
-    onFiltersChange: PropTypes.func.isRequired,
-};
-
-export default DetailsEntity;
-