From 59e8ccd25829fb228d3b8957d6e45e759128d81c Mon Sep 17 00:00:00 2001
From: Haziq Khairi <ikhairulhaziq11@gmail.com>
Date: Thu, 11 Jan 2024 20:18:24 +0800
Subject: [PATCH] fix: artist name

---
 src/components/Navbar.jsx    | 12 ++++++++++--
 src/pages/ArtDescription.jsx |  4 +++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 1082abd..cb7724e 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -25,12 +25,20 @@ const SearchAutocomplete = ({ allLists }) => {
     }
   };
 
-  const itemToString = (item) => (item ? `${item.name} - ${item.artist}` : '');
+  const itemToString = (item) => {
+    return item ? `${item.name} - ${item.artistInfo.name}` : '';
+  };
+
+  const filterItems = (item, query) => {
+    const searchString = `${item.name} ${item.artistInfo.name}`.toLowerCase();
+    return searchString.includes(query.toLowerCase());
+  };
 
   return (
     <Autocomplete
       defaultItems={allLists}
       aria-label="Search for Artworks"
+      filterItems={filterItems}
       classNames={{
         base: 'max-w-lg',
         listboxWrapper: 'max-h-[320px]',
@@ -85,7 +93,7 @@ const SearchAutocomplete = ({ allLists }) => {
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">
-                  {item.artist}
+                  {item.artistInfo.name}
                 </span>
               </div>
             </div>
diff --git a/src/pages/ArtDescription.jsx b/src/pages/ArtDescription.jsx
index 8ff0646..5eb3910 100644
--- a/src/pages/ArtDescription.jsx
+++ b/src/pages/ArtDescription.jsx
@@ -35,7 +35,9 @@ const ArtDescription = () => {
               <h2 className="text-3xl font-bold text-gray-800">
                 {artItem.name}
               </h2>
-              <p className="text-sm text-gray-600 mt-1">by {artItem.artist}</p>
+              <p className="text-sm text-gray-600 mt-1">
+                by {artItem.artistInfo.name}
+              </p>
             </div>
           </CardHeader>