wip: search modal (link, category, or Google) with keybinds

components/Modal/Modal.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import styles from "./modal.module.scss";
+
+interface ModalProps {
+  close?: (...args: any) => void | Promise<void>;
+
+  title?: string;
+  children: ReactNode;
+
+  showCloseBtn?: boolean;
+}
+export default function Modal({
+  close,
+  title,
+  children,
+  showCloseBtn = true,
+}: ModalProps) {
+  return createPortal(
+    <div className={styles["modal-wrapper"]}>
+      <div className={styles["modal-container"]}>
+        <div className={styles["modal-header"]}>
+          <h3>{title}</h3>
+          {showCloseBtn && <button onClick={close}>close</button>}
+        </div>
+        <div className={styles["modal-body"]}>{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+}

components/Modal/modal.module.scss

@@ -0,0 +1,22 @@
+@import "../../styles/colors.scss";
+
+.modal-wrapper {
+    z-index: 9999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba($black, 0.5);
+    backdrop-filter: blur(0.25em);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.modal-container {
+    background: $light-grey;
+    min-height: 250px;
+    min-width: 250px;
+}

components/SearchModal/SearchModal.tsx

@@ -0,0 +1,183 @@
+import LinkTag from "next/link";
+import { ReactNode, useCallback, useMemo, useState } from "react";
+import { FcGoogle } from "react-icons/fc";
+
+import useAutoFocus from "../../hooks/useAutoFocus";
+
+import FormLayout from "../FormLayout";
+import LinkFavicon from "../Links/LinkFavicon";
+import Modal from "../Modal/Modal";
+import TextBox from "../TextBox";
+
+import { Category, ItemComplete, Link } from "../../types";
+
+import styles from "./search.module.scss";
+
+export default function SearchModal({
+  close,
+  handleSelectCategory,
+  categories,
+  favorites,
+  items,
+}: {
+  close: any;
+  handleSelectCategory: (category: Category) => void;
+  categories: Category[];
+  favorites: Link[];
+  items: ItemComplete[];
+}) {
+  const autoFocusRef = useAutoFocus();
+
+  const [search, setSearch] = useState<string>("");
+  const canSubmit = useMemo<boolean>(() => search.length > 0, [search]);
+
+  const itemsCompletion = useMemo(() => {
+    if (search.length === 0) {
+      return [];
+    }
+    return items.filter((item) =>
+      item.name.toLocaleLowerCase().includes(search.toLocaleLowerCase().trim())
+    );
+  }, [items, search]);
+
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      setSearch("");
+      if (itemsCompletion.length > 0) {
+        const firstItem = itemsCompletion[0];
+        if (firstItem.type === "link") {
+          window.open(firstItem.url);
+        } else {
+          const category = categories.find((c) => c.id === firstItem.id);
+          console.log(category);
+          if (category) {
+            handleSelectCategory(category);
+          }
+        }
+      } else {
+        window.open(`https://google.com/search?q=${encodeURI(search.trim())}`);
+      }
+      close();
+    },
+    [categories, close, handleSelectCategory, itemsCompletion, search]
+  );
+
+  return (
+    <Modal title="Rechercher" close={close}>
+      <FormLayout
+        title="Search"
+        canSubmit={canSubmit}
+        handleSubmit={handleSubmit}
+      >
+        <TextBox
+          name="search"
+          onChangeCallback={(value) => setSearch(value)}
+          value={search}
+          placeholder="Rechercher"
+          innerRef={autoFocusRef}
+          fieldClass={styles["search-input-field"]}
+        />
+        {search.length === 0 && favorites.length > 0 && (
+          <ListItemComponent
+            items={favorites.map((favorite) => ({
+              id: favorite.id,
+              name: favorite.name,
+              url: favorite.url,
+              type: "link",
+            }))}
+            noItem={<p>ajouter un favoris</p>}
+          />
+        )}
+        {search.length > 0 && (
+          <ListItemComponent
+            items={itemsCompletion.map((item) => ({
+              id: item.id,
+              name: item.name,
+              url: item.url,
+              type: item.type,
+            }))}
+            noItem={
+              <i
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: ".25em",
+                }}
+              >
+                Recherche avec{" "}
+                <span style={{ display: "flex", alignItems: "center" }}>
+                  <FcGoogle size={24} />
+                  oogle
+                </span>
+              </i>
+            }
+          />
+        )}
+      </FormLayout>
+    </Modal>
+  );
+}
+
+function ListItemComponent({
+  items,
+  noItem,
+}: {
+  items: ItemComplete[];
+  noItem?: ReactNode;
+}) {
+  return (
+    <ul
+      style={{
+        margin: "1em 0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "1em",
+        flexWrap: "wrap",
+      }}
+    >
+      {items.length > 0 ? (
+        items.map((item) => (
+          <ItemComponent
+            item={{
+              id: item.id,
+              name: item.name,
+              url: item.url,
+              type: item.type,
+            }}
+            key={item.type + "-" + item.id}
+          />
+        ))
+      ) : noItem ? (
+        noItem
+      ) : (
+        <i>no item found</i>
+      )}
+    </ul>
+  );
+}
+
+function ItemComponent({ item }: { item: ItemComplete }) {
+  const { name, type, url } = item;
+  return (
+    <li>
+      <LinkTag
+        href={url}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+        }}
+        target="_blank"
+        rel="no-referrer"
+      >
+        {type === "link" ? (
+          <LinkFavicon url={item.url} noMargin />
+        ) : (
+          <span>category</span>
+        )}
+        <span>{name}</span>
+      </LinkTag>
+    </li>
+  );
+}

components/SearchModal/search.module.scss

@@ -0,0 +1,7 @@
+.search-input-field {
+    & input {
+        border-radius: 1.5em;
+        padding: 1em;
+        border: 1px solid transparent;
+    }
+}

components/SideMenu/SideMenu.tsx

@@ -50,14 +50,20 @@ function MenuControls({
 }) {
   return (
     <div className={styles["menu-controls"]}>
-      <LinkTag href={"/category/create"}>Créer categorie</LinkTag>
-      <LinkTag href={"/category/create"}>
-        Créer categorie <kbd>C</kbd>
-      </LinkTag>
-      <LinkTag href={`/link/create?categoryId=${categoryActive.id}`}>
-        Créer lien
-        Créer lien <kbd>L</kbd>
-      </LinkTag>
+      <div className="action">
+        <LinkTag href={"/search"}>Rechercher</LinkTag>
+        <kbd>S</kbd>
+      </div>
+      <div className="action">
+        <LinkTag href={"/category/create"}>Créer categorie</LinkTag>
+        <kbd>C</kbd>
+      </div>
+      <div className="action">
+        <LinkTag href={`/link/create?categoryId=${categoryActive.id}`}>
+          Créer lien
+        </LinkTag>
+        <kbd>L</kbd>
+      </div>
     </div>
   );
 }