From 387e0bf63b72d68c8ae4fa33271662563e2827eb Mon Sep 17 00:00:00 2001
From: malmen237 <linda.malm@eyevinn.se>
Date: Fri, 3 May 2024 09:33:17 +0200
Subject: [PATCH] chore: moved fetch-production-list into a separate hook

---
 .../landing-page/productions-list.tsx         | 53 ++----------------
 .../landing-page/use-fetch-production-list.ts | 56 +++++++++++++++++++
 2 files changed, 62 insertions(+), 47 deletions(-)
 create mode 100644 src/components/landing-page/use-fetch-production-list.ts

diff --git a/src/components/landing-page/productions-list.tsx b/src/components/landing-page/productions-list.tsx
index 0cadcbe4..e39d4053 100644
--- a/src/components/landing-page/productions-list.tsx
+++ b/src/components/landing-page/productions-list.tsx
@@ -1,7 +1,5 @@
 import styled from "@emotion/styled";
-import { useEffect, useState } from "react";
-import { API } from "../../api/api.ts";
-import { TBasicProduction } from "../production-line/types.ts";
+import { useEffect } from "react";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { LoaderDots } from "../loader/loader.tsx";
 import { useRefreshAnimation } from "./use-refresh-animation.ts";
@@ -9,6 +7,7 @@ import { DisplayContainerHeader } from "./display-container-header.tsx";
 import { DisplayContainer } from "../generic-components.ts";
 import { ManageProductionButton } from "./manage-production-button.tsx";
 import { LocalError } from "../error.tsx";
+import { useFetchProductionList } from "./use-fetch-production-list.ts";
 
 const ProductionListContainer = styled.div`
   display: flex;
@@ -42,50 +41,10 @@ const ProductionId = styled.div`
 `;
 
 export const ProductionsList = () => {
-  const [productions, setProductions] = useState<TBasicProduction[]>([]);
-  const [intervalLoad, setIntervalLoad] = useState<boolean>(false);
-  const [{ reloadProductionList }, dispatch] = useGlobalState();
-  const [doInitialLoad, setDoInitialLoad] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
+  const [{ reloadProductionList }] = useGlobalState();
 
-  // TODO extract to separate hook file
-  useEffect(() => {
-    let aborted = false;
-
-    if (reloadProductionList || intervalLoad || doInitialLoad) {
-      API.listProductions()
-        .then((result) => {
-          if (aborted) return;
-
-          setProductions(
-            result
-              // pick laste 10 items
-              .slice(-10)
-          );
-
-          dispatch({
-            type: "PRODUCTION_LIST_FETCHED",
-          });
-
-          setIntervalLoad(false);
-
-          setDoInitialLoad(false);
-
-          setError(null);
-        })
-        .catch((e) => {
-          setError(
-            e instanceof Error
-              ? e
-              : new Error("Failed to fetch production list.")
-          );
-        });
-    }
-
-    return () => {
-      aborted = true;
-    };
-  }, [dispatch, intervalLoad, reloadProductionList, doInitialLoad]);
+  const { productions, doInitialLoad, error, setIntervalLoad } =
+    useFetchProductionList();
 
   const showRefreshing = useRefreshAnimation({
     reloadProductionList,
@@ -100,7 +59,7 @@ export const ProductionsList = () => {
     return () => {
       window.clearInterval(interval);
     };
-  }, []);
+  }, [setIntervalLoad]);
 
   return (
     <>
diff --git a/src/components/landing-page/use-fetch-production-list.ts b/src/components/landing-page/use-fetch-production-list.ts
new file mode 100644
index 00000000..142fdd11
--- /dev/null
+++ b/src/components/landing-page/use-fetch-production-list.ts
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { useGlobalState } from "../../global-state/context-provider";
+import { API } from "../../api/api.ts";
+import { TBasicProduction } from "../production-line/types.ts";
+
+export const useFetchProductionList = () => {
+  const [productions, setProductions] = useState<TBasicProduction[]>([]);
+  const [doInitialLoad, setDoInitialLoad] = useState(true);
+  const [intervalLoad, setIntervalLoad] = useState<boolean>(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const [{ reloadProductionList }, dispatch] = useGlobalState();
+
+  useEffect(() => {
+    let aborted = false;
+
+    if (reloadProductionList || intervalLoad || doInitialLoad) {
+      API.listProductions()
+        .then((result) => {
+          if (aborted) return;
+
+          setProductions(
+            result
+              // pick laste 10 items
+              .slice(-10)
+          );
+
+          dispatch({
+            type: "PRODUCTION_LIST_FETCHED",
+          });
+
+          setIntervalLoad(false);
+          setDoInitialLoad(false);
+          setError(null);
+        })
+        .catch((e) => {
+          setError(
+            e instanceof Error
+              ? e
+              : new Error("Failed to fetch production list.")
+          );
+        });
+    }
+
+    return () => {
+      aborted = true;
+    };
+  }, [dispatch, intervalLoad, reloadProductionList, doInitialLoad]);
+
+  return {
+    productions,
+    doInitialLoad,
+    error,
+    setIntervalLoad,
+  };
+};