collection owner is now visible to other users

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}

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(),
     },
   });
 

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({

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;
+}

lib/client/getPublicUserDataByUsername.ts

@@ -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;
-}

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