From aec6d8b6ab108c8077a56941496f9378a22edf0d Mon Sep 17 00:00:00 2001
From: lwih <louis.hache@beta.gouv.fr>
Date: Tue, 2 Jan 2024 17:12:43 +0100
Subject: [PATCH] Frontend - show loader and errors on missions page

---
 frontend/src/pam/missions/missions.tsx | 122 +++++++++++++++----------
 1 file changed, 74 insertions(+), 48 deletions(-)

diff --git a/frontend/src/pam/missions/missions.tsx b/frontend/src/pam/missions/missions.tsx
index 7e6efd5f6..f30be5097 100644
--- a/frontend/src/pam/missions/missions.tsx
+++ b/frontend/src/pam/missions/missions.tsx
@@ -1,67 +1,93 @@
 import React from 'react'
 import { Mission } from '../../types/env-mission-types'
 import { Col, FlexboxGrid, Loader, Stack } from 'rsuite'
-import { Accent, Button, Icon, Size } from '@mtes-mct/monitor-ui'
+import { Accent, Button, Icon, Size, THEME } from '@mtes-mct/monitor-ui'
 import MissionsList from './missions-list'
 import { Link } from 'react-router-dom'
 import { useQuery } from '@apollo/client/react'
 import { GET_MISSIONS } from './queries'
 import { GET_MISSION_BY_ID } from '../mission/queries'
+import Text from "../../ui/text.tsx";
 
 const Missions: React.FC = () => {
-    const {loading, data, client} = useQuery(GET_MISSIONS)
+  const {loading, data, error, client} = useQuery(GET_MISSIONS)
 
-    const prefetchMission = async (missionId: string) => {
-        await client.query({
-            query: GET_MISSION_BY_ID,
-            variables: {missionId}
-        })
-    }
+  const prefetchMission = async (missionId: string) => {
+    await client.query({
+      query: GET_MISSION_BY_ID,
+      variables: {missionId}
+    })
+  }
 
-    if (data) {
-        const missions: Mission[] = data.missions as Mission[]
-        return (
-            <FlexboxGrid
-                // align="middle"
-                justify="center"
-                style={{padding: '4rem 2rem', display: 'flex', flex: 1}}
-            >
-                <FlexboxGrid.Item as={Col} colspan={24} xxl={16}>
-                    <Stack direction="column" alignItems="flex-start">
-                        <Stack.Item>
-                            <h3>Missions</h3>
-                        </Stack.Item>
+  if (loading) {
+    return (
+      <Loader center={true} size={'md'} vertical={true}
+              content={<Text as={'h3'}>Missions en cours de chargement</Text>}/>
+    )
+  }
 
-                        <Stack.Item style={{paddingTop: '2rem'}}>
-                            <h4>Mes rapports de mission</h4>
-                        </Stack.Item>
+  if (error) {
+    return (
+      <Stack direction="column" justifyContent="center" style={{width: '100%'}}>
+        <Stack.Item alignSelf={"center"} style={{width: '100%'}}>
+          <Stack direction="column" justifyContent="center" spacing={'1rem'}>
+            <Stack.Item alignSelf={"center"} style={{maxWidth: '50%'}}>
+              <Text as={'h3'}>Une erreur s'est produite lors du chargement de vos missions. Si le problème persiste,
+                veuillez contacter l'équipe RapportNav.</Text>
+            </Stack.Item>
+            <Stack.Item alignSelf={"center"} style={{maxWidth: '50%'}}>
+              <Text as={'h3'} color={THEME.color.lightGray} fontStyle={"italic"}>Erreur: {error?.message}</Text>
+            </Stack.Item>
+          </Stack>
+        </Stack.Item>
+      </Stack>
+    )
+  }
 
-                        <Stack.Item alignSelf="flex-end" style={{paddingTop: '2rem'}}>
-                            <Link to={`/pam/missions/0`}>
-                                <Button accent={Accent.PRIMARY} Icon={Icon.Plus} size={Size.NORMAL} disabled={true}>
-                                    Créer un rapport de mission
-                                </Button>
-                            </Link>
-                        </Stack.Item>
+  if (data) {
+    const missions: Mission[] = data.missions as Mission[]
+    return (
+      <FlexboxGrid
+        // align="middle"
+        justify="center"
+        style={{padding: '4rem 2rem', display: 'flex', flex: 1}}
+      >
+        <FlexboxGrid.Item as={Col} colspan={24} xxl={16}>
+          <Stack direction="column" alignItems="flex-start">
+            <Stack.Item>
+              <h3>Missions</h3>
+            </Stack.Item>
 
-                        <Stack.Item style={{paddingTop: '2rem', width: '100%'}}>
-                            {loading ? (
-                                <Stack justifyContent="center" style={{marginTop: '5rem'}}>
-                                    <Stack.Item>
-                                        <Loader/>
-                                    </Stack.Item>
-                                </Stack>
-                            ) : (
-                                <MissionsList missions={missions} prefetchMission={prefetchMission}/>
-                            )}
-                        </Stack.Item>
-                    </Stack>
-                </FlexboxGrid.Item>
-            </FlexboxGrid>
-        )
-    }
+            <Stack.Item style={{paddingTop: '2rem'}}>
+              <h4>Mes rapports de mission</h4>
+            </Stack.Item>
 
-    return null
+            <Stack.Item alignSelf="flex-end" style={{paddingTop: '2rem'}}>
+              <Link to={`/pam/missions/0`}>
+                <Button accent={Accent.PRIMARY} Icon={Icon.Plus} size={Size.NORMAL} disabled={true}>
+                  Créer un rapport de mission
+                </Button>
+              </Link>
+            </Stack.Item>
+
+            <Stack.Item style={{paddingTop: '2rem', width: '100%'}}>
+              {loading ? (
+                <Stack justifyContent="center" style={{marginTop: '5rem'}}>
+                  <Stack.Item>
+                    <Loader/>
+                  </Stack.Item>
+                </Stack>
+              ) : (
+                <MissionsList missions={missions} prefetchMission={prefetchMission}/>
+              )}
+            </Stack.Item>
+          </Stack>
+        </FlexboxGrid.Item>
+      </FlexboxGrid>
+    )
+  }
+
+  return null
 }
 
 export default Missions