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

package/admin/src/components/StatusBadge/index.tsx

@@ -0,0 +1,21 @@
+/**
+ *
+ * Status badge
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import { Typography } from "@strapi/design-system/Typography";
+import { StatusBadge as StatusBadgeStyled } from "./styles";
+
+const StatusBadge = ({ children, textColor, ...rest }) => (
+  <StatusBadgeStyled {...rest}>
+    <Typography variant="omega" fontWeight="semibold" textColor={textColor}>
+      {children}
+    </Typography>
+  </StatusBadgeStyled>
+);
+
+export default StatusBadge;

package/admin/src/components/StatusBadge/styles.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+
+import styled from "styled-components";
+import { Badge } from "@strapi/design-system/Badge";
+
+export const StatusBadge = styled(Badge)`
+  padding: 5px 8px;
+  border: 1px ${({ theme, color }) => theme.colors[`${color}200`]} solid;
+
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+
+  cursor: default;
+
+  span {
+    text-transform: none;
+  }
+`;

package/admin/src/components/TableFilters/index.tsx

@@ -0,0 +1,58 @@
+// @ts-nocheck
+
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { Button } from "@strapi/design-system/Button";
+import { Box } from "@strapi/design-system/Box";
+import { Filter } from "@strapi/icons";
+import {
+  FilterListURLQuery,
+  FilterPopoverURLQuery,
+} from "@strapi/helper-plugin";
+import { getMessage } from "../../utils";
+
+const TableFilters = ({ displayedFilters }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const buttonRef = useRef();
+
+  const handleToggle = () => {
+    setIsVisible((prev) => !prev);
+  };
+
+  return (
+    <>
+      <Box paddingTop={1} paddingBottom={1}>
+        <Button
+          variant="tertiary"
+          ref={buttonRef}
+          startIcon={<Filter />}
+          onClick={handleToggle}
+          size="S"
+        >
+          {getMessage("page.discover.table.filters")}
+        </Button>
+        {isVisible && (
+          <FilterPopoverURLQuery
+            displayedFilters={displayedFilters}
+            isVisible={isVisible}
+            onToggle={handleToggle}
+            source={buttonRef}
+          />
+        )}
+      </Box>
+      <FilterListURLQuery filtersSchema={displayedFilters} />
+    </>
+  );
+};
+
+TableFilters.propTypes = {
+  displayedFilters: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      metadatas: PropTypes.shape({ label: PropTypes.string }),
+      fieldSchema: PropTypes.shape({ type: PropTypes.string }),
+    })
+  ).isRequired,
+};
+
+export default TableFilters;

package/admin/src/components/TablePagination/index.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Box } from "@strapi/design-system/Box";
+import { Flex } from "@strapi/design-system/Flex";
+import { PaginationURLQuery, PageSizeURLQuery } from "@strapi/helper-plugin";
+
+const TablePagination = ({ pagination }) => {
+  return (
+    <Box paddingTop={4}>
+      <Flex alignItems="flex-end" justifyContent="space-between">
+        <PageSizeURLQuery trackedEvent="willChangeNumberOfEntriesPerPage" />
+        <PaginationURLQuery pagination={pagination} />
+      </Flex>
+    </Box>
+  );
+};
+
+TablePagination.defaultProps = {
+  pagination: {
+    pageCount: 0,
+    pageSize: 10,
+    total: 0,
+  },
+};
+
+TablePagination.propTypes = {
+  pagination: PropTypes.shape({
+    page: PropTypes.number,
+    pageCount: PropTypes.number,
+    pageSize: PropTypes.number,
+    total: PropTypes.number,
+  }),
+};
+
+export default TablePagination;

package/admin/src/components/icons/comments.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+
+import React from "react";
+
+const initSize = 576;
+
+const CommentsIcon = ({ width = 24, height = 24 }) => (
+  <svg viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
+    <g style={{ transform: `scale(${width / initSize})` }}>
+      <path d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z" />
+    </g>
+  </svg>
+);
+
+export default CommentsIcon;

package/admin/src/components/icons/index.ts

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

@@ -0,0 +1,27 @@
+// @ts-nocheck
+
+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.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+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
+        fillRule="evenodd"
+        clipRule="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.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+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/hooks/useConfig.ts

@@ -0,0 +1,58 @@
+// @ts-nocheck
+
+import { useQuery, useMutation, useQueryClient } from "react-query";
+import {
+  fetchConfig,
+  restartStrapi,
+  restoreConfig,
+  updateConfig,
+} from "../pages/Settings/utils/api";
+import pluginId from "../pluginId";
+
+const useConfig = (toggleNotification) => {
+  const queryClient = useQueryClient();
+
+  const fetch = useQuery("get-config", () => fetchConfig(toggleNotification));
+
+  const handleError = (type, callback = () => {}) => {
+    toggleNotification({
+      type: "warning",
+      message: `${pluginId}.page.settings.notification.${type}.error`,
+    });
+    callback();
+  };
+
+  const handleSuccess = (
+    type,
+    callback = () => {},
+    invalidateQueries = true
+  ) => {
+    if (invalidateQueries) {
+      queryClient.invalidateQueries("get-config");
+    }
+    toggleNotification({
+      type: "success",
+      message: `${pluginId}.page.settings.notification.${type}.success`,
+    });
+    callback();
+  };
+
+  const submitMutation = useMutation(updateConfig, {
+    onSuccess: () => handleSuccess("submit"),
+    onError: () => handleError("submit"),
+  });
+
+  const restoreMutation = useMutation(restoreConfig, {
+    onSuccess: () => handleSuccess("restore"),
+    onError: () => handleError("restore"),
+  });
+
+  const restartMutation = useMutation(restartStrapi, {
+    onSuccess: () => handleSuccess("restart", () => {}, false),
+    onError: () => handleError("restart"),
+  });
+
+  return { fetch, restartMutation, submitMutation, restoreMutation };
+};
+
+export default useConfig;

package/admin/src/index.ts

@@ -0,0 +1,98 @@
+// @ts-ignore
+import { prefixPluginTranslations } from "@strapi/helper-plugin";
+import * as pluginPkg from "../../package.json";
+import { pluginId } from "./pluginId";
+import Initializer from "./components/Initializer";
+import PluginIcon from "./components/PluginIcon";
+import pluginPermissions from "./permissions";
+import reducers from "./reducers";
+import { ToBeFixed } from "../../types";
+
+const { name, displayName } = pluginPkg.strapi;
+
+export default {
+  register(app: ToBeFixed) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}/discover`,
+      badgeContent: 1,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: displayName,
+      },
+      Component: async () => {
+        const component = await import(
+          /* webpackChunkName: "[request]" */ "./pages/App"
+        );
+
+        return component;
+      },
+      permissions: pluginPermissions.access,
+    });
+
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: {
+          id: `${pluginId}.plugin.section`,
+          defaultMessage: `${displayName} plugin`,
+        },
+      },
+      [
+        {
+          intlLabel: {
+            id: `${pluginId}.plugin.section.item`,
+            defaultMessage: "Configuration",
+          },
+          id: "comments",
+          to: `/settings/${pluginId}`,
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "documentation-settings" */ "./pages/Settings"
+            );
+
+            return component;
+          },
+          permissions: pluginPermissions.settings,
+        },
+      ]
+    );
+
+    app.addReducers(reducers);
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    });
+  },
+
+  // bootstrap(app: ToBeFixed) {
+  //   // app.injectContentManagerComponent('editView', 'informations', {
+  //   //     name: 'comments-link',
+  //   //     Component: () => 'TODO: Comments count',
+  //   // });
+  // },
+
+  async registerTrads({ locales }: ToBeFixed) {
+    const importedTrads = await Promise.all(
+      locales.map((locale: ToBeFixed) => {
+        return import(`./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

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

@@ -0,0 +1,67 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+// @ts-nocheck
+import React from "react";
+import { connect } from "react-redux";
+import { bindActionCreators, compose } from "redux";
+import { Switch, Route } from "react-router-dom";
+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 />;
+  }
+
+  return (
+    <div>
+      <Switch>
+        <Route path={getUrl("dashboard")} component={ComingSoonPage} exact />
+        <Route path={getUrl("discover")} component={Discover} exact />
+        <Route path={getUrl("discover/:id")} component={Details} exact />
+        <Route path={getUrl("reports")} component={ComingSoonPage} exact />
+        <Route path={getUrl("settings")} component={ComingSoonPage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+};
+
+const mapStateToProps = makeAppView();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ setConfig }, dispatch);
+}
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(withConnect)(App);

package/admin/src/pages/App/reducer/actions.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+
+import { GET_CONFIG, SET_CONFIG } from "./constants";
+
+export const setConfig = (data) => ({
+  data,
+  type: SET_CONFIG,
+});
+
+export const getConfig = () => ({ type: GET_CONFIG });

package/admin/src/pages/App/reducer/constants.ts

@@ -0,0 +1,4 @@
+export const REDUCER_NAME = "plugin-comments_app";
+
+export const SET_CONFIG = "SET_CONFIG";
+export const GET_CONFIG = "GET_CONFIG";

package/admin/src/pages/App/reducer/index.ts

@@ -0,0 +1,28 @@
+// @ts-nocheck
+
+import produce from "immer"; // current
+import { set } from "lodash";
+import { GET_CONFIG, SET_CONFIG } from "./constants";
+
+const initialState = {
+  config: {},
+};
+
+const reducer = (state = initialState, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case SET_CONFIG: {
+        set(draftState, "config", action.data);
+        break;
+      }
+      case GET_CONFIG: {
+        return draftState?.config;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;
+export { initialState };

package/admin/src/pages/App/reducer/init.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+
+const initReducer = (initialState) => {
+  return {
+    ...initialState,
+  };
+};
+
+export default initReducer;

package/admin/src/pages/App/reducer/selectors.ts

@@ -0,0 +1,32 @@
+// @ts-nocheck
+
+import { createSelector } from "reselect";
+import { initialState } from "./";
+import { REDUCER_NAME } from "./constants";
+
+/**
+ * Direct selector to the listView state domain
+ */
+const appView = () => (state) => state[REDUCER_NAME] || initialState;
+
+/**
+ * Other specific selectors
+ */
+
+/**
+ * Default selector used by listView
+ */
+
+const makeAppView = () =>
+  createSelector(appView(), (substate) => {
+    return substate;
+  });
+
+const selectConfig = (state) => {
+  const { config } = state;
+
+  return config;
+};
+
+export default makeAppView;
+export { appView, selectConfig };

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

@@ -0,0 +1,14 @@
+// @ts-nocheck
+
+import { getApiURL, axiosInstance, handleAPIError } from "../../../utils";
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchConfig = async (toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(getApiURL(`moderate/config`));
+
+    return data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};

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

@@ -0,0 +1,31 @@
+/*
+ *
+ * Coming soon page
+ *
+ */
+
+// @ts-nocheck
+import React, { memo } from "react";
+import { Box } from "@strapi/design-system/Box";
+import { EmptyStateLayout } from "@strapi/design-system/EmptyStateLayout";
+import { Layout } from "@strapi/design-system/Layout";
+import { Illo } from "@strapi/icons";
+import getMessage from "../../utils/getMessage";
+import Nav from "../../components/Nav";
+
+const ComingSoonPage = () => {
+  return (
+    <Box background="neutral100">
+      <Layout sideNav={<Nav />}>
+        <Box padding={8} background="neutral100">
+          <EmptyStateLayout
+            icon={<Illo />}
+            content={getMessage("page.coming.soon")}
+          />
+        </Box>
+      </Layout>
+    </Box>
+  );
+};
+
+export default memo(ComingSoonPage);