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

backend/app/src/main/java/eu/viandeendirect/domains/order/OrderService.java

@@ -150,7 +150,6 @@ private void updateQuantitiesSold(Order order) {
 
     public void processOrderPaymentCompletion(Order order) {
         order.setStatus(OrderStatus.PAYMENT_COMPLETED);
-        // TODO: trigger an email to the customer
         notifyProducers(order);
         notifyCustomer(order);
         orderRepository.save(order);

frontend/app/src/api/mock/MockApi.ts

@@ -12,70 +12,95 @@ export class MockApi {
     mockApiSales: MockApiSales = new MockApiSales()
     mockApiProducers: MockApiProducers = new MockApiProducers()
 
-    createBeefProduction() {
+    private log(methodName: String, args: any) {
+        console.log(`MockApi.${methodName} has been invoked with following artguments : ${JSON.stringify(args)}`)
     }
 
-    getProductions() {
+    createBeefProduction(args) {
+        this.log('createBeefProduction', args)
+    }
+
+    getProductions(args) {
+        this.log('getProductions', args)
         return this.mockApiProductions.getProductions()
     }
 
-    getProductionPercentageSold() {
+    getProductionPercentageSold(args) {
+        this.log('getProductionPercentageSold', args)
         return this.mockApiProductions.getProductionPercentageSold()
     }
 
-    getBeefProduction() {
+    getBeefProduction(args) {
+        this.log('getBeefProduction', args)
         return this.mockApiProductions.getBeefProduction()
     }
 
-    getPackageTemplates() {
+    getPackageTemplates(args) {
+        this.log('getPackageTemplates', args)
         return this.mockApiProductions.getPackageTemplates()
     }
 
-    getAddresses() {
+    getAddresses(args) {
+        this.log('getAddresses', args)
         return this.mockApiAddresses.getAddresses()
     }
 
-    createCustomer(customer){
-        return this.mockApiCustomers.createCustomer(customer)
+    createCustomer(args){
+        this.log('createCustomer', args)
+        return this.mockApiCustomers.createCustomer(args)
     }
 
-    getCustomer(){
+    getCustomer(args){
+        this.log('getCustomer', args)
         return this.mockApiCustomers.getCustomer()
     }
 
-    getProducerSales() {
+    createProducerSale(args) {
+        this.log('createProducerSale', args)
+    }
+
+    getProducerSales(args) {
+        this.log('getProducerSales', args)
         return this.mockApiProducers.getProducerSales()
     }
 
-    getProducerCustomers() {
+    getProducerCustomers(args) {
+        this.log('getProducerCustomers', args)
         return this.mockApiProducers.getCustomers()
     }
 
-    getSales() {
+    getSales(args) {
+        this.log('getSales', args)
         return this.mockApiSales.getSales()
     }
 
-    getSale() {
+    getSale(args) {
+        this.log('getSale', args)
         return this.mockApiSales.getSale()
     }
 
-    getSaleOrders() {
+    getSaleOrders(args) {
+        this.log('getSaleOrders', args)
         return this.mockApiSales.getSaleOrders()
     }
 
-    getSaleProductions() {
+    getSaleProductions(args) {
+        this.log('getSaleProductions', args)
         return this.mockApiSales.getSaleProductions()
     }
 
-    getOrder() {
+    getOrder(args) {
+        this.log('getOrder', args)
         return this.mockApiSales.getOrder()
     }
 
-    createOrder(order) {
-        return this.mockApiSales.createOrder(order)
+    createOrder(args) {
+        this.log('createOrder', args)
+        return this.mockApiSales.createOrder(args)
     }
 
-    getProducer() {
+    getProducer(args) {
+        this.log('getProducer', args)
         return this.mockApiProducers.getProducer()
     }
 }

frontend/app/src/api/mock/MockApiCustomers.ts

@@ -12,7 +12,6 @@ export class MockApiCustomers {
                 email: '[email protected]'
             }
         }
-       //return undefined
     }
 
     createCustomer(customer: Customer): Customer {

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

@@ -4,7 +4,7 @@ import BeefProductionCard from "./BeefProductionCard.tsx"
 export default function ProductionCard({
     production: production, 
     showActions: showActions,
-    clickCallback: clickCallback
+    onClick: onClick
 }) {
 
     switch (production.productionType) {
@@ -13,7 +13,7 @@ export default function ProductionCard({
                         key={production.id}
                         production={production} 
                         showActions={showActions}
-                        clickCallback={clickCallback}>
+                        onClick={onClick}>
                     </BeefProductionCard>
         default :
             return <></>

frontend/app/src/domains/sale/components/SaleProductionSelector.js

@@ -1,38 +1,13 @@
-import { useState, useEffect } from 'react'
-import { useKeycloak } from '@react-keycloak/web'
-import { ApiBuilder } from '../../../api/ApiBuilder.ts'
 import ProductionCard from '../../production/components/ProductionCard.tsx'
 
-export default function SaleProductionSelector({selectProduction: selectProduction}) {
+export default function SaleProductionSelector({selectProduction: selectProduction, productions: productions}) {
 
-    const { keycloak, initialized } = useKeycloak()
-    const [productionsForSale, setProductionsForSale] = useState([])
-    const apiBuilder = new ApiBuilder()
-
-    useEffect(() => {
-        loadProductionsForSale()
-    }, [keycloak])
-
-    function loadProductionsForSale() {
-        apiBuilder.getAuthenticatedApi(keycloak).then(api => {
-            apiBuilder.invokeAuthenticatedApi(() => {
-                api.getProductions({ 'forSale': true }, (error, data, response) => {
-                    if (error) {
-                        console.error(error)
-                    } else {
-                        console.log('api.getProductions called successfully. Returned data: ' + data)
-                        setProductionsForSale(data)
-                    }
-                })
-            }, keycloak)
-        })
-    }
 
     function handleProductSelection(production) {
         selectProduction(production)
     }
 
-    return productionsForSale.map(production => {
+    return productions.map(production => {
         return <div className='card-clickable'>
                     <ProductionCard 
                         key={'production-card-' + production.id} 

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

@@ -1,42 +1,27 @@
 import React from 'react'
-import { useEffect, useState } from 'react'
+import { useLoaderData, useNavigate } from 'react-router-dom'
 
 import { Button, Typography } from '@mui/material'
 
-import { useKeycloak } from '@react-keycloak/web'
 import { ApiBuilder } from '../../../api/ApiBuilder.ts'
 
 import OrderSummary from '../components/OrderSummary.tsx'
+import { Order } from '@viandeendirect/api/dist/models/Order'
 
-export default function OrderView({order: rawOrder, sale: sale, returnCallback: returnCallback}) {
+export default function OrderView() {
 
-    const { keycloak, initialized } = useKeycloak()
-    const apiBuilder = new ApiBuilder()
-
-    const [order, setOrder] = useState([])
-
-    useEffect(() => {
-        loadOrder()
-    }, [keycloak])
-
-    function loadOrder() {
-        apiBuilder.getAuthenticatedApi(keycloak).then(api => {
-            apiBuilder.invokeAuthenticatedApi(() => {
-                api.getOrder(rawOrder.id, (error, data, response) => {
-                    if (error) {
-                        console.error(error)
-                    } else {
-                        console.log('api.getOrder called successfully. Returned data: ' + data)
-                        setOrder(data)
-                    }
-                })
-            }, keycloak)
-        })
-    }
+    const navigate = useNavigate()
+    const order: Order = useLoaderData()
 
     return <>
         <Typography variant='h6'>Détails de la commande</Typography>
         <OrderSummary order={order}></OrderSummary>
-        <Button onClick={() => returnCallback(sale)}>Retour aux commandes</Button>
+        <Button onClick={() => navigate(-1)}>Retour aux commandes</Button>
     </>
+}
+
+export async function loadOrderViewData(orderId: number, keycloakClient): Promise<Order> {
+    const apiBuilder = new ApiBuilder()
+    const api = await apiBuilder.getAuthenticatedApi(keycloakClient)
+    return await api.getOrder({orderId})
 }

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

@@ -7,78 +7,54 @@ import dayjs from 'dayjs'
 import { useKeycloak } from '@react-keycloak/web'
 import { ApiBuilder } from '../../../api/ApiBuilder.ts'
 
-import Customer from "@viandeendirect/api/dist/models/Customer"
-import OrderItem from "@viandeendirect/api/dist/models/OrderItem"
-import Order from "@viandeendirect/api/dist/models/Order"
-import Production from "@viandeendirect/api/dist/models/Production"
-import PackageLot from "@viandeendirect/api/dist/models/PackageLot"
-import Sale from "@viandeendirect/api/dist/models/Sale"
+import { Customer } from "@viandeendirect/api/dist/models/Customer"
+import { OrderItem } from "@viandeendirect/api/dist/models/OrderItem"
+import {Order} from "@viandeendirect/api/dist/models/Order"
+import { Production } from "@viandeendirect/api/dist/models/Production"
+import { PackageLot } from "@viandeendirect/api/dist/models/PackageLot"
+import { Sale } from "@viandeendirect/api/dist/models/Sale"
 
 import PackageSelector from '../components/PackageSelector.tsx'
 import CustomerSelector from '../components/CustomerSelector.tsx'
 import OrderSummary from '../components/OrderSummary.tsx'
-import { ApiInvoker } from '../../../api/ApiInvoker.ts'
+import { ProducerService } from '../../commons/service/ProducerService.ts'
+import { useLoaderData, useNavigate } from 'react-router-dom'
 
-export default function ProducerOrderForm({ producer: producer, sale: sale, returnCallback: returnCallback }) {
+// TODO : corriger erreur eu retour de la création si saisie d'un nouvel utilisateur
+export default function ProducerOrderForm() {
 
     const SET_ITEMS_STEP = 1
     const SET_CUSTOMER_STEP = 2
     const CONFIRMATION_STEP = 3
 
-    const { keycloak, initialized } = useKeycloak()
-    const apiInvoker = new ApiInvoker()
-    const apiBuilder = new ApiBuilder()
+    const { keycloak } = useKeycloak()
+    const navigate = useNavigate()
+    const data: ProducerOrderFormData = useLoaderData()
+    const productions = data.productions
+    const customers = data.customers
+    const sale = data.sale
 
-    const [productions, setProductions] = useState<Array<Production>>([])
-    const [customers, setCustomers] = useState<Array<Customer>>([])
-    const [order, setOrder] = useState<Order>({sale: sale})
+    const [order, setOrder] = useState<Order>({sale: sale, customer: {}})
     const [items, setItems] = useState<Array<OrderItem>>([])
     const [activeStep, setActiveStep] = useState(SET_ITEMS_STEP)
 
-    useEffect(() => {
-        loadProductions()
-        loadCustomers()
-    }, [keycloak])
-
-    function loadProductions() {
-        apiInvoker.callApiAuthenticatedly(
-            keycloak, 
-            api => api.getSaleProductions, 
-            sale.id, 
-            setProductions, 
-            console.error)
-    }
-
-    function loadCustomers() {
-        apiInvoker.callApiAuthenticatedly(
-            keycloak, 
-            api => api.getProducerCustomers, 
-            producer.id, 
-            setCustomers, 
-            console.error)
+    async function createCustomerAndOrder(customer: Customer){
+        const apiBuilder = new ApiBuilder()
+        const api = await apiBuilder.getAuthenticatedApi(keycloak)
+        const createdCustomer = await api.createCustomer({customer: customer})
+        const updatedOrder = {...order, customer: createdCustomer}
+        setOrder(updatedOrder)
+        await api.createOrder({order: updatedOrder})
+        navigate(-1)
     }
 
-    function createCustomerAndOrder(customer: Customer){
-        apiInvoker.callApiAuthenticatedly(
-            keycloak, 
-            api => api.createCustomer, 
-            customer, 
-            customer => {
-                const updatedOrder = {...order, customer: customer}
-                setOrder(updatedOrder)
-                createOrder(updatedOrder)
-            }, 
-            console.error)
+    async function createOrder(){
+        const apiBuilder = new ApiBuilder()
+        const api = await apiBuilder.getAuthenticatedApi(keycloak)
+        await api.createOrder({order: order})
+        navigate(-1)
     }
 
-    function createOrder(order: Order) {
-        apiInvoker.callApiAuthenticatedly(
-            keycloak, 
-            api => api.createOrder, 
-            order, 
-            () => returnCallback(sale),
-            console.error)
-    }
     return <>
         <Typography variant='h6'>Creation d'une commande pour la vente du {dayjs(sale.deliveryStart).format('DD/MM/YYYY')} - {sale.deliveryAddressName}</Typography>
 
@@ -114,7 +90,7 @@ export default function ProducerOrderForm({ producer: producer, sale: sale, retu
                 </StepContent>
             </Step>
         </Stepper>
-        <Button size="small" onClick={() => returnCallback(sale)}>Abandonner</Button>
+        <Button size="small" onClick={() => navigate(-1)}>Abandonner</Button>
     </>
 
     function packageLots() {
@@ -147,7 +123,24 @@ export default function ProducerOrderForm({ producer: producer, sale: sale, retu
         if(!order.customer.id) {
             createCustomerAndOrder(order.customer)
         } else {
-            createOrder(order)
+            createOrder()
         }
     }
 }
+
+class ProducerOrderFormData {
+    productions: Array<Production>    
+    customers: Array<Customer>
+    sale: Sale
+}
+
+export async function loadProducerOrderFormData(saleId: number, keycloakClient): Promise<ProducerOrderFormData> {
+    const producerService = new ProducerService(keycloakClient)
+    const producer = await producerService.asyncLoadProducer()
+    const apiBuilder = new ApiBuilder()
+    const api = await apiBuilder.getAuthenticatedApi(keycloakClient)
+    const productions = await api.getSaleProductions({saleId: saleId})
+    const customers = await api.getProducerCustomers({producerId: producer.id})
+    const sale = await api.getSale({saleId: saleId})
+    return {productions: productions, customers: customers, sale: sale}
+}