convert loading with callbacks to react-router-loaders (...suite...)

frontend/app/src/domains/commons/service/ProducerService.ts

@@ -1,15 +1,18 @@
 import Keycloak from "keycloak-js"
-import Producer from "@viandeendirect/api/dist/models/Producer.js";
+import {Producer} from "@viandeendirect/api/dist/models/Producer.js";
 import { ApiInvoker } from "../../../api/ApiInvoker.ts";
 import { AuthenticationService } from "../../../authentication/service/AuthenticationService.ts";
+import { ApiBuilder } from "../../../api/ApiBuilder.ts";
 
 export class ProducerService {
     keycloak: Keycloak
+    apiBuilder: ApiBuilder
     static producer: Producer
     static unauthorized: boolean
 
     constructor(keycloak: Keycloak) {
         this.keycloak = keycloak
+        this.apiBuilder = new ApiBuilder();
     }
 
     loadProducer(setProducer, setUnauthorized = unauthorized => {}) {
@@ -38,4 +41,10 @@ export class ProducerService {
             setUnauthorized(ProducerService.unauthorized)
         }
     }
+
+    async asyncLoadProducer(): Promise<Producer> {
+        const api = await this.apiBuilder.getAuthenticatedApi(this.keycloak)
+        const authenticationService = new AuthenticationService(this.keycloak)
+        return await api.getProducer({'email': authenticationService.getCurrentUserEmail()})
+    }
 }

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

@@ -12,9 +12,9 @@ import {BreedingPropertiesForm, mapBreedingFormDataToBeefProduction as mapBreedi
 import SlaughterPropertiesForm, { mapSlaughterFormDataToBeefProduction } from "./forms/SlaughterPropertiesForm.tsx"
 import CuttingPropertiesForm, { mapCuttingFormDataToBeefProduction } from "./forms/CuttingPropertiesForm.tsx"
 import { BeefProductionService } from "../../service/BeefProductionService.ts"
-import BeefProduction from "@viandeendirect/api/dist/models/BeefProduction.js"
-import PackageLot from "@viandeendirect/api/dist/models/PackageLot.js"
-import { useNavigate } from "react-router-dom"
+import {BeefProduction} from "@viandeendirect/api/dist/models/BeefProduction.js"
+import { useLoaderData, useNavigate } from "react-router-dom"
+import { PackageTemplate } from "@viandeendirect/api/dist/models/PackageTemplate"
 
 export default function BeefProductionCreator() {
 
@@ -25,37 +25,22 @@ export default function BeefProductionCreator() {
 
     const { keycloak } = useKeycloak()
     const navigate = useNavigate()
+    const packageTemplates: Array<PackageTemplate> = useLoaderData()
+
     const [ activeStep, setActiveStep ] = useState<number>(BREEDING_PROPERTIES_STEP)
-    const [ beefProduction, setBeefProduction] = useState<BeefProduction>({ productionType: "BeefProduction"})
+    const [ beefProduction, setBeefProduction] = useState<BeefProduction>({
+            productionType: "BeefProduction",
+            lots: packageTemplates.map(template => {
+                return {
+                    ...template,
+                    id: undefined,
+                    quantity: 0,
+                    quantitySold: 0
+                }
+            })
+        })
     const [ completedSteps, setCompletedSteps] = useState<Array<number>>([])
     const [ saveEnabled, setSaveEnabled] = useState<boolean>(false)
-    const apiBuilder = new ApiBuilder()
-
-    useEffect(() => {
-        if (! beefProduction.lots) {
-            apiBuilder.getAuthenticatedApi(keycloak).then(api => {
-                apiBuilder.invokeAuthenticatedApi(() => {
-                    api.getPackageTemplates((error, data, response) => {
-                        if (error) {
-                            console.error(error);
-                        } else {
-                            console.log('api.getPackageTemplates called successfully. Returned data: ' + data);
-                            const lots: Array<PackageLot> = []
-                            data.map(template => {
-                                lots.push({
-                                    ...template,
-                                    id: undefined,
-                                    quantity: 0,
-                                    quantitySold: 0
-                                })
-                            })
-                            setBeefProduction({...beefProduction, lots: lots})
-                        }
-                    })
-                }, keycloak)
-            })
-        }
-    }, [keycloak])
 
     const breedingPropertiesForm = useForm<BeefProduction>({defaultValues: {
         ...beefProduction,
@@ -163,23 +148,22 @@ export default function BeefProductionCreator() {
         return beefProduction.lots?.map(lot => lot.netWeight * lot.quantity).reduce((total, added) => total + added, 0) || 0
     }
 
-    function validate() {
+    async function validate() {
         console.debug(beefProduction)
-        apiBuilder.getAuthenticatedApi(keycloak).then(api => {
-            apiBuilder.invokeAuthenticatedApi(() => {
-                api.createBeefProduction(beefProduction, (error, data, response) => {
-                    if (error) {
-                        console.error(error)
-                    } else {
-                        console.log('API called successfully. Returned data: ' + data)
-                        navigate(-1)
-                    }
-                })
-            }, keycloak)
-        });
+        const apiBuilder = new ApiBuilder()
+        const api = await apiBuilder.getAuthenticatedApi(keycloak)
+        await api.createBeefProduction({beefProduction: beefProduction})
+        navigate(-1)    
     }
 
     function cancel() {
         navigate(-1)
     }
 }
+
+export async function loadBeefProductionCreatorData(keycloakClient) {
+    const apiBuilder = new ApiBuilder()
+    const api = await apiBuilder.getAuthenticatedApi(keycloakClient)
+    const packageTemplates = await api.getPackageTemplates()
+    return packageTemplates
+}

frontend/app/src/domains/sale/views/SaleForm.tsx

@@ -207,4 +207,8 @@ export default function SaleForm({producer: producer}) {
     function cancel() {
         navigate(-1)
     }
+}
+
+export async function loadSaleFormData(keycloakClient) {
+    //TODO : à implémenter
 }

frontend/app/src/domains/sale/views/SalesList.tsx

@@ -1,13 +1,10 @@
 import React from 'react'
-import { useEffect, useState } from 'react'
 import { Typography, Button } from "@mui/material"
 
-import { useKeycloak } from '@react-keycloak/web'
 
 import {Producer} from "@viandeendirect/api/dist/models/Producer.js";
 import SaleCard from '../components/SaleCard.tsx'
-import { ApiInvoker } from '../../../api/ApiInvoker.ts'
-import { useNavigate } from 'react-router-dom'
+import { useLoaderData, useNavigate } from 'react-router-dom'
 import { ProducerService } from '../../commons/service/ProducerService.ts'
 import { ApiBuilder } from '../../../api/ApiBuilder.ts';
 import { Sale } from '@viandeendirect/api/dist/models/Sale';
@@ -16,21 +13,9 @@ import { Sale } from '@viandeendirect/api/dist/models/Sale';
 
 export default function SalesList() {
 
-    const { keycloak } = useKeycloak()
     const navigate = useNavigate()
-    const producerService = new ProducerService(keycloak)
-
-    const [sales, setSales] = useState([])
-    const [producer, setProducer] = useState<Producer>({})
-    const apiInvoker = new ApiInvoker()
-
-    useEffect(() => {
-        producerService.loadProducer(producer => {
-                setProducer(producer)
-                apiInvoker.callApiAuthenticatedly(keycloak, api => api.getProducerSales, producer.id, setSales, console.error)
-            }
-        )
-    }, [keycloak, producer])
+    const data = useLoaderData()
+    const sales: Array<Sale> = data.sales
 
     return <>
         <Typography variant='h6'>Ventes</Typography>
@@ -42,10 +27,10 @@ export default function SalesList() {
 }
 
 export async function loadSalesListData(keycloakClient): Promise<{sales: Array<Sale>, producer: Producer}> {
+    const producerService = new ProducerService(keycloakClient)
+    const producer: Producer = await producerService.asyncLoadProducer()
     const apiBuilder = new ApiBuilder()
     const api = await apiBuilder.getAuthenticatedApi(keycloakClient)
-    const sales: Array<Sale> = await api.getSales()
-    const producerService = new ProducerService(keycloakClient)
-    const producer: Producer = await producerService.loadProducer()
+    const sales: Array<Sale> = await api.getProducerSales({producerId: producer.id})
     return {sales: sales, producer: producer}
 }

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

@@ -4,14 +4,13 @@ import { createBrowserRouter, Navigate } from "react-router-dom";
 import AuthenticatedLayout from "./AuthenticatedLayout.tsx";
 import CustomerController from "../../domains/customer/CustomerController.tsx";
 import ProducerController from "../../domains/producer/ProducerController.tsx";
-import SaleController from "../../domains/sale/SaleController.tsx";
 import Dashboard from "../../domains/dashboard/views/Dashboard.tsx";
 import AnonymousLayout from "./AnonymousLayout.tsx";
 import NotAuthorizedForCustomers from "../../authentication/views/NotAuthorizedForCustomers.tsx";
 import BeefProductionView from "../../domains/production/views/beefProduction/BeefProductionView.tsx";
-import BeefProductionCreator from "../../domains/production/views/beefProduction/BeefProductionCreator.tsx";
+import BeefProductionCreator, { loadBeefProductionCreatorData } from "../../domains/production/views/beefProduction/BeefProductionCreator.tsx";
 import ProductionsList, { loadProductionListData } from "../../domains/production/views/ProductionsList.tsx";
-import SalesList from "../../domains/sale/views/SalesList.tsx";
+import SalesList, { loadSalesListData } from "../../domains/sale/views/SalesList.tsx";
 import SaleForm from "../../domains/sale/views/SaleForm.tsx";
 import OrdersList, { loadOrdersListData } from "../../domains/sale/views/OrdersList.tsx";
 import OrderView from "../../domains/sale/views/OrderView.tsx";
@@ -43,11 +42,13 @@ export class ProducerRouterFactory {
                     },
                     {
                         path: '/beefProduction/creation',
-                        element: <BeefProductionCreator/>
+                        element: <BeefProductionCreator/>,
+                        loader: async () => loadBeefProductionCreatorData(keycloakClient)
                     },
                     {
                         path: '/sales',
-                        element: <SalesList/>
+                        element: <SalesList/>,
+                        loader: async () => loadSalesListData(keycloakClient)
                     },
                     {
                         path: '/sales/creation',