From 20f126e4ddf4f14dfaa4589949ab037459a09ee4 Mon Sep 17 00:00:00 2001
From: Sebastian-Webster <84299475+Sebastian-Webster@users.noreply.github.com>
Date: Sat, 17 Feb 2024 05:07:14 +1300
Subject: [PATCH] feat: Added AbortController to ItemAutoList

---
 components/ItemAutoList.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/ItemAutoList.js b/components/ItemAutoList.js
index 3c87e17..7dc84e7 100644
--- a/components/ItemAutoList.js
+++ b/components/ItemAutoList.js
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { FlatList, RefreshControl, TouchableOpacity } from "react-native";
 import { View, Text } from "react-native";
 import { useTheme } from "@react-navigation/native";
@@ -10,7 +10,8 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 
 export default function ItemAutoList({noItemsFoundText, centreIfNoItems, url, extraPOSTData = {}, DisplayComponent, extraProps = {}, state, dispatch, noMoreItemsText}) {
     const {colors} = useTheme();
-    const {serverUrl} = useContext(ServerUrlContext)
+    const {serverUrl} = useContext(ServerUrlContext);
+    const AbortControllerRef = useRef(new AbortController());
 
     function loadItems(reload) {
         if ((!state.noMoreItems || reload) && !state.loading && !state.reloading) {
@@ -22,7 +23,7 @@ export default function ItemAutoList({noItemsFoundText, centreIfNoItems, url, ex
                 ...extraPOSTData
             }
     
-            axios.post(urlToUse, toSend).then(response => {
+            axios.post(urlToUse, toSend, {signal: AbortControllerRef.current.signal}).then(response => {
                 const {items, noMoreItems} = response.data.data;
     
                 dispatch({type: 'addItems', items, noMoreItems})
@@ -36,6 +37,11 @@ export default function ItemAutoList({noItemsFoundText, centreIfNoItems, url, ex
 
     useEffect(() => {
         loadItems()
+
+        return () => {
+            console.warn('Aborting network requests from ItemAutoList as component is getting unmounted.')
+            AbortControllerRef.current.abort();
+        }
     }, [dispatch])
 
     return (