From 84ed033a8dd22fb543ba6394d7c1ca2282324ddf Mon Sep 17 00:00:00 2001
From: Nikhil Nawgiri <the@realest.ninja>
Date: Sat, 2 Nov 2024 18:22:12 +0100
Subject: [PATCH] Create separate component for item status

---
 .../components/item/ItemStatusInLibrary.tsx   | 19 +++++++++++++++++++
 fe/src/components/search/SearchResultItem.tsx | 12 +++---------
 2 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 fe/src/components/item/ItemStatusInLibrary.tsx

diff --git a/fe/src/components/item/ItemStatusInLibrary.tsx b/fe/src/components/item/ItemStatusInLibrary.tsx
new file mode 100644
index 0000000..f4ec830
--- /dev/null
+++ b/fe/src/components/item/ItemStatusInLibrary.tsx
@@ -0,0 +1,19 @@
+const statusIcons = {
+  available: "✅",
+  requested: "⏳",
+  missing: " ",
+}
+
+interface ItemStatusInLibraryProps {
+  imdbId: string,
+};
+
+const ItemStatusInLibrary = ({}: ItemStatusInLibraryProps) => {
+  return (
+    <div>
+      {Object.values(statusIcons)[Math.floor(Math.random() * Object.values(statusIcons).length)]}
+    </div>
+  );
+}
+
+export default ItemStatusInLibrary
diff --git a/fe/src/components/search/SearchResultItem.tsx b/fe/src/components/search/SearchResultItem.tsx
index f4097ab..1b811fb 100644
--- a/fe/src/components/search/SearchResultItem.tsx
+++ b/fe/src/components/search/SearchResultItem.tsx
@@ -1,3 +1,5 @@
+import ItemStatusInLibrary from "../item/ItemStatusInLibrary";
+
 interface SearchResultItemProps {
   title: string,
   image: string,
@@ -12,12 +14,6 @@ const itemTypeIcons = {
   series: "📺",
 }
 
-const itemStatusInLibrary = {
-  available: "✅",
-  requested: "⏳",
-  missing: " ",
-}
-
 // todo add link to movie if available
 const SearchResultItem = ({
   title,
@@ -41,9 +37,7 @@ const SearchResultItem = ({
         <div>
           {itemTypeIcons[type]}
         </div>
-        <div>
-          {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]}
-        </div>
+        <ItemStatusInLibrary imdbId={imdbId} />
       </div>
       <div className="search-result-item-year">
         {year.substring(0, 4)}