From d0d18b22e1566a8ca25d42cbcb2ba7c67c0eb6af Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 28 May 2020 16:28:52 +0200 Subject: [PATCH] Created hook to get layout Signed-off-by: soupette --- .../src/containers/Roles/EditPage/index.js | 67 +++++++++------ .../hooks/useFetchPermissionsLayout/index.js | 34 ++++++++ .../useFetchPermissionsLayout/reducer.js | 35 ++++++++ .../tests/reducer.test.js | 83 +++++++++++++++++++ .../utils/tempData.js | 29 +++++++ 5 files changed, 221 insertions(+), 27 deletions(-) create mode 100644 packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/index.js create mode 100644 packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/reducer.js create mode 100644 packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/tests/reducer.test.js create mode 100644 packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/utils/tempData.js diff --git a/packages/strapi-admin/admin/src/containers/Roles/EditPage/index.js b/packages/strapi-admin/admin/src/containers/Roles/EditPage/index.js index 88fed7993f..251bb9ea30 100644 --- a/packages/strapi-admin/admin/src/containers/Roles/EditPage/index.js +++ b/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} /> { style={{ height: 115 }} /> - - - - - - - - - + {!isLoading && ( + + + + + + + + + )} )} diff --git a/packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/index.js b/packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/index.js new file mode 100644 index 0000000000..0095d6d82e --- /dev/null +++ b/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; diff --git a/packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/reducer.js b/packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/reducer.js new file mode 100644 index 0000000000..7428534bcf --- /dev/null +++ b/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; diff --git a/packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/tests/reducer.test.js b/packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/tests/reducer.test.js new file mode 100644 index 0000000000..39b7567141 --- /dev/null +++ b/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); + }); + }); +}); diff --git a/packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/utils/tempData.js b/packages/strapi-admin/admin/src/hooks/useFetchPermissionsLayout/utils/tempData.js new file mode 100644 index 0000000000..e7263c8f45 --- /dev/null +++ b/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;