Implement item status fetch logic

fe/src/components/item/ItemStatusInLibrary.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import { getItemStatusInLibrary } from "../../helper/internalApiHelper";
 
-const LIBRARY_STATUS_AVAILABLE = "available";
-const LIBRARY_STATUS_REQUESTED= "requested";
-const LIBRARY_STATUS_MISSING = "missing";
+const LIBRARY_STATUS_AVAILABLE = "ON_JF";
+const LIBRARY_STATUS_REQUESTED= "ON_WISHLIST";
+const LIBRARY_STATUS_MISSING = "NO_MATCH";
 
-const statusIcons = {
+const statusIcons: { [key: string]: string } = {
   loading: "⏳",
   [LIBRARY_STATUS_AVAILABLE]: "✅",
   [LIBRARY_STATUS_REQUESTED]: "📋",
@@ -16,24 +16,39 @@ interface ItemStatusInLibraryProps {
   imdbId: string,
 };
 
+const FETCH_STATUS_DEFAULT = "FETCH_STATUS_DEFAULT";
+const FETCH_STATUS_STARTED_FETCHING = "FETCH_STATUS_STARTED_FETCHING";
+const FETCH_STATUS_DONE_FETCHING = "FETCH_STATUS_DONE_FETCHING";
+
 const ItemStatusInLibrary = ({
   imdbId,
 }: ItemStatusInLibraryProps) => {
-  const [isFetching, setIsFetching] = useState(false);
-  const [doneFetching, setDoneFetching] = useState(false);
-  const [libraryState, setLibraryState] = useState(null);
+  const [fetchStatus , setFetchStatus] = useState(FETCH_STATUS_DEFAULT);
+  const [libraryState, setLibraryState] = useState<string | null>(null);
+
+  console.log(`libraryState: ${imdbId}: `, libraryState);
+
+  const callBackFunc = (status: string) => {
+    console.log("status", status)
+    setFetchStatus(FETCH_STATUS_DONE_FETCHING);
+    setLibraryState(status);
+  };
 
   useEffect(() => {
     // begin fetching
-    setIsFetching(true);
-    getItemStatusInLibrary(imdbId);
+    if (fetchStatus === FETCH_STATUS_DEFAULT) {
+      setFetchStatus(FETCH_STATUS_STARTED_FETCHING)
+      getItemStatusInLibrary(
+        imdbId,
+        callBackFunc,
+      );
+    }
   });
 
   return (
     <div>
-      {isFetching && statusIcons.loading}
-      {!isFetching
-        && doneFetching
+      {fetchStatus === FETCH_STATUS_STARTED_FETCHING && statusIcons.loading}
+      {fetchStatus === FETCH_STATUS_DONE_FETCHING
         && !!libraryState
         && Object.keys(statusIcons).includes(libraryState)
         && statusIcons[libraryState]}

fe/src/helper/internalApiHelper.ts

@@ -1,11 +1,15 @@
 const buildApiUrl = (imdbId: string) => `http://localhost:1312/check/${imdbId}`;
 
-export const getItemStatusInLibrary = async (imdbId: string) => {
+
+export const getItemStatusInLibrary = async (
+  imdbId: string,
+  callback: Function,
+) => {
   if (imdbId.length > 0) {
     fetch(buildApiUrl(imdbId))
       .then(response => response.json())
       .then(data => {
-        console.log("data:", data);
+        callback(data.status);
       });
   }
 }