refactoring [WIP]

2023-11-30 06:13:42 -05:00 · 2023-11-30 06:13:42 -05:00 · cfc308f521
parent 5850a423f9
commit cfc308f521
5 changed files with 100 additions and 109 deletions
--- a/components/Navbar.tsx
+++ b/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"
--- a/components/PublicPage/PublicSearchBar.tsx
+++ b/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>
-  );
-}
--- a/components/SearchBar.tsx
+++ b/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) =>
-          e.key === "Enter" &&
-          router.push("/search?q=" + encodeURIComponent(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"
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            if (router.pathname.startsWith("/public")) {
+              if (!searchQuery) {
+                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>
  );
--- a/pages/collections/[id].tsx
+++ b/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] ${
-                  activeCollection.members[1] && "mr-3"
-                }`}
+                className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
+                onClick={() =>
+                  activeCollection &&
+                  setModal({
+                    modal: "COLLECTION",
+                    state: true,
+                    method: "UPDATE",
+                    isOwner: permissions === true,
+                    active: activeCollection,
+                    defaultIndex: permissions === true ? 1 : 0,
+                  })
+                }
              >
-                <div
-                  onClick={() =>
-                    setModal({
-                      modal: "COLLECTION",
-                      state: true,
-                      method: "UPDATE",
-                      isOwner: permissions === true,
-                      active: activeCollection,
-                      defaultIndex: permissions === true ? 1 : 0,
-                    })
-                  }
-                  className="hover:opacity-80 duration-100 flex justify-center sm:justify-end items-center w-fit sm:mr-0 sm:ml-auto cursor-pointer"
-                >
-                  {activeCollection?.members
-                    .sort((a, b) => (a.userId as number) - (b.userId as number))
-                    .map((e, i) => {
-                      return (
-                        <ProfilePhoto
-                          key={i}
-                          src={e.user.image ? e.user.image : undefined}
-                          className={`${
-                            activeCollection.members[1] && "-mr-3"
-                          } 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}
+                {collectionOwner.id ? (
+                  <ProfilePhoto
+                    src={collectionOwner.image || undefined}
+                    className="w-7 h-7"
+                  />
+                ) : undefined}
+                {activeCollection.members
+                  .sort((a, b) => (a.userId as number) - (b.userId as number))
+                  .map((e, i) => {
+                    return (
+                      <ProfilePhoto
+                        key={i}
+                        src={e.user.image ? e.user.image : undefined}
+                        className="-ml-3"
+                      />
+                    );
+                  })
+                  .slice(0, 3)}
+                {activeCollection.members.length - 3 > 0 ? (
+                  <div className={`avatar placeholder -ml-3`}>
+                    <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
+                      <span>+{activeCollection.members.length - 3}</span>
                    </div>
-                  ) : null}
-                </div>
+                  </div>
+                ) : null}
              </div>
-            ) : null}
+            ) : undefined}
          </div>

          <div className="flex justify-between items-end gap-5">
--- a/pages/public/collections/[id].tsx
+++ b/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
-              placeHolder={`Search ${collection._count?.links} Links`}
+            <SearchBar
+              placeholder={`Search ${collection._count?.links} Links`}
            />

            <div className="flex gap-2 items-center">