ui-soxo-bootstrap-core 2.4.25-dev.41 → 2.4.25-dev.46

package/core/components/landing-api/landing-api.js

@@ -1,492 +1,492 @@
-import React, { useState, useEffect, useContext } from 'react';
-
-import { Route, Switch } from 'react-router-dom';
-
-import { Skeleton } from 'antd';
-
-import { GlobalHeader, ChangePassword, useTranslation, GlobalContext, ModuleRoutes, SpotlightSearch, SettingsUtil, Profile, Card } from '../../lib';
-
-import './landing-api.scss';
-
-import HomePageAPI from '../../pages/homepage-api/homepage-api';
-
-import MenuTemplate from '../menu-template-api/menu-template-api';
-
-import ReportingDashboard from '../../modules/reporting/components/reporting-dashboard/reporting-dashboard';
-
-import PropTypes from 'prop-types';
-
-import { MenusAPI, CoreScripts } from '../../models';
-
-/**
- * Landing API
- *
- * @param {*} param0
- * @returns
- */
-export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, ...props }) {
-  const [loader, setLoader] = useState(false);
-
-  // const [modules, setModules] = useState([]);
-
-  const [connected] = useState();
-
-  const { dispatch, user = {} } = useContext(GlobalContext);
-
-  const [allModules, setAllModules] = useState();
-
-  const [meta, setMeta] = useState({});
-
-  // const [reports, setReports] = useState([]);
-
-  var config = {};
-
-  // Variable decides the control of homepage
-  // #TODO This is a temporary fix - Homemage
-
-  let disableHomepage = false;
-
-  if (process.env.REACT_APP_DISABLEHOMEPAGE) {
-    disableHomepage = JSON.parse(process.env.REACT_APP_DISABLEHOMEPAGE);
-  }
-
-  // useEffect(() => {
-
-  //     // Initialize the menus for the logged in user
-  //     initializeUserMenus();
-
-  // }, [selectedBranch]);
-
-  //These change is done to fix when refreshing the report menu missing, but it removed because,makes another issue, ie there is continuos loading occurs for 2 times
-  // useEffect(() => {
-
-  //     if (loader) {
-  //         initializeUserMenus();
-  //     }
-  // }, [loader]);
-
-  useEffect(() => {
-    // Initialize the menus for the logged in user
-    initializeUserMenus();
-  }, []);
-
-  /**
-   * Initialize the user menus
-   */
-  async function initializeUserMenus() {
-    // need to find what implement, with a login who has the respective value ("wug_custreportids")
-    const report = await loadScripts(user);
-
-    await loadMenus(report);
-  }
-
-  // const keyMap = {
-  //     moveUp: 'Shift+B',
-  //     spotlight: 'Shift+F'
-  // }
-
-  let coreModules;
-
-  // Reports length
-  let reportMenus = [];
-
-  /**
-   *
-   *
-   * @param reports
-   */
-  async function loadMenus(reports) {
-
-    setLoader(true);
-
-    // setReports(report)
-
-    const result = await MenusAPI.getMenus(user);
-
-    // console.log(result);
-
-    if (result && Array.isArray(result.result) && result.result.length) {
-
-      // setModules(result.result);
-
-      // result.result.map((ele) => {
-      //     let languageString = JSON.parse(ele.attributes)
-      //     console.log('language_string', languageString);
-      //     if (languageString && languageString.languages) {
-
-      //         const language = i18n.language;
-
-      //         i18n.addResourceBundle(language, 'translation', languageString.languages[i18n.language]);
-      //     }
-      // })
-    }
-    // Check if the 'settings' property exists in the 'result' object
-    if (result.result.settings) {
-      // Dispatch an action to update the settings in the store
-      dispatch({ type: 'settings', payload: result.result.settings });
-    }
-
-
-    // Reports length
-    if (reports.length) {
-      reportMenus = [
-        {
-          page: { path: 'ManageReports', identifier: null },
-          path: '/manage-reports',
-          caption: 'Reports',
-          sub_menus: reports,
-        },
-      ];
-    }
-
-    coreModules = [
-      {
-        caption: 'Preferences',
-        sub_menus: [
-          {
-            path: '/change-password',
-            caption: 'Change Password',
-          },
-        ],
-      },
-    ];
-
-    /**If there is roles assigned to the user */
-    // for matria
-    const useCoreMenus = process.env.REACT_APP_USE_CORE_MENUS === 'true';
-    if (useCoreMenus) {
-      if (result && result.result && reportMenus) {
-        setAllModules([...result.result, ...reportMenus, ...coreModules]);
-      } else {
-        //If there is no roles assigned to the user
-        setAllModules([...coreModules]);
-      }
-
-    } else {
-      //  for nura
-      if (result && result.result.menus && reportMenus) {
-        setAllModules([...result.result.menus, ...reportMenus, ...coreModules]);
-      } else {
-        //If there is no roles assigned to the user
-        setAllModules([...coreModules]);
-      }
-
-
-    }
-    setLoader(false);
-
-  }
-
-
-  /**
-   * Load the scripts
-   *
-   * @param {*} user
-   * @returns
-   */
-  const loadScripts = async (user) => {
-    if (user.user_group && user.user_group.wug_custreportids && user.user_group.wug_custreportids !== '') {
-      // Saving the report ids to a variable
-      let reportIds = user.user_group.wug_custreportids;
-
-      var reportIdKeys = reportIds.split(',');
-
-      const reports = await Promise.all(reportIdKeys.map((id) => CoreScripts.getReportMenu({ id })));
-
-      let filtered = reports
-        .filter((record) => record.active === 'Y')
-        .map((result) => {
-          return {
-            ...result,
-          };
-        });
-
-      // setReports(filtered);
-
-      return filtered;
-    } else {
-      return [];
-    }
-  };
-
-  // setAllModules([...modules, ...reportMenus, ...coreModules])
-
-  // let coreModules = [];
-
-  // // Reports length
-  // let reportMenus = []
-
-  // // Reports length
-  // if (reports.length) {
-
-  //     reportMenus = [{
-  //         page: { path: "ManageReports", identifier: null },
-  //         path: '/manage-reports',
-  //         caption: 'Reports',
-  //         sub_menus: reports
-  //     }]
-  // }
-
-  return (
-    <section className="landing">
-      {/* <HotKeys focused={true} attach={window} keyMap={keyMap} handlers={handlers}> */}
-
-      <GlobalHeader
-        loading={loader}
-        appSettings={appSettings}
-        meta={meta}
-        isConnected={connected}
-        reload={initializeUserMenus}
-        modules={allModules}
-        user={user}
-        history={history}
-      >
-        {loader ? (
-          <Card className="skeleton-card">
-            <div className="skeleton-wrapper">
-              <Skeleton paragraph={{ rows: 4 }} />
-            </div>
-          </Card>
-        ) : (
-          <>
-            {/* <Switch> */}
-
-            {/* Homepage */}
-            {!disableHomepage ? <Route exact key={'home'} path={'/'} render={(props) => <HomePageAPI config={config} {...props} />} /> : null}
-            {/* Homepage Ends */}
-
-            <Route exact key={'profile'} path={'/profile'} render={(props) => <Profile {...props} />} />
-
-            <Route path={'/menus/:id'} render={() => <ModuleRoutes model={MenusAPI} />} />
-
-            {/* <Switch> */}
-            {/* Modules and Menus */}
-            <DefineRoute
-              menus={allModules}
-              CustomComponents={CustomComponents}
-              CustomModels={CustomModels}
-              settings={appSettings}
-              callback={(props) => {
-                setMeta({
-                  ...props,
-                });
-              }}
-            />
-
-            {/* <Route path={'/users'} render={() => <ModuleRoutes model={UsersAPI} />} /> */}
-
-            <Route path={'/reports/:id'} render={(props) => <ReportingDashboard CustomComponents={CustomComponents} {...props} />} />
-
-            <Route exact key={'change-password'} path={'/change-password'} render={(props) => <ChangePassword {...props} />} />
-
-            {/* </Switch> */}
-          </>
-        )}
-      </GlobalHeader>
-
-      {/* </HotKeys> */}
-
-      <SpotlightSearch config={props.searchConfig} ref={(elem) => SettingsUtil.registerModal(elem)} />
-    </section>
-  );
-}
-
-/**
- * Define PropTypes for the component
- */
-LandingApi.propTypes = {
-  history: PropTypes.history,
-  CustomModels: PropTypes.object,
-  appSettings: PropTypes.object,
-  props: PropTypes.array,
-};
-
-/**
- *
- *
- * @param {*} param0
- * @returns
- */
-function DefineRoute({ menus, CustomComponents, CustomModels, settings, callback }) {
-  const [routes, setRoutes] = useState([]);
-
-  const [languageString, setLanguagestring] = useState({});
-
-  const { i18n } = useTranslation();
-
-  useEffect(() => {
-    buildRoutes(menus);
-  }, []);
-
-  /**
-   *
-   * @param menus
-   */
-  async function buildRoutes(menus) {
-    let dynamicRoutes = prepareRoutes(menus);
-
-    // console.log(dynamicRoutes);
-
-    SettingsUtil.registerMenus(dynamicRoutes);
-
-    // Prepare the language bundle
-    prepareLanguageBundle({ menus: dynamicRoutes });
-
-    setRoutes(dynamicRoutes);
-  }
-
-  let dynamic = [];
-
-  /**
-   * Prepare the routes
-   *
-   * @param {*} menus
-   * @returns
-   */
-  function prepareRoutes(menus) {
-    if (menus && menus.length) {
-      menus.forEach((menu) => {
-        dynamic.push(menu);
-
-        if (menu.sub_menus && menu.sub_menus.length) {
-          return prepareRoutes(menu.sub_menus);
-        }
-      });
-    }
-
-    return dynamic;
-  }
-
-  /**
-   * Prepare the language bundle that accepts the menus and prepares the bundle
-   *
-   * @param {*} param0
-   */
-  function prepareLanguageBundle({ menus }) {
-    let languageString = {};
-
-    const language = i18n.language;
-
-    // Load the language String from each
-    menus.forEach((menu) => {
-      if (menu.attributes) {
-        // try {
-        // Menu Attributes
-        let attributes = JSON.parse(menu.attributes);
-
-        if (attributes && attributes.languages) {
-          let keys = Object.keys(attributes.languages);
-
-          keys.forEach((key) => {
-            // languageString = {
-            //     [key]:{
-            //         ...attributes.languages[key]
-            //     }
-
-            // }
-
-            languageString[key] = {
-              ...languageString[key],
-              ...attributes.languages[key],
-            };
-
-            // languageString = {
-            //     [key]:{
-            //         ...attributes.languages[key]
-            //     }
-
-            // }
-
-            i18n.addResourceBundle(key, 'translation', languageString[key]);
-          });
-
-          setLanguagestring(languageString);
-
-          // languageString = {
-
-          //     ...languageString,
-          //     [menu.name]:{
-          //         ...attributes.languages
-          //     }
-
-          // }
-
-          // Object.keys(languageString).forEach((key)=>{
-
-          //     i18n.addResourceBundle(key, 'translation', languageString[key]);
-
-          // })
-        }
-        // } catch (error) {
-
-        //     console.log(error);
-
-        // }
-      }
-    });
-
-    i18n.addResourceBundle(language, 'translation', languageString[i18n.language]);
-  }
-
-  /**
-   * Print the route
-   *
-   * @param {*} menu
-   * @param {*} index
-   * @param {*} CustomComponents
-   * @param {*} CustomModels
-   * @param {*} callback
-   * @returns
-   */
-  function printRoute(menu, index, CustomComponents, CustomModels, callback) {
-    // From the path we remove any query parameters that exist in the url
-    //
-    let paths;
-
-    //There will be path for normal menus
-    if (menu.path) {
-      paths = menu.path.split('?');
-    } else {
-      /** In case if there is no path , ie, in case of reports menu */
-      menu.sub_menus.map((menus) => {
-        paths = menus.path.split('?');
-      });
-    }
-
-    // Find the route path
-    let path = paths[0];
-
-    return (
-      <Route
-        exact
-        key={index}
-        path={path}
-        render={(props) => {
-          return (
-            <MenuTemplate
-              menu={menu}
-              {...menu.attributes}
-              {...props}
-              CustomModels={CustomModels}
-              CustomComponents={CustomComponents}
-              settings={settings}
-              callback={(props) => {
-                callback(props);
-              }}
-            />
-          );
-        }}
-      />
-    );
-  }
-
-  return (
-    <>
-      <Switch>
-        {routes.map((menu, index) => {
-          return printRoute(menu, index, CustomComponents, CustomModels, callback);
-        })}
-      </Switch>
-    </>
-  );
-}
+import React, { useState, useEffect, useContext } from 'react';
+
+import { Route, Switch } from 'react-router-dom';
+
+import { Skeleton } from 'antd';
+
+import { GlobalHeader, ChangePassword, useTranslation, GlobalContext, ModuleRoutes, SpotlightSearch, SettingsUtil, Profile, Card } from '../../lib';
+
+import './landing-api.scss';
+
+import HomePageAPI from '../../pages/homepage-api/homepage-api';
+
+import MenuTemplate from '../menu-template-api/menu-template-api';
+
+import ReportingDashboard from '../../modules/reporting/components/reporting-dashboard/reporting-dashboard';
+
+import PropTypes from 'prop-types';
+
+import { MenusAPI, CoreScripts } from '../../models';
+
+/**
+ * Landing API
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, ...props }) {
+  const [loader, setLoader] = useState(false);
+
+  // const [modules, setModules] = useState([]);
+
+  const [connected] = useState();
+
+  const { dispatch, user = {} } = useContext(GlobalContext);
+
+  const [allModules, setAllModules] = useState();
+
+  const [meta, setMeta] = useState({});
+
+  // const [reports, setReports] = useState([]);
+
+  var config = {};
+
+  // Variable decides the control of homepage
+  // #TODO This is a temporary fix - Homemage
+
+  let disableHomepage = false;
+
+  if (process.env.REACT_APP_DISABLEHOMEPAGE) {
+    disableHomepage = JSON.parse(process.env.REACT_APP_DISABLEHOMEPAGE);
+  }
+
+  // useEffect(() => {
+
+  //     // Initialize the menus for the logged in user
+  //     initializeUserMenus();
+
+  // }, [selectedBranch]);
+
+  //These change is done to fix when refreshing the report menu missing, but it removed because,makes another issue, ie there is continuos loading occurs for 2 times
+  // useEffect(() => {
+
+  //     if (loader) {
+  //         initializeUserMenus();
+  //     }
+  // }, [loader]);
+
+  useEffect(() => {
+    // Initialize the menus for the logged in user
+    initializeUserMenus();
+  }, []);
+
+  /**
+   * Initialize the user menus
+   */
+  async function initializeUserMenus() {
+    // need to find what implement, with a login who has the respective value ("wug_custreportids")
+    const report = await loadScripts(user);
+
+    await loadMenus(report);
+  }
+
+  // const keyMap = {
+  //     moveUp: 'Shift+B',
+  //     spotlight: 'Shift+F'
+  // }
+
+  let coreModules;
+
+  // Reports length
+  let reportMenus = [];
+
+  /**
+   *
+   *
+   * @param reports
+   */
+  async function loadMenus(reports) {
+
+    setLoader(true);
+
+    // setReports(report)
+
+    const result = await MenusAPI.getMenus(user);
+
+    // console.log(result);
+
+    if (result && Array.isArray(result.result) && result.result.length) {
+
+      // setModules(result.result);
+
+      // result.result.map((ele) => {
+      //     let languageString = JSON.parse(ele.attributes)
+      //     console.log('language_string', languageString);
+      //     if (languageString && languageString.languages) {
+
+      //         const language = i18n.language;
+
+      //         i18n.addResourceBundle(language, 'translation', languageString.languages[i18n.language]);
+      //     }
+      // })
+    }
+    // Check if the 'settings' property exists in the 'result' object
+    if (result.result.settings) {
+      // Dispatch an action to update the settings in the store
+      dispatch({ type: 'settings', payload: result.result.settings });
+    }
+
+
+    // Reports length
+    if (reports.length) {
+      reportMenus = [
+        {
+          page: { path: 'ManageReports', identifier: null },
+          path: '/manage-reports',
+          caption: 'Reports',
+          sub_menus: reports,
+        },
+      ];
+    }
+
+    coreModules = [
+      {
+        caption: 'Preferences',
+        sub_menus: [
+          {
+            path: '/change-password',
+            caption: 'Change Password',
+          },
+        ],
+      },
+    ];
+
+    /**If there is roles assigned to the user */
+    // for matria
+    const useCoreMenus = process.env.REACT_APP_USE_CORE_MENUS === 'true';
+    if (useCoreMenus) {
+      if (result && result.result && reportMenus) {
+        setAllModules([...result.result, ...reportMenus, ...coreModules]);
+      } else {
+        //If there is no roles assigned to the user
+        setAllModules([...coreModules]);
+      }
+
+    } else {
+      //  for nura
+      if (result && result.result.menus && reportMenus) {
+        setAllModules([...result.result.menus, ...reportMenus, ...coreModules]);
+      } else {
+        //If there is no roles assigned to the user
+        setAllModules([...coreModules]);
+      }
+
+
+    }
+    setLoader(false);
+
+  }
+
+
+  /**
+   * Load the scripts
+   *
+   * @param {*} user
+   * @returns
+   */
+  const loadScripts = async (user) => {
+    if (user.user_group && user.user_group.wug_custreportids && user.user_group.wug_custreportids !== '') {
+      // Saving the report ids to a variable
+      let reportIds = user.user_group.wug_custreportids;
+
+      var reportIdKeys = reportIds.split(',');
+
+      const reports = await Promise.all(reportIdKeys.map((id) => CoreScripts.getReportMenu({ id })));
+
+      let filtered = reports
+        .filter((record) => record.active === 'Y')
+        .map((result) => {
+          return {
+            ...result,
+          };
+        });
+
+      // setReports(filtered);
+
+      return filtered;
+    } else {
+      return [];
+    }
+  };
+
+  // setAllModules([...modules, ...reportMenus, ...coreModules])
+
+  // let coreModules = [];
+
+  // // Reports length
+  // let reportMenus = []
+
+  // // Reports length
+  // if (reports.length) {
+
+  //     reportMenus = [{
+  //         page: { path: "ManageReports", identifier: null },
+  //         path: '/manage-reports',
+  //         caption: 'Reports',
+  //         sub_menus: reports
+  //     }]
+  // }
+
+  return (
+    <section className="landing">
+      {/* <HotKeys focused={true} attach={window} keyMap={keyMap} handlers={handlers}> */}
+
+      <GlobalHeader
+        loading={loader}
+        appSettings={appSettings}
+        meta={meta}
+        isConnected={connected}
+        reload={initializeUserMenus}
+        modules={allModules}
+        user={user}
+        history={history}
+      >
+        {loader ? (
+          <Card className="skeleton-card">
+            <div className="skeleton-wrapper">
+              <Skeleton paragraph={{ rows: 4 }} />
+            </div>
+          </Card>
+        ) : (
+          <>
+            {/* <Switch> */}
+
+            {/* Homepage */}
+            {!disableHomepage ? <Route exact key={'home'} path={'/'} render={(props) => <HomePageAPI config={config} {...props} />} /> : null}
+            {/* Homepage Ends */}
+
+            <Route exact key={'profile'} path={'/profile'} render={(props) => <Profile {...props} />} />
+
+            <Route path={'/menus/:id'} render={() => <ModuleRoutes model={MenusAPI} />} />
+
+            {/* <Switch> */}
+            {/* Modules and Menus */}
+            <DefineRoute
+              menus={allModules}
+              CustomComponents={CustomComponents}
+              CustomModels={CustomModels}
+              settings={appSettings}
+              callback={(props) => {
+                setMeta({
+                  ...props,
+                });
+              }}
+            />
+
+            {/* <Route path={'/users'} render={() => <ModuleRoutes model={UsersAPI} />} /> */}
+
+            <Route path={'/reports/:id'} render={(props) => <ReportingDashboard CustomComponents={CustomComponents} {...props} />} />
+
+            <Route exact key={'change-password'} path={'/change-password'} render={(props) => <ChangePassword {...props} />} />
+
+            {/* </Switch> */}
+          </>
+        )}
+      </GlobalHeader>
+
+      {/* </HotKeys> */}
+
+      <SpotlightSearch config={props.searchConfig} ref={(elem) => SettingsUtil.registerModal(elem)} />
+    </section>
+  );
+}
+
+/**
+ * Define PropTypes for the component
+ */
+LandingApi.propTypes = {
+  history: PropTypes.history,
+  CustomModels: PropTypes.object,
+  appSettings: PropTypes.object,
+  props: PropTypes.array,
+};
+
+/**
+ *
+ *
+ * @param {*} param0
+ * @returns
+ */
+function DefineRoute({ menus, CustomComponents, CustomModels, settings, callback }) {
+  const [routes, setRoutes] = useState([]);
+
+  const [languageString, setLanguagestring] = useState({});
+
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    buildRoutes(menus);
+  }, []);
+
+  /**
+   *
+   * @param menus
+   */
+  async function buildRoutes(menus) {
+    let dynamicRoutes = prepareRoutes(menus);
+
+    // console.log(dynamicRoutes);
+
+    SettingsUtil.registerMenus(dynamicRoutes);
+
+    // Prepare the language bundle
+    prepareLanguageBundle({ menus: dynamicRoutes });
+
+    setRoutes(dynamicRoutes);
+  }
+
+  let dynamic = [];
+
+  /**
+   * Prepare the routes
+   *
+   * @param {*} menus
+   * @returns
+   */
+  function prepareRoutes(menus) {
+    if (menus && menus.length) {
+      menus.forEach((menu) => {
+        dynamic.push(menu);
+
+        if (menu.sub_menus && menu.sub_menus.length) {
+          return prepareRoutes(menu.sub_menus);
+        }
+      });
+    }
+
+    return dynamic;
+  }
+
+  /**
+   * Prepare the language bundle that accepts the menus and prepares the bundle
+   *
+   * @param {*} param0
+   */
+  function prepareLanguageBundle({ menus }) {
+    let languageString = {};
+
+    const language = i18n.language;
+
+    // Load the language String from each
+    menus.forEach((menu) => {
+      if (menu.attributes) {
+        // try {
+        // Menu Attributes
+        let attributes = JSON.parse(menu.attributes);
+
+        if (attributes && attributes.languages) {
+          let keys = Object.keys(attributes.languages);
+
+          keys.forEach((key) => {
+            // languageString = {
+            //     [key]:{
+            //         ...attributes.languages[key]
+            //     }
+
+            // }
+
+            languageString[key] = {
+              ...languageString[key],
+              ...attributes.languages[key],
+            };
+
+            // languageString = {
+            //     [key]:{
+            //         ...attributes.languages[key]
+            //     }
+
+            // }
+
+            i18n.addResourceBundle(key, 'translation', languageString[key]);
+          });
+
+          setLanguagestring(languageString);
+
+          // languageString = {
+
+          //     ...languageString,
+          //     [menu.name]:{
+          //         ...attributes.languages
+          //     }
+
+          // }
+
+          // Object.keys(languageString).forEach((key)=>{
+
+          //     i18n.addResourceBundle(key, 'translation', languageString[key]);
+
+          // })
+        }
+        // } catch (error) {
+
+        //     console.log(error);
+
+        // }
+      }
+    });
+
+    i18n.addResourceBundle(language, 'translation', languageString[i18n.language]);
+  }
+
+  /**
+   * Print the route
+   *
+   * @param {*} menu
+   * @param {*} index
+   * @param {*} CustomComponents
+   * @param {*} CustomModels
+   * @param {*} callback
+   * @returns
+   */
+  function printRoute(menu, index, CustomComponents, CustomModels, callback) {
+    // From the path we remove any query parameters that exist in the url
+    //
+    let paths;
+
+    //There will be path for normal menus
+    if (menu.path) {
+      paths = menu.path.split('?');
+    } else {
+      /** In case if there is no path , ie, in case of reports menu */
+      menu.sub_menus.map((menus) => {
+        paths = menus.path.split('?');
+      });
+    }
+
+    // Find the route path
+    let path = paths[0];
+
+    return (
+      <Route
+        exact
+        key={index}
+        path={path}
+        render={(props) => {
+          return (
+            <MenuTemplate
+              menu={menu}
+              {...menu.attributes}
+              {...props}
+              CustomModels={CustomModels}
+              CustomComponents={CustomComponents}
+              settings={settings}
+              callback={(props) => {
+                callback(props);
+              }}
+            />
+          );
+        }}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Switch>
+        {routes.map((menu, index) => {
+          return printRoute(menu, index, CustomComponents, CustomModels, callback);
+        })}
+      </Switch>
+    </>
+  );
+}