convert loading with callbacks to react-router-loaders (...suite, fix…

… authenticated api calls...)

TODO

@@ -0,0 +1 @@
+Faire fonctionner le la modification d'un abattage bovin

frontend/app/package.json

@@ -24,7 +24,7 @@
     "react-hook-form": "^7.46.1",
     "react-hook-form-mui": "^6.8.0",
     "react-router-dom": "^6.23.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "typescript": "^5.2.2",
     "web-vitals": "^2.1.4"
   },
@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@mui/x-data-grid": "^6.18.1",
-    "@openapitools/openapi-generator-cli": "^2.13.4",
+    "@openapitools/openapi-generator-cli": "^2.7.0",
     "@types/jest": "^29.5.8",
     "@types/node": "^20.9.2",
     "@types/react": "^18.2.37",

frontend/app/src/App.js

@@ -5,22 +5,19 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import Keycloak from 'keycloak-js'
 import { ReactKeycloakProvider } from '@react-keycloak/web'
 
-import { CookiesProvider } from 'react-cookie';
-import { RouterProvider } from "react-router-dom";
+import { CookiesProvider } from 'react-cookie'
 
+import './App.css'
+import { ThemeFactory } from './layouts/ThemeFactory.ts'
 
-import { RouterFactory } from './layouts/RouterFactory.tsx';
-
-import './App.css';
-import { ThemeFactory } from './layouts/ThemeFactory.ts';
+import ViandeEnDirectRouterProvider from './layouts/ViandeEnDirectRouterProvider.tsx'
 
 
 function App() {
 
-  const keycloakClient = new Keycloak(window.location.origin + '/config/keycloak.json')
-  const routerFactory = new RouterFactory()
   const themeFactory = new ThemeFactory()
 
+  const keycloakClient = new Keycloak(window.location.origin + '/config/keycloak.json')
   const keycloakInitOptions = {
     checkLoginIframe: false,
     onLoad: 'check-sso',
@@ -32,7 +29,7 @@ function App() {
       <ReactKeycloakProvider authClient={keycloakClient} initOptions={keycloakInitOptions}>
         <ThemeProvider theme={themeFactory.createTheme()}>
           <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
-            <RouterProvider router={routerFactory.getRouter(keycloakClient)} />
+            <ViandeEnDirectRouterProvider></ViandeEnDirectRouterProvider>
           </LocalizationProvider>
         </ThemeProvider>
       </ReactKeycloakProvider>

frontend/app/src/api/ApiBuilder.ts

@@ -1,7 +1,7 @@
-import { DefaultApi } from '@viandeendirect/api/dist/apis/DefaultApi'
 import { MockApi } from './mock/MockApi.ts'
 import { UrlService } from '../domains/commons/service/UrlService.ts'
 import { Configuration } from '@viandeendirect/api/dist/runtime'
+import { DefaultApi } from '@viandeendirect/api/dist/apis/DefaultApi'
 
 export class ApiBuilder {
 
@@ -17,7 +17,7 @@ export class ApiBuilder {
             return new MockApi()
         } else {
             const configuration = new Configuration({
-                accessToken: keycloak.token,
+                accessToken: () => `Bearer ${keycloak.token}`,
                 basePath: await this.urlService.getBackendUrl()
             });
             return new DefaultApi(configuration)

frontend/app/src/domains/dashboard/components/DashboardAccount.tsx

@@ -14,7 +14,7 @@ function DashboardAccount() {
   const [producer, setProducer] = useState<Producer>()
 
   useEffect(() => {
-    producerService.loadProducer(setProducer)
+    producerService.asyncLoadProducer().then(loadedProducer => setProducer(loadedProducer))
   }, [keycloak])
 
 

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

@@ -2,7 +2,6 @@ import React from 'react'
 import { Typography } from "@mui/material"
 import './Dashboard.css'
 import DashboardAccount from '../components/DashboardAccount.tsx'
-import AuthenticatedLayout from '../../../layouts/producer/AuthenticatedLayout.tsx'
 import DashboardProductions from '../components/DashboardProductions.tsx'
 import DashboardSales from '../components/DashboardSales.tsx'
 

frontend/app/src/domains/production/components/BeefProductionCard.tsx

@@ -15,20 +15,14 @@ export default function BeefProductionCard({
     const [beefProduction, setBeefProduction] = useState(production)
     const { keycloak, initialized } = useKeycloak()
     const apiBuilder = new ApiBuilder()
-
+    
     useEffect(() => {
-        apiBuilder.getAuthenticatedApi(keycloak).then(api => {
-            apiBuilder.invokeAuthenticatedApi(() => {
-                api.getBeefProduction(production.id, (error, data, response) => {
-                    if (error) {
-                        console.error(error);
-                    } else {
-                        console.log('api.getBeefProduction called successfully. Returned data: ' + data);
-                        setBeefProduction(data)
-                    }
-                })
-            }, keycloak)
-        })
+        const loadBeefProduction = async () => {
+            const api = await apiBuilder.getAuthenticatedApi(keycloak)
+            const loadBeefProduction = await api.getBeefProduction({beefProductionId: production.id})
+            setBeefProduction(loadBeefProduction)            
+        }
+        loadBeefProduction()
     }, [keycloak])
 
     return (

frontend/app/src/domains/production/views/beefProduction/BeefProductionView.tsx

@@ -10,7 +10,8 @@ import BeefProduction from "@viandeendirect/api/dist/models/BeefProduction.js"
 import PackageLotsCreator from '../PackageLotsCreator.tsx'
 import { ApiInvoker } from '../../../../api/ApiInvoker.ts'
 import { useKeycloak } from '@react-keycloak/web'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useLoaderData, useNavigate, useParams } from 'react-router-dom'
+import { ApiBuilder } from '../../../../api/ApiBuilder.ts'
 
 export default function BeefProductionView() {
 
@@ -22,21 +23,13 @@ export default function BeefProductionView() {
     const apiInvoker = new ApiInvoker()
     const { keycloak } = useKeycloak()
     const navigate = useNavigate();
+    const loadedProduction = useLoaderData()
+
 
     const [currentTab, setCurrentTab] = useState<number>(BREEDING_PROPERTIES_TAB)
     const [readOnly, setReadOnly] = useState<boolean>(true)
-    const [production, setProduction] = useState<BeefProduction>({})
-
-    let { beefProductionId } = useParams()
+    const [production, setProduction] = useState<BeefProduction>(loadedProduction)
 
-    useEffect(() => {
-        apiInvoker.callApiAuthenticatedly(
-            keycloak, 
-            api => api.getBeefProduction,
-            beefProductionId,
-            setProduction,
-            console.error)
-    }, [keycloak])
 
     const [saveEnabled, setSaveEnabled] = useState<boolean>(true)
     const [alerts, setAlerts] = useState<string>(undefined)
@@ -185,4 +178,12 @@ export default function BeefProductionView() {
             return <Alert severity="error">{alerts}</Alert>
         }
     }
+}
+
+export async function loadBeefProductionViewData(beefProductionId: number, keycloakClient): Promise<BeefProduction> {
+    const apiBuilder = new ApiBuilder()
+    const api = await apiBuilder.getAuthenticatedApi(keycloakClient)
+    const beefProduction = await api.getBeefProduction({beefProductionId: beefProductionId})
+    return beefProduction
+
 }

frontend/app/src/layouts/RouterFactory.tsx

@@ -9,12 +9,12 @@ export class RouterFactory {
     producerRouterFactory: ProducerRouterFactory = new ProducerRouterFactory()
     customerRouterFactory: CustomerRouterFactory = new CustomerRouterFactory()
 
-    getRouter(keycloakClient) {
+    getRouter(keycloak) {
         if(process.env.REACT_APP_MODE === 'CUSTOMER') {
-          return this.customerRouterFactory.getRouter(keycloakClient)
+          return this.customerRouterFactory.getRouter(keycloak)
         }
         if(process.env.REACT_APP_MODE === 'PRODUCER') {
-          return this.producerRouterFactory.getRouter(keycloakClient)
+          return this.producerRouterFactory.getRouter(keycloak)
         }
         return createBrowserRouter([
             {

frontend/app/src/layouts/ViandeEnDirectRouterProvider.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { useKeycloak } from "@react-keycloak/web";
+import { RouterProvider } from "react-router-dom";
+
+import {RouterFactory} from './RouterFactory.tsx'
+
+export default function ViandeEnDirectRouterProvider() {
+    const {keycloak, initialized} = useKeycloak()
+    const routerFactory = new RouterFactory()
+
+    return <RouterProvider router={routerFactory.getRouter(keycloak)} ></RouterProvider>
+}

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

@@ -2,8 +2,9 @@ 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';
+import { Navigate } from 'react-router-dom';
 
-function AnonymousLayout() {
+export default function AnonymousLayout() {
 
     const { keycloak, initialized } = useKeycloak()
 
@@ -23,8 +24,8 @@ function AnonymousLayout() {
         keycloak.register()
     }
 
-    return (
-        <Box>
+    function getAnonymousLayout() {
+        return <Box>
             <CssBaseline />
             <AppBar
                 position="fixed"
@@ -61,7 +62,9 @@ function AnonymousLayout() {
 
             </Box>
         </Box>
+    }
+
+    return (
+        <>{keycloak.authenticated ? <Navigate to='/'></Navigate> : getAnonymousLayout()}</>
     )
 }
-
-export default AnonymousLayout

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

@@ -6,24 +6,25 @@ import {AppBar, Box, CssBaseline, IconButton, Toolbar, Typography} from '@mui/ma
 import {Close, Logout, Menu} from '@mui/icons-material'
 
 
-import Producer from '@viandeendirect/api/dist/models/Producer.js';
+import { Producer } from '@viandeendirect/api/dist/models/Producer.js';
 import SideMenu from './SideMenu.jsx'
 import { AuthenticationService } from '../../authentication/service/AuthenticationService.ts';
 import { ProducerService } from '../../domains/commons/service/ProducerService.ts';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Navigate, Outlet, useNavigate } from 'react-router-dom';
 
 
-export default function AuthenticatedLayout(props) {
+export default function AuthenticatedLayout() {
     const { keycloak } = useKeycloak()
-    const navigate = useNavigate()
     const [sideMenuOpen, setSideMenuOpen] = useState(false)
     const [producer, setProducer] = useState<Producer>()
     const [unauthorized, setUnauthorized] = useState<Boolean>(false)
     const authenticationService = new AuthenticationService(keycloak)
     const producerService = new ProducerService(keycloak)
 
     useEffect(() => {
+      /*
       producerService.loadProducer(setProducer, setUnauthorized)
+      */
     }, [keycloak])
 
 
@@ -40,57 +41,65 @@ export default function AuthenticatedLayout(props) {
         return <Menu/>
       }
     }
+
 
-    if (!authenticationService.isAuthenticated()) {
-      navigate('/authentication')
+    function getAuthenticatedLayout() {
+      if(unauthorized) {
+        return <Navigate to='/unauthorized'/>
+      }
+      return <Box sx={{ display: 'flex' }}>
+                <CssBaseline />
+                <AppBar
+                    position="fixed"
+                    sx={{
+                        zIndex: (theme) => theme.zIndex.drawer + 1,
+                    }}
+                >
+                    <Toolbar>
+                        <IconButton
+                            size="large"
+                            edge="start"
+                            color="inherit"
+                            aria-label="menu"
+                            onClick={handleSideMenuToggle}
+                            sx={{
+                                mr: 2,
+                                display: { xs: 'block', sm: 'none' }
+                            }}
+                        >
+                            {getIcon()}
+                        </IconButton>
+                        <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
+                            Viande en direct
+                        </Typography>
+                        <Typography>{authenticationService.getCurrentUserFirstName() } {authenticationService.getCurrentUserLastName()}</Typography>
+                        <IconButton onClick={keycloak.logout} color="inherit">
+                          <Logout/>
+                        </IconButton>
+                    </Toolbar>
+                </AppBar>
+                <SideMenu
+                    open={sideMenuOpen}
+                    onClose={handleSideMenuToggle}
+                    width={sideMenuWidth}>
+                </SideMenu>
+                <Box
+                    component="main"
+                    sx={{ flexGrow: 1, p: 3 }}
+                    width={'100%'}>
+                    <Toolbar />
+                    <Outlet/>
+                </Box>
+            </Box>
     }
-    if (unauthorized) {
-      navigate('/unauthorized')
+
+    function getUnauthenticatedLayout() {
+      return <Navigate to='/authentication'></Navigate>
     }
-    return (
-        <Box sx={{ display: 'flex' }}>
-            <CssBaseline />
-            <AppBar
-                position="fixed"
-                sx={{
-                    zIndex: (theme) => theme.zIndex.drawer + 1,
-                }}
-            >
-                <Toolbar>
-                    <IconButton
-                        size="large"
-                        edge="start"
-                        color="inherit"
-                        aria-label="menu"
-                        onClick={handleSideMenuToggle}
-                        sx={{
-                            mr: 2,
-                            display: { xs: 'block', sm: 'none' }
-                        }}
-                    >
-                        {getIcon()}
-                    </IconButton>
-                    <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
-                        Viande en direct
-                    </Typography>
-                    <Typography>{authenticationService.getCurrentUserFirstName() } {authenticationService.getCurrentUserLastName()}</Typography>
-                    <IconButton onClick={keycloak.logout} color="inherit">
-                      <Logout/>
-                    </IconButton>
-                </Toolbar>
-            </AppBar>
-            <SideMenu
-                open={sideMenuOpen}
-                onClose={handleSideMenuToggle}
-                width={sideMenuWidth}>
-            </SideMenu>
-            <Box
-                component="main"
-                sx={{ flexGrow: 1, p: 3 }}
-                width={'100%'}>
-                <Toolbar />
-                <Outlet/>
-            </Box>
-        </Box>
+
+    return (<>
+      {authenticationService.isAuthenticated() ? getAuthenticatedLayout() : getUnauthenticatedLayout()}
+      </>
     )
+
 }