Add basic rendering logic for ItemStatusInLibrary component

fe/src/components/item/ItemStatusInLibrary.tsx

@@ -1,19 +1,41 @@
+import { useEffect, useState } from "react";
+
+const LIBRARY_STATUS_AVAILABLE = "available";
+const LIBRARY_STATUS_REQUESTED= "requested";
+const LIBRARY_STATUS_MISSING = "missing";
+
 const statusIcons = {
-  available: "✅",
-  requested: "⏳",
-  missing: " ",
-}
+  loading: "⏳",
+  [LIBRARY_STATUS_AVAILABLE]: "✅",
+  [LIBRARY_STATUS_REQUESTED]: "📋",
+  [LIBRARY_STATUS_MISSING]: " ",
+};
 
 interface ItemStatusInLibraryProps {
   imdbId: string,
 };
 
-const ItemStatusInLibrary = ({}: ItemStatusInLibraryProps) => {
+const ItemStatusInLibrary = ({
+  imdbId,
+}: ItemStatusInLibraryProps) => {
+  const [isFetching, setIsFetching] = useState(false);
+  const [doneFetching, setDoneFetching] = useState(false);
+  const [libraryState, setLibraryState] = useState(null);
+
+  useEffect(() => {
+    // begin fetching
+    setIsFetching(true);
+  });
+
   return (
     <div>
-      {Object.values(statusIcons)[Math.floor(Math.random() * Object.values(statusIcons).length)]}
+      {isFetching && statusIcons.loading}
+      {!isFetching
+        && doneFetching
+        && !!libraryState
+        && Object.keys(statusIcons).includes(libraryState)
+        && statusIcons[libraryState]}
     </div>
   );
-}
 
 export default ItemStatusInLibrary