PoC add item to local cache and improve purging

MTES-MCT · Sep 28, 2023 · 50ba6f9 · 50ba6f9
1 parent 29268d6
commit 50ba6f9
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 47 deletions.
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/MissionController.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/MissionController.kt
@@ -7,7 +7,8 @@ import fr.gouv.dgampa.rapportnav.domain.entities.mission.env.envActions.ActionTy
 import fr.gouv.dgampa.rapportnav.domain.entities.mission.env.envActions.ActionTypeEnum.SURVEILLANCE
 import fr.gouv.dgampa.rapportnav.domain.entities.mission.env.envActions.EnvActionEntity
 import fr.gouv.dgampa.rapportnav.domain.entities.mission.fish.fishActions.MissionActionType
-import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.action.*
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.action.ActionType
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.action.NavAction
 import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.action.status.ActionStatusType
 import fr.gouv.dgampa.rapportnav.domain.use_cases.missions.*
 import fr.gouv.dgampa.rapportnav.domain.use_cases.missions.status.GetLastStartedStatusForMission
@@ -60,8 +61,6 @@ class MissionController(
             }
         }
 
-        val time = action.startDateTimeUtc
-
         // get last started status for this time and missionId
         val lastStartedStatus = getLastStartedStatusForMission.execute(missionId=action.missionId, actionStartDateTimeUtc=action.startDateTimeUtc)
 

diff --git a/frontend/src/auth/use-auth.tsx b/frontend/src/auth/use-auth.tsx
@@ -15,8 +15,11 @@ const useAuth = (): { isAuthenticated: boolean; logout: () => void } => {
     authToken.remove()
     // Update the state to reflect that the user is not authenticated
     setIsAuthenticated(false)
-    // reset store
+    // TODO centralise the following two lines into a class - also used elsewhere
+    // reset apollo store
     apolloClient.resetStore()
+    // flush apollo persist cache
+    apolloClient.cache.evict({})
     // Reset history to /login
     navigate('/login', { replace: true })
   }

diff --git a/frontend/src/pam/env-mission-types.ts b/frontend/src/pam/env-mission-types.ts
@@ -327,14 +327,14 @@ export type ResourceUnit = {
 }
 
 export type Mission<EnvAction = EnvActionControl | EnvActionSurveillance | EnvActionNote> = {
+  id: any
   closedBy: string
   controlUnits: Omit<ControlUnit, 'id'>[]
   endDateTimeUtc?: string
   envActions: EnvAction[]
   facade: SeaFrontEnum
   geom?: Record<string, any>[]
   hasMissionOrder?: boolean
-  id: number
   isClosed: boolean
   isUnderJdp?: boolean
   missionSource: MissionSourceEnum

diff --git a/frontend/src/pam/mission/mission.tsx b/frontend/src/pam/mission/mission.tsx
@@ -22,18 +22,14 @@ export default function Mission() {
   const { missionId } = useParams()
 
   const apolloClient = useApolloClient()
-  debugger
   let navigate = useNavigate()
   const [selectedAction, setSelectedAction] = useState<Action | undefined>(undefined)
   const [showControlTypesModal, setShowControlTypesModal] = useState<boolean>(false)
 
   const { loading, error, data, refetch, updateQuery } = useQuery(GET_MISSION_BY_ID, {
-    variables: { missionId }
-    // fetchPolicy: 'cache-only'
+    variables: { missionId },
+    fetchPolicy: 'cache-only'
   })
-  // const [queryRef] = useBackgroundQuery(GET_ACTIONS_BY_MISSION_ID, { variables: { missionId } })
-  // debugger
-  // const dataCache = useReadQuery(queryRef)
 
   const selectMissionAction = (action: Action) => {
     setSelectedAction(action)
@@ -66,35 +62,26 @@ export default function Mission() {
         observations: null
       }
     }
-    const queryData = {
-      mission: {
-        __typename: 'Mission',
-        id: missionId,
-        actions: [newAction, ...data.mission.actions]
-      }
-    }
-    apolloClient.writeQuery({
-      query: GET_MISSION_BY_ID,
-      variables: { missionId },
-      data: queryData
-    })
+    // apolloClient.writeQuery({
+    //   query: GET_MISSION_BY_ID,
+    //   variables: { missionId },
+    //   data: updatedMission
+    // })
 
-    apolloCache.updateQuery({ query: GET_MISSION_BY_ID }, data => queryData)
-    const bite = apolloClient.readQuery({ query: GET_MISSION_BY_ID, variables: { missionId } })
-    const updateCacheAndReRenderUI = (newMission: any) => {
-      updateQuery((prevMission: any) => {
-        debugger
-        return prevMission
-      })
-    }
-    updateCacheAndReRenderUI(queryData)
+    // apolloCache.updateQuery({ query: GET_MISSION_BY_ID }, data => updatedMission)
+    updateQuery((prevMission: any) => ({
+      ...prevMission,
+      ...{
+        mission: {
+          __typename: 'Mission',
+          id: missionId,
+          actions: [newAction, ...data.mission.actions]
+        }
+      }
+    }))
+    // updateQuery((prevMission: any) => updatedMission)
 
-    // const a = await refetch({ missionId })
-    debugger
     setSelectedAction(newAction as any)
-
-    const a = await refetch({ missionId })
-    debugger
   }
 
   const addNewControl = (controlType: string, targetType: ControlTarget) => {

diff --git a/frontend/src/pam/mission/page-footer.tsx b/frontend/src/pam/mission/page-footer.tsx
@@ -15,18 +15,17 @@ const StyledFooter = styled.div`
 
 interface MissionPageFooterProps {
   missionName: string
-  onClickClose: () => void
+  exitMission: () => void
 }
 
-const MissionPageFooter: React.FC<MissionPageFooterProps> = ({ missionName, onClickClose }) => {
+const MissionPageFooter: React.FC<MissionPageFooterProps> = ({ missionName, exitMission }) => {
   const navigate = useNavigate()
 
   const deleteMission = () => {
     // TODO add delete
     alert('Fonctionnalité pas encore implémentée')
     exitMission()
   }
-  const exitMission = () => navigate('..')
   const saveAndQuitMission = () => {
     // TODO add save
     alert('Fonctionnalité pas encore implémentée')

diff --git a/frontend/src/pam/mission/page.tsx b/frontend/src/pam/mission/page.tsx
@@ -4,20 +4,28 @@ import Mission from './mission'
 import { useNavigate, useParams } from 'react-router-dom'
 import MissionPageHeader from './page-header'
 import MissionPageFooter from './page-footer'
+import { useApolloClient } from '@apollo/client'
 
 const MissionsPage: React.FC = () => {
   const navigate = useNavigate()
   let { missionId } = useParams()
+  const apolloClient = useApolloClient()
+
+  const exitMission = () => {
+    // TODO centralise the following into a class - also used in use-auth()
+    // reset apollo store
+    apolloClient.resetStore()
+    // flush apollo persist cache
+    apolloClient.cache.evict({})
 
-  const handleClose = () => {
     navigate('..')
   }
 
   return (
     <PageWrapper
       showMenu={false}
-      header={<MissionPageHeader missionName={`Mission #${missionId}`} onClickClose={handleClose} />}
-      footer={<MissionPageFooter missionName={`Mission #${missionId}`} onClickClose={handleClose} />}
+      header={<MissionPageHeader missionName={`Mission #${missionId}`} onClickClose={exitMission} />}
+      footer={<MissionPageFooter missionName={`Mission #${missionId}`} exitMission={exitMission} />}
     >
       <Mission />
     </PageWrapper>

diff --git a/frontend/src/pam/missions/missions-list.tsx b/frontend/src/pam/missions/missions-list.tsx
@@ -8,6 +8,7 @@ import React from 'react'
 
 interface MissionsListProps {
   missions: Mission[]
+  prefetchMission: (missionId: string) => void
 }
 
 const MissionStatus: React.FC<{ mission: Mission }> = ({ mission }) => {
@@ -23,7 +24,7 @@ const MissionStatus: React.FC<{ mission: Mission }> = ({ mission }) => {
   }
 }
 
-const MissionsList: React.FC<MissionsListProps> = ({ missions }) => {
+const MissionsList: React.FC<MissionsListProps> = ({ missions, prefetchMission }) => {
   return (
     <Stack direction="column" alignItems="flex-start" spacing="0.5rem" style={{ width: '100%' }}>
       <Stack.Item style={{ width: '100%' }}>
@@ -66,7 +67,13 @@ const MissionsList: React.FC<MissionsListProps> = ({ missions }) => {
             </FlexboxGrid.Item>
             <FlexboxGrid.Item colspan={7}></FlexboxGrid.Item>
             <FlexboxGrid.Item colspan={1}>
-              <Link to={`/pam/missions/${mission.id}`} style={{ color: THEME.color.charcoal }}>
+              <Link
+                to={`/pam/missions/${mission.id}`}
+                style={{ color: THEME.color.charcoal }}
+                onMouseOver={() => {
+                  prefetchMission(mission.id)
+                }}
+              >
                 <Icon.Edit size={20} />
               </Link>
             </FlexboxGrid.Item>

diff --git a/frontend/src/pam/missions/missions.tsx b/frontend/src/pam/missions/missions.tsx
@@ -6,9 +6,18 @@ 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'
 
 const Missions: React.FC = () => {
-  const { loading, error, data } = useQuery(GET_MISSIONS)
+  const { loading, error, data, client } = useQuery(GET_MISSIONS)
+
+  const prefetchMission = async (missionId: string) => {
+    const a = await client.query({
+      query: GET_MISSION_BY_ID,
+      variables: { missionId }
+    })
+    console.log('prefetch', a)
+  }
 
   if (data) {
     const missions: Mission[] = data.missions as Mission[]
@@ -44,7 +53,7 @@ const Missions: React.FC = () => {
                   </Stack.Item>
                 </Stack>
               ) : (
-                <MissionsList missions={missions} />
+                <MissionsList missions={missions} prefetchMission={prefetchMission} />
               )}
             </Stack.Item>
           </Stack>