feat: add search modal

components/Modal/Modal.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { createPortal } from "react-dom";
+import { GrClose } from "react-icons/gr";
 
 import styles from "./modal.module.scss";
 
@@ -17,12 +18,19 @@ export default function Modal({
   children,
   showCloseBtn = true,
 }: ModalProps) {
+  const handleWrapperClick = (event) =>
+    event.target.classList?.[0] === styles["modal-wrapper"] && close();
+
   return createPortal(
-    <div className={styles["modal-wrapper"]}>
+    <div className={styles["modal-wrapper"]} onClick={handleWrapperClick}>
       <div className={styles["modal-container"]}>
         <div className={styles["modal-header"]}>
           <h3>{title}</h3>
-          {showCloseBtn && <button onClick={close}>close</button>}
+          {showCloseBtn && (
+            <button onClick={close} className={`${styles["btn-close"]} reset`}>
+              <GrClose />
+            </button>
+          )}
         </div>
         <div className={styles["modal-body"]}>{children}</div>
       </div>

components/Modal/modal.module.scss

@@ -1,4 +1,5 @@
 @import "../../styles/colors.scss";
+@import "../../styles/keyframes.scss";
 
 .modal-wrapper {
     z-index: 9999;
@@ -13,10 +14,41 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    animation: opacityin 0.3s both;
 }
 
 .modal-container {
     background: $light-grey;
-    min-height: 250px;
-    min-width: 250px;
+    min-width: 500px;
+    padding: 1em 1.5em;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    animation: fadeintop 0.3s both;
+}
+
+.modal-header {
+    width: 100%;
+    margin-bottom: 1.5em;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & button.btn-close {
+        color: $blue;
+        background-color: transparent;
+        border: 0;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.modal-body {
+    width: 100%;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    flex-direction: column;
 }

components/SearchModal/SearchModal.tsx

@@ -4,7 +4,6 @@ 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";
@@ -13,6 +12,8 @@ import { Category, ItemComplete, Link } from "../../types";
 
 import styles from "./search.module.scss";
 
+const GOOGLE_SEARCH_URL = "https://google.com/search?q=";
+
 export default function SearchModal({
   close,
   handleSelectCategory,
@@ -31,33 +32,38 @@ export default function SearchModal({
   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 itemsCompletion = useMemo(
+    () =>
+      search.length === 0
+        ? []
+        : 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())}`);
+
+      if (itemsCompletion.length === 0) {
+        window.open(GOOGLE_SEARCH_URL + encodeURI(search.trim()));
+        return close();
       }
+
+      // TODO: replace "firstItem" by a "cursor"
+      const firstItem = itemsCompletion[0];
+
+      const category = categories.find((c) => c.id === firstItem.id);
+      if (firstItem.type === "category" && category) {
+        handleSelectCategory(category);
+        return close();
+      }
+
+      window.open(firstItem.url);
       close();
     },
     [categories, close, handleSelectCategory, itemsCompletion, search]
@@ -65,11 +71,7 @@ export default function SearchModal({
 
   return (
     <Modal title="Rechercher" close={close}>
-      <FormLayout
-        title="Search"
-        canSubmit={canSubmit}
-        handleSubmit={handleSubmit}
-      >
+      <form onSubmit={handleSubmit} className={styles["search-form"]}>
         <TextBox
           name="search"
           onChangeCallback={(value) => setSearch(value)}
@@ -97,28 +99,33 @@ export default function SearchModal({
               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>
-            }
+            noItem={<LabelSearchWithGoogle />}
           />
         )}
-      </FormLayout>
+        <button type="submit" disabled={!canSubmit} style={{ display: "none" }}>
+          Valider
+        </button>
+      </form>
     </Modal>
   );
 }
 
+function LabelSearchWithGoogle() {
+  return (
+    <i className={styles["search-with-google"]}>
+      Recherche avec{" "}
+      <span>
+        <FcGoogle size={24} />
+        oogle
+      </span>
+    </i>
+  );
+}
+
+function LabelNoItem() {
+  return <i className={styles["no-item"]}>Aucun élément trouvé</i>;
+}
+
 function ListItemComponent({
   items,
   noItem,
@@ -127,16 +134,7 @@ function ListItemComponent({
   noItem?: ReactNode;
 }) {
   return (
-    <ul
-      style={{
-        margin: "1em 0",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "1em",
-        flexWrap: "wrap",
-      }}
-    >
+    <ul className={styles["list-item"]}>
       {items.length > 0 ? (
         items.map((item) => (
           <ItemComponent
@@ -152,7 +150,7 @@ function ListItemComponent({
       ) : noItem ? (
         noItem
       ) : (
-        <i>no item found</i>
+        <LabelNoItem />
       )}
     </ul>
   );
@@ -161,7 +159,7 @@ function ListItemComponent({
 function ItemComponent({ item }: { item: ItemComplete }) {
   const { name, type, url } = item;
   return (
-    <li>
+    <li className={styles["item"]}>
       <LinkTag
         href={url}
         style={{

components/SearchModal/search.module.scss

@@ -1,7 +1,42 @@
-.search-input-field {
-    & input {
-        border-radius: 1.5em;
-        padding: 1em;
-        border: 1px solid transparent;
-    }
+form.search-form {
+  width: 100%;
+  flex: 1;
+}
+
+.search-input-field {
+  width: 100%;
+
+  & input {
+    width: 100%;
+    border-radius: 1.5em;
+    padding: 1em;
+    border: 1px solid transparent;
+  }
+}
+
+.search-with-google {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+
+  & > span {
+    display: flex;
+    align-items: "center";
+  }
+}
+
+.list-item {
+  margin: 1em 0;
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.item {
+  & > a {
+    display: flex;
+    flex-direction: column;
+  }
 }

components/SideMenu/SideMenu.tsx

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

components/SideMenu/sidemenu.module.scss

@@ -2,7 +2,7 @@
 
 .side-menu {
     height: 100%;
-    width: 300px;
+    width: 325px;
     padding: 0 25px 0 10px;
     border-right: 1px solid $lightest-grey;
     margin-right: 15px;
@@ -15,7 +15,13 @@
 .menu-controls {
     margin: 10px 0;
     display: flex;
+    gap: 0.25em;
     align-items: center;
     justify-content: center;
     flex-direction: column;
+
+    & .action {
+        display: flex;
+        gap: 0.5em;
+    }
 }

example.env

@@ -1,16 +1,17 @@
-DB_USER="my_user"
-DB_PASSWORD=""
-DB_DATABASE="my-links"
+MYSQL_USER="my_user"
+MYSQL_PASSWORD=""
+MYSQL_DATABASE="my-links"
+MYSQL_ROOT_PASSWORD="root"
 
 # Or if you need external Database
 # DATABASE_IP="localhost"
 # DATABASE_PORT="3306"
 # DATABASE_URL="mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@${DATABASE_IP}:${DATABASE_PORT}/${MYSQL_DATABASE}"
 
-NEXTAUTH_URL=http://localhost:3000
-NEXTAUTH_URL_INTERNAL=http://localhost:3000
+NEXTAUTH_URL="http://localhost:3000"
+NEXTAUTH_URL_INTERNAL="http://localhost:3000"
 
-NEXTAUTH_SECRET=
+NEXTAUTH_SECRET=""
 
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
+GOOGLE_CLIENT_ID=""
+GOOGLE_CLIENT_SECRET=""

pages/index.tsx

@@ -61,7 +61,10 @@ function Home({ categories, favorites, currentCategory, items }: HomeProps) {
   }, [router]);
 
   useHotkeys(OPEN_SEARCH_KEY, openSearchModal, { enabled: !modal.isShowing });
-  useHotkeys(CLOSE_SEARCH_KEY, closeSearchModal, { enabled: modal.isShowing });
+  useHotkeys(CLOSE_SEARCH_KEY, closeSearchModal, {
+    enabled: modal.isShowing,
+    enableOnFormTags: ["INPUT"],
+  });
 
   useHotkeys(OPEN_CREATE_LINK_KEY, gotoCreateLink, {
     enabled: !modal.isShowing,

pages/search.tsx

@@ -1,218 +0,0 @@
-import LinkTag from "next/link";
-import { useRouter } from "next/router";
-import { ReactNode, useCallback, useMemo, useState } from "react";
-import { FcGoogle } from "react-icons/fc";
-
-import FormLayout from "../components/FormLayout";
-import TextBox from "../components/TextBox";
-
-import useAutoFocus from "../hooks/useAutoFocus";
-
-import LinkFavicon from "../components/Links/LinkFavicon";
-
-import { Link } from "../types";
-import { prisma } from "../utils/back";
-import { BuildCategory } from "../utils/front";
-
-import styles from "../styles/search.module.scss";
-
-interface ItemComplete {
-  id: number;
-  name: string;
-  url: string;
-  type: "category" | "link";
-}
-
-interface SearchPageProps {
-  favorites: Link[];
-  items: ItemComplete[];
-}
-
-export default function SearchPage({ favorites, items }: SearchPageProps) {
-  const router = useRouter();
-  const autoFocusRef = useAutoFocus();
-
-  const [search, setSearch] = useState<string>("");
-  const canSubmit = useMemo<boolean>(() => search.length > 0, [search]);
-
-  const itemsCompletion = useMemo(
-    () =>
-      search.length > 0
-        ? items.filter((item) =>
-            item.name
-              .toLocaleLowerCase()
-              .includes(search.toLocaleLowerCase().trim())
-          )
-        : [],
-    [items, search]
-  );
-  console.log("itemsCompletion", itemsCompletion);
-
-  const handleSubmit = useCallback(
-    (event) => {
-      event.preventDefault();
-      setSearch("");
-      if (itemsCompletion.length > 0) {
-        const firstItem = itemsCompletion[0];
-        if (firstItem.type === "link") {
-          window.open(firstItem.url);
-        } else {
-          router.push(firstItem.url);
-        }
-      } else {
-        window.open(`https://google.com/search?q=${encodeURI(search.trim())}`);
-      }
-    },
-    [itemsCompletion, router, search]
-  );
-
-  return (
-    <>
-      <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>
-    </>
-  );
-}
-
-function ListItemComponent({
-  items,
-  noItem,
-}: {
-  items: ItemComplete[];
-  noItem?: ReactNode;
-}) {
-  return (
-    <ul
-      style={{
-        margin: "1em 0",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "1em",
-      }}
-    >
-      {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",
-        }}
-      >
-        {type === "link" ? (
-          <LinkFavicon url={item.url} noMargin />
-        ) : (
-          <span>category</span>
-        )}
-        <span>{name}</span>
-      </LinkTag>
-    </li>
-  );
-}
-
-export async function getServerSideProps() {
-  const categoriesDB = await prisma.category.findMany({
-    include: { links: true },
-  });
-
-  const items = [] as ItemComplete[];
-
-  const favorites = [] as Link[];
-  categoriesDB.forEach((categoryDB) => {
-    const category = BuildCategory(categoryDB);
-
-    category.links.map((link) => {
-      if (link.favorite) {
-        favorites.push(link);
-      }
-      items.push({
-        id: link.id,
-        name: link.name,
-        url: link.url,
-        type: "link",
-      });
-    });
-
-    items.push({
-      id: category.id,
-      name: category.name,
-      url: `/?categoryId=${category.id}`,
-      type: "category",
-    });
-  });
-
-  return {
-    props: {
-      favorites: JSON.parse(JSON.stringify(favorites)),
-      items: JSON.parse(JSON.stringify(items)),
-    },
-  };
-}

styles/keyframes.scss

@@ -10,6 +10,28 @@
     }
 }
 
+@keyframes fadeintop {
+    0% {
+        transform: translateY(-15px);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes opacityin {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
 @keyframes rotate {
     to {
         transform: rotate(0deg);