strapi-plugin-comments 2.0.10 → 2.1.0

package/admin/src/pages/Discover/components/DiscoverTableRow/index.js

@@ -1,64 +1,85 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { useMutation, useQueryClient } from 'react-query';
-import { isNil, isEmpty } from 'lodash';
-import { Avatar, Initials } from '@strapi/design-system/Avatar';
-import { Flex } from '@strapi/design-system/Flex'; 
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Link } from '@strapi/design-system/Link';
-import { Stack } from '@strapi/design-system/Stack';
-import { Tr, Td } from '@strapi/design-system/Table'; 
-import { Typography } from '@strapi/design-system/Typography'; 
-import { Eye } from '@strapi/icons';
-import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
-import { getMessage, getUrl, handleAPIError, renderInitials, resolveCommentStatus, resolveCommentStatusColor } from '../../../../utils';
-import { blockItem, blockItemThread } from '../../../utils/api';
-import pluginId from '../../../../pluginId';
-import { ReviewIcon, LockIcon } from '../../../../components/icons';
-import { TableLink } from './styles';
-import renderEntryTitle from '../../../../utils/renderEntryTitle';
-import DiscussionThreadItemApprovalFlowActions from '../../../../components/DiscussionThreadItemApprovalFlowActions';
-import StatusBadge from '../../../../components/StatusBadge';
-import { IconButtonGroupStyled } from '../../../../components/IconButton/styles';
-import DiscussionThreadItemReviewAction from '../../../../components/DiscussionThreadItemReviewAction';
-
-const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAccessReports, canReviewReports }, onClick }) => {
-
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_intl_1 = require("react-intl");
+const react_query_1 = require("react-query");
+const lodash_1 = require("lodash");
+const Flex_1 = require("@strapi/design-system/Flex");
+const IconButton_1 = require("@strapi/design-system/IconButton");
+const Link_1 = require("@strapi/design-system/Link");
+const Stack_1 = require("@strapi/design-system/Stack");
+const Table_1 = require("@strapi/design-system/Table");
+const Typography_1 = require("@strapi/design-system/Typography");
+const icons_1 = require("@strapi/icons");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const utils_1 = require("../../../../utils");
+const api_1 = require("../../../utils/api");
+const pluginId_1 = require("../../../../pluginId");
+const styles_1 = require("./styles");
+const renderEntryTitle_1 = __importDefault(require("../../../../utils/renderEntryTitle"));
+const DiscussionThreadItemApprovalFlowActions_1 = __importDefault(require("../../../../components/DiscussionThreadItemApprovalFlowActions"));
+const StatusBadge_1 = __importDefault(require("../../../../components/StatusBadge"));
+const styles_2 = require("../../../../components/IconButton/styles");
+const DiscussionThreadItemReviewAction_1 = __importDefault(require("../../../../components/DiscussionThreadItemReviewAction"));
+const Avatar_1 = __importDefault(require("../../../../components/Avatar"));
+const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAccessReports, canReviewReports }, onClick, }) => {
     const { id, reports } = item;
-
-    const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
-
-    const { formatDate } = useIntl();
-    const toggleNotification = useNotification();
-    const queryClient = useQueryClient();
-    const { lockApp, unlockApp } = useOverlayBlocker();
-
-    const onSuccess = (message, stateAction = () => {}, indalidate = true) => async () => {
+    const [blockButtonsDisabled, setBlockButtonsDisabled] = (0, react_1.useState)(false);
+    const { formatDate } = (0, react_intl_1.useIntl)();
+    const toggleNotification = (0, helper_plugin_1.useNotification)();
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const { lockApp, unlockApp } = (0, helper_plugin_1.useOverlayBlocker)();
+    const onSuccess = (message, stateAction = () => { }, indalidate = true) => async () => {
         if (indalidate) {
-            await queryClient.invalidateQueries('get-data');
+            await queryClient.invalidateQueries("get-data");
         }
         toggleNotification({
-            type: 'success',
-            message: `${pluginId}.${message}`,
+            type: "success",
+            message: `${pluginId_1.pluginId}.${message}`,
         });
         stateAction(false);
         unlockApp();
     };
-
-    const onError = err => { handleAPIError(err, toggleNotification); };
-
-    const blockItemMutation = useMutation(blockItem, {
-        onSuccess: onSuccess('page.details.actions.comment.block.confirmation.success'),
+    const onError = (err) => {
+        (0, utils_1.handleAPIError)(err, toggleNotification);
+    };
+    const blockItemMutation = (0, react_query_1.useMutation)(api_1.blockItem, {
+        onSuccess: onSuccess("page.details.actions.comment.block.confirmation.success"),
         onError,
         refetchActive: false,
     });
-    const blockItemThreadMutation = useMutation(blockItemThread, {
-        onSuccess: onSuccess('page.details.actions.thread.block.confirmation.success'),
+    const blockItemThreadMutation = (0, react_query_1.useMutation)(api_1.blockItemThread, {
+        onSuccess: onSuccess("page.details.actions.thread.block.confirmation.success"),
         onError,
         refetchActive: false,
     });
-
     const handleBlockItemClick = async () => {
         if (canModerate) {
             lockApp();
@@ -71,110 +92,78 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
             blockItemThreadMutation.mutate(id);
         }
     };
-
     const handleBlockActionClick = async (mutation, onCallback) => {
         lockApp();
         await mutation.mutateAsync(id);
         onCallback();
     };
-
     const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading;
-    const openReports = reports?.filter(_ => !_.resolved);
-    const hasReports = !isEmpty(openReports);
-    const reviewFlowEnabled = (canAccessReports && hasReports) && !(item.blocked || item.blockedThread);
-
+    const openReports = reports?.filter((_) => !_.resolved);
+    const hasReports = !(0, lodash_1.isEmpty)(openReports);
+    const reviewFlowEnabled = canAccessReports && hasReports && !(item.blocked || item.blockedThread);
     const handleClick = () => onClick();
-    const handleBlockButtonsStateChange = disabled => setBlockButtonsDisabled(disabled);
-
+    const handleBlockButtonsStateChange = (disabled) => setBlockButtonsDisabled(disabled);
     const renderStatus = (props) => {
-        const status = resolveCommentStatus({ ...props, reviewFlowEnabled });
-        const color = resolveCommentStatusColor(status);
-   
-        return (<StatusBadge backgroundColor={`${color}100`} textColor={`${color}700`} color={color}>{ getMessage({
+        const status = (0, utils_1.resolveCommentStatus)({ ...props, reviewFlowEnabled });
+        const color = (0, utils_1.resolveCommentStatusColor)(status);
+        return (react_1.default.createElement(StatusBadge_1.default, { backgroundColor: `${color}100`, textColor: `${color}700`, color: color }, (0, utils_1.getMessage)({
             id: `page.common.item.status.${status}`,
             props: {
-                count: openReports.length
-            }
-        }, status) }</StatusBadge>);
-      };
-    
-      const renderEntryUrl = entry => entry ? `/content-manager/collectionType/${entry.uid}/${entry.id}` : null;
-      const renderDetailsUrl = entry => getUrl(`discover/${entry.id}`);
-
-      const gotApprovalFlow = !isNil(item.approvalStatus);
-      const needsApproval = gotApprovalFlow && (item.approvalStatus === 'PENDING');
-
-      let actionItemsCount = 1;
-      if(reviewFlowEnabled || needsApproval) {
+                count: openReports.length,
+            },
+        }, status)));
+    };
+    const renderEntryUrl = (entry) => entry ? `/content-manager/collectionType/${entry.uid}/${entry.id}` : null;
+    const renderDetailsUrl = (entry) => (0, utils_1.getUrl)(`discover/${entry.id}`);
+    const gotApprovalFlow = !(0, lodash_1.isNil)(item.approvalStatus);
+    const needsApproval = gotApprovalFlow && item.approvalStatus === "PENDING";
+    let actionItemsCount = 1;
+    if (reviewFlowEnabled || needsApproval) {
         actionItemsCount = 2;
-      }
-
-    return (
-        <Tr key={item.id}>
-            <Td>
-                <Typography textColor="neutral800" fontWeight="bold">#{ item.id }</Typography>
-            </Td>
-            <Td>
-                <Stack size={2} horizontal>
-                    { item.author?.avatar ? <Avatar src={item.author?.avatar} alt={item.author.name} /> : <Initials>{ renderInitials(item.author.name) }</Initials> }
-                    <Typography textColor="neutral800" variant="pi">{ item.author.name }</Typography>
-                </Stack>
-            </Td>
-            <Td style={{ maxWidth: '30vw' }}>
-                <Typography textColor="neutral800" ellipsis>{item.content}</Typography>
-            </Td>
-            <Td>
-                { item.threadOf?.id ? (<Link to={ renderDetailsUrl(item.threadOf) }>{ getMessage({
-                    id: 'page.discover.table.cell.thread',
-                    props: { id: item.threadOf.id },
-                }, '#' + item.threadOf.id) }</Link>) : '-' }
-            </Td>
-            <Td style={{ maxWidth: '15vw' }}>
-                { item.related ? (<TableLink to={ renderEntryUrl(item.related) }>{ renderEntryTitle(item.related, config) }</TableLink>) : '-' }
-            </Td>
-            <Td>
-                <Typography textColor="neutral800">{ formatDate(item.updatedAt || item.createdAt, { dateStyle: 'long', timeStyle: 'short' }) }</Typography>
-            </Td>
-            <Td>
-                <Typography textColor="neutral800">{ renderStatus(item) }</Typography>
-            </Td>
-            <Td>
-                <Flex direction="column" alignItems="flex-end">
-                    <IconButtonGroupStyled isSingle={!(reviewFlowEnabled || (canModerate && needsApproval))}>
-                        { (canModerate && needsApproval) &&  (
-                        <DiscussionThreadItemApprovalFlowActions 
-                            id={item.id} 
-                            allowedActions={{ canModerate }}
-                            queryToInvalidate="get-data" />
-                        )}
-                        <DiscussionThreadItemReviewAction
-                            item={item}
-                            queryToInvalidate="get-data"
-                            areBlockButtonsDisabled={blockButtonsDisabled}
-                            isLoading={isLoading}
-                            allowedActions={{ canModerate, canAccessReports, canReviewReports }}
-                            blockItemMutation={blockItemMutation}
-                            blockItemThreadMutation={blockItemThreadMutation}
-                            onBlockButtonsStateChange={handleBlockButtonsStateChange}
-                            onBlockActionClick={handleBlockActionClick}
-                        />
-                        <IconButton onClick={handleClick} label={ getMessage('page.discover.table.action.display') } icon={<Eye />} />
-                    </IconButtonGroupStyled>
-                </Flex>
-            </Td>
-        </Tr>
-    );
+    }
+    return (react_1.default.createElement(Table_1.Tr, { key: item.id },
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", fontWeight: "bold" },
+                "#",
+                item.id)),
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(Stack_1.Stack, { size: 2, horizontal: true },
+                react_1.default.createElement(Avatar_1.default, { avatar: item.author?.avatar, name: item.author.name }),
+                react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", variant: "pi" }, item.author.name))),
+        react_1.default.createElement(Table_1.Td, { style: { maxWidth: "30vw" } },
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", ellipsis: true }, item.content)),
+        react_1.default.createElement(Table_1.Td, null, item.threadOf?.id ? (react_1.default.createElement(Link_1.Link, { to: renderDetailsUrl(item.threadOf) }, (0, utils_1.getMessage)({
+            id: "page.discover.table.cell.thread",
+            props: { id: item.threadOf.id },
+        }, "#" + item.threadOf.id))) : ("-")),
+        react_1.default.createElement(Table_1.Td, { style: { maxWidth: "15vw" } }, item.related ? (react_1.default.createElement(styles_1.TableLink, { to: renderEntryUrl(item.related) }, (0, renderEntryTitle_1.default)(item.related, config))) : ("-")),
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, formatDate(item.updatedAt || item.createdAt, {
+                dateStyle: "long",
+                timeStyle: "short",
+            }))),
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, renderStatus(item))),
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(Flex_1.Flex, { direction: "column", alignItems: "flex-end" },
+                react_1.default.createElement(styles_2.IconButtonGroupStyled, { isSingle: !(reviewFlowEnabled || (canModerate && needsApproval)) },
+                    canModerate && needsApproval && (react_1.default.createElement(DiscussionThreadItemApprovalFlowActions_1.default, { id: item.id, allowedActions: { canModerate }, queryToInvalidate: "get-data" })),
+                    react_1.default.createElement(DiscussionThreadItemReviewAction_1.default, { item: item, queryToInvalidate: "get-data", areBlockButtonsDisabled: blockButtonsDisabled, isLoading: isLoading, allowedActions: {
+                            canModerate,
+                            canAccessReports,
+                            canReviewReports,
+                        }, blockItemMutation: blockItemMutation, blockItemThreadMutation: blockItemThreadMutation, onBlockButtonsStateChange: handleBlockButtonsStateChange, onBlockActionClick: handleBlockActionClick }),
+                    react_1.default.createElement(IconButton_1.IconButton, { onClick: handleClick, label: (0, utils_1.getMessage)("page.discover.table.action.display"), icon: react_1.default.createElement(icons_1.Eye, null) }))))));
 };
-
 DiscoverTableRow.propTypes = {
-    config: PropTypes.object.isRequired,
-    item: PropTypes.object.isRequired,
-    allowedActions: PropTypes.shape({
-        canModerate: PropTypes.bool, 
-        canAccessReports: PropTypes.bool,
-        canReviewReports: PropTypes.bool, 
+    config: prop_types_1.default.object.isRequired,
+    item: prop_types_1.default.object.isRequired,
+    allowedActions: prop_types_1.default.shape({
+        canModerate: prop_types_1.default.bool,
+        canAccessReports: prop_types_1.default.bool,
+        canReviewReports: prop_types_1.default.bool,
     }),
-    onClick: PropTypes.func.isRequired,
+    onClick: prop_types_1.default.func.isRequired,
 };
-
-export default DiscoverTableRow;
+exports.default = DiscoverTableRow;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/Discover/components/DiscoverTableRow/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const TableLink: any;
+//# sourceMappingURL=styles.d.ts.map

package/admin/src/pages/Discover/components/DiscoverTableRow/styles.js

@@ -1,8 +1,14 @@
-import styled from 'styled-components';
-import { Link } from '@strapi/design-system/Link';
-
-export const TableLink = styled(Link)`
-    display: block;
-    text-overflow: ellipsis;
-    overflow: hidden;
-`
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableLink = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("@strapi/design-system/Link");
+exports.TableLink = (0, styled_components_1.default)(Link_1.Link) `
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+//# sourceMappingURL=styles.js.map

package/admin/src/pages/Discover/index.d.ts

@@ -0,0 +1,4 @@
+export declare function mapDispatchToProps(dispatch: any): any;
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=index.d.ts.map