Format layout for editRelations and refacto st container

Signed-off-by: soupette <cyril.lpz@gmail.com>

examples/getstarted/api/homepage/models/homepage.settings.json

@@ -2,7 +2,8 @@
   "kind": "singleType",
   "collectionName": "homepages",
   "info": {
-    "name": "Homepage"
+    "name": "Homepage",
+    "description": ""
   },
   "options": {
     "draftAndPublish": true,
@@ -21,16 +22,32 @@
     "single": {
       "model": "file",
       "via": "related",
-      "allowedTypes": ["images", "files", "videos"],
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos"
+      ],
       "plugin": "upload",
       "required": false
     },
     "multiple": {
       "collection": "file",
       "via": "related",
-      "allowedTypes": ["images", "videos"],
+      "allowedTypes": [
+        "images",
+        "videos"
+      ],
       "plugin": "upload",
       "required": false
+    },
+    "dz": {
+      "type": "dynamiczone",
+      "components": [
+        "default.closingperiod",
+        "default.dish",
+        "default.openingtimes",
+        "default.restaurantservice"
+      ]
     }
   }
 }

packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js

@@ -10,18 +10,15 @@ import {
   useUserPermissions,
 } from 'strapi-helper-plugin';
 import { Padded } from '@buffetjs/core';
-
-import pluginId from '../../pluginId';
 import pluginPermissions from '../../permissions';
-import { generatePermissionsObject } from '../../utils';
+import { generatePermissionsObject, getInjectedComponents } from '../../utils';
 import Container from '../../components/Container';
 import DynamicZone from '../../components/DynamicZone';
 import FormWrapper from '../../components/FormWrapper';
 import FieldComponent from '../../components/FieldComponent';
 import Inputs from '../../components/Inputs';
 import SelectWrapper from '../../components/SelectWrapper';
-import useFetchContentTypeLayout from '../../hooks/useFetchContentTypeLayout';
+import { useFetchContentTypeLayout } from '../../hooks';
-import getInjectedComponents from '../../utils/getComponents';
 import EditViewDataManagerProvider from '../EditViewDataManagerProvider';
 import EditViewProvider from '../EditViewProvider';
 import Header from './Header';
@@ -154,28 +151,19 @@ const EditView = ({ components, currentEnvironment, models, plugins, slug }) =>
               {currentContentTypeLayoutData.layouts.editRelations.length > 0 && (
                 <SubWrapper style={{ padding: '0 20px 1px', marginBottom: '25px' }}>
                   <div style={{ paddingTop: '22px' }}>
-                    {currentContentTypeLayoutData.layouts.editRelations.map(relationName => {
+                    {currentContentTypeLayoutData.layouts.editRelations.map(
-                      const relation = get(
+                      ({ name, fieldSchema, metadatas }) => {
-                        currentContentTypeLayoutData,
-                        ['schema', 'attributes', relationName],
-                        {}
-                      );
-                      const relationMetas = get(
-                        currentContentTypeLayoutData,
-                        ['metadatas', relationName, 'edit'],
-                        {}
-                      );
-
                         return (
                           <SelectWrapper
-                          {...relation}
+                            {...fieldSchema}
-                          {...relationMetas}
+                            {...metadatas}
-                          key={relationName}
+                            key={name}
-                          name={relationName}
+                            name={name}
-                          relationsType={relation.relationType}
+                            relationsType={fieldSchema.relationType}
                           />
                         );
-                    })}
+                      }
+                    )}
                   </div>
                 </SubWrapper>
               )}
@@ -187,7 +175,6 @@ const EditView = ({ components, currentEnvironment, models, plugins, slug }) =>
                         id: 'app.links.configure-view',
                       }}
                       icon="layout"
-                      key={`${pluginId}.link`}
                       url="ctm-configurations/edit-settings/content-types"
                       onClick={() => {
                         // emitEvent('willEditContentTypeLayoutFromEditView');
@@ -221,9 +208,7 @@ EditView.defaultProps = {
 EditView.propTypes = {
   components: PropTypes.array.isRequired,
   currentEnvironment: PropTypes.string,
-  deleteLayout: PropTypes.func.isRequired,
   emitEvent: PropTypes.func,
-  layouts: PropTypes.object.isRequired,
   models: PropTypes.array.isRequired,
   plugins: PropTypes.object,
   slug: PropTypes.string.isRequired,

packages/strapi-plugin-content-manager/admin/src/containers/SingleTypeEditView/index.js

@@ -1,62 +1,44 @@
-import React, { memo, useCallback, useMemo, useEffect } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { useHistory, useLocation } from 'react-router-dom';
-import { BackHeader, LiLink, CheckPermissions, useUserPermissions } from 'strapi-helper-plugin';
+import {
+  BackHeader,
+  LiLink,
+  CheckPermissions,
+  LoadingIndicatorPage,
+  useUserPermissions,
+} from 'strapi-helper-plugin';
 import { Padded } from '@buffetjs/core';
-
-import pluginId from '../../pluginId';
 import pluginPermissions from '../../permissions';
-import { generatePermissionsObject } from '../../utils';
+import { generatePermissionsObject, getInjectedComponents } from '../../utils';
 import Container from '../../components/Container';
 import DynamicZone from '../../components/DynamicZone';
 import FormWrapper from '../../components/FormWrapper';
 import FieldComponent from '../../components/FieldComponent';
 import Inputs from '../../components/Inputs';
 import SelectWrapper from '../../components/SelectWrapper';
-import getInjectedComponents from '../../utils/getComponents';
+import { useFetchContentTypeLayout } from '../../hooks';
 import EditViewDataManagerProvider from '../SingleTypeEditViewDataManagerProvider';
 import EditViewProvider from '../EditViewProvider';
 import Header from './Header';
-import { createAttributesLayout, formatLayoutWithMetas } from './utils';
+import { createAttributesLayout } from './utils';
 import { LinkWrapper, SubWrapper } from './components';
-
 import DeleteLink from './DeleteLink';
 import InformationCard from './InformationCard';
 
 /* eslint-disable  react/no-array-index-key */
 
-const EditView = ({
+const EditView = ({ components, currentEnvironment, models, plugins, slug }) => {
-  components,
-  currentEnvironment,
-  deleteLayout,
-  layouts,
-  models,
-  plugins,
-  slug,
-}) => {
   // TODO REFACTO THIS CONTAINER SINCE IT IS VERY SIMILAR TO THE CT ONE
-
+  const { isLoading, layout } = useFetchContentTypeLayout(slug);
   const { goBack } = useHistory();
   // DIFF WITH CT
   const { pathname } = useLocation();
   const viewPermissions = useMemo(() => generatePermissionsObject(slug), [slug]);
   const { allowedActions } = useUserPermissions(viewPermissions);
 
-  const allLayoutData = useMemo(() => get(layouts, [slug], {}), [layouts, slug]);
+  const currentContentTypeLayoutData = useMemo(() => get(layout, ['contentType'], {}), [layout]);
-
-  const currentContentTypeLayoutData = useMemo(() => get(allLayoutData, ['contentType'], {}), [
-    allLayoutData,
-  ]);
-
-  const currentContentTypeLayoutRelations = useMemo(
-    () => get(currentContentTypeLayoutData, ['layouts', 'editRelations'], []),
-    [currentContentTypeLayoutData]
-  );
-  const currentContentTypeSchema = useMemo(
-    () => get(currentContentTypeLayoutData, ['schema'], {}),
-    [currentContentTypeLayoutData]
-  );
 
   // Check if a block is a dynamic zone
   const isDynamicZone = useCallback(block => {
@@ -65,27 +47,32 @@ const EditView = ({
     });
   }, []);
 
-  useEffect(() => {
-    return () => deleteLayout(slug);
-  }, [deleteLayout, slug]);
-
   const formattedContentTypeLayout = useMemo(() => {
-    const enhancedLayout = formatLayoutWithMetas(currentContentTypeLayoutData);
+    if (!currentContentTypeLayoutData.layouts) {
+      return [];
+    }
 
-    return createAttributesLayout(enhancedLayout, currentContentTypeSchema.attributes);
+    return createAttributesLayout(
-  }, [currentContentTypeLayoutData, currentContentTypeSchema.attributes]);
+      currentContentTypeLayoutData.layouts.edit,
+      currentContentTypeLayoutData.schema.attributes
+    );
+  }, [currentContentTypeLayoutData]);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
 
   return (
     <EditViewProvider
       allowedActions={allowedActions}
-      allLayoutData={allLayoutData}
+      allLayoutData={layout}
       components={components}
       isSingleType
       layout={currentContentTypeLayoutData}
       models={models}
     >
       <EditViewDataManagerProvider
-        allLayoutData={allLayoutData}
+        allLayoutData={layout}
         redirectToPreviousPage={goBack}
         isSingleType
         slug={slug}
@@ -163,31 +150,22 @@ const EditView = ({
             <div className="col-md-12 col-lg-3">
               <InformationCard />
               <Padded size="smd" top />
-              {currentContentTypeLayoutRelations.length > 0 && (
+              {currentContentTypeLayoutData.layouts.editRelations.length > 0 && (
                 <SubWrapper style={{ padding: '0 20px 1px', marginBottom: '25px' }}>
                   <div style={{ paddingTop: '22px' }}>
-                    {currentContentTypeLayoutRelations.map(relationName => {
+                    {currentContentTypeLayoutData.layouts.editRelations.map(
-                      const relation = get(
+                      ({ name, fieldSchema, metadatas }) => {
-                        currentContentTypeLayoutData,
-                        ['schema', 'attributes', relationName],
-                        {}
-                      );
-                      const relationMetas = get(
-                        currentContentTypeLayoutData,
-                        ['metadatas', relationName, 'edit'],
-                        {}
-                      );
-
                         return (
                           <SelectWrapper
-                          {...relation}
+                            {...fieldSchema}
-                          {...relationMetas}
+                            {...metadatas}
-                          key={relationName}
+                            key={name}
-                          name={relationName}
+                            name={name}
-                          relationsType={relation.relationType}
+                            relationsType={fieldSchema.relationType}
                           />
                         );
-                    })}
+                      }
+                    )}
                   </div>
                 </SubWrapper>
               )}
@@ -200,7 +178,6 @@ const EditView = ({
                         id: 'app.links.configure-view',
                       }}
                       icon="layout"
-                      key={`${pluginId}.link`}
                       // DIFF WITH CT
                       url={`${pathname}/ctm-configurations/edit-settings/content-types`}
                       onClick={() => {
@@ -235,9 +212,7 @@ EditView.defaultProps = {
 EditView.propTypes = {
   components: PropTypes.array.isRequired,
   currentEnvironment: PropTypes.string,
-  deleteLayout: PropTypes.func.isRequired,
   emitEvent: PropTypes.func,
-  layouts: PropTypes.object.isRequired,
   models: PropTypes.array.isRequired,
   plugins: PropTypes.object,
   slug: PropTypes.string.isRequired,

packages/strapi-plugin-content-manager/admin/src/hooks/index.js

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

packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -3,6 +3,7 @@ import { get, set } from 'lodash';
 const formatLayoutWithMetas = obj => {
   const formatted = obj.layouts.edit.reduce((acc, current) => {
     const row = current.map(attribute => {
+      // TODO handle relations endpoint....
       return {
         ...attribute,
         fieldSchema: get(obj, ['schema', 'attributes', attribute.name], {}),
@@ -18,10 +19,32 @@ const formatLayoutWithMetas = obj => {
   return formatted;
 };
 
+// editRelations is an array of strings...
+const formatEditRelationsLayoutWithMetas = obj => {
+  const formatted = obj.layouts.editRelations.reduce((acc, current) => {
+    const fieldSchema = get(obj, ['schema', 'attributes', current], {});
+    const metadatas = get(obj, ['metadatas', current, 'edit'], {});
+    const size = 6;
+
+    acc.push({
+      name: current,
+      size,
+      fieldSchema,
+      metadatas,
+    });
+
+    return acc;
+  }, []);
+
+  return formatted;
+};
+
 const formatLayouts = data => {
   const formattedCTEditLayout = formatLayoutWithMetas(data.contentType);
+  const formattedEditRelationsLayout = formatEditRelationsLayoutWithMetas(data.contentType);
 
   set(data, ['contentType', 'layouts', 'edit'], formattedCTEditLayout);
+  set(data, ['contentType', 'layouts', 'editRelations'], formattedEditRelationsLayout);
 
   Object.keys(data.components).forEach(compoUID => {
     const formattedCompoEditLayout = formatLayoutWithMetas(data.components[compoUID]);
@@ -33,4 +56,4 @@ const formatLayouts = data => {
 };
 
 export default formatLayouts;
-export { formatLayoutWithMetas };
+export { formatEditRelationsLayoutWithMetas, formatLayoutWithMetas };

packages/strapi-plugin-content-manager/admin/src/utils/index.js

@@ -1,6 +1,7 @@
 export { default as checkIfAttributeIsDisplayable } from './checkIfAttributeIsDisplayable';
 export { default as dateFormats } from './dateFormats';
 export { default as generatePermissionsObject } from './generatePermissionsObject';
+export { default as getInjectedComponents } from './getComponents';
 export { default as getFieldName } from './getFieldName';
 export { default as getRequestUrl } from './getRequestUrl';
 export { default as getTrad } from './getTrad';