feat(core): ⚡ delivery oriented task fix

delivery oriented task fix Ref #183
wrappid · Mar 20, 2024 · a807708 · a807708
1 parent d06eb21
commit a807708
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 107 deletions.
diff --git a/package/CoreApp.js b/package/CoreApp.js
@@ -7,6 +7,7 @@ import { WrappidSyncer } from "@wrappid/styles";
 
 import CoreAppDiv from "./components/layouts/CoreAppDiv";
 import CoreNavigation from "./components/navigation/CoreNavigation";
+import CoreAppStrictWrapper from "./CoreAppStrictWrapper";
 import CoreRoutes from "./CoreRoutes";
 import CoreProvider from "./store/CoreProvider";
 
@@ -28,31 +29,33 @@ export default function CoreApp(props) {
   } = props;
 
   return (
-    <WrappidSyncer data={{
-      config: applicationConfig,
-      themes: themesRegistry
-    }}>
-      <CoreProvider
-        applicationConfig={{ ...(applicationConfig || {}) }}
-        storage={storage}
-        appStyles={appStyles}
-        customIcons={customIcons}
-        applicationRegistry={applicationRegistry}
-        themesRegistry={themesRegistry}
-        routesRegistry={routesRegistry}
-        menusRegistry={menusRegistry}
-        componentsRegistry={componentsRegistry}
-        reducersRegistry={reducersRegistry}
-        resourcesRegistry={resourcesRegistry}
-        functionsRegistry={functionsRegistry}
-        validationsRegistry={validationsRegistry} 
-      >
-        <CoreAppDiv>
-          <CoreNavigation>
-            <CoreRoutes />
-          </CoreNavigation>
-        </CoreAppDiv>
-      </CoreProvider>
-    </WrappidSyncer>
+    <CoreAppStrictWrapper>
+      <WrappidSyncer data={{
+        config: applicationConfig,
+        themes: themesRegistry
+      }}>
+        <CoreProvider
+          applicationConfig={{ ...(applicationConfig || {}) }}
+          storage={storage}
+          appStyles={appStyles}
+          customIcons={customIcons}
+          applicationRegistry={applicationRegistry}
+          themesRegistry={themesRegistry}
+          routesRegistry={routesRegistry}
+          menusRegistry={menusRegistry}
+          componentsRegistry={componentsRegistry}
+          reducersRegistry={reducersRegistry}
+          resourcesRegistry={resourcesRegistry}
+          functionsRegistry={functionsRegistry}
+          validationsRegistry={validationsRegistry} 
+        >
+          <CoreAppDiv>
+            <CoreNavigation>
+              <CoreRoutes />
+            </CoreNavigation>
+          </CoreAppDiv>
+        </CoreProvider>
+      </WrappidSyncer>
+    </CoreAppStrictWrapper>
   );
 }
diff --git a/package/CoreAppStrictWrapper.js b/package/CoreAppStrictWrapper.js
@@ -0,0 +1,14 @@
+import React from "react";
+
+// eslint-disable-next-line import/no-unresolved
+import { WrappidDataContext } from "@wrappid/styles";
+
+import { ENV_DEV_MODE } from "./config/constants";
+
+function CoreAppStrictWrapper(props) {
+  let { config } = React.useContext(WrappidDataContext);
+
+  return config?.environment === ENV_DEV_MODE ? <React.StrictMode>{props?.children}</React.StrictMode> : props?.children;
+}
+
+export default CoreAppStrictWrapper;
diff --git a/package/CoreRoutes.js b/package/CoreRoutes.js
@@ -25,6 +25,11 @@ const DEFAULT_ROUTE = {
   url         : "defaultAppRoute"
 };
 
+export let globalAccessToken = null;
+export let globalRefreshToken = null;
+export let globalTokenRequested = null;
+export let globalTokenRequestTimeStamp = null;
+
 export default function CoreRoutes() {
   const dispatch = useDispatch();
   const routesRegistry = useContext(CoreRoutesContext);
@@ -34,27 +39,38 @@ export default function CoreRoutes() {
   const { config } = React.useContext(WrappidDataContext);
   const [defaultRoute, setDefaultRoute] = useState(DEFAULT_ROUTE);
 
-  React.useEffect(() => {
-    config?.backendUrl && dispatch(
-      apiRequestAction(
-        HTTP.GET,
-        `${!authenticated ? "/noauth/" : "/" }business/all/RoutePages`,
-        true,
-        { _defaultFilter: encodeURIComponent(JSON.stringify({ authRequired: authenticated })) },
-        GET_ROUTE_SUCCESS,
-        GET_ROUTE_FAILURE
-      )
-    );
-
-    let defaultRouteName = authenticated ? config?.defaultAuthenticatedRoute : config?.defaultRoute;
+  const accessToken = useSelector((state) => state?.auth?.accessToken);
+  const refreshToken = useSelector((state) => state?.auth?.refreshToken);
+  const tokenRequested = useSelector((state) => state?.pendingRequests?.tokenRequested);
+  const tokenRequestTimeStamp = useSelector(
+    (state) => state?.pendingRequests?.tokenRequestTimeStamp
+  );
 
-    if (defaultRouteName) {
-      if (Object.keys(routesRegistry).includes(defaultRouteName)) {
-        setDefaultRoute(routesRegistry[defaultRouteName]);
-      } else if (routesFromStore?.filter((route) => route?.entityRef === defaultRouteName)?.length > 0) {
-        setDefaultRoute(routesFromStore?.filter((route) => route?.entityRef === defaultRouteName)[0]);
-      }
-    }
+  globalAccessToken = accessToken;
+  globalRefreshToken = refreshToken;
+  globalTokenRequested = tokenRequested;
+  globalTokenRequestTimeStamp = tokenRequestTimeStamp;
+
+  React.useEffect(() => {
+    // eslint-disable-next-line etc/no-commented-out-code
+    // config?.backendUrl && dispatch(
+    //   apiRequestAction(
+    //     HTTP.GET,
+    //     `${!authenticated ? "/noauth/" : "/" }business/all/RoutePages`,
+    //     true,
+    //     { _defaultFilter: encodeURIComponent(JSON.stringify({ authRequired: authenticated })) },
+    //     GET_ROUTE_SUCCESS,
+    //     GET_ROUTE_FAILURE
+    //   )
+    // );
+    // let defaultRouteName = authenticated ? config?.defaultAuthenticatedRoute : config?.defaultRoute;
+    // if (defaultRouteName) {
+    //   if (Object.keys(routesRegistry).includes(defaultRouteName)) {
+    //     setDefaultRoute(routesRegistry[defaultRouteName]);
+    //   } else if (routesFromStore?.filter((route) => route?.entityRef === defaultRouteName)?.length > 0) {
+    //     setDefaultRoute(routesFromStore?.filter((route) => route?.entityRef === defaultRouteName)[0]);
+    //   }
+    // }
   }, []);
 
   React.useEffect(() => {
@@ -70,10 +86,10 @@ export default function CoreRoutes() {
         )
       );
     }
-  }, [authenticated]);
+  }, [config, authenticated]);
 
   useEffect(() => {
-    let defaultRouteName = /* authenticated ? config?.defaultAuthenticatedRoute : */ config?.defaultRoute;
+    let defaultRouteName = (authenticated ? config?.defaultAuthenticatedRoute : config?.defaultRoute) || config?.defaultRoute || DEFAULT_ROUTE;
 
     if (defaultRouteName) {
       if (Object.keys(routesRegistry).includes(defaultRouteName)) {

diff --git a/package/components/layouts/_system/AppContainerLayout.js b/package/components/layouts/_system/AppContainerLayout.js
@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React from "react";
 
 // eslint-disable-next-line import/no-unresolved
 import { NativeAppContainer, nativeUseLocation } from "@wrappid/native";
+import { SMALL_WINDOW_WIDTH } from "@wrappid/styles";
 import { useDispatch, useSelector } from "react-redux";
 
 import {
@@ -10,8 +11,7 @@ import {
   GET_USER_SETTINGS,
   UPDATE_USER_SETTINGS
 } from "../../../config/api";
-import { HTTP, SMALL_WINDOW_WIDTH, userSettingsConstants } from "../../../config/constants";
-import { CoreRouteRegistryContext } from "../../../config/contextHandler";
+import { HTTP, userSettingsConstants } from "../../../config/constants";
 import CoreLayoutPlaceholder from "../../../layout/CoreLayoutPlaceholder";
 import ComponentsRegistry from "../../../registry/ComponentsRegistry";
 import { apiRequestAction } from "../../../store/action/appActions";
@@ -37,28 +37,18 @@ import CoreAppBar from "../../surfaces/CoreAppBar";
 import CoreDrawer from "../../surfaces/CoreDrawer";
 import CoreFooter from "../../surfaces/CoreFooter";
 
-export let globalAccessToken = null;
-export let globalRefreshToken = null;
-export let globalTokenRequested = null;
-export let globalTokenRequestTimeStamp = null;
-
-function AppContainerLayout() {
+export default function AppContainerLayout() {
   const windowWidth = window.innerWidth;
+  const leftMenuOpen = useSelector((state) => state?.menu?.leftMenuOpen);
+  const [leftMenuOpenSmallScreen, setLeftDrawerSmallScreen] = React.useState(false);
+  const _routes = useSelector((state) => state?.route?.routes);
+
   const dispatch = useDispatch();
   const location = nativeUseLocation();
   const auth = useSelector((state) => state?.auth);
   const accessToken = useSelector((state) => state?.auth?.accessToken);
-  const refreshToken = useSelector((state) => state?.auth?.refreshToken);
-  const tokenRequested = useSelector((state) => state?.pendingRequests?.tokenRequested);
-  const tokenRequestTimeStamp = useSelector(
-    (state) => state?.pendingRequests?.tokenRequestTimeStamp
-  );
-  const leftMenuOpen = useSelector((state) => state?.menu?.leftMenuOpen);
-  const [leftMenuOpenSmallScreen, setLeftDrawerSmallScreen] = useState(false);
   const currentPendingRequest = useSelector((state) => state.pendingRequests.pendingRequest);
   const recallState = useSelector((state) => state?.pendingRequests?.recall);
-  const _routes = useSelector((state) => state?.route?.routes);
-  const [routeRegistry, setRouteRegistry] = useState({});
 
   // user settings
   // const reload = useSelector((state) => state?.settings?.reload);
@@ -172,23 +162,12 @@ function AppContainerLayout() {
     });
   }, []);
 
-  React.useEffect(() => {
-    let registry = {};
-
-    for (let i = 0; i < _routes?.length; i++) {
-      registry[_routes[i].entityRef] = _routes[i].url;
-    }
-    setRouteRegistry(registry);
-  }, [_routes]);
-
   const getAppBar = () => {
     return auth?.uid ? <CoreAppBar handleDrawer={handleDrawer} routes={_routes} /> : null;
   };
-
   const getFooter = () => {
     return <CoreFooter />;
   };
-
   const getLeftDrawer = () => {
     return auth?.uid && auth?.accessToken ? (
       <CoreDrawer
@@ -198,13 +177,9 @@ function AppContainerLayout() {
     ) : null;
   };
 
-  globalAccessToken = accessToken;
-  globalRefreshToken = refreshToken;
-  globalTokenRequested = tokenRequested;
-  globalTokenRequestTimeStamp = tokenRequestTimeStamp;
-
   return (
-    <CoreRouteRegistryContext.Provider value={{ ...routeRegistry }}>
+    <>
+      {/* eslint-disable-next-line etc/no-commented-out-code */}
       <NativeAppContainer
         appBar={getAppBar}
         leftDrawer={getLeftDrawer}
@@ -215,11 +190,11 @@ function AppContainerLayout() {
         <CoreRequestProgressBar />
 
         <CoreLayoutPlaceholder id={AppContainerLayout.PLACEHOLDER.CONTENT} />
+
       </NativeAppContainer>
-    </CoreRouteRegistryContext.Provider>
+
+    </>
   );
 }
 
-export default AppContainerLayout;
-
 AppContainerLayout.PLACEHOLDER = { CONTENT: "content" };
diff --git a/package/components/layouts/_system/BlankLayout.js b/package/components/layouts/_system/BlankLayout.js
@@ -6,11 +6,10 @@ import CoreClasses from "../../../styles/CoreClasses";
 
 export default function BlankLayout() {
 
-  // eslint-disable-next-line etc/no-commented-out-code
-  // React.useEffect(() => {
-  //   // eslint-disable-next-line no-console
-  //   console.log("BlankLayout::useEffect");
-  // }, []);
+  React.useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log("BlankLayout::useEffect");
+  }, []);
 
   return (
     <>

diff --git a/package/index.js b/package/index.js
@@ -121,6 +121,7 @@ import {
 import CoreFormControlLabel from "./components/inputs/forms/CoreFormControlLabel";
 import CoreFormGroup from "./components/inputs/forms/CoreFormGroup";
 import ParentChildMap from "./components/inputs/ParentChildMap";
+import AppContainerLayout from "./components/layouts/_system/AppContainerLayout";
 import BlankLayout from "./components/layouts/_system/BlankLayout";
 import CenteredBlankLayout from "./components/layouts/_system/CenteredBlankLayout";
 import ComplexLayout from "./components/layouts/_system/ComplexLayout";
@@ -250,7 +251,7 @@ import {
 } from "./utils/themeUtil";
 
 export {
-  __EntityStatus, __IconTypes, apiRequestAction, APP_PLATFORM, AppService, BlankLayout, cancelFormEdit, CenteredBlankLayout, ChildMap, clearValidatePhoneEmail, ComplexLayout, ComponentNotFound, ComponentRegistryContext, config, CORE_DIALOG_TYPES, CoreAccordion,
+  __EntityStatus, __IconTypes, apiRequestAction, APP_PLATFORM, AppContainerLayout, AppService, BlankLayout, cancelFormEdit, CenteredBlankLayout, ChildMap, clearValidatePhoneEmail, ComplexLayout, ComponentNotFound, ComponentRegistryContext, config, CORE_DIALOG_TYPES, CoreAccordion,
   CoreAccordionDetail,
   CoreAccordionSummary, CoreAlert,
   CoreAlertTitle, CoreApiVersion, CoreApp, CoreAppBar, CoreAsyncSelect,
@@ -295,15 +296,13 @@ export {
   CoreList,
   CoreListItem, CoreListItemAvatar, CoreListItemButton, CoreListItemIcon,
   CoreListItemText, CoreListSubheader, CoreLoginDetails, CoreMarkdownViewer, CoreMedicineSelector, CoreMenu, CoreMenuItem,
-  CoreMenuList, CoreModal, CoreMultiTimeRangePicker, coreOpenUrl, CoreOtpInput,
+  CoreMenuList, CoreModal, CoreMultiTimeRangePicker, CoreNetworkStatus, coreOpenUrl, CoreOtpInput,
   CoreOutlinedButton, CorePaper, CorePhone, CorePhoneLink, CorePopover, CoreProfilePopOver, CoreProvider, CoreRating, CoreReactSelectInput, CoreResourceContext, CoreResponsiveButton,
   CoreRichTextEditor, CoreRightDrawer, CoreRouteRegistryContext, CoreRoutesContext, CoreScrollTop, CoreSection, CoreSelect, CoreSkeleton,
   CoreSnackbar, CoreSpan, CoreSpeechToText, CoreStack, CoreSwitch, CoreTab, CoreTabHead, CoreTable,
   CoreTableBody,
   CoreTableBodyCell,
-  CoreTableCell,
-  CoreNetworkStatus,
-  CoreTableContainer,
+  CoreTableCell, CoreTableContainer,
   CoreTableFooter,
   CoreTableHead, CoreTableHeadCell, CoreTableHeadRow, CoreTablePagination,
   CoreTableRow,
@@ -333,9 +332,9 @@ export {
   /**
    * Themes
    */
-  ThemeSelector, ThreeColumnLayout, toggleMenuItemState, toggleRightMenuState, TwoColumnLayout, urls, useDynamicRefs, UserChip, VCenteredBlankLayout, viewFormattedDate, WEB_PLATFORM, XLargeCoreStyles,
-  XXLargeCoreStyles,
+  ThemeSelector, ThreeColumnLayout, toggleMenuItemState, toggleRightMenuState, TwoColumnLayout, urls, useDynamicRefs,
   // Network status custom hook
-  useNetworkStatus
+  useNetworkStatus, UserChip, VCenteredBlankLayout, viewFormattedDate, WEB_PLATFORM, XLargeCoreStyles,
+  XXLargeCoreStyles
 };
 
diff --git a/package/layout/PageContainer.js b/package/layout/PageContainer.js
@@ -7,6 +7,7 @@ import { WrappidDataContext } from "@wrappid/styles";
 import { useDispatch, useSelector } from "react-redux";
 
 import CoreDialog from "../components/feedback/CoreDialog";
+import AppContainerLayout from "../components/layouts/_system/AppContainerLayout";
 import BlankLayout from "../components/layouts/_system/BlankLayout";
 import CoreModal from "../components/utils/CoreModal";
 import CoreNetworkStatus from "../components/utils/CoreNetworkStatus";
@@ -125,7 +126,7 @@ export default function PageContainer(props) {
     if (mergedComponentRegistry[route?.Page?.layout]?.layout) {
       return route?.Page?.layout;
     } else {
-      return (auth?.uid ? defaultAuthenticatedLayout : defaultLayout) || undefined;
+      return (auth?.uid ? (defaultAuthenticatedLayout || AppContainerLayout.name) : defaultLayout) || BlankLayout;
     }
   };
   /**

diff --git a/package/middleware/coreTokenProvider.js b/package/middleware/coreTokenProvider.js
@@ -1,4 +1,4 @@
-import { globalAccessToken } from "../components/layouts/_system/AppContainerLayout";
+import { globalAccessToken } from "../CoreRoutes";
 
 async function getCoreAccessToken() {
   try {

diff --git a/package/registry/ComponentsRegistry.js b/package/registry/ComponentsRegistry.js
@@ -1,3 +1,6 @@
+// eslint-disable-next-line import/no-unresolved
+import { NativeAppContainer } from "@wrappid/native";
+
 import { coreComponentsRegistry } from "../components/CoreComponentsRegistry";
 import PageLoader from "../components/PageLoader";
 import ComponentNotFound from "../error/ComponentNotFound";
@@ -23,6 +26,7 @@ let ComponentsRegistry = {
   Error404             : { comp: Error404 },
   Error500             : { comp: Error500 },
   LayoutMismatch       : { comp: LayoutMismatch },
+  NativeAppContainer   : { comp: NativeAppContainer },
   PageLoader           : { comp: PageLoader },
 };