Fix loading state and ctb setup

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

packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/index.js

@@ -7,12 +7,7 @@ import {
   useGlobalContext,
   PopUpWarning,
 } from 'strapi-helper-plugin';
-import {
+import { useHistory, useLocation, useRouteMatch, Redirect } from 'react-router-dom';
-  useHistory,
-  useLocation,
-  useRouteMatch,
-  Redirect,
-} from 'react-router-dom';
 import DataManagerContext from '../../contexts/DataManagerContext';
 import getTrad from '../../utils/getTrad';
 import makeUnique from '../../utils/makeUnique';
@@ -55,21 +50,17 @@ const DataManagerProvider = ({ allIcons, children }) => {
   } = reducerState.toJS();
   const { pathname } = useLocation();
   const { push } = useHistory();
-  const contentTypeMatch = useRouteMatch(
+  const contentTypeMatch = useRouteMatch(`/plugins/${pluginId}/content-types/:uid`);
-    `/plugins/${pluginId}/content-types/:uid`
-  );
   const componentMatch = useRouteMatch(
     `/plugins/${pluginId}/component-categories/:categoryUid/:componentUid`
   );
+
   const formatMessageRef = useRef();
   formatMessageRef.current = formatMessage;
-  const isInDevelopmentMode =
+  const isInDevelopmentMode = currentEnvironment === 'development' && autoReload;
-    currentEnvironment === 'development' && autoReload;
 
   const isInContentTypeView = contentTypeMatch !== null;
-  const firstKeyToMainSchema = isInContentTypeView
+  const firstKeyToMainSchema = isInContentTypeView ? 'contentType' : 'component';
-    ? 'contentType'
-    : 'component';
   const currentUid = isInContentTypeView
     ? get(contentTypeMatch, 'params.uid', null)
     : get(componentMatch, 'params.componentUid', null);
@@ -80,10 +71,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
 
   getDataRef.current = async () => {
     try {
-      const [
+      const [{ data: componentsArray }, { data: contentTypesArray }] = await Promise.all(
-        { data: componentsArray },
-        { data: contentTypesArray },
-      ] = await Promise.all(
         ['components', 'content-types'].map(endPoint => {
           return request(`/${pluginId}/${endPoint}`, {
             method: 'GET',
@@ -118,11 +106,11 @@ const DataManagerProvider = ({ allIcons, children }) => {
   useEffect(() => {
     // We need to set the modifiedData after the data has been retrieved
     // and also on pathname change
-    if (!isLoading) {
+    if (!isLoading && currentUid) {
       setModifiedData();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading, pathname]);
+  }, [isLoading, pathname, currentUid]);
 
   useEffect(() => {
     if (currentEnvironment === 'development' && !autoReload) {
@@ -135,8 +123,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
   }, [autoReload, currentEnvironment]);
 
   const didModifiedComponents =
-    getCreatedAndModifiedComponents(modifiedData.components || {}, components)
+    getCreatedAndModifiedComponents(modifiedData.components || {}, components).length > 0;
-      .length > 0;
 
   const addAttribute = (
     attributeToSet,
@@ -158,10 +145,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
     });
   };
 
-  const addCreatedComponentToDynamicZone = (
+  const addCreatedComponentToDynamicZone = (dynamicZoneTarget, componentsToAdd) => {
-    dynamicZoneTarget,
-    componentsToAdd
-  ) => {
     dispatch({
       type: 'ADD_CREATED_COMPONENT_TO_DYNAMIC_ZONE',
       dynamicZoneTarget,
@@ -181,10 +165,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
     componentCategory,
     shouldAddComponentToData = false
   ) => {
-    const type =
+    const type = schemaType === 'contentType' ? 'CREATE_SCHEMA' : 'CREATE_COMPONENT_SCHEMA';
-      schemaType === 'contentType'
-        ? 'CREATE_SCHEMA'
-        : 'CREATE_COMPONENT_SCHEMA';
 
     dispatch({
       type,
@@ -204,15 +185,9 @@ const DataManagerProvider = ({ allIcons, children }) => {
     });
   };
 
-  const removeAttribute = (
+  const removeAttribute = (mainDataKey, attributeToRemoveName, componentUid = '') => {
-    mainDataKey,
-    attributeToRemoveName,
-    componentUid = ''
-  ) => {
     const type =
-      mainDataKey === 'components'
+      mainDataKey === 'components' ? 'REMOVE_FIELD_FROM_DISPLAYED_COMPONENT' : 'REMOVE_FIELD';
-        ? 'REMOVE_FIELD_FROM_DISPLAYED_COMPONENT'
-        : 'REMOVE_FIELD';
 
     if (mainDataKey === 'contentType') {
       emitEvent('willDeleteFieldOfContentType');
@@ -253,17 +228,11 @@ const DataManagerProvider = ({ allIcons, children }) => {
   const deleteData = async () => {
     try {
       const requestURL = `/${pluginId}/${endPoint}/${currentUid}`;
-      const isTemporary = get(
+      const isTemporary = get(modifiedData, [firstKeyToMainSchema, 'isTemporary'], false);
-        modifiedData,
-        [firstKeyToMainSchema, 'isTemporary'],
-        false
-      );
       const userConfirm = window.confirm(
         formatMessage({
           id: getTrad(
-            `popUpWarning.bodyMessage.${
+            `popUpWarning.bodyMessage.${isInContentTypeView ? 'contentType' : 'component'}.delete`
-              isInContentTypeView ? 'contentType' : 'component'
-            }.delete`
           ),
         })
       );
@@ -338,9 +307,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
 
   const getAllNestedComponents = () => {
     const appNestedCompo = retrieveNestedComponents(components);
-    const editingDataNestedCompos = retrieveNestedComponents(
+    const editingDataNestedCompos = retrieveNestedComponents(modifiedData.components || {});
-      modifiedData.components || {}
-    );
 
     return makeUnique([...editingDataNestedCompos, ...appNestedCompo]);
   };
@@ -370,10 +337,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
       isInContentTypeView
     );
 
-    const dataShape = orderAllDataAttributesWithImmutable(
+    const dataShape = orderAllDataAttributesWithImmutable(newSchemaToSet, isInContentTypeView);
-      newSchemaToSet,
-      isInContentTypeView
-    );
 
     // This prevents from losing the created content type or component when clicking on the link from the left menu
     const hasJustCreatedSchema =
@@ -401,11 +365,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
 
   const submitData = async additionalContentTypeData => {
     try {
-      const isCreating = get(
+      const isCreating = get(modifiedData, [firstKeyToMainSchema, 'isTemporary'], false);
-        modifiedData,
-        [firstKeyToMainSchema, 'isTemporary'],
-        false
-      );
       const body = {
         components: getComponentsToPost(
           modifiedData.components,
@@ -505,14 +465,11 @@ const DataManagerProvider = ({ allIcons, children }) => {
       value={{
         addAttribute,
         addCreatedComponentToDynamicZone,
-        allComponentsCategories: retrieveSpecificInfoFromComponents(
+        allComponentsCategories: retrieveSpecificInfoFromComponents(components, ['category']),
-          components,
+        allComponentsIconAlreadyTaken: retrieveSpecificInfoFromComponents(components, [
-          ['category']
+          'schema',
-        ),
+          'icon',
-        allComponentsIconAlreadyTaken: retrieveSpecificInfoFromComponents(
+        ]),
-          components,
-          ['schema', 'icon']
-        ),
         allIcons,
         changeDynamicZoneComponents,
         components,