strapi-plugin-comments 2.1.0-beta.1 → 2.1.2

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

@@ -0,0 +1,230 @@
+/*
+ *
+ * Discover
+ *
+ */
+
+// @ts-nocheck
+
+import React, { memo, useRef, useMemo } from "react";
+import { connect } from "react-redux";
+import { bindActionCreators, compose } from "redux";
+import isEqual from "react-fast-compare";
+import { useQuery } from "react-query";
+import { useHistory } from "react-router-dom";
+import { isEmpty } from "lodash";
+import { Box } from "@strapi/design-system/Box";
+import {
+  Layout,
+  HeaderLayout,
+  ActionLayout,
+  ContentLayout,
+} from "@strapi/design-system/Layout";
+import { Table, Thead, Tbody, Tr, Th, Td } from "@strapi/design-system/Table";
+import { Typography } from "@strapi/design-system/Typography";
+import { VisuallyHidden } from "@strapi/design-system/VisuallyHidden";
+import { useNotifyAT } from "@strapi/design-system/LiveRegions";
+
+import {
+  EmptyStateLayout,
+  SearchURLQuery,
+  LoadingIndicatorPage,
+  useTracking,
+  useNotification,
+  useRBAC,
+  useFocusWhenNavigate,
+  useQueryParams,
+} from "@strapi/helper-plugin";
+import getMessage from "../../utils/getMessage";
+import { fetchData } from "./utils/api";
+import pluginPermissions from "../../permissions";
+
+import getUrl from "../../utils/getUrl";
+import Nav from "../../components/Nav";
+import TablePagination from "../../components/TablePagination";
+import filtersSchema from "./utils/filtersSchema";
+import TableFilters from "../../components/TableFilters";
+import makeAppView from "../App/reducer/selectors";
+import DiscoverTableRow from "./components/DiscoverTableRow";
+
+const Discover = ({ config }) => {
+  useFocusWhenNavigate();
+
+  const { push } = useHistory();
+  const { notifyStatus } = useNotifyAT();
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
+  const toggleNotification = useNotification();
+  const [{ query: queryParams }] = useQueryParams();
+  const _q = queryParams?._q || "";
+
+  const viewPermissions = useMemo(
+    () => ({
+      access: pluginPermissions.access,
+      moderate: pluginPermissions.moderate,
+      accessReports: pluginPermissions.reports,
+      reviewReports: pluginPermissions.reportsReview,
+    }),
+    []
+  );
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: {
+      canAccess,
+      canModerate,
+      canAccessReports,
+      canReviewReports,
+    },
+  } = useRBAC(viewPermissions);
+
+  const {
+    isLoading: isLoadingForData,
+    data: { result, pagination = {} },
+    isFetching,
+  } = useQuery(
+    ["get-data", queryParams, canAccess],
+    () => fetchData(queryParams, toggleNotification),
+    {
+      initialData: {},
+    }
+  );
+
+  const handleClickDisplay = (id) => {
+    push(getUrl(`discover/${id}`));
+  };
+
+  const isLoading = isLoadingForData || isFetching;
+  const { total } = pagination;
+
+  const emptyLayout = {
+    comments: {
+      id: getMessage("page.discover.table.empty"),
+      defaultMessage: "You don't have any comments yet.",
+    },
+    search: {
+      id: getMessage("page.discover.table.empty.search"),
+      defaultMessage: "No comments match the search.",
+    },
+  };
+
+  const emptyContent = _q ? "search" : "comments";
+
+  const COL_COUNT = 8;
+
+  if (canAccess) {
+    return (
+      <Box background="neutral100">
+        <Layout>
+          {isLoading || isLoadingForPermissions ? (
+            <LoadingIndicatorPage />
+          ) : (
+            <>
+              <HeaderLayout
+                title={getMessage("page.discover.header")}
+                subtitle={`${total} ${getMessage(
+                  "page.discover.header.count"
+                )}`}
+                as="h2"
+              />
+              <ActionLayout
+                startActions={
+                  <>
+                    <SearchURLQuery
+                      label={getMessage("search.label", "Search", false)}
+                    />
+                    <TableFilters displayedFilters={filtersSchema} />
+                  </>
+                }
+              />
+              <ContentLayout>
+                {!isEmpty(result) ? (
+                  <>
+                    <Table colCount={COL_COUNT} rowCount={result.length}>
+                      <Thead>
+                        <Tr>
+                          <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>
+                          <Th>
+                            <Typography variant="sigma">
+                              {getMessage("page.discover.table.header.thread")}
+                            </Typography>
+                          </Th>
+                          <Th>
+                            <Typography variant="sigma">
+                              {getMessage("page.discover.table.header.entry")}
+                            </Typography>
+                          </Th>
+                          <Th>
+                            <Typography variant="sigma">
+                              {getMessage(
+                                "page.discover.table.header.lastUpdate"
+                              )}
+                            </Typography>
+                          </Th>
+                          <Th>
+                            <Typography variant="sigma">
+                              {getMessage("page.discover.table.header.status")}
+                            </Typography>
+                          </Th>
+                          <Th>
+                            <VisuallyHidden>
+                              {getMessage("page.discover.table.header.actions")}
+                            </VisuallyHidden>
+                          </Th>
+                        </Tr>
+                      </Thead>
+                      <Tbody>
+                        {result.map((entry) => (
+                          <DiscoverTableRow
+                            key={`comment-${entry.id}`}
+                            config={config}
+                            item={entry}
+                            allowedActions={{
+                              canModerate,
+                              canAccessReports,
+                              canReviewReports,
+                            }}
+                            onClick={() => handleClickDisplay(entry.id)}
+                          />
+                        ))}
+                      </Tbody>
+                    </Table>
+                    <TablePagination
+                      pagination={{ pageCount: pagination?.pageCount || 1 }}
+                    />
+                  </>
+                ) : (
+                  <EmptyStateLayout content={emptyLayout[emptyContent]} />
+                )}
+              </ContentLayout>
+            </>
+          )}
+        </Layout>
+      </Box>
+    );
+  }
+  return null;
+};
+
+const mapStateToProps = makeAppView();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(withConnect)(memo(Discover, isEqual));

package/admin/src/pages/Discover/utils/api.ts

@@ -0,0 +1,22 @@
+// @ts-nocheck
+
+import { stringify } from "qs";
+
+import { getApiURL, axiosInstance, handleAPIError } from "../../../utils";
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchData = async (queryParams, toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(
+      getApiURL(
+        `moderate/all${
+          queryParams ? `?${stringify(queryParams, { encode: false })}` : ""
+        }`
+      )
+    );
+
+    return data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};

package/admin/src/pages/Discover/utils/filtersSchema.ts

@@ -0,0 +1,9 @@
+const filtersSchema = [
+  {
+    name: "content",
+    metadatas: { label: "Message" },
+    fieldSchema: { type: "string" },
+  },
+];
+
+export default filtersSchema;

package/admin/src/pages/Settings/components/RestartAlert/styles.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+
+import styled from "styled-components";
+import { Alert } from "@strapi/design-system/Alert";
+
+export const RestartAlert = styled(Alert)`
+  [role="status"] {
+    flex-direction: column;
+  }
+`;