From 78f3d449bc01138f82063a4d17dfad1f8f77da40 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Mon, 17 Jul 2023 23:31:26 -0400
Subject: [PATCH] collection owner is now visible to other users

---
 .../Modal/Collection/TeamManagement.tsx       | 47 +++++++++++++++++--
 lib/api/controllers/users/getUsers.ts         | 20 +++++---
 lib/client/addMemberToCollection.ts           |  8 ++--
 lib/client/getPublicUserData.ts               | 21 +++++++++
 lib/client/getPublicUserDataByUsername.ts     | 13 -----
 pages/api/routes/users/index.ts               | 19 +++++++-
 6 files changed, 100 insertions(+), 28 deletions(-)
 create mode 100644 lib/client/getPublicUserData.ts
 delete mode 100644 lib/client/getPublicUserDataByUsername.ts

diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 6874603..57d42ed 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -1,7 +1,8 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faClose,
+  faCrown,
   faPenToSquare,
   faPlus,
   faUserPlus,
@@ -15,6 +16,7 @@ import SubmitButton from "@/components/SubmitButton";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
+import getPublicUserData from "@/lib/client/getPublicUserData";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -47,6 +49,21 @@ export default function TeamManagement({
     },
   });
 
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null,
+    name: "",
+    username: "",
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      const owner = await getPublicUserData({ id: collection.ownerId });
+      setCollectionOwner(owner);
+    };
+
+    fetchOwner();
+  }, []);
+
   const { addCollection, updateCollection } = useCollectionStore();
 
   const session = useSession();
@@ -163,7 +180,7 @@ export default function TeamManagement({
                 )
               }
               type="text"
-              placeholder="Username"
+              placeholder="Username (without the '@')"
               className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
             />
 
@@ -225,7 +242,7 @@ export default function TeamManagement({
                         <p className="text-sm font-bold text-sky-500">
                           {e.user.name}
                         </p>
-                        <p className="text-sky-900">{e.user.username}</p>
+                        <p className="text-sky-900">@{e.user.username}</p>
                       </div>
                     </div>
                     <div className="flex sm:block items-center gap-5 min-w-[10rem]">
@@ -397,6 +414,30 @@ export default function TeamManagement({
         </>
       )}
 
+      <div
+        className="relative border p-2 rounded-md border-sky-100 flex flex-col gap-2 justify-between"
+        title={`'@${collectionOwner.username}' is the owner of this collection.`}
+      >
+        <div className="flex items-center gap-2">
+          <ProfilePhoto
+            src={`/api/avatar/${collection.ownerId}`}
+            className="border-[3px]"
+          />
+          <div>
+            <div className="flex items-center gap-1">
+              <p className="text-sm font-bold text-sky-500">
+                {collectionOwner.name}
+              </p>
+              <FontAwesomeIcon
+                icon={faCrown}
+                className="w-3 h-3 text-yellow-500"
+              />
+            </div>
+            <p className="text-sky-900">@{collectionOwner.username}</p>
+          </div>
+        </div>
+      </div>
+
       {permissions === true && (
         <SubmitButton
           onClick={submit}
diff --git a/lib/api/controllers/users/getUsers.ts b/lib/api/controllers/users/getUsers.ts
index 001129c..b75ea7f 100644
--- a/lib/api/controllers/users/getUsers.ts
+++ b/lib/api/controllers/users/getUsers.ts
@@ -1,13 +1,21 @@
 import { prisma } from "@/lib/api/db";
 
-export default async function getUser(
-  lookupUsername: string,
-  isSelf: boolean,
-  username: string
-) {
+export default async function getUser({
+  params,
+  isSelf,
+  username,
+}: {
+  params: {
+    lookupUsername?: string;
+    lookupId?: number;
+  };
+  isSelf: boolean;
+  username: string;
+}) {
   const user = await prisma.user.findUnique({
     where: {
-      username: lookupUsername.toLowerCase(),
+      id: params.lookupId,
+      username: params.lookupUsername?.toLowerCase(),
     },
   });
 
diff --git a/lib/client/addMemberToCollection.ts b/lib/client/addMemberToCollection.ts
index deb7fa0..f1ec14f 100644
--- a/lib/client/addMemberToCollection.ts
+++ b/lib/client/addMemberToCollection.ts
@@ -1,5 +1,5 @@
 import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
-import getPublicUserDataByUsername from "./getPublicUserDataByUsername";
+import getPublicUserData from "./getPublicUserData";
 import { toast } from "react-hot-toast";
 
 const addMemberToCollection = async (
@@ -22,9 +22,9 @@ const addMemberToCollection = async (
     memberUsername.trim().toLowerCase() !== ownerUsername.toLowerCase()
   ) {
     // Lookup, get data/err, list ...
-    const user = await getPublicUserDataByUsername(
-      memberUsername.trim().toLowerCase()
-    );
+    const user = await getPublicUserData({
+      username: memberUsername.trim().toLowerCase(),
+    });
 
     if (user.username) {
       setMember({
diff --git a/lib/client/getPublicUserData.ts b/lib/client/getPublicUserData.ts
new file mode 100644
index 0000000..620cf9e
--- /dev/null
+++ b/lib/client/getPublicUserData.ts
@@ -0,0 +1,21 @@
+import { toast } from "react-hot-toast";
+
+export default async function getPublicUserData({
+  username,
+  id,
+}: {
+  username?: string;
+  id?: number;
+}) {
+  const response = await fetch(
+    `/api/routes/users?id=${id}&${
+      username ? `username=${username?.toLowerCase()}` : undefined
+    }`
+  );
+
+  const data = await response.json();
+
+  if (!response.ok) toast.error(data.response);
+
+  return data.response;
+}
diff --git a/lib/client/getPublicUserDataByUsername.ts b/lib/client/getPublicUserDataByUsername.ts
deleted file mode 100644
index 4f7662a..0000000
--- a/lib/client/getPublicUserDataByUsername.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { toast } from "react-hot-toast";
-
-export default async function getPublicUserDataByEmail(username: string) {
-  const response = await fetch(
-    `/api/routes/users?username=${username.toLowerCase()}`
-  );
-
-  const data = await response.json();
-
-  if (!response.ok) toast.error(data.response);
-
-  return data.response;
-}
diff --git a/pages/api/routes/users/index.ts b/pages/api/routes/users/index.ts
index 91b2bda..6757bab 100644
--- a/pages/api/routes/users/index.ts
+++ b/pages/api/routes/users/index.ts
@@ -15,14 +15,29 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
         "You are not a subscriber, feel free to reach out to us at hello@linkwarden.app in case of any issues.",
     });
 
-  const lookupUsername = req.query.username as string;
+  const lookupUsername = (req.query.username as string) || undefined;
+  const lookupId = Number(req.query.id) || undefined;
   const isSelf = session.user.username === lookupUsername ? true : false;
 
   if (req.method === "GET") {
-    const users = await getUsers(lookupUsername, isSelf, session.user.username);
+    const users = await getUsers({
+      params: {
+        lookupUsername,
+        lookupId,
+      },
+      isSelf,
+      username: session.user.username,
+    });
     return res.status(users.status).json({ response: users.response });
   } else if (req.method === "PUT" && !req.body.password) {
     const updated = await updateUser(req.body, session.user);
     return res.status(updated.status).json({ response: updated.response });
   }
 }
+
+// {
+//   lookupUsername,
+//   lookupId,
+// },
+// isSelf,
+// session.user.username