fix: expand loading after cancelling request - Ref gestion-de-projet… (…

…#722)
aphp · Mar 14, 2023 · baf33e1 · baf33e1
2 parents 495be9a + 24d2eff
commit baf33e1
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 64 deletions.
diff --git a/src/components/ScopeTree/ScopeTree.tsx b/src/components/ScopeTree/ScopeTree.tsx
@@ -168,32 +168,40 @@ const ScopeTree: React.FC<ScopeTreeProps> = ({ defaultSelectedItems, onChangeSel
   const [isAllSelected, setIsAllSelected] = useState(false)
   const controllerRef = useRef<AbortController | null>()
 
-  const fetchScopeTree = async () => {
-    dispatch<any>(fetchScopesList())
+  const fetchScopeTree = async (signal?: AbortSignal) => {
+    return dispatch<any>(fetchScopesList(signal))
+  }
+
+  const _cancelPendingRequest = () => {
+    if (controllerRef.current) {
+      controllerRef.current.abort()
+    }
+    controllerRef.current = new AbortController()
   }
 
   const _init = async () => {
     setSearchLoading(true)
-    await fetchScopeTree()
-    setRootRows(scopesList)
-    setOpenPopulations([])
-    setCount(scopesList?.length)
+    _cancelPendingRequest()
+    const fetchScopeTreeResponse = await fetchScopeTree(controllerRef.current?.signal)
+    if (fetchScopeTreeResponse && fetchScopeTreeResponse.payload && !fetchScopeTreeResponse.payload.aborted) {
+      const newPerimetersList = fetchScopeTreeResponse.payload.scopesList
+      setRootRows(newPerimetersList)
+      setOpenPopulations([])
+      setCount(newPerimetersList?.length)
+      setIsEmpty(!newPerimetersList || newPerimetersList.length < 0)
+    }
     setSearchLoading(false)
-    setIsEmpty(false)
   }
 
   const _searchInPerimeters = async (_isAllSelected?: boolean) => {
     setSearchLoading(true)
-    if (controllerRef.current) {
-      controllerRef.current.abort()
-    }
-    const controller = new AbortController()
-    controllerRef.current = controller
+    _cancelPendingRequest()
     const {
       scopeTreeRows: newPerimetersList,
       count: newCount,
       aborted: aborted
     } = await servicesPerimeters.findScope(searchInput, page, controllerRef.current?.signal)
+
     if (!aborted) {
       if (!newPerimetersList || newPerimetersList.length < 1) {
         setIsEmpty(true)
@@ -209,7 +217,6 @@ const ScopeTree: React.FC<ScopeTreeProps> = ({ defaultSelectedItems, onChangeSel
       setCount(newCount)
       setSearchLoading(false)
     }
-    controllerRef.current = null
     return newPerimetersList
   }
 
@@ -218,8 +225,7 @@ const ScopeTree: React.FC<ScopeTreeProps> = ({ defaultSelectedItems, onChangeSel
    *
    */
   const _onExpand = async (rowId: number) => {
-    const controller = controllerRef.current ?? new AbortController()
-    controllerRef.current = controller
+    controllerRef.current = new AbortController()
     let _openPopulation = openPopulation ? openPopulation : []
     let _rootRows = rootRows ? [...rootRows] : []
     const index = _openPopulation.indexOf(rowId)
@@ -240,13 +246,11 @@ const ScopeTree: React.FC<ScopeTreeProps> = ({ defaultSelectedItems, onChangeSel
         signal: controllerRef.current?.signal
       })
     )
-    if (expandResponse && expandResponse.payload) {
-      if (!expandResponse.payload.aborted) {
-        const _selectedItems = expandResponse.payload.selectedItems ?? []
-        _rootRows = expandResponse.payload.rootRows ?? _rootRows
-        setRootRows(_rootRows)
-        onChangeSelectedItem(_selectedItems)
-      }
+    if (expandResponse && expandResponse.payload && !expandResponse.payload.aborted) {
+      const _selectedItems = expandResponse.payload.selectedItems ?? []
+      _rootRows = expandResponse.payload.rootRows ?? _rootRows
+      setRootRows(_rootRows)
+      onChangeSelectedItem(_selectedItems)
     }
   }
 

diff --git a/src/services/aphp/servicePerimeters.ts b/src/services/aphp/servicePerimeters.ts
@@ -75,7 +75,7 @@ export interface IServicePerimeters {
    * Retour:
    *   - ScopeTreeRow[]
    */
-  getScopePerimeters: (practitionerId: string) => Promise<ScopeTreeRow[]>
+  getScopePerimeters: (practitionerId: string, signal?: AbortSignal) => Promise<ScopeTreeRow[]>
 
   /**
    * Cette fonction retoune l'ensemble des périmètres enfant d'un périmètre passé en argument
@@ -281,11 +281,16 @@ const servicesPerimeters: IServicePerimeters = {
     }
   },
 
-  getScopePerimeters: async (practitionerId) => {
+  getScopePerimeters: async (practitionerId, signal?: AbortSignal) => {
     if (!practitionerId) return []
 
-    const scopeItemList: ScopePage[] = (await servicesPerimeters.getPerimeters()) ?? []
-    const scopeTreeRowList: ScopeTreeRow[] = await servicesPerimeters.buildScopeTreeRow(scopeItemList)
+    const scopeItemList: ScopePage[] =
+      (await servicesPerimeters.getPerimeters(undefined, undefined, undefined, signal)) ?? []
+    const scopeTreeRowList: ScopeTreeRow[] = await servicesPerimeters.buildScopeTreeRow(
+      scopeItemList,
+      undefined,
+      signal
+    )
     return scopeTreeRowList
   },
 

diff --git a/src/state/scope.ts b/src/state/scope.ts
@@ -23,23 +23,28 @@ const defaultInitialState: ScopeState = {
 
 type FetchScopeListReturn = {
   scopesList: ScopeTreeRow[]
+  aborted?: boolean
 }
 
-const fetchScopesList = createAsyncThunk<FetchScopeListReturn, void, { state: RootState }>(
+const fetchScopesList = createAsyncThunk<FetchScopeListReturn, AbortSignal | undefined, { state: RootState }>(
   'scope/fetchScopesList',
-  async (DO_NOT_USE, { getState, dispatch }) => {
+  async (signal: AbortSignal | undefined, { getState, dispatch }) => {
     try {
       const state = getState()
       const { me, scope } = state
       const { scopesList } = scope
 
       if (scopesList.length) {
-        dispatch(fetchScopesListinBackground())
-        return { scopesList }
+        dispatch(fetchScopesListinBackground(signal))
+        return { scopesList: scopesList, aborted: signal?.aborted }
       } else {
-        if (!me) return { scopesList: [] }
-        const scopes = (await services.perimeters.getScopePerimeters(me.id)) || []
-        return { scopesList: scopes }
+        if (!me) return { scopesList: [], aborted: signal?.aborted }
+        const scopes = (await services.perimeters.getScopePerimeters(me.id, signal)) || []
+        if (signal?.aborted) {
+          return { scopesList: scopesList, aborted: signal?.aborted }
+        } else {
+          return { scopesList: scopes, aborted: signal?.aborted }
+        }
       }
     } catch (error) {
       console.error(error)
@@ -48,39 +53,41 @@ const fetchScopesList = createAsyncThunk<FetchScopeListReturn, void, { state: Ro
   }
 )
 
-const fetchScopesListinBackground = createAsyncThunk<FetchScopeListReturn, void, { state: RootState }>(
-  'scope/fetchScopesListinBackground',
-  async (DO_NOT_USE, { getState }) => {
-    try {
-      const state = getState()
-      const { me, scope } = state
-      const { scopesList } = scope
-
-      if (!me) return { scopesList: [] }
-      const scopes = (await services.perimeters.getScopePerimeters(me.id)) || []
-      return {
-        scopesList: scopes.map((scope) => ({
-          ...scope,
-          subItems: (
-            scopesList.find((item) => item.id === scope.id && item.subItems?.length) ?? {
-              subItems: [
-                {
-                  id: 'loading',
-                  name: 'loading',
-                  quantity: 0,
-                  subItems: []
-                }
-              ]
-            }
-          ).subItems
-        }))
-      }
-    } catch (error) {
-      console.error(error)
-      throw error
+const fetchScopesListinBackground = createAsyncThunk<
+  FetchScopeListReturn,
+  AbortSignal | undefined,
+  { state: RootState }
+>('scope/fetchScopesListinBackground', async (signal: AbortSignal | undefined, { getState }) => {
+  try {
+    const state = getState()
+    const { me, scope } = state
+    const { scopesList } = scope
+
+    if (!me) return { scopesList: [], aborted: signal?.aborted }
+    const scopes = (await services.perimeters.getScopePerimeters(me.id, signal)) || []
+    return {
+      scopesList: scopes.map((scope) => ({
+        ...scope,
+        subItems: (
+          scopesList.find((item) => item.id === scope.id && item.subItems?.length) ?? {
+            subItems: [
+              {
+                id: 'loading',
+                name: 'loading',
+                quantity: 0,
+                subItems: []
+              }
+            ]
+          }
+        ).subItems
+      })),
+      aborted: signal?.aborted
     }
+  } catch (error) {
+    console.error(error)
+    throw error
   }
-)
+})
 
 type ExpandScopeElementParams = {
   rowId: number