From 48e3581322f86970454e321f9ba67371b5b0a3c5 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 6 Mar 2024 10:42:06 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20add=20handler=20wh?=
 =?UTF-8?q?en=20click=20the=20project=20item=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProjectSearchBarDialog.tsx                | 45 ++++++++++++++++---
 .../frontend/src/pages/org-slug/layout.tsx    |  1 +
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
index 01f5b803..21f31901 100644
--- a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
@@ -8,18 +8,46 @@ import { Project } from 'gql-client';
 import { useDebounce } from 'usehooks-ts';
 import { ProjectSearchBarItem } from './ProjectSearchBarItem';
 import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty';
+import { useNavigate } from 'react-router-dom';
+import { useCombobox } from 'downshift';
 
 interface ProjectSearchBarDialogProps extends Dialog.DialogProps {
   onClose?: () => void;
+  onClickItem?: (data: Project) => void;
 }
 
 export const ProjectSearchBarDialog = ({
   onClose,
+  onClickItem,
   ...props
 }: ProjectSearchBarDialogProps) => {
   const [items, setItems] = useState<Project[]>([]);
-  const [inputValue, setInputValue] = useState<string>('');
+  const [selectedItem, setSelectedItem] = useState<Project | null>(null);
   const client = useGQLClient();
+  const navigate = useNavigate();
+
+  const {
+    getMenuProps,
+    getInputProps,
+    getItemProps,
+    inputValue,
+    setInputValue,
+  } = useCombobox({
+    items,
+    itemToString(item) {
+      return item ? item.name : '';
+    },
+    selectedItem,
+    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+      if (newSelectedItem) {
+        setSelectedItem(newSelectedItem);
+        onClickItem?.(newSelectedItem);
+        navigate(
+          `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
+        );
+      }
+    },
+  });
 
   const debouncedInputValue = useDebounce<string>(inputValue, 500);
 
@@ -42,7 +70,7 @@ export const ProjectSearchBarDialog = ({
     setItems([]);
     onClose?.();
   };
-  console.log(items);
+
   return (
     <Dialog.Root {...props}>
       <Dialog.Portal>
@@ -50,28 +78,31 @@ export const ProjectSearchBarDialog = ({
           <Dialog.Content>
             <div className="py-2.5 px-4 w-full flex items-center justify-between border-b border-border-separator/[0.06]">
               <Input
+                {...getInputProps()}
                 leftIcon={<SearchIcon />}
                 placeholder="Search"
                 appearance="borderless"
-                value={inputValue}
                 autoFocus
-                onChange={(e) => setInputValue(e.target.value)}
               />
               <Button iconOnly variant="ghost" onClick={handleClose}>
                 <CrossIcon size={16} />
               </Button>
             </div>
             {/* Content */}
-            <div className="flex flex-col gap-1 px-2 py-2">
+            <div {...getMenuProps()} className="flex flex-col gap-1 px-2 py-2">
               {items.length > 0
-                ? items.map((item) => (
+                ? items.map((item, index) => (
                     <>
                       <div className="px-2 py-2">
                         <p className="text-elements-mid-em text-xs font-medium">
                           Suggestions
                         </p>
                       </div>
-                      <ProjectSearchBarItem key={item.id} item={item} />
+                      <ProjectSearchBarItem
+                        {...getItemProps({ item, index })}
+                        key={item.id}
+                        item={item}
+                      />
                     </>
                   ))
                 : inputValue && <ProjectSearchBarEmpty />}
diff --git a/packages/frontend/src/pages/org-slug/layout.tsx b/packages/frontend/src/pages/org-slug/layout.tsx
index 1ff1679f..36dade67 100644
--- a/packages/frontend/src/pages/org-slug/layout.tsx
+++ b/packages/frontend/src/pages/org-slug/layout.tsx
@@ -123,6 +123,7 @@ export const DashboardLayout = ({
       </section>
       <ProjectSearchBarDialog
         open={isSearchOpen}
+        onClickItem={() => setIsSearchOpen(false)}
         onClose={() => setIsSearchOpen(false)}
       />
     </>