From 9fe12b59484ff9a818e2ba25810212f31755ba5c Mon Sep 17 00:00:00 2001
From: R <rajif@sismedika.com>
Date: Fri, 23 Dec 2022 11:53:27 +0700
Subject: [PATCH] add Corporate Context Provider

---
 frontend/dashboard/.eslintrc                  |  1 +
 .../contexts/ConfiguredCorporateContext.tsx   | 49 +++++++++++++++++++
 .../dashboard/src/layouts/dashboard/index.tsx |  9 ++++
 .../src/pages/Corporates/ConfigLayout.tsx     | 19 +++++++
 .../Corporates/CorporateTabNavigations.tsx    |  2 +-
 .../src/pages/Corporates/Division/Index.tsx   | 13 ++++-
 .../dashboard/src/pages/Corporates/Index.tsx  |  2 +-
 .../dashboard/src/pages/Corporates/Show.tsx   | 18 +++----
 frontend/dashboard/src/routes/index.tsx       | 17 ++++++-
 frontend/dashboard/tsconfig.json              |  8 ++-
 frontend/dashboard/vite.config.ts             |  4 ++
 11 files changed, 125 insertions(+), 17 deletions(-)
 create mode 100644 frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx
 create mode 100644 frontend/dashboard/src/pages/Corporates/ConfigLayout.tsx

diff --git a/frontend/dashboard/.eslintrc b/frontend/dashboard/.eslintrc
index 0ddcccd0..e101f76b 100755
--- a/frontend/dashboard/.eslintrc
+++ b/frontend/dashboard/.eslintrc
@@ -31,6 +31,7 @@
     "import/no-useless-path-segments": 1,
     "import/no-extraneous-dependencies": 0,
     "@typescript-eslint/naming-convention": 0,
+    "import/extensions": "never",
     "object-curly-spacing": [
       1,
       "always"
diff --git a/frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx b/frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx
new file mode 100644
index 00000000..5fde9420
--- /dev/null
+++ b/frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx
@@ -0,0 +1,49 @@
+import { Corporate } from '@/@types/corporates';
+import axios from '@/utils/axios';
+import { ReactNode, createContext, useState, useEffect } from 'react';
+import { useParams } from 'react-router';
+// hooks
+import useResponsive from '../hooks/useResponsive';
+
+// ----------------------------------------------------------------------
+
+export type ConfiguredCorporateContextProps = {
+  currentCorporate?: Corporate | null;
+};
+
+const initialState: ConfiguredCorporateContextProps = {
+  currentCorporate: null,
+};
+
+const ConfiguredCorporateContext = createContext(initialState);
+
+type ConfiguredCorporateProviderProps = {
+  children: ReactNode;
+};
+
+function ConfiguredCorporateProvider({ children }: ConfiguredCorporateProviderProps) {
+  const { corporate_id } = useParams();
+  const [corporate, setCorporate] = useState(null);
+
+  useEffect(() => {
+    // Load Corporate
+    console.log('calling corporate' + corporate_id);
+    
+    axios.get(`corporates/${corporate_id}`)
+    .then((res) => {
+      setCorporate(res.data)
+    })
+  }, []);
+
+  return (
+    <ConfiguredCorporateContext.Provider
+      value={{
+        currentCorporate: corporate,
+      }}
+    >
+      {children}
+    </ConfiguredCorporateContext.Provider>
+  );
+}
+
+export { ConfiguredCorporateProvider, ConfiguredCorporateContext };
diff --git a/frontend/dashboard/src/layouts/dashboard/index.tsx b/frontend/dashboard/src/layouts/dashboard/index.tsx
index 569ddb4c..6a30c399 100755
--- a/frontend/dashboard/src/layouts/dashboard/index.tsx
+++ b/frontend/dashboard/src/layouts/dashboard/index.tsx
@@ -90,6 +90,15 @@ export default function DashboardLayout() {
       sx={{
         display: { lg: 'flex' },
         minHeight: { lg: 1 },
+        
+        pl: {
+          xs: 2,
+          lg: 0
+        },
+        pr: {
+          xs: 2,
+          lg: 0
+        },
       }}
     >
       <DashboardHeader isCollapse={isCollapse} onOpenSidebar={() => setOpen(true)} />
diff --git a/frontend/dashboard/src/pages/Corporates/ConfigLayout.tsx b/frontend/dashboard/src/pages/Corporates/ConfigLayout.tsx
new file mode 100644
index 00000000..63e02a8c
--- /dev/null
+++ b/frontend/dashboard/src/pages/Corporates/ConfigLayout.tsx
@@ -0,0 +1,19 @@
+import { Outlet } from 'react-router-dom';
+// @mui
+import { Stack } from '@mui/material';
+import { ConfiguredCorporateProvider } from '@/contexts/ConfiguredCorporateContext';
+
+export default function ConfigLayout() {
+  return (
+    <Stack
+      sx={{
+        display: { lg: 'flex' },
+        minHeight: { lg: 1 },
+      }}
+    >
+      <ConfiguredCorporateProvider>
+        <Outlet />
+      </ConfiguredCorporateProvider>
+    </Stack>
+  );
+}
diff --git a/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx b/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx
index 4e4289ff..d882a464 100755
--- a/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx
+++ b/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx
@@ -80,7 +80,7 @@ export default function CorporateTabNavigations({ position }: Props) {
       allowScrollButtonsMobile
       aria-label="scrollable force tabs example"
     >
-      {mainTabItems.map((tabItem, index) => (<Tab key={index} onClick={() => { navigate("/corporates/"+corporate_id+"/"+mainTabItems[index].path) }}label={tabItem.label}/>))}
+      {mainTabItems.map((tabItem, index) => (<Tab key={index} onClick={() => { navigate("/corporate/"+corporate_id+"/"+mainTabItems[index].path) }}label={tabItem.label}/>))}
     </Tabs>
   )
 }
diff --git a/frontend/dashboard/src/pages/Corporates/Division/Index.tsx b/frontend/dashboard/src/pages/Corporates/Division/Index.tsx
index 3744a469..78da9fe0 100755
--- a/frontend/dashboard/src/pages/Corporates/Division/Index.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Division/Index.tsx
@@ -1,4 +1,7 @@
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
 import { Card, Grid } from "@mui/material";
+import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
 import Page from "../../../components/Page";
@@ -12,6 +15,14 @@ export default function Divisions() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
+  
+  const [corporate, setCorporate] = useState<Corporate|null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext])
 
   return (
     <Page title="Division">
@@ -24,7 +35,7 @@ export default function Divisions() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
             href: '/corporates/'+corporate_id,
           },
           {
diff --git a/frontend/dashboard/src/pages/Corporates/Index.tsx b/frontend/dashboard/src/pages/Corporates/Index.tsx
index 3d22df70..1d16264a 100755
--- a/frontend/dashboard/src/pages/Corporates/Index.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Index.tsx
@@ -333,7 +333,7 @@ export default function Corporates() {
                   Edit
                 </Button>
               </Link>
-              <Link to={'/corporates/' + row.id + ''}>
+              <Link to={'/corporate/' + row.id + ''}>
                 <Button variant="outlined" color="primary" size="small">
                   Config
                 </Button>
diff --git a/frontend/dashboard/src/pages/Corporates/Show.tsx b/frontend/dashboard/src/pages/Corporates/Show.tsx
index 08d3f009..6e3325e1 100755
--- a/frontend/dashboard/src/pages/Corporates/Show.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Show.tsx
@@ -11,26 +11,25 @@ import Page from '../../components/Page';
 import axios from '../../utils/axios';
 import useAuth from '../../hooks/useAuth';
 import { Link , NavLink as RouterLink, useParams } from 'react-router-dom';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
 import { Corporate } from '../../@types/corporates';
 import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
 import CorporateTabNavigations from './CorporateTabNavigations';
 import { fCurrency } from '../../utils/formatNumber';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
 
 export default function Corporates() {
   const { themeStretch } = useSettings();
   const { corporate_id } = useParams();
-  const [corporate, setCorporate] = useState<Corporate>();
+  const [corporate, setCorporate] = useState<Corporate|null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
 
   useEffect(() => {
-    // TODO Use Hooks
-    axios.get(`corporates/${corporate_id}`)
-    .then((res) => {
-      setCorporate(res.data)
-    })
-  }, [])
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext])
 
   const headStyle = {
     fontWeight: 'bold',
@@ -51,8 +50,7 @@ export default function Corporates() {
           },
         ]}
       />
-
-
+      
       {/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
         <Card>
           <Stack spacing="3">
diff --git a/frontend/dashboard/src/routes/index.tsx b/frontend/dashboard/src/routes/index.tsx
index cbdecd1d..40645265 100755
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -89,8 +89,18 @@ export default function Router() {
           element: <CorporateCreate />,
         },
         {
-          path: 'corporates/:corporate_id',
-          element: <CorporateShow />,
+          path: 'corporate',
+          element: <ConfigLayout />, // Layout that use the context
+          children: [
+            {
+              path: ':corporate_id',
+              element: <CorporateShow />,
+            },
+            {
+              path: ':corporate_id/divisions',
+              element: <CorporateDivisions />,
+            },
+          ]
         },
         {
           path: 'corporates/:corporate_id/edit',
@@ -272,6 +282,9 @@ const NotFound = Loadable(lazy(() => import('../pages/Page404')));
 const Members = Loadable(lazy(() => import('../pages/Members/Index')));
 const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));
 
+// Corporate
+const ConfigLayout = Loadable(lazy(() => import('../pages/Corporates/ConfigLayout')));
+
 const Corporate = Loadable(lazy(() => import('../pages/Corporates/Index')));
 const CorporateCreate = Loadable(lazy(() => import('../pages/Corporates/CreateUpdate')));
 const CorporateShow = Loadable(lazy(() => import('../pages/Corporates/Show')));
diff --git a/frontend/dashboard/tsconfig.json b/frontend/dashboard/tsconfig.json
index e992023b..843bc48b 100755
--- a/frontend/dashboard/tsconfig.json
+++ b/frontend/dashboard/tsconfig.json
@@ -15,7 +15,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.json" }]
 }
diff --git a/frontend/dashboard/vite.config.ts b/frontend/dashboard/vite.config.ts
index a56ef19d..557fde33 100755
--- a/frontend/dashboard/vite.config.ts
+++ b/frontend/dashboard/vite.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import svgrPlugin from 'vite-plugin-svgr'
 import { VitePWA } from 'vite-plugin-pwa'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,4 +21,7 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+  }
 })