From 12a3a62d0e083d3351af6b6435b77e7fba163275 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Sat, 27 May 2023 02:29:34 +0200
Subject: [PATCH] refacto: clean & move search code to SearchList + selected
 item bg-color

---
 src/components/SearchModal/SearchList.tsx     | 47 ++++++++++++--
 src/components/SearchModal/SearchListItem.tsx |  9 ++-
 src/components/SearchModal/SearchModal.tsx    | 62 ++++++++-----------
 src/components/SearchModal/search.module.scss | 13 ++++
 src/pages/api/category/index.ts               | 20 ++++++
 5 files changed, 108 insertions(+), 43 deletions(-)
 create mode 100644 src/pages/api/category/index.ts

diff --git a/src/components/SearchModal/SearchList.tsx b/src/components/SearchModal/SearchList.tsx
index 5b93a6d..8be3fca 100644
--- a/src/components/SearchModal/SearchList.tsx
+++ b/src/components/SearchModal/SearchList.tsx
@@ -1,20 +1,27 @@
-import { ReactNode, useMemo } from "react";
+import { ReactNode, useEffect, useMemo } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import { SearchItem } from "types";
 import { groupItemBy } from "utils/array";
 import SearchListItem from "./SearchListItem";
 
+import * as Keys from "constants/keys";
+
 import styles from "./search.module.scss";
 
+const isActiveItem = (item: SearchItem, otherItem: SearchItem) =>
+  item?.id === otherItem?.id && item?.type === otherItem?.type;
 export default function SearchList({
   items,
+  selectedItem,
+  setSelectedItem,
   noItem,
-  cursor,
   closeModal,
 }: {
   items: SearchItem[];
+  selectedItem: SearchItem;
+  setSelectedItem: (item: SearchItem) => void;
   noItem?: ReactNode;
-  cursor: number;
   closeModal: () => void;
 }) {
   const searchItemsGrouped = useMemo(
@@ -26,16 +33,44 @@ export default function SearchList({
     [searchItemsGrouped]
   );
 
+  const selectedItemIndex = useMemo<number>(
+    () => items.findIndex((item) => isActiveItem(item, selectedItem)),
+    [items, selectedItem]
+  );
+
+  useHotkeys(
+    Keys.ARROW_UP,
+    () => setSelectedItem(items[selectedItemIndex - 1]),
+    {
+      enableOnFormTags: ["INPUT"],
+      enabled: items.length > 1 && selectedItemIndex !== 0,
+      preventDefault: true,
+    }
+  );
+  useHotkeys(
+    Keys.ARROW_DOWN,
+    () => setSelectedItem(items[selectedItemIndex + 1]),
+    {
+      enableOnFormTags: ["INPUT"],
+      enabled: items.length > 1 && selectedItemIndex !== items.length - 1,
+      preventDefault: true,
+    }
+  );
+
+  useEffect(() => {
+    setSelectedItem(items[0]);
+  }, [items, setSelectedItem]);
+
   return (
     <ul className={styles["search-list"]}>
       {groupedItems.length > 0 ? (
-        groupedItems.map(([key, items], index) => (
+        groupedItems.map(([key, items]) => (
           <li key={key + "-" + key}>
-            <span>{typeof key === "undefined" ? "-" : key}</span>
+            <li>{typeof key === "undefined" ? "-" : key}</li>
             {items.map((item) => (
               <SearchListItem
                 item={item}
-                selected={index === cursor}
+                selected={isActiveItem(item, selectedItem)}
                 closeModal={closeModal}
                 key={item.id}
               />
diff --git a/src/components/SearchModal/SearchListItem.tsx b/src/components/SearchModal/SearchListItem.tsx
index 4b60dab..614d861 100644
--- a/src/components/SearchModal/SearchListItem.tsx
+++ b/src/components/SearchModal/SearchListItem.tsx
@@ -28,7 +28,13 @@ export default function SearchListItem({
   }, [selected]);
 
   return (
-    <li className={styles["search-item"]} ref={ref} key={id}>
+    <li
+      className={
+        styles["search-item"] + (selected ? ` ${styles["selected"]}` : "")
+      }
+      ref={ref}
+      key={id}
+    >
       <LinkTag
         href={url}
         target="_blank"
@@ -41,7 +47,6 @@ export default function SearchListItem({
           <AiOutlineFolder size={24} />
         )}
         <span>{name}</span>
-        {selected && "[selected]"}
       </LinkTag>
     </li>
   );
diff --git a/src/components/SearchModal/SearchModal.tsx b/src/components/SearchModal/SearchModal.tsx
index 6c3f9fe..045f2cd 100644
--- a/src/components/SearchModal/SearchModal.tsx
+++ b/src/components/SearchModal/SearchModal.tsx
@@ -1,5 +1,4 @@
 import { FormEvent, useCallback, useMemo, useState } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
 import { BsSearch } from "react-icons/bs";
 
 import useAutoFocus from "hooks/useAutoFocus";
@@ -9,7 +8,6 @@ import TextBox from "components/TextBox";
 import LabelSearchWithGoogle from "./LabelSearchWithGoogle";
 import SearchList from "./SearchList";
 
-import * as Keys from "constants/keys";
 import { GOOGLE_SEARCH_URL } from "constants/search-urls";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { Category, SearchItem } from "types";
@@ -22,7 +20,7 @@ export default function SearchModal({
   categories,
   items,
 }: {
-  close: any;
+  close: () => void;
   handleSelectCategory: (category: Category) => void;
   categories: Category[];
   items: SearchItem[];
@@ -39,10 +37,11 @@ export default function SearchModal({
   );
 
   const [search, setSearch] = useState<string>("");
-  const [cursor, setCursor] = useState<number>(0);
+  const [selectedItem, setSelectedItem] = useState<SearchItem>(items[0]);
 
   const canSubmit = useMemo<boolean>(() => search.length > 0, [search]);
 
+  // TODO: extract this code into utils function
   const itemsCompletion = useMemo(
     () =>
       search.length === 0
@@ -58,52 +57,44 @@ export default function SearchModal({
     [canSearchCategory, canSearchLink, items, search]
   );
 
-  useHotkeys(Keys.ARROW_UP, () => setCursor((cursor) => (cursor -= 1)), {
-    enableOnFormTags: ["INPUT"],
-    enabled: itemsCompletion.length > 1 && cursor !== 0,
-    preventDefault: true,
-  });
-  useHotkeys(Keys.ARROW_DOWN, () => setCursor((cursor) => (cursor += 1)), {
-    enableOnFormTags: ["INPUT"],
-    enabled:
-      itemsCompletion.length > 1 && cursor !== itemsCompletion.length - 1,
-    preventDefault: true,
-  });
+  const resetForm = useCallback(() => {
+    setSearch("");
+    close();
+  }, [close]);
 
-  const handleSearchInputChange = useCallback((value) => {
-    setSearch(value);
-    setCursor(0);
-  }, []);
-  const handleCanSearchLink = (checked: boolean) => {
-    setCanSearchLink(checked);
-    setCursor(0);
-  };
-  const handleCanSearchCategory = (checked: boolean) => {
+  const handleSearchInputChange = useCallback(
+    (value: string) => setSearch(value),
+    []
+  );
+
+  const handleCanSearchLink = (checked: boolean) => setCanSearchLink(checked);
+  const handleCanSearchCategory = (checked: boolean) =>
     setCanSearchCategory(checked);
-    setCursor(0);
-  };
 
   const handleSubmit = useCallback(
     (event: FormEvent<HTMLFormElement>) => {
       event.preventDefault();
-      setSearch("");
+      resetForm();
 
       if (itemsCompletion.length === 0) {
-        window.open(GOOGLE_SEARCH_URL + encodeURI(search.trim()));
-        return close();
+        return window.open(GOOGLE_SEARCH_URL + encodeURI(search.trim()));
       }
 
-      const selectedItem = itemsCompletion[cursor];
       const category = categories.find((c) => c.id === selectedItem.id);
       if (selectedItem.type === "category" && category) {
-        handleSelectCategory(category);
-        return close();
+        return handleSelectCategory(category);
       }
 
       window.open(selectedItem.url);
-      close();
     },
-    [categories, close, cursor, handleSelectCategory, itemsCompletion, search]
+    [
+      categories,
+      handleSelectCategory,
+      itemsCompletion.length,
+      resetForm,
+      search,
+      selectedItem,
+    ]
   );
 
   return (
@@ -132,8 +123,9 @@ export default function SearchModal({
         {search.length > 0 && (
           <SearchList
             items={itemsCompletion}
+            selectedItem={selectedItem}
+            setSelectedItem={setSelectedItem}
             noItem={<LabelSearchWithGoogle />}
-            cursor={cursor}
             closeModal={close}
           />
         )}
diff --git a/src/components/SearchModal/search.module.scss b/src/components/SearchModal/search.module.scss
index 3994eae..02256fe 100644
--- a/src/components/SearchModal/search.module.scss
+++ b/src/components/SearchModal/search.module.scss
@@ -1,3 +1,5 @@
+@import "styles/colors.scss";
+
 form.search-form {
   width: 100%;
   flex: 1;
@@ -51,11 +53,22 @@ form.search-form {
 
 .search-item {
   width: 100%;
+  padding: 0.3em 0.5em;
+  border-radius: 5px;
+
+  &.selected {
+    background: $white;
+  }
 
   & > a {
     width: 100%;
+    border: 0;
     display: flex;
     gap: 0.5em;
     align-items: center;
+
+    &:hover {
+      border: 0;
+    }
   }
 }
diff --git a/src/pages/api/category/index.ts b/src/pages/api/category/index.ts
new file mode 100644
index 0000000..7b7726c
--- /dev/null
+++ b/src/pages/api/category/index.ts
@@ -0,0 +1,20 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { prisma } from "utils/back";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const categories = await prisma.category.findMany();
+    console.log("request");
+    return res.status(200).send({
+      categories,
+    });
+  } catch (error) {
+    console.error(error);
+    return res.status(400).send({
+      error: "Une erreur est survenue lors de la récupération des catégories",
+    });
+  }
+}