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

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

@@ -0,0 +1,88 @@
+import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+
+export const AvatarWrapper = styled(Box)``;
+export const InitialsWrapper = styled(Box)``;
+
+export const DiscussionThreadItemLinkBox = styled(Flex)`
+    width: 100%;
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+`
+
+const DiscussionThreadItemStyled = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 1rem;
+
+    ${AvatarWrapper},
+    ${InitialsWrapper} {
+        align-self: flex-start;
+        margin-top: .4rem;
+    }
+`;
+
+export const DiscussionThreadItemContent = styled(Box)`
+    max-width: 45%;
+`;
+
+export const DiscussionThreadItemLeft = styled(DiscussionThreadItemStyled)`
+    align-items: flex-start;
+    padding-left: 4rem;
+    text-align: left;
+
+    ${DiscussionThreadItemContent} {
+        align-self: flex-start;
+    }
+
+    ${AvatarWrapper},
+    ${InitialsWrapper} {
+        margin-right: 1rem;
+    }
+`;
+
+export const DiscussionThreadItemRight = styled(DiscussionThreadItemStyled)`
+    align-items: flex-end;
+    padding-right: 4rem;
+    text-align: left;
+
+    ${DiscussionThreadItemContent} {
+        align-self: flex-end;
+        flex-direction: row-reverse;
+    }
+
+    ${AvatarWrapper},
+    ${InitialsWrapper} {
+        margin-left: 1rem;
+    }
+
+    ${DiscussionThreadItemLinkBox} {
+        margin-right: 3rem;
+    }
+`;
+
+export const DiscussionThreadItemBox = styled(Box)`
+    
+`;
+
+export const DiscussionThreadItemBoxContent = styled(Box)`
+    width: 100%;
+    align-items: stretch;
+`
+
+export const DiscussionThreadItemRoot = styled(DiscussionThreadItemLeft)`
+    padding-left: 0;
+    padding-right: 0;
+
+
+    ${DiscussionThreadItemContent} {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    ${DiscussionThreadItemBox} {
+        flex-grow: 1;
+    }
+`;

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

@@ -0,0 +1,178 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React, { useState, useEffect } 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 { Check, Cross } from '@strapi/icons';
+import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { getMessage, handleAPIError } from '../../utils';
+import { DiscussionThreadItemActionsBadge, DiscussionThreadItemActionsGroupWrapper, DiscussionThreadItemActionsWrapper } from './styles';
+import ConfirmationDialog from '../ConfirmationDialog';
+import { blockItem, blockItemThread, unblockItem, unblockItemThread } from '../../pages/Details/utils/api';
+import pluginId from '../../pluginId';
+import { LockIcon, UnlockIcon } from '../icons';
+
+const DiscussionThreadItemActions = ({ id, blocked, blockedThread, gotThread, pinned, approvalStatus, root }) => {
+
+    const [blockConfirmationVisible, setBlockConfirmationVisible] = useState(false);
+    const [blockThreadConfirmationVisible, setBlockThreadConfirmationVisible] = useState(false);
+
+    const toggleNotification = useNotification();
+    const queryClient = useQueryClient();
+    const { lockApp, unlockApp } = useOverlayBlocker();
+
+    const onSuccess = (message, stateAction = () => {}) => async () => {
+        await queryClient.invalidateQueries('get-details-data');
+        toggleNotification({
+            type: 'success',
+            message: `${pluginId}.${message}`,
+        });
+        stateAction(false);
+        unlockApp();
+    };
+
+    const onError = err => { handleAPIError(err, toggleNotification); };
+
+    const blockItemMutation = useMutation(blockItem, {
+        onSuccess: onSuccess(
+            'page.details.actions.comment.block.confirmation.success', 
+            setBlockConfirmationVisible
+        ),
+        onError,
+        refetchActive: false,
+    });
+    const unblockItemMutation = useMutation(unblockItem, {
+        onSuccess: onSuccess('page.details.actions.comment.unblock.confirmation.success'),
+        onError,
+        refetchActive: false,
+    });
+    const blockItemThreadMutation = useMutation(blockItemThread, {
+        onSuccess: onSuccess(
+            'page.details.actions.thread.block.confirmation.success', 
+            setBlockThreadConfirmationVisible
+        ),
+        onError,
+        refetchActive: false,
+    });
+    const unblockItemThreadMutation = useMutation(unblockItemThread, {
+        onSuccess: onSuccess('page.details.actions.thread.unblock.confirmation.success'),
+        onError,
+        refetchActive: false,
+    });
+
+    const gotApprovalFlow = !isNil(approvalStatus);
+    const needsApproval = gotApprovalFlow && (approvalStatus === 'PENDING');
+    const isBlocked = blocked || blockedThread;
+
+    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;
+            };
+        }
+
+        return {
+            badgeVisible: isBlocked || gotApprovalFlow,
+            badgeColor: color,
+            badgeLabel: label,
+        }
+    }
+
+    const {badgeVisible, badgeColor, badgeLabel } = resolveStatusBadge();
+
+    const handleBlockClick = () => setBlockConfirmationVisible(true);
+    const handleBlockConfirm = async () => {
+        lockApp();
+        blockItemMutation.mutate(id);
+    };
+    const handleBlockCancel = () => {
+        setBlockConfirmationVisible(false);
+    };
+    const handleUnblockClick = async () => {
+        lockApp();
+        unblockItemMutation.mutate(id);
+    };
+
+    const handleBlockThreadClick = () => setBlockThreadConfirmationVisible(true);
+    const handleBlockThreadConfirm = async () => {
+        lockApp();
+        blockItemThreadMutation.mutate(id);
+    };
+    const handleBlockThreadCancel = () => {
+        setBlockThreadConfirmationVisible(false);
+    };
+    const handleUnblockThreadClick = async () => {
+        lockApp();
+        unblockItemThreadMutation.mutate(id);
+    };
+
+    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={<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')} />)}
+            { (!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 && (<DiscussionThreadItemActionsGroupWrapper>
+                <IconButton icon={<Check />} label={getMessage('page.details.actions.comment.approve', 'Approve')} />
+                <IconButton icon={<Cross />} label={getMessage('page.details.actions.comment.reject', 'Reject')} />
+            </DiscussionThreadItemActionsGroupWrapper>) }
+        </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={<LockIcon />}
+            onConfirm={handleBlockConfirm} 
+            onCancel={handleBlockCancel}>
+                { getMessage('page.details.actions.comment.block.confirmation.description') }
+        </ConfirmationDialog>) }
+        { (!blockedThread && root) && (<ConfirmationDialog 
+            isVisible={blockThreadConfirmationVisible}
+            isActionAsync={blockItemThreadMutation.isLoading}
+            header={getMessage('page.details.actions.thread.block.confirmation.header')}
+            labelConfirm={getMessage('page.details.actions.thread.block.confirmation.button.confirm')}
+            iconConfirm={<LockIcon />}
+            onConfirm={handleBlockThreadConfirm} 
+            onCancel={handleBlockThreadCancel}>
+                { getMessage('page.details.actions.thread.block.confirmation.description') }
+        </ConfirmationDialog>) }
+    </>);
+};
+
+DiscussionThreadItemActions.propTypes = {
+    isRoot: PropTypes.bool,
+    blocked: PropTypes.bool.isRequired,
+    blockedThread: PropTypes.bool.isRequired,
+    approvalStatus: PropTypes.oneOfType([PropTypes.nullable, PropTypes.oneOf(['PENDING', 'APPROVED', 'REJECTED'])]),
+    onBlockClick: PropTypes.func.isRequired,
+    onUnBlockClick: PropTypes.func.isRequired,
+    onApprovalGroupClick: PropTypes.func.isRequired,
+};
+
+export default DiscussionThreadItemActions;
+ 

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+import { Badge } from '@strapi/design-system/Badge';
+import { IconButtonGroup } from '@strapi/design-system/IconButton';
+
+export const DiscussionThreadItemActionsBadge = styled(Badge)`
+    border: 1px ${ ({ theme, color }) => theme.colors[`${color}200`] } solid;
+`;
+
+export const DiscussionThreadItemActionsWrapper = styled(Box)`
+    margin-left: 1rem;
+    align-items: start;
+
+    ${DiscussionThreadItemActionsBadge} {
+        margin-top: .175rem;
+        margin-right: .5rem;
+    }
+`;
+
+export const DiscussionThreadItemActionsGroupWrapper = styled(IconButtonGroup)`
+    margin-left: .5rem;
+`;

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

@@ -0,0 +1,31 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import { Typography } from '@strapi/design-system/Typography';
+
+const DiscussionThreadItemMeta = ({ authorName, authorEmail, createdAt, updatedAt }) => {
+
+    const { formatDate } = useIntl();
+
+    const dateTime = formatDate(updatedAt || createdAt, { dateStyle: 'short', timeStyle: 'short' });
+
+    return (<Flex as={Box} paddingTop={2} direction="row" justifyContent="space-between">
+        <Typography variant="pi" fontWeight="bold">{ authorName }</Typography>
+        <Typography variant="pi">{ dateTime }</Typography>
+    </Flex>);
+};
+
+DiscussionThreadItemMeta.propTypes = {
+
+};
+
+export default DiscussionThreadItemMeta;
+ 

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

@@ -0,0 +1,141 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React, { useState } from 'react';
+import { useMutation, useQueryClient } from 'react-query';
+import { isEmpty, orderBy } from 'lodash';
+import { Badge } from '@strapi/design-system/Badge';
+import { Box } from '@strapi/design-system/Box';
+import { Button } from '@strapi/design-system/Button';
+import { Divider } from '@strapi/design-system/Divider';
+import { Flex } from '@strapi/design-system/Flex';
+import { Typography } from '@strapi/design-system/Typography';
+import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { getMessage, handleAPIError } from '../../utils';
+import { blockItem, blockItemThread, resolveReport } from '../../pages/Details/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, gotThread } = item;
+
+    const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
+    const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
+
+    const toggleNotification = useNotification();
+    const queryClient = useQueryClient();
+    const { lockApp, unlockApp } = useOverlayBlocker();
+
+    const onSuccess = (message, stateAction = () => {}, indalidate = true) => async () => {
+        if (indalidate) {
+            await queryClient.invalidateQueries('get-details-data');
+        }
+        toggleNotification({
+            type: 'success',
+            message: `${pluginId}.${message}`,
+        });
+        stateAction(false);
+        unlockApp();
+    };
+
+    const onError = err => { handleAPIError(err, toggleNotification); };
+
+    const resolveReportMutation = useMutation(resolveReport, {
+        onSuccess: onSuccess('page.details.panel.discussion.warnings.reports.dialog.confirmation.success', () => {}, false),
+        onError,
+        refetchActive: false,
+    });
+
+    const blockItemMutation = useMutation(blockItem, {
+        onSuccess: onSuccess(
+            'page.details.actions.comment.block.confirmation.success', 
+            setReportsReviewVisible
+        ),
+        onError,
+        refetchActive: false,
+    });
+    const blockItemThreadMutation = useMutation(blockItemThread, {
+        onSuccess: onSuccess(
+            'page.details.actions.thread.block.confirmation.success', 
+            setReportsReviewVisible
+        ),
+        onError,
+        refetchActive: false,
+    });
+
+    const handleReportsReviewClick = () => setReportsReviewVisible(true);
+    const handleBlockItemClick = async () => {
+        lockApp();
+        blockItemMutation.mutate(id);
+    };
+    const handleBlockItemThreadClick = async () => {
+        lockApp();
+        blockItemThreadMutation.mutate(id);
+    };
+    const handleReportsReviewClose = async () => {
+        await queryClient.invalidateQueries('get-details-data')
+        setReportsReviewVisible(false);
+    };
+
+    const handleBlockButtonsStateChange = disabled => setBlockButtonsDisabled(disabled);
+
+    const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading || resolveReportMutation.isLoading;
+    const openReports = reports?.filter(_ => !_.resolved);
+
+    if (isEmpty(reports) || isEmpty(openReports)) {
+        return null;
+    }
+
+    return (<>
+        <DiscussionThreadItemWarningsWrapper as={Flex} direction="row" padding={2} background="danger100" borderColor="danger200" border={1} hasRadius>
+            <Box as={Flex} paddingRight={2} direction="row" grow={1}>
+                <Badge textColor="neutral0" backgroundColor="warning600">{ openReports.length }</Badge>
+                <Box paddingLeft={2}>
+                    <Typography textColor="warning600" fontWeight="bold">{getMessage(`page.details.panel.discussion.warnings.reports.description`, 'abuse reports')}</Typography>
+                </Box>
+            </Box>
+            <Button onClick={handleReportsReviewClick} variant="ghost" endIcon={<ReviewIcon />}>
+                { getMessage(`page.details.actions.comment.report.review`, 'review') }
+            </Button>
+        </DiscussionThreadItemWarningsWrapper>
+        <ReportsReviewModal 
+            isVisible={reportsReviewVisible}
+            isActionAsync={isLoading}
+            onClose={handleReportsReviewClose}
+            startActions={<>
+                <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
+                    { getMessage(`page.details.actions.comment.block`, 'Block comment') }
+                </Button>
+                { gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
+                    { getMessage(`page.details.actions.thread.block`, 'Block thread') }
+                </Button>) }
+            </>}
+            item={item}>
+                <Typography variant="sigma" textColor="neutral600" id="reports-list">
+                    { getMessage('page.details.panel.discussion.warnings.reports.list', 'List') }
+                </Typography>
+                <Box paddingTop={2} paddingBottom={6}>
+                    <Divider />
+                </Box>
+                <ReportsReviewTable
+                    commentId={item.id} 
+                    items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
+                    mutation={resolveReportMutation}
+                    onBlockButtonsStateChange={handleBlockButtonsStateChange}
+                />
+        </ReportsReviewModal>
+    </>);
+};
+
+DiscussionThreadItemWarnings.propTypes = {
+
+};
+
+export default DiscussionThreadItemWarnings;
+ 

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+
+export const DiscussionThreadItemWarningsWrapper = styled(Box)`
+    width: 100%;
+    margin-top: .5rem;
+`;

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

@@ -0,0 +1,53 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isNil } 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';
+
+const EntityDetails = ({ data = {}, schema = {} }) => {
+    const { attributes = {} } = schema;
+    const keys = Object.keys(attributes);
+    
+    if (keys.length === 0) {
+        return null;
+    }
+
+    const itemKeys = keys.filter(_ => (attributes[_].type === 'string') && !isNil(data[_]));
+
+    return (<Box padding={4}>
+        <Typography variant="sigma" textColor="neutral600" id="entity-details">
+            { getMessage('page.details.panel.entity', 'Details') }
+        </Typography>
+        <Box paddingTop={2} paddingBottom={6}>
+            <Divider />
+        </Box>
+        <Stack size={itemKeys.length}>
+            {  itemKeys.map(_ => 
+            (<Flex justifyContent="space-between">
+                <Typography fontWeight="bold">
+                    { _ }
+                </Typography>
+                <Typography>{ data[_] }</Typography>
+            </Flex>))
+            }
+        </Stack>
+    </Box>);
+};
+
+EntityDetails.propTypes = {
+    data: PropTypes.object.isRequired,
+    schema: PropTypes.object.isRequired,
+};
+
+export default EntityDetails;
+ 

package/admin/src/{containers → components}/Initializer/index.js

@@ -8,19 +8,19 @@ import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import pluginId from '../../pluginId';
 
-const Initializer = ({ updatePlugin }) => {
+const Initializer = ({ setPlugin }) => {
   const ref = useRef();
-  ref.current = updatePlugin;
+  ref.current = setPlugin;
 
   useEffect(() => {
-    ref.current(pluginId, 'isReady', true);
+    ref.current(pluginId);
   }, []);
 
   return null;
 };
 
 Initializer.propTypes = {
-  updatePlugin: PropTypes.func.isRequired,
+  setPlugin: PropTypes.func.isRequired,
 };
 
 export default Initializer;

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

@@ -0,0 +1,15 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+ import React from 'react';
+ import { LoadingIndicatorPage } from '@strapi/helper-plugin';
+import { LoadingIndicatorOverlayWrapper } from './styles';
+
+const LoadingIndicatorOverlay = () => (<LoadingIndicatorOverlayWrapper>
+    <LoadingIndicatorPage />
+</LoadingIndicatorOverlayWrapper>);
+
+  export default LoadingIndicatorOverlay;

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+
+export const LoadingIndicatorOverlayWrapper = styled(Box)`
+    height: 100% !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: rgba(255,255,255,.7);
+    z-index: 1;
+
+    &>div {
+        height: 100% !important;
+    }
+`;
+
+export const LoadingIndicatorContainer = styled((props) => props.as)`
+    position: relative;
+`

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

@@ -0,0 +1,45 @@
+/*
+ *
+ * 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 = ({ hasNewComments, hasNewReports }) => {
+  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/PluginIcon/index.js

@@ -0,0 +1,12 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from 'react';
+import CommentsIcon from "../icons/comments"
+
+const PluginIcon = () => <CommentsIcon />;
+
+export default PluginIcon;