@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/containers/CollectionTypeFormWrapper/index.js

@@ -0,0 +1,376 @@
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
+import { get } from 'lodash';
+import {
+  request,
+  useGlobalContext,
+  useQueryParams,
+  formatComponentData,
+  contentManagementUtilRemoveFieldsFromData,
+} from 'strapi-helper-plugin';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import isEqual from 'react-fast-compare';
+import { createDefaultForm, getTrad, removePasswordFieldsFromData } from '../../utils';
+import pluginId from '../../pluginId';
+import { useFindRedirectionLink } from '../../hooks';
+import {
+  getData,
+  getDataSucceeded,
+  initForm,
+  resetProps,
+  setDataStructures,
+  setStatus,
+  submitSucceeded,
+} from '../../sharedReducers/crudReducer/actions';
+import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
+import { getRequestUrl } from './utils';
+
+// This container is used to handle the CRUD
+const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }) => {
+  const { emitEvent } = useGlobalContext();
+  const { push, replace } = useHistory();
+  const [{ rawQuery }] = useQueryParams();
+  const dispatch = useDispatch();
+  const {
+    componentsDataStructure,
+    contentTypeDataStructure,
+    data,
+    isLoading,
+    status,
+  } = useSelector(selectCrudReducer);
+  const redirectionLink = useFindRedirectionLink(slug);
+
+  const isMounted = useRef(true);
+  const emitEventRef = useRef(emitEvent);
+
+  const allLayoutDataRef = useRef(allLayoutData);
+
+  const isCreatingEntry = id === null;
+
+  const requestURL = useMemo(() => {
+    if (isCreatingEntry && !origin) {
+      return null;
+    }
+
+    return getRequestUrl(`${slug}/${origin || id}`);
+  }, [slug, id, isCreatingEntry, origin]);
+
+  const cleanClonedData = useCallback(
+    data => {
+      if (!origin) {
+        return data;
+      }
+
+      const cleaned = contentManagementUtilRemoveFieldsFromData(
+        data,
+        allLayoutDataRef.current.contentType,
+        allLayoutDataRef.current.components
+      );
+
+      return cleaned;
+    },
+    [origin]
+  );
+
+  const cleanReceivedData = useCallback(data => {
+    const cleaned = removePasswordFieldsFromData(
+      data,
+      allLayoutDataRef.current.contentType,
+      allLayoutDataRef.current.components
+    );
+
+    return formatComponentData(
+      cleaned,
+      allLayoutDataRef.current.contentType,
+      allLayoutDataRef.current.components
+    );
+  }, []);
+
+  // SET THE DEFAULT LAYOUT the effect is applied when the slug changes
+  useEffect(() => {
+    const componentsDataStructure = Object.keys(allLayoutData.components).reduce((acc, current) => {
+      const defaultComponentForm = createDefaultForm(
+        get(allLayoutData, ['components', current, 'attributes'], {}),
+        allLayoutData.components
+      );
+
+      acc[current] = formatComponentData(
+        defaultComponentForm,
+        allLayoutData.components[current],
+        allLayoutData.components
+      );
+
+      return acc;
+    }, {});
+
+    const contentTypeDataStructure = createDefaultForm(
+      allLayoutData.contentType.attributes,
+      allLayoutData.components
+    );
+
+    const contentTypeDataStructureFormatted = formatComponentData(
+      contentTypeDataStructure,
+      allLayoutData.contentType,
+      allLayoutData.components
+    );
+
+    dispatch(setDataStructures(componentsDataStructure, contentTypeDataStructureFormatted));
+  }, [allLayoutData, dispatch]);
+
+  useEffect(() => {
+    return () => {
+      dispatch(resetProps());
+    };
+  }, [dispatch]);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    const { signal } = abortController;
+
+    const fetchData = async signal => {
+      dispatch(getData());
+
+      try {
+        const data = await request(requestURL, { method: 'GET', signal });
+
+        dispatch(getDataSucceeded(cleanReceivedData(cleanClonedData(data))));
+      } catch (err) {
+        if (err.name === 'AbortError') {
+          return;
+        }
+
+        console.error(err);
+
+        const resStatus = get(err, 'response.status', null);
+
+        if (resStatus === 404) {
+          push(redirectionLink);
+
+          return;
+        }
+
+        // Not allowed to read a document
+        if (resStatus === 403) {
+          strapi.notification.info(getTrad('permissions.not-allowed.update'));
+
+          push(redirectionLink);
+        }
+      }
+    };
+
+    // This is needed in order to reset the form when the query changes
+    const init = async () => {
+      await dispatch(getData());
+      await dispatch(initForm(rawQuery));
+    };
+
+    if (!isMounted.current) {
+      return () => {};
+    }
+
+    if (requestURL) {
+      fetchData(signal);
+    } else {
+      init();
+    }
+
+    return () => {
+      abortController.abort();
+    };
+  }, [cleanClonedData, cleanReceivedData, push, requestURL, dispatch, rawQuery, redirectionLink]);
+
+  const displayErrors = useCallback(err => {
+    const errorPayload = err.response.payload;
+    console.error(errorPayload);
+
+    let errorMessage = get(errorPayload, ['message'], 'Bad Request');
+
+    // TODO handle errors correctly when back-end ready
+    if (Array.isArray(errorMessage)) {
+      errorMessage = get(errorMessage, ['0', 'messages', '0', 'id']);
+    }
+
+    if (typeof errorMessage === 'string') {
+      strapi.notification.error(errorMessage);
+    }
+  }, []);
+
+  const onDelete = useCallback(
+    async trackerProperty => {
+      try {
+        emitEventRef.current('willDeleteEntry', trackerProperty);
+
+        const response = await request(getRequestUrl(`${slug}/${id}`), {
+          method: 'DELETE',
+        });
+
+        strapi.notification.success(getTrad('success.record.delete'));
+
+        emitEventRef.current('didDeleteEntry', trackerProperty);
+
+        return Promise.resolve(response);
+      } catch (err) {
+        emitEventRef.current('didNotDeleteEntry', { error: err, ...trackerProperty });
+
+        return Promise.reject(err);
+      }
+    },
+    [id, slug]
+  );
+
+  const onDeleteSucceeded = useCallback(() => {
+    replace(redirectionLink);
+  }, [redirectionLink, replace]);
+
+  const onPost = useCallback(
+    async (body, trackerProperty) => {
+      const endPoint = `${getRequestUrl(slug)}${rawQuery}`;
+
+      try {
+        // Show a loading button in the EditView/Header.js && lock the app => no navigation
+        dispatch(setStatus('submit-pending'));
+
+        const response = await request(endPoint, { method: 'POST', body });
+
+        emitEventRef.current('didCreateEntry', trackerProperty);
+        strapi.notification.toggle({
+          type: 'success',
+          message: { id: getTrad('success.record.save') },
+        });
+
+        dispatch(submitSucceeded(cleanReceivedData(response)));
+        // Enable navigation and remove loaders
+        dispatch(setStatus('resolved'));
+
+        replace(`/plugins/${pluginId}/collectionType/${slug}/${response.id}${rawQuery}`);
+      } catch (err) {
+        emitEventRef.current('didNotCreateEntry', { error: err, trackerProperty });
+        displayErrors(err);
+        dispatch(setStatus('resolved'));
+      }
+    },
+    [cleanReceivedData, displayErrors, replace, slug, dispatch, rawQuery]
+  );
+
+  const onPublish = useCallback(async () => {
+    try {
+      emitEventRef.current('willPublishEntry');
+      const endPoint = getRequestUrl(`${slug}/${id}/actions/publish`);
+
+      dispatch(setStatus('publish-pending'));
+
+      const data = await request(endPoint, { method: 'POST' });
+
+      emitEventRef.current('didPublishEntry');
+
+      dispatch(submitSucceeded(cleanReceivedData(data)));
+      dispatch(setStatus('resolved'));
+
+      strapi.notification.toggle({
+        type: 'success',
+        message: { id: getTrad('success.record.publish') },
+      });
+    } catch (err) {
+      displayErrors(err);
+      dispatch(setStatus('resolved'));
+    }
+  }, [cleanReceivedData, displayErrors, id, slug, dispatch]);
+
+  const onPut = useCallback(
+    async (body, trackerProperty) => {
+      const endPoint = getRequestUrl(`${slug}/${id}`);
+
+      try {
+        emitEventRef.current('willEditEntry', trackerProperty);
+
+        dispatch(setStatus('submit-pending'));
+
+        const response = await request(endPoint, { method: 'PUT', body });
+
+        emitEventRef.current('didEditEntry', { trackerProperty });
+        strapi.notification.toggle({
+          type: 'success',
+          message: { id: getTrad('success.record.save') },
+        });
+
+        dispatch(submitSucceeded(cleanReceivedData(response)));
+
+        dispatch(setStatus('resolved'));
+      } catch (err) {
+        emitEventRef.current('didNotEditEntry', { error: err, trackerProperty });
+        displayErrors(err);
+
+        dispatch(setStatus('resolved'));
+      }
+    },
+    [cleanReceivedData, displayErrors, slug, id, dispatch]
+  );
+
+  const onUnpublish = useCallback(async () => {
+    const endPoint = getRequestUrl(`${slug}/${id}/actions/unpublish`);
+
+    dispatch(setStatus('unpublish-pending'));
+
+    try {
+      emitEventRef.current('willUnpublishEntry');
+
+      const response = await request(endPoint, { method: 'POST' });
+
+      emitEventRef.current('didUnpublishEntry');
+      strapi.notification.success(getTrad('success.record.unpublish'));
+
+      dispatch(submitSucceeded(cleanReceivedData(response)));
+      dispatch(setStatus('resolved'));
+    } catch (err) {
+      dispatch(setStatus('resolved'));
+      displayErrors(err);
+    }
+  }, [cleanReceivedData, displayErrors, id, slug, dispatch]);
+
+  return children({
+    componentsDataStructure,
+    contentTypeDataStructure,
+    data,
+    isCreatingEntry,
+    isLoadingForData: isLoading,
+    onDelete,
+    onDeleteSucceeded,
+    onPost,
+    onPublish,
+    onPut,
+    onUnpublish,
+    status,
+    redirectionLink,
+  });
+};
+
+CollectionTypeFormWrapper.defaultProps = {
+  id: null,
+  origin: null,
+};
+
+CollectionTypeFormWrapper.propTypes = {
+  allLayoutData: PropTypes.exact({
+    components: PropTypes.object.isRequired,
+    contentType: PropTypes.shape({
+      apiID: PropTypes.string.isRequired,
+      attributes: PropTypes.object.isRequired,
+      info: PropTypes.object.isRequired,
+      isDisplayed: PropTypes.bool.isRequired,
+      kind: PropTypes.string.isRequired,
+      layouts: PropTypes.object.isRequired,
+      metadatas: PropTypes.object.isRequired,
+      options: PropTypes.object.isRequired,
+      pluginOptions: PropTypes.object,
+      settings: PropTypes.object.isRequired,
+      uid: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  children: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  origin: PropTypes.string,
+  slug: PropTypes.string.isRequired,
+};
+
+export default memo(CollectionTypeFormWrapper, isEqual);

package/admin/src/containers/CollectionTypeFormWrapper/utils/getRequestUrl.js

@@ -0,0 +1,5 @@
+import pluginId from '../../../pluginId';
+
+const getRequestUrl = path => `/${pluginId}/collection-types/${path}`;
+
+export default getRequestUrl;

package/admin/src/containers/CollectionTypeFormWrapper/utils/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as getRequestUrl } from './getRequestUrl';

package/admin/src/containers/CollectionTypeRecursivePath/index.js

@@ -0,0 +1,125 @@
+import React, { memo, useMemo } from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { ErrorBoundary } from 'react-error-boundary';
+import { get } from 'lodash';
+import PropTypes from 'prop-types';
+import { ErrorFallback, LoadingIndicatorPage, CheckPagePermissions } from 'strapi-helper-plugin';
+import pluginPermissions from '../../permissions';
+import { ContentTypeLayoutContext } from '../../contexts';
+import { useFetchContentTypeLayout } from '../../hooks';
+import { formatLayoutToApi } from '../../utils';
+import EditViewLayoutManager from '../EditViewLayoutManager';
+import EditSettingsView from '../EditSettingsView';
+import ListViewLayout from '../ListViewLayoutManager';
+import ListSettingsView from '../ListSettingsView';
+
+const CollectionTypeRecursivePath = ({
+  match: {
+    params: { slug },
+    url,
+  },
+}) => {
+  const { isLoading, layout, updateLayout } = useFetchContentTypeLayout(slug);
+
+  const { rawContentTypeLayout, rawComponentsLayouts } = useMemo(() => {
+    let rawContentTypeLayout = {};
+    let rawComponentsLayouts = {};
+
+    if (layout.contentType) {
+      rawContentTypeLayout = formatLayoutToApi(layout.contentType);
+    }
+
+    if (layout.components) {
+      rawComponentsLayouts = Object.keys(layout.components).reduce((acc, current) => {
+        acc[current] = formatLayoutToApi(layout.components[current]);
+
+        return acc;
+      }, {});
+    }
+
+    return { rawContentTypeLayout, rawComponentsLayouts };
+  }, [layout]);
+
+  const uid = get(layout, ['contentType', 'uid'], null);
+
+  // This statement is needed in order to prevent the CollectionTypeFormWrapper effects clean up phase to be run twice.
+  // What can happen is that when navigating from one entry to another the cleanup phase of the fetch data effect is run twice : once when
+  // unmounting, once when the url changes.
+  // Since it can happen that the layout there's a delay when the layout is being fetched and the url changes adding the uid ! == slug
+  // statement prevent the component from being mounted and unmounted twice.
+  if (uid !== slug || isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  const renderRoute = (
+    {
+      location: { state },
+      history: { goBack },
+      match: {
+        params: { id, origin },
+      },
+    },
+    Component
+  ) => {
+    return (
+      <Component
+        slug={slug}
+        layout={layout}
+        state={state}
+        goBack={goBack}
+        id={id}
+        origin={origin}
+      />
+    );
+  };
+
+  const routes = [
+    { path: 'create/clone/:origin', comp: EditViewLayoutManager },
+    { path: 'create', comp: EditViewLayoutManager },
+    { path: ':id', comp: EditViewLayoutManager },
+    { path: '', comp: ListViewLayout },
+  ].map(({ path, comp }) => (
+    <Route key={path} path={`${url}/${path}`} render={props => renderRoute(props, comp)} />
+  ));
+
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ContentTypeLayoutContext.Provider value={layout}>
+        <Switch>
+          <Route path={`${url}/configurations/list`}>
+            <CheckPagePermissions permissions={pluginPermissions.collectionTypesConfigurations}>
+              <ListSettingsView
+                layout={rawContentTypeLayout}
+                slug={slug}
+                updateLayout={updateLayout}
+              />
+            </CheckPagePermissions>
+          </Route>
+          <Route path={`${url}/configurations/edit`}>
+            <CheckPagePermissions permissions={pluginPermissions.collectionTypesConfigurations}>
+              <EditSettingsView
+                components={rawComponentsLayouts}
+                isContentTypeView
+                mainLayout={rawContentTypeLayout}
+                slug={slug}
+                updateLayout={updateLayout}
+              />
+            </CheckPagePermissions>
+          </Route>
+          {routes}
+        </Switch>
+      </ContentTypeLayoutContext.Provider>
+    </ErrorBoundary>
+  );
+};
+
+CollectionTypeRecursivePath.propTypes = {
+  match: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    params: PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default memo(CollectionTypeRecursivePath);

package/admin/src/containers/ComponentSetttingsView/index.js

@@ -0,0 +1,55 @@
+import React, { memo, useEffect, useMemo, useReducer } from 'react';
+import { useParams } from 'react-router-dom';
+import { CheckPagePermissions, LoadingIndicatorPage, request } from 'strapi-helper-plugin';
+import { useSelector, shallowEqual } from 'react-redux';
+import { getRequestUrl, mergeMetasWithSchema } from '../../utils';
+import { makeSelectModelAndComponentSchemas } from '../Main/selectors';
+import pluginPermissions from '../../permissions';
+import crudReducer, { crudInitialState } from '../../sharedReducers/crudReducer/reducer';
+import { getData, getDataSucceeded } from '../../sharedReducers/crudReducer/actions';
+import EditSettingsView from '../EditSettingsView';
+
+const ComponentSettingsView = () => {
+  const [{ isLoading, data: layout }, dispatch] = useReducer(crudReducer, crudInitialState);
+  const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
+  const { schemas } = useSelector(state => schemasSelector(state), shallowEqual);
+  const { uid } = useParams();
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    const { signal } = abortController;
+
+    const fetchData = async signal => {
+      try {
+        dispatch(getData());
+
+        const { data } = await request(getRequestUrl(`components/${uid}/configuration`), {
+          method: 'GET',
+          signal,
+        });
+
+        dispatch(getDataSucceeded(mergeMetasWithSchema(data, schemas, 'component')));
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    fetchData(signal);
+
+    return () => {
+      abortController.abort();
+    };
+  }, [uid, schemas]);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <CheckPagePermissions permissions={pluginPermissions.componentsConfigurations}>
+      <EditSettingsView components={layout.components} mainLayout={layout.component} slug={uid} />
+    </CheckPagePermissions>
+  );
+};
+
+export default memo(ComponentSettingsView);