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

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

@@ -0,0 +1,317 @@
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { get } from 'lodash';
+import {
+  request,
+  useGlobalContext,
+  formatComponentData,
+  useQueryParams,
+} from 'strapi-helper-plugin';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { createDefaultForm, getTrad, removePasswordFieldsFromData } from '../../utils';
+import {
+  getData,
+  getDataSucceeded,
+  initForm,
+  resetProps,
+  setDataStructures,
+  setStatus,
+  submitSucceeded,
+} from '../../sharedReducers/crudReducer/actions';
+import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
+import { getRequestUrl } from './utils';
+import buildQueryString from '../ListView/utils/buildQueryString';
+
+// This container is used to handle the CRUD
+const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
+  const { emitEvent } = useGlobalContext();
+  const { push } = useHistory();
+  const emitEventRef = useRef(emitEvent);
+  const [isCreatingEntry, setIsCreatingEntry] = useState(true);
+  const [{ query, rawQuery }] = useQueryParams();
+  const searchToSend = buildQueryString(query);
+
+  const dispatch = useDispatch();
+  const {
+    componentsDataStructure,
+    contentTypeDataStructure,
+    data,
+    isLoading,
+    status,
+  } = useSelector(selectCrudReducer);
+
+  const cleanReceivedData = useCallback(
+    data => {
+      const cleaned = removePasswordFieldsFromData(
+        data,
+        allLayoutData.contentType,
+        allLayoutData.components
+      );
+
+      // This is needed in order to add a unique id for the repeatable components, in order to make the reorder easier
+      return formatComponentData(cleaned, allLayoutData.contentType, allLayoutData.components);
+    },
+    [allLayoutData]
+  );
+
+  useEffect(() => {
+    return () => {
+      dispatch(resetProps());
+    };
+  }, [dispatch]);
+
+  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]);
+
+  // Check if creation mode or editing mode
+  useEffect(() => {
+    const abortController = new AbortController();
+    const { signal } = abortController;
+
+    const fetchData = async signal => {
+      dispatch(getData());
+
+      setIsCreatingEntry(true);
+
+      try {
+        const data = await request(getRequestUrl(`${slug}${searchToSend}`), {
+          method: 'GET',
+          signal,
+        });
+
+        dispatch(getDataSucceeded(cleanReceivedData(data)));
+
+        setIsCreatingEntry(false);
+      } catch (err) {
+        if (err.name === 'AbortError') {
+          return;
+        }
+
+        const responseStatus = get(err, 'response.status', null);
+
+        // Creating a single type
+        if (responseStatus === 404) {
+          dispatch(initForm(rawQuery, true));
+        }
+
+        if (responseStatus === 403) {
+          strapi.notification.info(getTrad('permissions.not-allowed.update'));
+
+          push('/');
+        }
+      }
+    };
+
+    fetchData(signal);
+
+    return () => abortController.abort();
+  }, [cleanReceivedData, push, slug, dispatch, searchToSend, rawQuery]);
+
+  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}`), {
+          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);
+      }
+    },
+    [slug]
+  );
+
+  const onDeleteSucceeded = useCallback(() => {
+    setIsCreatingEntry(true);
+
+    dispatch(initForm(rawQuery, true));
+  }, [dispatch, rawQuery]);
+
+  const onPost = useCallback(
+    async (body, trackerProperty) => {
+      const endPoint = getRequestUrl(`${slug}${rawQuery}`);
+
+      try {
+        dispatch(setStatus('submit-pending'));
+
+        const response = await request(endPoint, { method: 'PUT', body });
+
+        emitEventRef.current('didCreateEntry', trackerProperty);
+        strapi.notification.toggle({
+          type: 'success',
+          message: { id: getTrad('success.record.save') },
+        });
+
+        dispatch(submitSucceeded(cleanReceivedData(response)));
+        setIsCreatingEntry(false);
+
+        dispatch(setStatus('resolved'));
+      } catch (err) {
+        emitEventRef.current('didNotCreateEntry', { error: err, trackerProperty });
+
+        displayErrors(err);
+
+        dispatch(setStatus('resolved'));
+      }
+    },
+    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery]
+  );
+  const onPublish = useCallback(async () => {
+    try {
+      emitEventRef.current('willPublishEntry');
+      const endPoint = getRequestUrl(`${slug}/actions/publish${searchToSend}`);
+
+      dispatch(setStatus('publish-pending'));
+
+      const data = await request(endPoint, { method: 'POST' });
+
+      emitEventRef.current('didPublishEntry');
+      strapi.notification.toggle({
+        type: 'success',
+        message: { id: getTrad('success.record.publish') },
+      });
+
+      dispatch(submitSucceeded(cleanReceivedData(data)));
+
+      dispatch(setStatus('resolved'));
+    } catch (err) {
+      displayErrors(err);
+
+      dispatch(setStatus('resolved'));
+    }
+  }, [cleanReceivedData, displayErrors, slug, searchToSend, dispatch]);
+
+  const onPut = useCallback(
+    async (body, trackerProperty) => {
+      const endPoint = getRequestUrl(`${slug}${rawQuery}`);
+
+      try {
+        emitEventRef.current('willEditEntry', trackerProperty);
+
+        dispatch(setStatus('submit-pending'));
+
+        const response = await request(endPoint, { method: 'PUT', body });
+
+        strapi.notification.toggle({
+          type: 'success',
+          message: { id: getTrad('success.record.save') },
+        });
+
+        emitEventRef.current('didEditEntry', { trackerProperty });
+
+        dispatch(submitSucceeded(cleanReceivedData(response)));
+
+        dispatch(setStatus('resolved'));
+      } catch (err) {
+        displayErrors(err);
+
+        emitEventRef.current('didNotEditEntry', { error: err, trackerProperty });
+
+        dispatch(setStatus('resolved'));
+      }
+    },
+    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery]
+  );
+
+  // The publish and unpublish method could be refactored but let's leave the duplication for now
+  const onUnpublish = useCallback(async () => {
+    const endPoint = getRequestUrl(`${slug}/actions/unpublish${searchToSend}`);
+
+    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, slug, dispatch, searchToSend]);
+
+  return children({
+    componentsDataStructure,
+    contentTypeDataStructure,
+    data,
+    isCreatingEntry,
+    isLoadingForData: isLoading,
+    onDelete,
+    onDeleteSucceeded,
+    onPost,
+    onPublish,
+    onPut,
+    onUnpublish,
+    redirectionLink: '/',
+    status,
+  });
+};
+
+SingleTypeFormWrapper.propTypes = {
+  allLayoutData: PropTypes.shape({
+    components: PropTypes.object.isRequired,
+    contentType: PropTypes.object.isRequired,
+  }).isRequired,
+  children: PropTypes.func.isRequired,
+  slug: PropTypes.string.isRequired,
+};
+
+export default memo(SingleTypeFormWrapper);

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

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

package/admin/src/containers/SingleTypeFormWrapper/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/SingleTypeRecursivePath/index.js

@@ -0,0 +1,84 @@
+import React, { memo, useMemo } from 'react';
+import { Switch, Route } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { 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';
+
+const SingleTypeRecursivePath = ({
+  match: {
+    params: { slug },
+    url,
+  },
+}) => {
+  const { isLoading, layout, updateLayout } = useFetchContentTypeLayout(slug);
+
+  const { rawContentTypeLayout, rawComponentsLayouts } = useMemo(() => {
+    let rawComponentsLayouts = {};
+    let rawContentTypeLayout = {};
+
+    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]);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <ContentTypeLayoutContext.Provider value={layout}>
+      <Switch>
+        <Route path={`${url}/configurations/edit`}>
+          <CheckPagePermissions permissions={pluginPermissions.singleTypesConfigurations}>
+            <EditSettingsView
+              components={rawComponentsLayouts}
+              isContentTypeView
+              mainLayout={rawContentTypeLayout}
+              slug={slug}
+              updateLayout={updateLayout}
+            />
+          </CheckPagePermissions>
+        </Route>
+        <Route
+          path={url}
+          render={({ location: { state }, history: { goBack } }) => {
+            return (
+              <EditViewLayoutManager
+                layout={layout}
+                slug={slug}
+                isSingleType
+                state={state}
+                goBack={goBack}
+              />
+            );
+          }}
+        />
+      </Switch>
+    </ContentTypeLayoutContext.Provider>
+  );
+};
+
+SingleTypeRecursivePath.propTypes = {
+  match: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    params: PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+export default memo(SingleTypeRecursivePath);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import WysiwygContext from '../../contexts/Wysiwyg';
+
+function WysiwygProvider({ children, ...rest }) {
+  return (
+    <WysiwygContext.Provider value={rest}>{children}</WysiwygContext.Provider>
+  );
+}
+
+WysiwygProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default WysiwygProvider;

package/admin/src/contexts/ContentTypeLayout.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ContentTypeLayout = createContext();
+
+export default ContentTypeLayout;

package/admin/src/contexts/LayoutDnd.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const LayoutDndContext = createContext();
+
+export default LayoutDndContext;

package/admin/src/contexts/ListView.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ListViewContext = createContext();
+
+export default ListViewContext;

package/admin/src/contexts/Wysiwyg.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const WysiwygContext = createContext();
+
+export default WysiwygContext;

package/admin/src/contexts/index.js

@@ -0,0 +1,4 @@
+export { default as ContentTypeLayoutContext } from './ContentTypeLayout';
+export { default as LayoutDndContext } from './LayoutDnd';
+export { default as ListViewContext } from './ListView';
+export { default as WysiwygContext } from './Wysiwyg';

package/admin/src/hooks/index.js

@@ -0,0 +1,6 @@
+export { default as useContentTypeLayout } from './useContentTypeLayout';
+export { default as useFetchContentTypeLayout } from './useFetchContentTypeLayout';
+export { default as useFindRedirectionLink } from './useFindRedirectionLink';
+export { default as useLayoutDnd } from './useLayoutDnd';
+export { default as useListView } from './useListView';
+export { default as useWysiwyg } from './useWysiwyg';

package/admin/src/hooks/useContentTypeLayout/index.js

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { get } from 'lodash';
+import { useSelector } from 'react-redux';
+import selectLayout from '../../containers/EditViewLayoutManager/selectors';
+
+const useContentTypeLayout = () => {
+  const currentLayout = useSelector(selectLayout);
+
+  const getComponentLayout = useCallback(
+    componentUid => {
+      return get(currentLayout, ['components', componentUid], {});
+    },
+    [currentLayout]
+  );
+
+  return { ...currentLayout, getComponentLayout };
+};
+
+export default useContentTypeLayout;

package/admin/src/hooks/useFetchContentTypeLayout/index.js

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { request } from 'strapi-helper-plugin';
+import formatLayouts from './utils/formatLayouts';
+import reducer, { initialState } from './reducer';
+import { makeSelectModelAndComponentSchemas } from '../../containers/Main/selectors';
+
+const useFetchContentTypeLayout = contentTypeUID => {
+  const [{ error, isLoading, layout, layouts }, dispatch] = useReducer(reducer, initialState);
+  const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
+  const { schemas } = useSelector(state => schemasSelector(state), shallowEqual);
+  const isMounted = useRef(true);
+
+  const getData = useCallback(
+    async (uid, abortSignal = false) => {
+      let signal = abortSignal || new AbortController().signal;
+
+      if (layouts[uid]) {
+        dispatch({ type: 'SET_LAYOUT_FROM_STATE', uid });
+
+        return;
+      }
+      dispatch({ type: 'GET_DATA' });
+
+      try {
+        const { data } = await request(`/content-manager/content-types/${uid}/configuration`, {
+          method: 'GET',
+          signal,
+        });
+
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data: formatLayouts(data, schemas),
+        });
+      } catch (error) {
+        if (isMounted.current) {
+          console.error(error);
+        }
+
+        if (isMounted.current && error.name !== 'AbortError') {
+          dispatch({ type: 'GET_DATA_ERROR', error });
+        }
+      }
+    },
+    [layouts, schemas]
+  );
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    const { signal } = abortController;
+
+    getData(contentTypeUID, signal);
+
+    return () => {
+      abortController.abort();
+    };
+  }, [contentTypeUID, getData]);
+
+  const updateLayout = useCallback(
+    newLayout => {
+      dispatch({
+        type: 'UPDATE_LAYOUT',
+        newLayout: formatLayouts({ contentType: newLayout, components: {} }, schemas),
+      });
+    },
+    [schemas]
+  );
+
+  return {
+    error,
+    isLoading,
+    layout,
+    updateLayout,
+  };
+};
+
+export default useFetchContentTypeLayout;

package/admin/src/hooks/useFetchContentTypeLayout/reducer.js

@@ -0,0 +1,56 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  error: null,
+  isLoading: true,
+  layout: {},
+  layouts: {},
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA': {
+        draftState.isLoading = true;
+        draftState.error = null;
+        draftState.layout = {};
+        break;
+      }
+      case 'GET_DATA_SUCCEEDED': {
+        const contentTypeUid = action.data.contentType.uid;
+
+        draftState.layout = action.data;
+        draftState.layouts[contentTypeUid] = action.data;
+        draftState.isLoading = false;
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = false;
+        draftState.error = action.error;
+        break;
+      }
+      case 'SET_LAYOUT_FROM_STATE': {
+        draftState.error = null;
+        draftState.layout = state.layouts[action.uid];
+        break;
+      }
+      case 'UPDATE_LAYOUT': {
+        const oldLayout = state.layout;
+
+        draftState.layout = {
+          ...oldLayout,
+          contentType: { uid: oldLayout.contentType.uid, ...action.newLayout.contentType },
+        };
+        draftState.layouts[oldLayout.contentType.uid] = {
+          ...oldLayout,
+          contentType: { uid: oldLayout.contentType.uid, ...action.newLayout.contentType },
+        };
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;