producer dashboard - first draft

frontend/app/src/App.css

@@ -18,6 +18,11 @@
   cursor: pointer;
 }
 
+.link {
+  color: unset;
+  text-decoration: none;
+}
+
 .lot {
   border-top: 1px solid lightgrey;
   display: flex;

frontend/app/src/App.js

@@ -1,117 +1,38 @@
 import { ThemeProvider } from '@mui/material';
-import { createTheme } from '@mui/material/styles';
-import { frFR } from '@mui/material/locale';
 import { LocalizationProvider } from "@mui/x-date-pickers"
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 
-import { ReactKeycloakProvider } from '@react-keycloak/web'
 import Keycloak from 'keycloak-js'
+import { ReactKeycloakProvider } from '@react-keycloak/web'
 
 import { CookiesProvider } from 'react-cookie';
+import { RouterProvider } from "react-router-dom";
 
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import CustomerLayout from './layouts/customer/CustomerLayout.tsx';
-import CustomerOrderView from './layouts/customer/PaymentLayout.tsx'
+import { RouterFactory } from './layouts/RouterFactory.tsx';
 
 import './App.css';
-import PaymentLayout from './layouts/customer/PaymentLayout.tsx';
-import Dashboard from './domains/dashboard/views/Dashboard.tsx';
-import ProductionController from './domains/production/ProductionController.tsx';
-import SaleController from './domains/sale/SaleController.tsx';
-import CustomerController from './domains/customer/CustomerController.tsx';
-import ProducerController from './domains/producer/ProducerController.tsx';
+import { ThemeFactory } from './layouts/ThemeFactory.ts';
 
 
 function App() {
 
   const keycloakClient = new Keycloak(window.location.origin + '/config/keycloak.json')
+  const routerFactory = new RouterFactory()
+  const themeFactory = new ThemeFactory()
 
   const keycloakInitOptions = {
     checkLoginIframe: false,
     onLoad: 'check-sso',
     silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html'
   }
 
-  const theme = createTheme({
-    palette: {
-      //mode: 'dark',
-      primary: {
-        main: '#556b2f',
-      }
-    },
-    typography: {
-      h1: {
-        fontFamily: 'Acme',
-      },
-      h2: {
-        fontFamily: 'Acme',
-      },
-      h3: {
-        fontFamily: 'Acme',
-      },
-      h4: {
-        fontFamily: 'Acme',
-      },
-      h5: {
-        fontFamily: 'Acme',
-      },
-      h6: {
-        fontFamily: 'Acme',
-      },
-      subtitle1: {
-        fontWeight: 'bold'
-      }
-    }
-  }, frFR);
-
-  const router = createBrowserRouter([
-    {
-      path: "/",
-      element: getLayoutWrapper(),
-    },
-    {
-      path: "/dashboard",
-      element: <Dashboard/>
-    },
-    {
-      path: "/productions",
-      element: <ProductionController/>
-    },
-    {
-      path: "/sales",
-      element: <SaleController/>
-    },
-    {
-      path: "/customers",
-      element: <CustomerController/>
-    },
-    {
-      path: "/account",
-      element: <ProducerController/>
-    },
-    {
-      path: "/orders/:orderId/payment",
-      element: <PaymentLayout/>
-    }
-  ]);
-
-  function getLayoutWrapper(mainContent) {
-    if(process.env.REACT_APP_MODE === 'CUSTOMER') {
-      return <CustomerLayout/>
-    }
-    if(process.env.REACT_APP_MODE === 'PRODUCER') {
-      return <Dashboard/>
-    }
-    return <div>Configuration du mode client ou producteur absent ou non reconnu</div>
-  }
-
   return (
     <CookiesProvider>
       <ReactKeycloakProvider authClient={keycloakClient} initOptions={keycloakInitOptions}>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={themeFactory.createTheme()}>
           <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
-            <RouterProvider router={router} />
+            <RouterProvider router={routerFactory.getRouter()} />
           </LocalizationProvider>
         </ThemeProvider>
       </ReactKeycloakProvider>

frontend/app/src/domains/customer/CustomerController.tsx

@@ -20,7 +20,7 @@ export default function CustomerController() {
         producerService.loadProducer(setProducer)
     })
 
-    return <AuthenticatedLayout>{getContent()}</AuthenticatedLayout>
+    return <>{getContent()}</>
 
     function getContent() {
         if(producer) {

frontend/app/src/domains/dashboard/views/Dashboard.tsx

@@ -7,15 +7,15 @@ import DashboardProductions from '../components/DashboardProductions.tsx'
 import DashboardSales from '../components/DashboardSales.tsx'
 
 function Dashboard() {
-    return <AuthenticatedLayout>
+    return <>
         <Typography variant="h6">Tableau de bord</Typography>
         <div className="dashboard-container">
             <div className="dashboard-item"><DashboardAccount/></div>
             <div className="dashboard-item">Mes derniers versements</div>
             <div className="dashboard-item"><DashboardProductions/></div>
             <div className="dashboard-item"><DashboardSales/></div>
         </div>
-    </AuthenticatedLayout>
+    </>
 }
 
 export default Dashboard

frontend/app/src/domains/producer/ProducerController.tsx

@@ -29,10 +29,10 @@ function ProducerController() {
     })
   })
 
-  return <AuthenticatedLayout>
+  return <>
             <Typography variant="h6">Gestion du compte</Typography>
             {displayStripeAccount()}
-          </AuthenticatedLayout>
+          </>
 
   function loadStripeAccount(producerId: number) {
     apiInvoker.callApiAuthenticatedly(

frontend/app/src/domains/production/ProductionController.tsx

@@ -15,7 +15,7 @@ export default function ProductionController({producer: producer}) {
     const [currentAction, setCurrentAction] = useState(PRODUCTIONS_LIST)
     const [context, setContext] = useState(undefined)
 
-    return <AuthenticatedLayout>{getContent()}</AuthenticatedLayout>
+    return <>{getContent()}</>
 
     function getContent() {
         switch (currentAction) {

frontend/app/src/domains/sale/SaleController.tsx

@@ -32,7 +32,7 @@ export default function SaleController() {
         producerService.loadProducer(setProducer)
     })
 
-    return <AuthenticatedLayout>{getCurrentView()}</AuthenticatedLayout>
+    return <>{getCurrentView()}</>
 
     function getCurrentView() {
         if(producer) {

frontend/app/src/layouts/ErrorLayout.tsx

@@ -0,0 +1,6 @@
+import { Typography } from "@mui/material";
+import React from "react";
+
+export function ErrorLayout({message: message}) {
+    return <Typography>{message}</Typography>
+}

frontend/app/src/layouts/RouterFactory.tsx

@@ -0,0 +1,26 @@
+import { createBrowserRouter } from "react-router-dom"
+import { CustomerRouterFactory } from "./customer/CustomerRouterFactory.tsx"
+import { ProducerRouterFactory } from "./producer/ProducerRouterFactory.tsx"
+import React from "react"
+import { ErrorLayout } from "./ErrorLayout.tsx"
+
+export class RouterFactory {
+
+    producerRouterFactory: ProducerRouterFactory = new ProducerRouterFactory()
+    customerRouterFactory: CustomerRouterFactory = new CustomerRouterFactory()
+
+    getRouter() {
+        if(process.env.REACT_APP_MODE === 'CUSTOMER') {
+          return this.customerRouterFactory.getRouter()
+        }
+        if(process.env.REACT_APP_MODE === 'PRODUCER') {
+          return this.producerRouterFactory.getRouter()
+        }
+        return createBrowserRouter([
+            {
+            path: "/",
+            element: <ErrorLayout message='Configuration du mode client ou producteur absent ou non reconnu'/>
+            }
+        ])
+      }
+}

frontend/app/src/layouts/ThemeFactory.ts

@@ -0,0 +1,38 @@
+import { createTheme } from "@mui/material";
+import { frFR } from '@mui/material/locale';
+
+export class ThemeFactory {
+    createTheme() {
+        return createTheme({
+            palette: {
+              //mode: 'dark',
+              primary: {
+                main: '#556b2f',
+              }
+            },
+            typography: {
+              h1: {
+                fontFamily: 'Acme',
+              },
+              h2: {
+                fontFamily: 'Acme',
+              },
+              h3: {
+                fontFamily: 'Acme',
+              },
+              h4: {
+                fontFamily: 'Acme',
+              },
+              h5: {
+                fontFamily: 'Acme',
+              },
+              h6: {
+                fontFamily: 'Acme',
+              },
+              subtitle1: {
+                fontWeight: 'bold'
+              }
+            }
+          }, frFR);
+    }
+}

frontend/app/src/layouts/customer/CustomerLayout.tsx

@@ -17,6 +17,7 @@ import CustomerCreationForm from '../../domains/customer/views/CustomerCreationF
 import Welcome from '../../domains/welcome/Welcome.tsx'
 import { Login, Logout } from '@mui/icons-material'
 import NotAuthorizedForProducers from '../../authentication/views/NotAuthorizedForProducers.tsx'
+import { Outlet, useNavigate } from 'react-router-dom'
 
 
 export default function CustomerLayout() {
@@ -33,6 +34,7 @@ export default function CustomerLayout() {
     const [context, setContext] = useState(undefined)
     const [cookies, setCookie, removeCookie] = useCookies(['pendingOrder']);
     const [customer, setCustomer] = useState<Customer>(undefined)
+    const navigate = useNavigate()
 
     useEffect(() => {
         if (initialized) {
@@ -65,7 +67,7 @@ export default function CustomerLayout() {
             setCustomer(customer)
         }
     }
-
+/*
     function displayMainContent() {
         if(authenticationService.isAuthenticated() && customer && !customer.id) {
             return <CustomerCreationForm customer={customer} returnCallback={newCustomer => setCustomer(newCustomer)}></CustomerCreationForm>
@@ -79,10 +81,11 @@ export default function CustomerLayout() {
         }
         
     }
-
+ */ 
     function createOrder(sale: Sale) {
         setContext(sale)
-        setMainContent(ORDER_CREATION)
+        /*setMainContent(ORDER_CREATION)*/
+        navigate('/order/creation')
     }
 
     function displayAuthenticationButton(): React.ReactNode {
@@ -115,7 +118,7 @@ export default function CustomerLayout() {
                     {displayAuthenticationButton()}
                 </Toolbar>
             </AppBar>
-            {displayMainContent()}
+            <Outlet/>
         </Box>
     )
 }

frontend/app/src/layouts/customer/CustomerRouterFactory.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { createBrowserRouter } from "react-router-dom";
+
+import PaymentLayout from "./PaymentLayout.tsx";
+import CustomerLayout from "./CustomerLayout.tsx";
+import CustomerOrderForm from "../../domains/sale/views/CustomerOrderForm.tsx";
+import NotAuthorizedForProducers from "../../authentication/views/NotAuthorizedForProducers.tsx";
+import Welcome from "../../domains/welcome/Welcome.tsx";
+
+export class CustomerRouterFactory {
+    getRouter() {
+        return createBrowserRouter([
+            {
+                path: "/",
+                element: <CustomerLayout/>,
+                children: [
+                    {
+                        path: "/welcome",
+                        element: <Welcome/>
+                    },
+                    {
+                        path: "/order/creation",
+                        element: <CustomerOrderForm/>
+                    },
+                    {
+                        path: "/orders/:orderId/payment",
+                        element: <PaymentLayout/>
+                    }
+                ]
+            },
+            {
+                path: "/unauthorized",
+                element: <NotAuthorizedForProducers/>
+            }
+        ])
+    }
+}

frontend/app/src/layouts/producer/AnonymousLayout.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@mui/material/styles';
 import { AppBar, Box, Typography, CssBaseline, Toolbar, Grid, Paper, Button } from "@mui/material";
 import { useKeycloak } from '@react-keycloak/web'
+import React from 'react';
 
 function AnonymousLayout() {
 

frontend/app/src/layouts/producer/AuthenticatedLayout.tsx

@@ -8,13 +8,14 @@ import {Close, Logout, Menu} from '@mui/icons-material'
 import { ApiInvoker } from '../../api/ApiInvoker.ts'
 
 import Producer from 'viandeendirect_eu/dist/model/Producer.js';
-import SideMenu from './SideMenu.js'
+import SideMenu from './SideMenu.jsx'
 import { AuthenticationService } from '../../authentication/service/AuthenticationService.ts';
 import NotAuthorizedForCustomers from '../../authentication/views/NotAuthorizedForCustomers.tsx';
 import { ProducerService } from '../../domains/commons/service/ProducerService.ts';
+import { Outlet } from 'react-router-dom';
 
 
-function AuthenticatedLayout(props) {
+export default function AuthenticatedLayout(props) {
     const { keycloak, initialized } = useKeycloak()
     const [sideMenuOpen, setSideMenuOpen] = useState(false)
     const [producer, setProducer] = useState<Producer>()
@@ -87,10 +88,8 @@ function AuthenticatedLayout(props) {
                 sx={{ flexGrow: 1, p: 3 }}
                 width={'100%'}>
                 <Toolbar />
-                {props.children}
+                <Outlet/>
             </Box>
         </Box>
     )
 }
-
-export default AuthenticatedLayout