Add useContentManagerInitData hook

This commit is contained in:
Rémi de Juvigny 2023-04-13 12:14:43 +02:00
parent 660349845d
commit 0ab74b0799
5 changed files with 40 additions and 23 deletions

View File

@ -1,12 +1,18 @@
import { GET_DATA, RESET_PROPS, SET_CONTENT_TYPE_LINKS } from './constants';
import { GET_INIT_DATA, RESET_INIT_DATA, SET_INIT_DATA } from './constants';
export const getData = () => ({
type: GET_DATA,
export const getInitData = () => ({
type: GET_INIT_DATA,
});
export const resetProps = () => ({ type: RESET_PROPS });
export const resetInitData = () => ({ type: RESET_INIT_DATA });
export const setContentTypeLinks = (authorizedCtLinks, authorizedStLinks, models, components) => ({
type: SET_CONTENT_TYPE_LINKS,
data: { authorizedCtLinks, authorizedStLinks, components, contentTypeSchemas: models },
export const setInitData = ({
authorizedCtLinks,
authorizedStLinks,
contentTypeSchemas,
components,
fieldSizes,
}) => ({
type: SET_INIT_DATA,
data: { authorizedCtLinks, authorizedStLinks, components, contentTypeSchemas, fieldSizes },
});

View File

@ -1,3 +1,3 @@
export const GET_DATA = 'ContentManager/App/GET_DATA';
export const RESET_PROPS = 'ContentManager/App/RESET_PROPS';
export const SET_CONTENT_TYPE_LINKS = 'ContentManager/App/SET_CONTENT_TYPE_LINKS';
export const GET_INIT_DATA = 'ContentManager/App/GET_INIT_DATA';
export const RESET_INIT_DATA = 'ContentManager/App/RESET_INIT_DATA';
export const SET_INIT_DATA = 'ContentManager/App/SET_INIT_DATA';

View File

@ -20,13 +20,14 @@ import NoContentType from '../NoContentType';
import NoPermissions from '../NoPermissions';
import SingleTypeRecursivePath from '../SingleTypeRecursivePath';
import LeftMenu from './LeftMenu';
import useModels from './useModels';
import useContentManagerInitData from './useContentManagerInitData';
const cmPermissions = permissions.contentManager;
const App = () => {
const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } = useModels();
const { status, collectionTypeLinks, singleTypeLinks, models, refetchData, fieldSizes } =
useContentManagerInitData();
const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], (model) =>
model.title.toLowerCase()
);

View File

@ -4,7 +4,7 @@
*/
/* eslint-disable consistent-return */
import produce from 'immer';
import { GET_DATA, RESET_PROPS, SET_CONTENT_TYPE_LINKS } from './constants';
import { GET_INIT_DATA, RESET_INIT_DATA, SET_INIT_DATA } from './constants';
const initialState = {
components: [],
@ -20,14 +20,14 @@ const initialState = {
const mainReducer = (state = initialState, action) =>
produce(state, (draftState) => {
switch (action.type) {
case GET_DATA: {
case GET_INIT_DATA: {
draftState.status = 'loading';
break;
}
case RESET_PROPS: {
case RESET_INIT_DATA: {
return initialState;
}
case SET_CONTENT_TYPE_LINKS: {
case SET_INIT_DATA: {
draftState.collectionTypeLinks = action.data.authorizedCtLinks.filter(
({ isDisplayed }) => isDisplayed
);
@ -36,6 +36,7 @@ const mainReducer = (state = initialState, action) =>
);
draftState.components = action.data.components;
draftState.models = action.data.contentTypeSchemas;
draftState.fieldSizes = action.data.fieldSizes;
draftState.status = 'resolved';
break;
}

View File

@ -11,11 +11,11 @@ import axios from 'axios';
import { useIntl } from 'react-intl';
import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
import { getRequestUrl, getTrad } from '../../utils';
import { getData, resetProps, setContentTypeLinks } from './actions';
import { getInitData, resetInitData, setInitData } from './actions';
import { selectAppDomain } from './selectors';
import getContentTypeLinks from './utils/getContentTypeLinks';
const useModels = () => {
const useContentManagerInitData = () => {
const dispatch = useDispatch();
const toggleNotification = useNotification();
const state = useSelector(selectAppDomain());
@ -29,7 +29,7 @@ const useModels = () => {
const { get } = useFetchClient();
const fetchData = async () => {
dispatch(getData());
dispatch(getInitData());
try {
const [
@ -39,8 +39,11 @@ const useModels = () => {
{
data: { data: models },
},
{
data: { data: initData },
},
] = await Promise.all(
['components', 'content-types'].map((endPoint) =>
['components', 'content-types', 'init'].map((endPoint) =>
get(getRequestUrl(endPoint), { cancelToken: source.token })
)
);
@ -67,7 +70,13 @@ const useModels = () => {
models,
});
const actionToDispatch = setContentTypeLinks(ctLinks, stLinks, models, components);
const actionToDispatch = setInitData({
authorizedCtLinks: ctLinks,
authorizedStLinks: stLinks,
contentTypeSchemas: models,
components,
fieldSizes: initData.fieldSizes,
});
dispatch(actionToDispatch);
} catch (err) {
@ -88,7 +97,7 @@ const useModels = () => {
return () => {
source.cancel('Operation canceled by the user.');
dispatch(resetProps());
dispatch(resetInitData());
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dispatch, toggleNotification]);
@ -96,4 +105,4 @@ const useModels = () => {
return { ...state, refetchData: fetchDataRef.current };
};
export default useModels;
export default useContentManagerInitData;