added view team modal

2023-11-15 23:31:13 -05:00 · 2023-11-15 23:31:13 -05:00 · 021f7c9481
parent 59815f47d8
commit 021f7c9481
6 changed files with 242 additions and 64 deletions
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@ -18,7 +18,7 @@ type Props = {
    SetStateAction<CollectionIncludingMembersAndLinkCount>
  >;
  collection: CollectionIncludingMembersAndLinkCount;
-  method: "CREATE" | "UPDATE";
+  method: "CREATE" | "UPDATE" | "VIEW_TEAM";
 };

 export default function CollectionInfo({
--- a/components/Modal/Collection/ViewTeam.tsx
+++ b/components/Modal/Collection/ViewTeam.tsx
@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCrown } from "@fortawesome/free-solid-svg-icons";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import { toast } from "react-hot-toast";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+
+type Props = {
+  collection: CollectionIncludingMembersAndLinkCount;
+};
+
+export default function ViewTeam({ collection }: Props) {
+  const currentURL = new URL(document.URL);
+
+  const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null,
+    name: "",
+    username: "",
+    image: "",
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      const owner = await getPublicUserData(collection.ownerId as number);
+      setCollectionOwner(owner);
+    };
+
+    fetchOwner();
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+      <p className="ml-10 text-xl font-thin">Team</p>
+
+      <p>Here's all the members that are collaborating in this collection.</p>
+
+      <div
+        className="relative border px-2 rounded-md border-sky-100 dark:border-neutral-700 flex min-h-[4rem] gap-2 justify-between"
+        title={`'@${collectionOwner.username}' is the owner of this collection.`}
+      >
+        <div className="flex items-center gap-2 w-full">
+          <ProfilePhoto
+            src={collectionOwner.image ? collectionOwner.image : undefined}
+            className="border-[3px]"
+          />
+          <div className="w-full">
+            <div className="flex items-center gap-1 w-full justify-between">
+              <p className="text-sm font-bold text-black dark:text-white">
+                {collectionOwner.name}
+              </p>
+              <div className="flex text-xs gap-1 items-center">
+                <FontAwesomeIcon
+                  icon={faCrown}
+                  className="w-3 h-3 text-yellow-500"
+                />
+                Admin
+              </div>
+            </div>
+            <p className="text-gray-500 dark:text-gray-300">
+              @{collectionOwner.username}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {collection?.members[0]?.user && (
+        <>
+          <div className="flex flex-col gap-3 rounded-md">
+            {collection.members
+              .sort((a, b) => (a.userId as number) - (b.userId as number))
+              .map((e, i) => {
+                return (
+                  <div
+                    key={i}
+                    className="relative border p-2 rounded-md border-sky-100 dark:border-neutral-700 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+                  >
+                    <div className="flex items-center gap-2">
+                      <ProfilePhoto
+                        src={e.user.image ? e.user.image : undefined}
+                        className="border-[3px]"
+                      />
+                      <div>
+                        <p className="text-sm font-bold text-black dark:text-white">
+                          {e.user.name}
+                        </p>
+                        <p className="text-gray-500 dark:text-gray-300">
+                          @{e.user.username}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
--- a/components/Modal/Collection/index.tsx
+++ b/components/Modal/Collection/index.tsx
@ -4,6 +4,7 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import TeamManagement from "./TeamManagement";
 import { useState } from "react";
 import DeleteCollection from "./DeleteCollection";
+import ViewTeam from "./ViewTeam";

 type Props =
  | {
@ -21,6 +22,14 @@ type Props =
      isOwner: boolean;
      className?: string;
      defaultIndex?: number;
+    }
+  | {
+      toggleCollectionModal: Function;
+      activeCollection: CollectionIncludingMembersAndLinkCount;
+      method: "VIEW_TEAM";
+      isOwner: boolean;
+      className?: string;
+      defaultIndex?: number;
    };

 export default function CollectionModal({
@ -46,14 +55,25 @@ export default function CollectionModal({
    <div className={className}>
      <Tab.Group defaultIndex={defaultIndex}>
        {method === "CREATE" && (
-          <p className="text-xl text-black dark:text-white text-center">
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
            New Collection
          </p>
        )}
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
-          {method === "UPDATE" && (
-            <>
-              {isOwner && (
+        {method !== "VIEW_TEAM" && (
+          <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
+            {method === "UPDATE" && (
+              <>
+                {isOwner && (
+                  <Tab
+                    className={({ selected }) =>
+                      selected
+                        ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
+                        : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
+                    }
+                  >
+                    Collection Info
+                  </Tab>
+                )}
                <Tab
                  className={({ selected }) =>
                    selected
@ -61,30 +81,21 @@ export default function CollectionModal({
                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
                  }
                >
-                  Collection Info
+                  {isOwner ? "Share & Collaborate" : "View Team"}
                </Tab>
-              )}
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
-                }
-              >
-                {isOwner ? "Share & Collaborate" : "View Team"}
-              </Tab>
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
-                }
-              >
-                {isOwner ? "Delete Collection" : "Leave Collection"}
-              </Tab>
-            </>
-          )}
-        </Tab.List>
+                <Tab
+                  className={({ selected }) =>
+                    selected
+                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
+                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
+                  }
+                >
+                  {isOwner ? "Delete Collection" : "Leave Collection"}
+                </Tab>
+              </>
+            )}
+          </Tab.List>
+        )}
        <Tab.Panels>
          {(isOwner || method === "CREATE") && (
            <Tab.Panel>
@ -115,6 +126,14 @@ export default function CollectionModal({
              </Tab.Panel>
            </>
          )}
+
+          {method === "VIEW_TEAM" && (
+            <>
+              <Tab.Panel>
+                <ViewTeam collection={collection} />
+              </Tab.Panel>
+            </>
+          )}
        </Tab.Panels>
      </Tab.Group>
    </div>
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,7 +1,7 @@
 version: "3.5"
 services:
  postgres:
-    image: postgres
+    image: postgres:16-alpine
    env_file: .env
    restart: always
    volumes:
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@ -8,6 +8,9 @@ import { motion, Variants } from "framer-motion";
 import Head from "next/head";
 import useLinks from "@/hooks/useLinks";
 import useLinkStore from "@/store/links";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import useModalStore from "@/store/modals";
+import ModalManagement from "@/components/ModalManagement";

 const cardVariants: Variants = {
  offscreen: {
@ -25,6 +28,7 @@ const cardVariants: Variants = {

 export default function PublicCollections() {
  const { links } = useLinkStore();
+  const { setModal } = useModalStore();

  const router = useRouter();

@ -73,7 +77,13 @@ export default function PublicCollections() {
  }, []);

  return collection ? (
-    <div className="max-w-4xl mx-auto p-5 bg">
+    <div
+      className="h-screen"
+      style={{
+        backgroundImage: `linear-gradient(${collection?.color}30 10%, #f3f4f6 30%, #f9fafb 100%)`,
+      }}
+    >
+      <ModalManagement />
      {collection ? (
        <Head>
          <title>{collection.name} | Linkwarden</title>
@ -84,41 +94,80 @@ export default function PublicCollections() {
          />
        </Head>
      ) : undefined}
-      <div
-        className={`border border-solid border-sky-100 text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
-      >
-        <p className="text-5xl text-black mb-5 capitalize">{collection.name}</p>
+      <div className="max-w-4xl mx-auto p-5 bg">
+        <div className="flex items-center justify-between">
+          <p className="text-4xl text-black font-thin mb-5 capitalize mt-10">
+            {collection.name}
+          </p>
+          <div className="text-black">[Logo]</div>
+        </div>

-        {collection.description && (
-          <>
-            <hr className="mt-5 max-w-[30rem] mx-auto border-1 border-slate-400" />
-            <p className="mt-2 text-gray-500">{collection.description}</p>
-          </>
-        )}
-      </div>
+        <div>
+          <div className={`min-w-[15rem] ${collection.members[1] && "mr-3"}`}>
+            <div
+              onClick={() =>
+                setModal({
+                  modal: "COLLECTION",
+                  state: true,
+                  method: "VIEW_TEAM",
+                  isOwner: false,
+                  active: collection,
+                  defaultIndex: 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"
+            >
+              {collection.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={`${
+                        collection.members[1] && "-mr-3"
+                      } border-[3px]`}
+                    />
+                  );
+                })
+                .slice(0, 4)}
+              {collection?.members.length &&
+              collection.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 dark:border-neutral-700 -mr-3">
+                  +{collection?.members?.length - 4}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>

-      <div className="flex flex-col gap-5 my-8">
-        {links
-          ?.filter((e) => e.collectionId === Number(router.query.id))
-          .map((e, i) => {
-            return (
-              <motion.div
-                key={i}
-                initial="offscreen"
-                whileInView="onscreen"
-                viewport={{ once: true, amount: 0.8 }}
-              >
-                <motion.div variants={cardVariants}>
-                  <LinkCard link={e as any} count={i} />
+        <p className="mt-2 text-black">{collection.description}</p>
+
+        <hr className="mt-5 border-1 border-slate-400" />
+
+        <div className="flex flex-col gap-5 my-8">
+          {links
+            ?.filter((e) => e.collectionId === Number(router.query.id))
+            .map((e, i) => {
+              return (
+                <motion.div
+                  key={i}
+                  initial="offscreen"
+                  whileInView="onscreen"
+                  viewport={{ once: true, amount: 0.8 }}
+                >
+                  <motion.div variants={cardVariants}>
+                    <LinkCard link={e as any} count={i} />
+                  </motion.div>
                </motion.div>
-              </motion.div>
-            );
-          })}
-      </div>
+              );
+            })}
+        </div>

-      {/* <p className="text-center font-bold text-gray-500">
-        List created with <span className="text-black">Linkwarden.</span>
-      </p> */}
+        {/* <p className="text-center text-gray-500">
+      List created with <span className="text-black">Linkwarden.</span>
+    </p> */}
+      </div>
    </div>
  ) : (
    <></>
--- a/store/modals.ts
+++ b/store/modals.ts
@ -39,6 +39,14 @@ type Modal =
      active?: CollectionIncludingMembersAndLinkCount;
      defaultIndex?: number;
    }
+  | {
+      modal: "COLLECTION";
+      state: boolean;
+      method: "VIEW_TEAM";
+      isOwner?: boolean;
+      active?: CollectionIncludingMembersAndLinkCount;
+      defaultIndex?: number;
+    }
  | null;

 type ModalsStore = {
@ -46,11 +54,11 @@ type ModalsStore = {
  setModal: (modal: Modal) => void;
 };

-const useLocalSettingsStore = create<ModalsStore>((set) => ({
+const useModalStore = create<ModalsStore>((set) => ({
  modal: null,
  setModal: (modal: Modal) => {
    set({ modal });
  },
 }));

-export default useLocalSettingsStore;
+export default useModalStore;