Created hook to get layout

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

packages/strapi-admin/admin/src/containers/Roles/EditPage/index.js

@@ -17,6 +17,7 @@ import {
   SettingsPermissions,
 } from '../../../components/Roles';
 import SizedInput from '../../../components/SizedInput';
+import useFetchPermissionsLayout from '../../../hooks/useFetchPermissionsLayout';
 
 import schema from './utils/schema';
 
@@ -27,24 +28,33 @@ const EditPage = () => {
     params: { id },
   } = useRouteMatch(`${settingsBaseURL}/roles/:id`);
 
-  const headerActions = (handleSubmit, handleReset) => [
-    {
-      label: formatMessage({
-        id: 'app.components.Button.reset',
-      }),
-      onClick: handleReset,
-      color: 'cancel',
-      type: 'button',
-    },
-    {
-      label: formatMessage({
-        id: 'app.components.Button.save',
-      }),
-      onClick: handleSubmit,
-      color: 'success',
-      type: 'submit',
-    },
-  ];
+  // Retrieve the view's layout
+  const { data: layout, isLoading } = useFetchPermissionsLayout();
+  console.log({ layout });
+
+  /* eslint-disable indent */
+  const headerActions = (handleSubmit, handleReset) =>
+    isLoading
+      ? []
+      : [
+          {
+            label: formatMessage({
+              id: 'app.components.Button.reset',
+            }),
+            onClick: handleReset,
+            color: 'cancel',
+            type: 'button',
+          },
+          {
+            label: formatMessage({
+              id: 'app.components.Button.save',
+            }),
+            onClick: handleSubmit,
+            color: 'success',
+            type: 'submit',
+          },
+        ];
+  /* eslint-enable indent */
 
   const handleCreateRoleSubmit = async data => {
     try {
@@ -83,10 +93,12 @@ const EditPage = () => {
                 id: 'Settings.roles.create.description',
               })}
               actions={headerActions(handleSubmit, handleReset)}
+              isLoading={isLoading}
             />
             <BaselineAlignement top size="3px" />
             <FormCard
               actions={actions}
+              isLoading={isLoading}
               title={formatMessage({
                 id: 'Settings.roles.form.title',
               })}
@@ -115,15 +127,16 @@ const EditPage = () => {
                 style={{ height: 115 }}
               />
             </FormCard>
-
-            <Padded top size="md">
-              <Tabs tabsLabel={['Collection Types', 'Single Types', 'Plugins', 'Settings']}>
-                <CollectionTypesPermissions />
-                <SingleTypesPermissions />
-                <PluginsPermissions />
-                <SettingsPermissions />
-              </Tabs>
-            </Padded>
+            {!isLoading && (
+              <Padded top size="md">
+                <Tabs tabsLabel={['Collection Types', 'Single Types', 'Plugins', 'Settings']}>
+                  <CollectionTypesPermissions />
+                  <SingleTypesPermissions />
+                  <PluginsPermissions />
+                  <SettingsPermissions />
+                </Tabs>
+              </Padded>
+            )}
           </ContainerFluid>
         </form>
       )}

packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/index.js

@@ -0,0 +1,34 @@
+import { useEffect, useReducer } from 'react';
+// TODO
+// import { request } from 'strapi-helper-plugin'
+import tempData from './utils/tempData';
+import reducer, { initialState } from './reducer';
+
+const useFetchPermissionsLayout = () => {
+  const [{ data, error, isLoading }, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    const getData = () => {
+      dispatch({
+        type: 'GET_DATA',
+      });
+
+      return new Promise(resolve => {
+        setTimeout(() => {
+          dispatch({
+            type: 'GET_DATA_SUCCEEDED',
+            data: tempData,
+          });
+
+          resolve();
+        }, 1000);
+      });
+    };
+
+    getData();
+  }, []);
+
+  return { data, error, isLoading };
+};
+
+export default useFetchPermissionsLayout;

packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/reducer.js

@@ -0,0 +1,35 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  data: {},
+  error: null,
+  isLoading: true,
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA': {
+        draftState.isLoading = true;
+        draftState.data = {};
+        draftState.error = null;
+        break;
+      }
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.data = action.data;
+        draftState.isLoading = false;
+        draftState.error = null;
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = false;
+        draftState.error = action.error;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/tests/reducer.test.js

@@ -0,0 +1,83 @@
+import reducer from '../reducer';
+
+describe('ADMIN | HOOKS | useFetchPermissionsLayout | reducer', () => {
+  describe('DEFAULT_ACTION', () => {
+    it('should return the initialState', () => {
+      const state = {
+        test: true,
+      };
+
+      expect(reducer(state, {})).toEqual(state);
+    });
+  });
+
+  describe('GET_DATA_ERROR', () => {
+    it('should set isLoading to false is an error occured', () => {
+      const action = {
+        type: 'GET_DATA_ERROR',
+        error: {
+          message: 'error',
+        },
+      };
+      const initialState = {
+        data: {},
+        error: null,
+        isLoading: true,
+      };
+      const expected = {
+        data: {},
+        error: { message: 'error' },
+        isLoading: false,
+      };
+
+      expect(reducer(initialState, action)).toEqual(expected);
+    });
+  });
+
+  describe('GET_DATA', () => {
+    it('should set isLoading to true ', () => {
+      const action = {
+        type: 'GET_DATA',
+      };
+      const initialState = {
+        data: {
+          ok: true,
+        },
+        error: true,
+        isLoading: true,
+      };
+      const expected = {
+        data: {},
+        error: null,
+        isLoading: true,
+      };
+
+      expect(reducer(initialState, action)).toEqual(expected);
+    });
+  });
+
+  describe('GET_DATA_SUCCEEDED', () => {
+    it('should return the state with the data', () => {
+      const action = {
+        type: 'GET_DATA_SUCCEEDED',
+        data: {
+          ok: true,
+        },
+      };
+      const initialState = {
+        data: {},
+        error: true,
+        isLoading: true,
+      };
+      const expected = {
+        data: {
+          ok: true,
+        },
+        error: null,
+        isLoading: false,
+      };
+
+      expect(reducer(initialState, action)).toEqual(expected);
+    });
+  });
+});

packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/utils/tempData.js

@@ -0,0 +1,29 @@
+const data = {
+  sections: {
+    contentTypes: [
+      {
+        name: 'Create',
+        action: 'plugins::content-type.create', // same with read, update and delete
+        subjects: ['plugins::users-permissions.user'], // on which content type it will be applied
+      },
+    ],
+    plugins: [
+      {
+        name: 'Read', // Label checkbox
+        plugin: 'plugin::content-type-builder', // Retrieve banner info
+        subCategory: 'Category name', // if null, then the front uses plugin's name by default
+        action: 'plugins::content-type-builder.read', // Mapping
+      },
+    ],
+    settings: [
+      {
+        name: 'Create', // Label checkbox
+        category: 'Webhook', // Banner info
+        subCategory: 'category name', // Divider title
+        action: 'plugins::content-type-builder.create',
+      },
+    ],
+  },
+};
+
+export default data;