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

package/README.md

@@ -50,9 +50,15 @@ Enjoy 🎉
 
 Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under [Installation Requirements](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html).
 
+**Minimum environment requirements**
+- Node.js `>=14.x.x`
+- NPM `>=7.x.x`
+
+In our minimum support we're following [official Node.js releases timelines](https://nodejs.org/en/about/releases/).
+
 **Supported Strapi versions**:
 
-- Strapi v4.0.2 (recently tested)
+- Strapi v4.0.4 (recently tested)
 
 (This plugin is not working with v3.x and not may work with the older Strapi v4 versions, but these are not tested nor officially supported at this time.)
 
@@ -74,8 +80,13 @@ To setup amend default plugin configuration we recommend to put following snippe
 ```js
     ...
     comments: {
-      badWords: false,
-      moderatorRoles: ["Authenticated"]
+        badWords: false,
+        moderatorRoles: ["Authenticated"],
+        approvalFlow: ['api::page.page'],
+        entryLabel: {
+            '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject'],
+            'api::page.page': ['MyField'],
+        },
     },
     ...
 ```
@@ -83,6 +94,8 @@ To setup amend default plugin configuration we recommend to put following snippe
 ### Properties
 - `badWords` - Enabled support for [bad words filtering](https://www.npmjs.com/package/bad-words). Can be turned off or overwritten using [options reference](https://www.npmjs.com/package/bad-words#constructor). Default value: `true`. 
 - `moderatorRoles` - Optional list of names of roles. Users with those roles will be notified by email when a new abuse report is created. This feature requires a built-in [Strapi email plugin](https://docs.strapi.io/developer-docs/latest/plugins/email.html) configured.
+- `approvalFlow` - list of Content Types which are supporting approval flow. Values must be in format like `'api::<collection name>.<content type name>'`. For not included, posted comments are going to be immediately visible. 
+- `entryLabel` - ordered list of property names per Content Type to generate related entity label. Keys must be in format like `'api::<collection name>.<content type name>'`. Default formatting set as `*`.
 
 ## Additional GQL Configuration
 
@@ -215,7 +228,6 @@ Posts a Comment related to specified instance of Content Type like for example `
     },
 	"content": "My sample response",
 	"threadOf": 2, // id of comment we would like to start / continue the thread (Optional)
-	"related": "api::page.page:1"
 }
 ```
 
@@ -225,7 +237,6 @@ Posts a Comment related to specified instance of Content Type like for example `
 	"authorUser": 1, // id of a author user. Optional in case of 'enableUsers: true' in the plugin configuration
 	"content": "My sample response",
 	"threadOf": 2, // id of comment we would like to start / continue the thread (Optional)
-	"related": "api::page.page:1"
 }
 ```
 

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

@@ -34,12 +34,14 @@ const DiscussionThread = ({ level = [], selected = {}, isReloading }) => {
             <Divider />
         </Box>
         <Flex as="ul" direction="column" alignItems="flex-start">
-            { rootThread && (<DiscussionThreadItem {...rootThread} isThreadAuthor root />) }
+            { rootThread && (<DiscussionThreadItem {...rootThread} isThreadAuthor root pinned />) }
             { level.map(item => {
                 const isSelected = selected.id === item.id;
                 const isThreadAuthor = !isNil(selected?.threadOf?.authorId) && (selected?.threadOf?.authorId === item.authorId);
                 return (<DiscussionThreadItem 
+                    key={`comment-${item.id}`}
                     {...item} 
+                    root={isNil(rootThread)}
                     blockedThread={rootThread?.blockedThread || item.blockedThread}
                     isSelected={isSelected} 
                     isThreadAuthor={isThreadAuthor} 

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

@@ -21,7 +21,7 @@ import { getMessage, getUrl } from '../../utils';
 import DiscussionThreadItemWarnings from '../DiscussionThreadItemWarnings';
 
 const DiscussionThreadItem = (item) => {
-    const { id, isSelected, isThreadAuthor, content, root, preview, blocked, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
+    const { id, isSelected, isThreadAuthor, content, root, preview, pinned, blocked, removed, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
 
     let background = 'neutral100';
     let borderColor = 'neutral200';
@@ -62,16 +62,16 @@ const DiscussionThreadItem = (item) => {
                         <Box as={Flex} grow={1} alignItems="center">
                             <Typography variant="omega">{ content }</Typography>
                         </Box>
-                        { !preview && (<DiscussionThreadItemActions { ...item } root={root} />) }
+                        { !preview && (<DiscussionThreadItemActions { ...item } root={root || pinned} />) }
                     </DiscussionThreadItemBoxContent>
-                    { !(preview || isBlocked) && (<DiscussionThreadItemWarnings { ...item } />) }
+                    { !(preview || isBlocked || removed) && (<DiscussionThreadItemWarnings { ...item } gotThread={gotThread || root} />) }
                 </Flex>
                 <Divider background={dividerColor} />
                 <DiscussionThreadItemMeta { ...item } />
             </DiscussionThreadItemBox>
         </DiscussionThreadItemContent>
 
-        { (gotThread && !preview) && (<DiscussionThreadItemLinkBox direction="row" alignItems="flex-end">
+        { (gotThread && !(removed || preview || pinned)) && (<DiscussionThreadItemLinkBox direction="column" alignItems="flex-end">
             <Link to={getUrl(`discover/${threadFirstItemId}`)} endIcon={<ArrowRight />}>
                 { getMessage('page.details.panel.discussion.nav.drilldown') }
             </Link>

package/admin/src/components/DiscussionThreadItem/styles.js

@@ -6,6 +6,7 @@ export const AvatarWrapper = styled(Box)``;
 export const InitialsWrapper = styled(Box)``;
 
 export const DiscussionThreadItemLinkBox = styled(Flex)`
+    width: 100%;
     margin-top: .5rem;
     margin-bottom: .5rem;
 `

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

@@ -4,21 +4,23 @@
  *
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useMutation, useQueryClient } from 'react-query';
 import { isNil } from 'lodash';
 import { Button } from '@strapi/design-system/Button';
 import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
-import { Lock, Check, Cross, Key } from '@strapi/icons';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
-import { getMessage, handleAPIError } from '../../utils';
-import { DiscussionThreadItemActionsBadge, DiscussionThreadItemActionsGroupWrapper, DiscussionThreadItemActionsWrapper } from './styles';
+import { getMessage, handleAPIError, resolveCommentStatus, resolveCommentStatusColor } from '../../utils';
+import { DiscussionThreadItemActionsBadge, DiscussionThreadItemActionsWrapper } from './styles';
 import ConfirmationDialog from '../ConfirmationDialog';
-import { blockItem, blockItemThread, unblockItem, unblockItemThread } from '../../pages/Details/utils/api';
+import { blockItem, blockItemThread, unblockItem, unblockItemThread } from '../../pages/utils/api';
+import pluginId from '../../pluginId';
+import { LockIcon, UnlockIcon } from '../icons';
+import DiscussionThreadItemApprovalFlowActions from '../DiscussionThreadItemApprovalFlowActions';
 
-const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatus, root }) => {
+const DiscussionThreadItemActions = ({ id, blocked, removed, blockedThread, gotThread, pinned, approvalStatus, root }) => {
 
     const [blockConfirmationVisible, setBlockConfirmationVisible] = useState(false);
     const [blockThreadConfirmationVisible, setBlockThreadConfirmationVisible] = useState(false);
@@ -31,7 +33,7 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
         await queryClient.invalidateQueries('get-details-data');
         toggleNotification({
             type: 'success',
-            message,
+            message: `${pluginId}.${message}`,
         });
         stateAction(false);
         unlockApp();
@@ -69,35 +71,16 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
     const gotApprovalFlow = !isNil(approvalStatus);
     const needsApproval = gotApprovalFlow && (approvalStatus === 'PENDING');
     const isBlocked = blocked || blockedThread;
+    const isRejected = gotApprovalFlow && (approvalStatus === 'REJECTED');
 
     const resolveStatusBadge = () => {
-        let color = 'primary';
-        let label = '';
-
-        if (isBlocked) {
-            color = 'danger';
-            label = 'blocked';
-        } else if (gotApprovalFlow) {
-            label = approvalStatus.toLowerCase();
-            switch (approvalStatus) {
-                case 'APPROVED': 
-                    color = 'success';
-                    break;
-                case 'REJECTED': 
-                    color = 'danger';
-                    break;
-                default: 
-                    color = 'alternative';
-                    break;
-            };
-        }
-
+        const status = resolveCommentStatus({ removed, blocked, blockedThread, approvalStatus });
         return {
-            badgeVisible: isBlocked || gotApprovalFlow,
-            badgeColor: color,
-            badgeLabel: label,
-        }
-    }
+            badgeVisible: isBlocked || gotApprovalFlow || removed,
+            badgeColor: resolveCommentStatusColor(status),
+            badgeLabel: status,
+        };
+    };
 
     const {badgeVisible, badgeColor, badgeLabel } = resolveStatusBadge();
 
@@ -127,24 +110,27 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
         unblockItemThreadMutation.mutate(id);
     };
 
+    if (removed || isRejected) {
+        return (<DiscussionThreadItemActionsWrapper as={Flex} direction="row">
+            <DiscussionThreadItemActionsBadge color={badgeColor} backgroundColor={`${badgeColor}100`} textColor={`${badgeColor}600`}>{getMessage(`page.common.item.status.${badgeLabel}`, badgeLabel)}</DiscussionThreadItemActionsBadge>
+        </DiscussionThreadItemActionsWrapper>);
+    }
+
     return (<>
         <DiscussionThreadItemActionsWrapper as={Flex} direction="row">
-            { badgeVisible && (<DiscussionThreadItemActionsBadge color={badgeColor} backgroundColor={`${badgeColor}100`} textColor={`${badgeColor}600`}>{getMessage(`page.details.panel.discussion.status.${badgeLabel}`, badgeLabel)}</DiscussionThreadItemActionsBadge>)}
-            { !blockedThread && !(blocked || needsApproval) && (<IconButton onClick={handleBlockClick} loading={blockItemMutation.isLoading} icon={<Lock />} label={getMessage('page.details.actions.comment.block', 'Block')} />)}
-            { !blockedThread && blocked && (<IconButton onClick={handleUnblockClick} loading={unblockItemMutation.isLoading} icon={<Key />} label={getMessage('page.details.actions.comment.unblock', 'Unblock')} />)}
-            { (!blockedThread && root) && (<Button onClick={handleBlockThreadClick} startIcon={<Lock />} loading={blockItemThreadMutation.isLoading} variant="danger">{ getMessage('page.details.actions.thread.block', 'Block thread') }</Button>) }
-            { (blockedThread && root) && (<Button onClick={handleUnblockThreadClick} startIcon={<Key />} loading={unblockItemThreadMutation.isLoading} variant="success">{ getMessage('page.details.actions.thread.unblock', 'Unblock thread') }</Button>) }
-            { needsApproval && (<DiscussionThreadItemActionsGroupWrapper>
-                <IconButton icon={<Check />} label={getMessage('page.details.actions.comment.approve', 'Approve')} />
-                <IconButton icon={<Cross />} label={getMessage('page.details.actions.comment.reject', 'Reject')} />
-            </DiscussionThreadItemActionsGroupWrapper>) }
+            { badgeVisible && (<DiscussionThreadItemActionsBadge color={badgeColor} backgroundColor={`${badgeColor}100`} textColor={`${badgeColor}600`}>{getMessage(`page.common.item.status.${badgeLabel}`, badgeLabel)}</DiscussionThreadItemActionsBadge>)}
+            { !blockedThread && !(blocked || needsApproval) && (<IconButton onClick={handleBlockClick} loading={blockItemMutation.isLoading} icon={<LockIcon />} label={getMessage('page.details.actions.comment.block', 'Block')} style={(!blockedThread && root) ? { marginTop: '1px', marginRight: '.5rem' } : {}} />)}
+            { !blockedThread && blocked && (<IconButton onClick={handleUnblockClick} loading={unblockItemMutation.isLoading} icon={<UnlockIcon />} label={getMessage('page.details.actions.comment.unblock', 'Unblock')}  style={(blocked && !blockedThread) ? { marginTop: '1px', marginRight: '.5rem' } : {}} />)}
+            { (!blockedThread && (gotThread || pinned)) && (<Button onClick={handleBlockThreadClick} startIcon={<LockIcon />} loading={blockItemThreadMutation.isLoading} variant="danger">{ getMessage('page.details.actions.thread.block', 'Block thread') }</Button>) }
+            { (blockedThread && (gotThread || pinned)) && (<Button onClick={handleUnblockThreadClick} startIcon={<UnlockIcon />} loading={unblockItemThreadMutation.isLoading} variant="success">{ getMessage('page.details.actions.thread.unblock', 'Unblock thread') }</Button>) }
+            { needsApproval && (<DiscussionThreadItemApprovalFlowActions id={id} queryToInvalidate="get-details-data" />) }
         </DiscussionThreadItemActionsWrapper>
         { !blocked && (<ConfirmationDialog 
             isVisible={blockConfirmationVisible}
             isActionAsync={blockItemMutation.isLoading}
             header={getMessage('page.details.actions.comment.block.confirmation.header')}
             labelConfirm={getMessage('page.details.actions.comment.block.confirmation.button.confirm')}
-            iconConfirm={<Lock />}
+            iconConfirm={<LockIcon />}
             onConfirm={handleBlockConfirm} 
             onCancel={handleBlockCancel}>
                 { getMessage('page.details.actions.comment.block.confirmation.description') }
@@ -154,7 +140,7 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
             isActionAsync={blockItemThreadMutation.isLoading}
             header={getMessage('page.details.actions.thread.block.confirmation.header')}
             labelConfirm={getMessage('page.details.actions.thread.block.confirmation.button.confirm')}
-            iconConfirm={<Lock />}
+            iconConfirm={<LockIcon />}
             onConfirm={handleBlockThreadConfirm} 
             onCancel={handleBlockThreadCancel}>
                 { getMessage('page.details.actions.thread.block.confirmation.description') }

package/admin/src/components/DiscussionThreadItemActions/styles.js

@@ -15,8 +15,4 @@ export const DiscussionThreadItemActionsWrapper = styled(Box)`
         margin-top: .175rem;
         margin-right: .5rem;
     }
-`;
-
-export const DiscussionThreadItemActionsGroupWrapper = styled(IconButtonGroup)`
-    margin-left: .5rem;
 `;

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

@@ -0,0 +1,72 @@
+/**
+ *
+ * Approval Flow Actions
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useMutation, useQueryClient } from 'react-query';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Check, Cross } from '@strapi/icons';
+import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { getMessage, handleAPIError } from '../../utils';
+import { DiscussionThreadItemActionsGroupWrapper } from './styles';
+import { approveItem, rejectItem } from '../../pages/utils/api';
+import pluginId from '../../pluginId';
+
+const DiscussionThreadItemApprovalFlowActions = ({ id, queryToInvalidate }) => {
+
+    const toggleNotification = useNotification();
+    const queryClient = useQueryClient();
+    const { lockApp, unlockApp } = useOverlayBlocker();
+
+    const onSuccess = (message, stateAction = () => {}) => async () => {
+        if (queryToInvalidate) {
+            await queryClient.invalidateQueries(queryToInvalidate);
+        }
+        toggleNotification({
+            type: 'success',
+            message: `${pluginId}.${message}`,
+        });
+        unlockApp();
+    };
+
+    const onError = err => { handleAPIError(err, toggleNotification); };
+
+    const approveItemMutation = useMutation(approveItem, {
+        onSuccess: onSuccess('page.details.actions.comment.approve.confirmation.success'),
+        onError,
+        refetchActive: false,
+    });
+    const rejectItemMutation = useMutation(rejectItem, {
+        onSuccess: onSuccess('page.details.actions.comment.reject.confirmation.success'),
+        onError,
+        refetchActive: false,
+    });
+
+
+    const handleApproveClick = () => {
+        lockApp();
+        approveItemMutation.mutate(id);
+    };
+
+    const handleRejectClick = () => {
+        lockApp();
+        rejectItemMutation.mutate(id);
+    };
+
+    return (<DiscussionThreadItemActionsGroupWrapper>
+        <IconButton icon={<Check />} label={getMessage('page.details.actions.comment.approve', 'Approve')} onClick={handleApproveClick} />
+        <IconButton icon={<Cross />} label={getMessage('page.details.actions.comment.reject', 'Reject')} onClick={handleRejectClick} />
+    </DiscussionThreadItemActionsGroupWrapper>);
+};
+
+DiscussionThreadItemApprovalFlowActions.propTypes = {
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    queryToInvalidate: PropTypes.string,
+    wrapped: PropTypes.bool,
+};
+
+export default DiscussionThreadItemApprovalFlowActions;
+ 

package/admin/src/components/DiscussionThreadItemApprovalFlowActions/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { IconButtonGroup } from '@strapi/design-system/IconButton';
+
+export const DiscussionThreadItemActionsGroupWrapper = styled(IconButtonGroup)`
+    margin-left: .5rem;
+`;

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

@@ -5,7 +5,6 @@
  */
 
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { useMutation, useQueryClient } from 'react-query';
 import { isEmpty, orderBy } from 'lodash';
 import { Badge } from '@strapi/design-system/Badge';
@@ -14,18 +13,20 @@ import { Button } from '@strapi/design-system/Button';
 import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
-import { ArrowRight, Lock } from '@strapi/icons';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import { getMessage, handleAPIError } from '../../utils';
-import { blockItem, blockItemThread, resolveReport } from '../../pages/Details/utils/api';
+import { blockItem, blockItemThread, resolveReport } from '../../pages/utils/api';
 import { DiscussionThreadItemWarningsWrapper } from './styles';
 import ReportsReviewModal from '../ReportsReviewModal';
 import ReportsReviewTable from '../ReportsReviewTable';
+import pluginId from '../../pluginId';
+import { LockIcon, ReviewIcon } from '../icons';
 
 const DiscussionThreadItemWarnings = (item) => {
-    const { id, reports } = item;
+    const { id, reports, gotThread } = item;
 
     const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
+    const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
 
     const toggleNotification = useNotification();
     const queryClient = useQueryClient();
@@ -37,7 +38,7 @@ const DiscussionThreadItemWarnings = (item) => {
         }
         toggleNotification({
             type: 'success',
-            message,
+            message: `${pluginId}.${message}`,
         });
         stateAction(false);
         unlockApp();
@@ -82,6 +83,8 @@ const DiscussionThreadItemWarnings = (item) => {
         setReportsReviewVisible(false);
     };
 
+    const handleBlockButtonsStateChange = disabled => setBlockButtonsDisabled(disabled);
+
     const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading || resolveReportMutation.isLoading;
     const openReports = reports?.filter(_ => !_.resolved);
 
@@ -97,7 +100,7 @@ const DiscussionThreadItemWarnings = (item) => {
                     <Typography textColor="warning600" fontWeight="bold">{getMessage(`page.details.panel.discussion.warnings.reports.description`, 'abuse reports')}</Typography>
                 </Box>
             </Box>
-            <Button onClick={handleReportsReviewClick} variant="ghost" endIcon={<ArrowRight />}>
+            <Button onClick={handleReportsReviewClick} variant="ghost" endIcon={<ReviewIcon />}>
                 { getMessage(`page.details.actions.comment.report.review`, 'review') }
             </Button>
         </DiscussionThreadItemWarningsWrapper>
@@ -106,12 +109,12 @@ const DiscussionThreadItemWarnings = (item) => {
             isActionAsync={isLoading}
             onClose={handleReportsReviewClose}
             startActions={<>
-                <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<Lock />}>
+                <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                     { getMessage(`page.details.actions.comment.block`, 'Block comment') }
                 </Button>
-                <Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<Lock />}>
+                { gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                     { getMessage(`page.details.actions.thread.block`, 'Block thread') }
-                </Button>
+                </Button>) }
             </>}
             item={item}>
                 <Typography variant="sigma" textColor="neutral600" id="reports-list">
@@ -124,6 +127,7 @@ const DiscussionThreadItemWarnings = (item) => {
                     commentId={item.id} 
                     items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
                     mutation={resolveReportMutation}
+                    onBlockButtonsStateChange={handleBlockButtonsStateChange}
                 />
         </ReportsReviewModal>
     </>);

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

@@ -18,7 +18,11 @@ import getMessage from '../../utils/getMessage';
 // import PropTypes from 'prop-types';
 import getUrl from '../../utils/getUrl';
 
-const Nav = ({ hasNewComments, hasNewReports }) => {
+const Nav = ({ visible = false, hasNewComments, hasNewReports }) => {
+  if (!visible) {
+    return null;
+  }
+
   return <SubNav ariaLabel="Comments sub nav">
     <SubNavHeader label={getMessage('plugin.name')} />
     <SubNavSections>

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

@@ -13,7 +13,6 @@ import DiscussionThreadItem from '../DiscussionThreadItem';
 
 const ReportsReviewModal = ({ 
     isVisible = false,
-    isActionAsync = false,
     item,
     children, 
     onClose, 
@@ -34,7 +33,6 @@ const ReportsReviewModal = ({
 
   ReportsReviewModal.propTypes = {
     isVisible: PropTypes.bool,
-    isActionAsync: PropTypes.bool,
     startActions: PropTypes.array,
     endActions: PropTypes.array,
     item: PropTypes.object.isRequired,

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

@@ -23,7 +23,8 @@ import { REPORT_REASON, REPORT_STATUS } from '../../utils/constants';
 const ReportsReviewTable = ({ 
     commentId,
     items,
-    mutation
+    mutation,
+    onBlockButtonsStateChange,
 }) => {
 
     const [storedItems, setStoredItems] = useState([]);
@@ -65,10 +66,12 @@ const ReportsReviewTable = ({
         });
         console.log(item);
         if (item) {
-            setStoredItems(storedItems.map(_ => ({
-                ..._,
-                resolved: reportId === _.id ? true : _.resolved,
-            })));
+          const updatedItems = storedItems.map(_ => ({
+              ..._,
+              resolved: reportId === _.id ? true : _.resolved,
+          }));
+          setStoredItems(updatedItems);
+          onBlockButtonsStateChange(updatedItems.filter(_ => !_.resolved).length === 0);
         }
     }
 
@@ -137,6 +140,7 @@ 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/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 = 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 fill-rule="evenodd" clip-rule="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

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

@@ -4,6 +4,7 @@ import pluginId from './pluginId';
 import Initializer from './components/Initializer';
 import PluginIcon from './components/PluginIcon';
 import pluginPermissions from './permissions';
+import reducers from './reducers';
 
 const name = pluginPkg.strapi.name;
 
@@ -24,6 +25,7 @@ export default {
       },
       permissions: pluginPermissions,
     });
+    app.addReducers(reducers);
     app.registerPlugin({
       id: pluginId,
       initializer: Initializer,
@@ -33,10 +35,10 @@ export default {
   },
 
   bootstrap(app) {
-    app.injectContentManagerComponent('editView', 'informations', {
-        name: 'comments-link',
-        Component: () => 'TODO: Comments count',
-    });
+    // app.injectContentManagerComponent('editView', 'informations', {
+    //     name: 'comments-link',
+    //     Component: () => 'TODO: Comments count',
+    // });
   },
   
   async registerTrads({ locales }) {

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

@@ -6,15 +6,41 @@
  */
 
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
 import { Switch, Route } from 'react-router-dom';
-import { NotFound } from '@strapi/helper-plugin';
+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 />)
+  }
 
-const App = () => {
   return (
     <div>
       <Switch>
@@ -29,4 +55,17 @@ const App = () => {
   );
 };
 
-export default App;
+const mapStateToProps = makeAppView();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    { setConfig },
+    dispatch
+  );
+}
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps
+);
+
+export default compose(withConnect)(App);