strapi-plugin-comments 2.0.0-beta.6 → 2.0.0-beta.7

package/README.md

@@ -88,6 +88,9 @@ To setup amend default plugin configuration we recommend to put following snippe
             '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject'],
             'api::page.page': ['MyField'],
         },
+        reportReasons: {
+            'MY_CUSTOM_REASON': 'MY_CUSTOM_REASON',
+        },
     },
     ...
 ```
@@ -97,10 +100,12 @@ To setup amend default plugin configuration we recommend to put following snippe
 - `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 `*`.
+- `reportReasons` - set of enums you would like to use for issuing abuse reports. Provided by default `'BAD_LANGUAGE'`, `'DISCRIMINATION'` and `'OTHER'`.
 
 ## Additional GQL Configuration
+All you need to do is to install and enable `@strapi/plugin-graphql` for you instance based on the **[official Strapi v4 docs](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#configurations)**.
 
-> To be done
+See [available GQL specification section](#public-graphql-specification).
 
 ## RBAC
 Plugin provides granular permissions based on Strapi RBAC functionality.
@@ -127,10 +132,14 @@ Feature / Capability focused permissions:
     "blockedThread": true,
     "blockReason": null,
     "authorUser": null,
-    "authorId": "207ccfdc-94ba-45eb-979c-790f6f49c392",
-    "authorName": "Joe Doe",
-    "authorEmail": "jdoe@sample.com",
-    "authorAvatar": null,
+    "removed": null,
+    "approvalStatus": "APPROVED", // Only in case of enabled approval flow. Default: null
+    "author": {
+        "id": "207ccfdc-94ba-45eb-979c-790f6f49c392",
+        "name": "Joe Doe",
+        "email": "jdoe@sample.com",
+        "avatar": null,
+    },
     "createdAt": "2020-07-14T20:13:01.649Z",
     "updatedAt": "2020-07-14T20:13:01.670Z",
     "related": {}, // Related content type entity
@@ -145,6 +154,8 @@ Feature / Capability focused permissions:
     "blocked": true,
     "blockedThread": null,
     "blockReason": null,
+    "removed": null,
+    "approvalStatus": "REJECTED", // Only in case of enabled approval flow. Default: null
     "authorUser": {
         "id": 1,
         "username": "Sample User",
@@ -329,7 +340,7 @@ Deletes a specified Comment based on it `commentId` and related to specified ins
 - `409` - Conflict. Occurs when trying to delete a non existing comment.
 
 
-### Report abuse in the Comment
+### Issue Abuse Report against specified Comment
 
 `POST <host>/comments/api::<collection name>.<content type name>:<entity id>/comment/<commentId>/report-abuse`
 
@@ -346,7 +357,7 @@ Reports abuse in specified Comment content based on it `commentId` and related t
 }
 ```
 
-*Available reason enums:* `OTHER`, `BAD_WORDS`, `DISCRIMINATION`
+*Available reason enums:* `BAD_WORDS`, `OTHER`, `DISCRIMINATION` (want more? See [configuration section](#configuration).)
 
 **Example response body**
 
@@ -360,6 +371,298 @@ Reports abuse in specified Comment content based on it `commentId` and related t
 - `200` - Successful. Response with reported abuse.
 - `409` - Conflict. Occurs when trying to report an abuse to a non existing comment.
 
+## Public GraphQL specification
+
+> *To test all queries and understand the schemas use GraphQL Playground exposed by `@strapi/plugin-graphql` on `http://localhost:1337/graphql`*
+
+### Get Comments
+
+*REST API equivalent: [Public API -> Get Comments](#get-comments)*
+
+**Example request**
+
+```graphql
+query {
+  findAllFlat(
+    relation: "api::page.page:1"
+    filters: { content: { contains: "Test" } }
+  ) {
+        id
+        content
+        blocked
+        threadOf {
+            id
+        }
+        author {
+            id
+            name
+        }
+    }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "findAllFlat": [
+      {
+        "id": 3,  
+        "content": "Test",
+        "blocked": false,
+        "threadOf": null,
+        "author": {
+          "id": "123456",
+          "name": "Joe Doe"
+        }
+      },
+      //...
+    ]
+  }
+```
+
+### Get Comments (flat structure)
+
+*REST API equivalent: [Public API -> Get Comments (flat structure)](#get-comments-flat-structure)*
+
+**Example request**
+
+```graphql
+query {
+  findAllInHierarchy(relation: "api::page.page:1") {
+    id
+    content
+    blocked
+    children {
+      id
+      content
+    }
+    threadOf {
+      id
+    }
+    author {
+      id
+      name
+    }
+  }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "findAllInHierarchy": [
+      {
+        "id": 1,
+        "content": "Test",
+        "blocked": false,
+        "children": [
+          {
+            "id": 6,
+            "content": "Text to search for"
+          },
+          //...
+        ],
+        "threadOf": null,
+        "author": {
+          "id": "123456",
+          "name": "Joe Doe"
+        }
+      },
+      //...
+    ]
+  }
+}
+```
+
+### Post a Comment
+
+*REST API equivalent: [Public API -> Post a Comment](#post-a-comment)*
+
+**Example request**
+
+```graphql
+mutation createComment {
+  createComment(
+    input: {
+      relation: "api::page.page:1"
+      content: "Hello World!"
+      threadOf: 3
+      author: { id: "12345678", name: "John Wick", email: "test@test.pl" }
+    }
+  ) {
+    id
+    content
+    threadOf {
+      id
+    }
+    author {
+      id
+      name
+    }
+  }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "createComment": {
+      "id": 34,
+      "content": "Hello World!",
+      "threadOf": {
+        "id": 3
+      },
+      "author": {
+        "id": "12345678",
+        "name": "John Wick"
+      }
+    }
+  }
+}
+```
+
+### Update Comment
+
+*REST API equivalent: [Public API -> Update Comment](#update-comment)*
+
+**Example request**
+
+```graphql
+mutation updateComment {
+  updateComment(
+    input: {
+      id: 34
+      relation: "api::page.page:1"
+      content: "I've changed it!"
+      author: { id: "12345678" }
+    }
+  ) {
+    id
+    content
+    threadOf {
+      id
+    }
+    author {
+      id
+      name
+    }
+    createdAt
+    updatedAt
+  }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "updateComment": {
+      "id": 34,
+      "content": "I've changed it!",
+      "threadOf": {
+        "id": 3
+      },
+      "author": {
+        "id": "12345678",
+        "name": "John Wick"
+      },
+      "createdAt": "2022-01-26T07:45:35.978Z",
+      "updatedAt": "2022-01-26T07:47:44.659Z"
+    }
+  }
+}
+```
+
+### Delete Comment
+
+*REST API equivalent: [Public API -> Delete Comment](#delete-comment)*
+
+**Example request**
+
+```graphql
+mutation removeComment {
+  removeComment(
+    input: { id: 33, relation: "api::page.page:1", author: { id: "12345678" } }
+  ) {
+    id
+    removed
+  }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "removeComment": {
+      "id": 33,
+      "removed": true
+    }
+  }
+}
+```
+
+### Issue Abuse Report against specified Comment
+
+*REST API equivalent: [Public API -> Issue Abuse Report against specified Comment](#issue-abuse-report-against-specified-comment)*
+
+**Example request body**
+
+```graphql
+mutation createAbuseReport {
+  createAbuseReport(
+    input: {
+      commentId: 34
+      relation: "api::page.page:1"
+      reason: BAD_LANGUAGE
+      content: "Rude language"
+    }
+  ) {
+    id
+    reason
+    content
+    related {
+      id
+      author {
+        id
+        name
+      }
+    }
+  }
+}
+```
+
+*Available reason enums:* `BAD_WORDS`, `OTHER`, `DISCRIMINATION` (want more? See [configuration section](#configuration).)
+
+**Example response**
+
+```json
+{
+  "data": {
+    "createAbuseReport": {
+      "id": 28,
+      "content": "Rude language",
+      "reason": "DISCRIMINATION",
+      "related": {
+        "id": 34,
+        "author": {
+          "id": "12345678",
+          "name": "John Wick"
+        }
+      }
+    }
+  }
+}
+```
+
 ## Examples
 
 Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-comments) repository.

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

@@ -6,7 +6,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { first } from 'lodash';
 import { Avatar, Initials } from '@strapi/design-system/Avatar';
 import { Box } from '@strapi/design-system/Box';
 import { Divider } from '@strapi/design-system/Divider';
@@ -17,7 +16,7 @@ import { ArrowRight } from '@strapi/icons';
 import DiscussionThreadItemMeta from '../DiscussionThreadItemMeta';
 import { AvatarWrapper, DiscussionThreadItemBox, DiscussionThreadItemBoxContent, DiscussionThreadItemContent, DiscussionThreadItemLeft, DiscussionThreadItemLinkBox, DiscussionThreadItemRight, DiscussionThreadItemRoot } from './styles';
 import DiscussionThreadItemActions from '../DiscussionThreadItemActions';
-import { getMessage, getUrl } from '../../utils';
+import { getMessage, getUrl, renderInitials } from '../../utils';
 import DiscussionThreadItemWarnings from '../DiscussionThreadItemWarnings';
 
 const DiscussionThreadItem = (props) => {
@@ -34,8 +33,7 @@ const DiscussionThreadItem = (props) => {
         gotThread, 
         threadFirstItemId, 
         authorUser, 
-        authorAvatar, 
-        authorName } = props;
+        author } = props;
 
     let background = 'neutral100';
     let borderColor = 'neutral200';
@@ -59,11 +57,9 @@ const DiscussionThreadItem = (props) => {
         StyledComponent = DiscussionThreadItemRoot;
     }
 
-    const avatar = authorAvatar || authorUser?.avatar;
-    const name = authorName || `${authorUser?.firstName} ${authorUser?.lastName}`;
+    const avatar = author?.avatar || authorUser?.avatar;
+    const name = author?.name || `${authorUser?.firstName} ${authorUser?.lastName}`;
     const isBlocked = blocked || blockedThread;
-
-    const renderInitials = value => value.split(' ').map(_ => first(_)).join('').toUpperCase();
     
     return (<StyledComponent as="li">
         <DiscussionThreadItemContent as={Flex} direction="row">

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

@@ -9,22 +9,33 @@ 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 { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 
-const DiscussionThreadItemMeta = ({ authorName, authorEmail, createdAt, updatedAt }) => {
+const DiscussionThreadItemMeta = ({ author, createdAt, updatedAt }) => {
 
     const { formatDate } = useIntl();
 
     const dateTime = formatDate(updatedAt || createdAt, { dateStyle: 'short', timeStyle: 'short' });
+    const { name } = author;
 
-    return (<Flex as={Box} paddingTop={2} direction="row" justifyContent="space-between">
-        <Typography variant="pi" fontWeight="bold">{ authorName }</Typography>
-        <Typography variant="pi">{ dateTime }</Typography>
+    return (<Flex as={Box} paddingTop={2} direction="row">
+        <Stack size={2} horizontal style={{ flexGrow: 1, justifyContent: 'space-between'}}>
+            <Typography variant="pi" fontWeight="bold">{ name }</Typography>
+            <Typography variant="pi">{ dateTime }</Typography>
+        </Stack>
     </Flex>);
 };
 
 DiscussionThreadItemMeta.propTypes = {
-
+    author: PropTypes.shape({
+        id: PropTypes.oneOfType(PropTypes.string, PropTypes.number).isRequired,
+        name: PropTypes.string.isRequired,
+        email: PropTypes.string,
+        avatar: PropTypes.string,
+    }).isRequired,
+    createdAt: PropTypes.string.isRequired,
+    updatedAt: PropTypes.string,
 };
 
 export default DiscussionThreadItemMeta;

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useMutation, useQueryClient } from 'react-query';
 import { isNil, isEmpty, orderBy } from 'lodash';
+import { Avatar, Initials } from '@strapi/design-system/Avatar';
 import { Badge } from '@strapi/design-system/Badge';
 import { Box } from '@strapi/design-system/Box'; 
 import { Button } from '@strapi/design-system/Button'; 
@@ -15,7 +16,7 @@ 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, resolveCommentStatus, resolveCommentStatusColor } from '../../../../utils';
+import { getMessage, getUrl, handleAPIError, renderInitials, resolveCommentStatus, resolveCommentStatusColor } from '../../../../utils';
 import ReportsReviewModal from '../../../../components/ReportsReviewModal';
 import ReportsReviewTable from '../../../../components/ReportsReviewTable';
 import { blockItem, blockItemThread, resolveReport } from '../../../utils/api';
@@ -132,6 +133,12 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
             <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>

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

@@ -91,7 +91,7 @@ const Discover = ({ config }) => {
 
   const emptyContent = _q ? 'search' : 'comments';
   
-  const COL_COUNT = 7;
+  const COL_COUNT = 8;
 
   if (canAccess) {
     return <Box background="neutral100">
@@ -114,6 +114,9 @@ const Discover = ({ config }) => {
                         <Th>
                           <Typography variant="sigma">{ getMessage('page.discover.table.header.id') }</Typography>
                         </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.author') }</Typography>
+                        </Th>
                         <Th>
                           <Typography variant="sigma">{ getMessage('page.discover.table.header.message') }</Typography>
                         </Th>

package/admin/src/translations/en.json

@@ -17,6 +17,7 @@
     "page.discover.header": "Discover threads",
     "page.discover.header.count": "entries found",
     "page.discover.table.header.id": "ID",
+    "page.discover.table.header.author": "Author",
     "page.discover.table.header.message": "Message",
     "page.discover.table.header.thread": "Thread of",
     "page.discover.table.header.entry": "Entry",

package/admin/src/utils/index.js

@@ -4,5 +4,7 @@ export { default as getUrl } from './getUrl';
 export { default as getMessage } from './getMessage';
 export { default as handleAPIError } from './handleAPIError';
 export { default as getRelatedGroups } from './getRelatedGroups';
+export { default as renderEntryTitle } from './renderEntryTitle';
+export { default as renderInitials } from './renderInitials';
 export { default as resolveCommentStatus } from './resolveCommentStatus';
 export { default as resolveCommentStatusColor } from './resolveCommentStatusColor';

package/admin/src/utils/renderInitials.js

@@ -0,0 +1,5 @@
+import { first } from 'lodash';
+
+const renderInitials = (value = '') => value.split(' ').map(_ => first(_)).join('').toUpperCase();
+
+export default renderInitials;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-comments",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "description": "Strapi - Comments plugin",
   "strapi": {
     "name": "comments",
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@strapi/utils": "^4.0.5",
+    "@strapi/plugin-graphql": "^4.0.5",
     "bad-words": "^3.0.4"
   },
   "devDependencies": {

package/server/config/index.js

@@ -7,5 +7,10 @@ module.exports = {
     entryLabel: {
       '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject']
     },
+    reportReasons: {
+      'BAD_LANGUAGE': 'BAD_LANGUAGE',
+      'DISCRIMINATION': 'DISCRIMINATION',
+      'OTHER': 'OTHER',
+    },
   }
 };

package/server/controllers/client.js

@@ -2,7 +2,7 @@
 
 const { getPluginService } = require('./../utils/functions');
 const { parseParams, throwError } = require('./utils/functions');
-const _ = require('lodash');
+const { flatInput } = require('./utils/parsers');
 
 module.exports = {
 
@@ -15,16 +15,7 @@ module.exports = {
     const { relation } = parseParams(params);
     try {
       return this.getService('common')
-        .findAllFlat({
-          query: {
-            ...query,
-            $or: [{ removed: { $null: true } }, { removed: false }],
-            related: relation,
-          },
-          populate: {
-            threadOf: true,
-          },
-        });
+        .findAllFlat(flatInput(relation, query));
     } catch (e) {
       throwError(ctx, e);
     }
@@ -36,13 +27,7 @@ module.exports = {
     try {
       return await this.getService('common')
         .findAllInHierarchy({
-          query: {
-            ...query,
-            related: relation,
-          },
-          populate: {
-            threadOf: true,
-          },
+          ...flatInput(relation, query),
           dropBlockedThreads: true,
         });
     } catch (e) {
@@ -102,8 +87,8 @@ module.exports = {
       try {
         return await this.getService()
           .markAsRemoved(
-            relationId,
             commentId,
+            relationId,
             authorId,
           );
       } catch (e) {

package/server/controllers/utils/parsers.js

@@ -0,0 +1,17 @@
+'use strict'
+
+module.exports = {
+    flatInput(relation, query) {
+        return {
+            query: {
+              ...query,
+              $or: [{ removed: { $null: true } }, { removed: false }],
+              related: relation,
+            },
+            populate: {
+              threadOf: true,
+            },
+          };
+    },
+  
+};

package/server/graphql/index.js

@@ -0,0 +1,26 @@
+'use strict'
+
+const getTypes = require('./types');
+const getQueries = require('./queries');
+const getMutations = require('./mutations');
+const getResolversConfig = require('./resolvers-config');
+const { getModelUid } = require('../services/utils/functions');
+
+module.exports = () => {
+	const extensionService = strapi.plugin('graphql').service('extension');
+
+	extensionService.shadowCRUD(getModelUid('comment')).disable();
+	extensionService.shadowCRUD(getModelUid('comment-report')).disable();
+
+	extensionService.use(({ nexus }) => {
+		const types = getTypes({ strapi, nexus });
+		const queries = getQueries({ strapi, nexus });
+		const mutations = getMutations({ strapi, nexus });
+		const resolversConfig = getResolversConfig({ strapi });
+
+		return {
+			types: [types, queries, mutations],
+			resolversConfig,
+		}
+	});
+}

package/server/graphql/mutations/createAbuseReport.js

@@ -0,0 +1,20 @@
+'use strict'
+
+const { getPluginService } = require('../../utils/functions');
+
+module.exports = ({ nexus }) => {
+	const { nonNull } = nexus;
+
+	return {
+		type: nonNull('Report'),
+		args: {
+			input: nonNull('CreateReport'),
+		},
+		async resolve(obj, args) {
+			const { input } = args;
+			const { commentId, relation, ...body } = input;
+			return await getPluginService('client')
+				.reportAbuse(commentId, relation, body);
+		},
+	};
+}

package/server/graphql/mutations/createComment.js

@@ -0,0 +1,20 @@
+'use strict'
+
+const { getPluginService } = require('../../utils/functions');
+
+module.exports = ({ nexus }) => {
+	const { nonNull } = nexus;
+
+	return {
+		type: nonNull('CommentSingle'),
+		args: {
+			input: nonNull('CreateComment'),
+		},
+		async resolve(obj, args) {
+			const { input } = args;
+			const { relation, ...body } = input;
+			return await getPluginService('client')
+				.create(relation, body);
+		},
+	};
+}