refactoring [WIP]

components/Navbar.tsx

@@ -53,7 +53,7 @@ export default function Navbar() {
   const closeNewCollectionModal = () => setNewCollectionModalIsOpen(false);
 
   return (
-    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b">
+    <div className="flex justify-between gap-2 items-center px-4 py-2 border-solid border-b-neutral-content border-b">
       <div
         onClick={toggleSidebar}
         className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"

components/PublicPage/PublicSearchBar.tsx

@@ -1,59 +0,0 @@
-import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import { toast } from "react-hot-toast";
-
-type Props = {
-  placeHolder?: string;
-};
-
-export default function PublicSearchBar({ placeHolder }: Props) {
-  const router = useRouter();
-
-  const [searchQuery, setSearchQuery] = useState<string>("");
-
-  useEffect(() => {
-    router.query.q
-      ? setSearchQuery(decodeURIComponent(router.query.q as string))
-      : setSearchQuery("");
-  }, [router.query.q]);
-
-  return (
-    <div className="flex items-center relative group">
-      <label
-        htmlFor="search-box"
-        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md text-primary"
-      >
-        <FontAwesomeIcon icon={faMagnifyingGlass} className="w-4 h-4" />
-      </label>
-
-      <input
-        id="search-box"
-        type="text"
-        placeholder={placeHolder}
-        value={searchQuery}
-        onChange={(e) => {
-          e.target.value.includes("%") &&
-            toast.error("The search query should not contain '%'.");
-          setSearchQuery(e.target.value.replace("%", ""));
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            if (!searchQuery) {
-              return router.push("/public/collections/" + router.query.id);
-            }
-
-            return router.push(
-              "/public/collections/" +
-                router.query.id +
-                "?q=" +
-                encodeURIComponent(searchQuery || "")
-            );
-          }
-        }}
-        className="border text-sm border-neutral-content bg-base-200 focus:border-primary rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
-      />
-    </div>
-  );
-}

components/SearchBar.tsx

@@ -4,7 +4,11 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 
-export default function SearchBar() {
+type Props = {
+  placeholder?: string;
+};
+
+export default function SearchBar({ placeholder }: Props) {
   const router = useRouter();
 
   const routeQuery = router.query.q;
@@ -17,7 +21,7 @@ export default function SearchBar() {
     <div className="flex items-center relative group">
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-primary"
+        className="inline-flex w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
       </label>
@@ -25,18 +29,34 @@ export default function SearchBar() {
       <input
         id="search-box"
         type="text"
-        placeholder="Search for Links"
+        placeholder={placeholder || "Search for Links"}
         value={searchQuery}
         onChange={(e) => {
           e.target.value.includes("%") &&
             toast.error("The search query should not contain '%'.");
           setSearchQuery(e.target.value.replace("%", ""));
         }}
-        onKeyDown={(e) =>
+        onKeyDown={(e) => {
-          e.key === "Enter" &&
+          if (e.key === "Enter") {
-          router.push("/search?q=" + encodeURIComponent(searchQuery))
+            if (router.pathname.startsWith("/public")) {
-        }
+              if (!searchQuery) {
-        className="border border-neutral-content bg-base-200 focus:border-primary py-2 rounded-md pl-10 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
+                return router.push("/public/collections/" + router.query.id);
+              }
+
+              return router.push(
+                "/public/collections/" +
+                  router.query.id +
+                  "?q=" +
+                  encodeURIComponent(searchQuery || "")
+              );
+            } else {
+              return router.push(
+                "/search?q=" + encodeURIComponent(searchQuery)
+              );
+            }
+          }
+        }}
+        className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
       />
     </div>
   );

pages/collections/[id].tsx

@@ -14,6 +14,8 @@ import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
 import useLocalSettingsStore from "@/store/localSettings";
+import useAccountStore from "@/store/account";
+import getPublicUserData from "@/lib/client/getPublicUserData";
 
 export default function Index() {
   const { setModal } = useModalStore();
@@ -40,6 +42,35 @@ export default function Index() {
     );
   }, [router, collections]);
 
+  const { account } = useAccountStore();
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (activeCollection && activeCollection.ownerId !== account.id) {
+        const owner = await getPublicUserData(
+          activeCollection.ownerId as number
+        );
+        setCollectionOwner(owner);
+      } else if (activeCollection && activeCollection.ownerId === account.id) {
+        setCollectionOwner({
+          id: account.id as number,
+          name: account.name,
+          username: account.username as string,
+          image: account.image as string,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [activeCollection]);
+
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -71,46 +102,46 @@ export default function Index() {
 
             {activeCollection ? (
               <div
-                className={`min-w-[15rem] ${
+                className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
-                  activeCollection.members[1] && "mr-3"
+                onClick={() =>
-                }`}
+                  activeCollection &&
+                  setModal({
+                    modal: "COLLECTION",
+                    state: true,
+                    method: "UPDATE",
+                    isOwner: permissions === true,
+                    active: activeCollection,
+                    defaultIndex: permissions === true ? 1 : 0,
+                  })
+                }
               >
-                <div
+                {collectionOwner.id ? (
-                  onClick={() =>
+                  <ProfilePhoto
-                    setModal({
+                    src={collectionOwner.image || undefined}
-                      modal: "COLLECTION",
+                    className="w-7 h-7"
-                      state: true,
+                  />
-                      method: "UPDATE",
+                ) : undefined}
-                      isOwner: permissions === true,
+                {activeCollection.members
-                      active: activeCollection,
+                  .sort((a, b) => (a.userId as number) - (b.userId as number))
-                      defaultIndex: permissions === true ? 1 : 0,
+                  .map((e, i) => {
-                    })
+                    return (
-                  }
+                      <ProfilePhoto
-                  className="hover:opacity-80 duration-100 flex justify-center sm:justify-end items-center w-fit sm:mr-0 sm:ml-auto cursor-pointer"
+                        key={i}
-                >
+                        src={e.user.image ? e.user.image : undefined}
-                  {activeCollection?.members
+                        className="-ml-3"
-                    .sort((a, b) => (a.userId as number) - (b.userId as number))
+                      />
-                    .map((e, i) => {
+                    );
-                      return (
+                  })
-                        <ProfilePhoto
+                  .slice(0, 3)}
-                          key={i}
+                {activeCollection.members.length - 3 > 0 ? (
-                          src={e.user.image ? e.user.image : undefined}
+                  <div className={`avatar placeholder -ml-3`}>
-                          className={`${
+                    <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
-                            activeCollection.members[1] && "-mr-3"
+                      <span>+{activeCollection.members.length - 3}</span>
-                          } border-[3px]`}
-                        />
-                      );
-                    })
-                    .slice(0, 4)}
-                  {activeCollection?.members.length &&
-                  activeCollection.members.length - 4 > 0 ? (
-                    <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 -mr-3">
-                      +{activeCollection?.members?.length - 4}
                     </div>
-                  ) : null}
+                  </div>
-                </div>
+                ) : null}
               </div>
-            ) : null}
+            ) : undefined}
           </div>
 
           <div className="flex justify-between items-end gap-5">

pages/public/collections/[id].tsx

@@ -15,10 +15,10 @@ import ToggleDarkMode from "@/components/ToggleDarkMode";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import Image from "next/image";
 import Link from "next/link";
-import PublicSearchBar from "@/components/PublicPage/PublicSearchBar";
 import FilterSearchDropdown from "@/components/FilterSearchDropdown";
 import SortDropdown from "@/components/SortDropdown";
 import useLocalSettingsStore from "@/store/localSettings";
+import SearchBar from "@/components/SearchBar";
 
 const cardVariants: Variants = {
   offscreen: {
@@ -63,7 +63,6 @@ export default function PublicCollections() {
     tags: true,
   });
 
-  const [filterDropdown, setFilterDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({
@@ -200,8 +199,8 @@ export default function PublicCollections() {
 
         <div className="flex mb-5 mt-10 flex-col gap-5">
           <div className="flex justify-between">
-            <PublicSearchBar
+            <SearchBar
-              placeHolder={`Search ${collection._count?.links} Links`}
+              placeholder={`Search ${collection._count?.links} Links`}
             />
 
             <div className="flex gap-2 items-center">