Init DataManager container

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

@@ -8,6 +8,7 @@ import React, { Suspense, lazy } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { LoadingIndicatorPage } from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';
+import DataManagerProvider from '../DataManagerProvider';
 import Wrapper from './Wrapper';
 
 const ListPage = lazy(() => import('../ListPage'));
@@ -17,18 +18,20 @@ import RecursivePath from '../RecursivePath';
 const App = () => {
   return (
     <Wrapper>
-      <Suspense fallback={<LoadingIndicatorPage />}>
-        <Switch>
-          <Route
-            path={`/plugins/${pluginId}/content-types/:uid`}
-            component={ListPage}
-          />
-          <Route
-            path={`/plugins/${pluginId}/component-categories/:categoryUid`}
-            component={RecursivePath}
-          />
-        </Switch>
-      </Suspense>
+      <DataManagerProvider>
+        <Suspense fallback={<LoadingIndicatorPage />}>
+          <Switch>
+            <Route
+              path={`/plugins/${pluginId}/content-types/:uid`}
+              component={ListPage}
+            />
+            <Route
+              path={`/plugins/${pluginId}/component-categories/:categoryUid`}
+              component={RecursivePath}
+            />
+          </Switch>
+        </Suspense>
+      </DataManagerProvider>
     </Wrapper>
   );
 };

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

@@ -0,0 +1,48 @@
+import React, { useEffect, useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { request, LoadingIndicatorPage } from 'strapi-helper-plugin';
+import DataManagerContext from '../../contexts/DataManagerContext';
+import pluginId from '../../pluginId';
+import init from './init';
+import reducer, { initialState } from './reducer';
+import createDataObject from './utils/createDataObject';
+
+const DataManagerProvider = ({ children }) => {
+  const abortController = new AbortController();
+  const { signal } = abortController;
+
+  const [reducerState, dispatch] = useReducer(reducer, initialState, init);
+  const { isLoading } = reducerState.toJS();
+
+  useEffect(() => {
+    const getData = async () => {
+      const [{ data: componentsArray }] = await Promise.all(
+        ['components'].map(endPoint => {
+          return request(`/${pluginId}/${endPoint}`, {
+            method: 'GET',
+            signal,
+          });
+        })
+      );
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        components: createDataObject(componentsArray),
+      });
+    };
+
+    getData();
+  }, [signal]);
+
+  return (
+    <DataManagerContext.Provider>
+      {isLoading ? <LoadingIndicatorPage /> : children}
+    </DataManagerContext.Provider>
+  );
+};
+
+DataManagerProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default DataManagerProvider;

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

@@ -0,0 +1,5 @@
+function init(initialState) {
+  return initialState;
+}
+
+export default init;

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

@@ -0,0 +1,20 @@
+import { fromJS } from 'immutable';
+
+const initialState = fromJS({
+  components: {},
+  isLoading: true,
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'GET_DATA_SUCCEEDED':
+      return state
+        .update('components', () => fromJS(action.components))
+        .update('isLoading', () => false);
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

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

@@ -0,0 +1,8 @@
+const createDataObject = arr =>
+  arr.reduce((acc, current) => {
+    acc[current.uid] = current;
+
+    return acc;
+  }, {});
+
+export default createDataObject;

packages/strapi-plugin-content-type-builder/admin/src/contexts/DataManagerContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const DataManagerContext = createContext();
+
+export default DataManagerContext;

packages/strapi-plugin-content-type-builder/admin/src/hooks/useDataManager.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import DataManagerContext from '../contexts/DataManagerContext';
+
+const useDataManager = () => useContext(DataManagerContext);
+
+export default useDataManager;