many visual changes + some code cleanup

components/Modal/EditCollection.tsx

@@ -8,15 +8,16 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faClose,
   faPenToSquare,
+  faPlus,
   faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
-import getPublicUserDataByEmail from "@/lib/client/getPublicUserDataByEmail";
 import Modal from "@/components/Modal";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
 import RequiredBadge from "../RequiredBadge";
+import addMemberToCollection from "@/lib/client/addMemberToCollection";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -42,6 +43,15 @@ export default function EditCollection({
 
   const session = useSession();
 
+  const setMemberState = (newMember: any) => {
+    setActiveCollection({
+      ...activeCollection,
+      members: [...activeCollection.members, newMember],
+    });
+
+    setMemberEmail("");
+  };
+
   const submit = async () => {
     console.log(activeCollection);
 
@@ -93,59 +103,34 @@ export default function EditCollection({
       <hr className="border rounded my-2" />
 
       <p className="text-sm font-bold text-sky-300">Members</p>
-      <input
-        value={memberEmail}
-        onChange={(e) => {
-          setMemberEmail(e.target.value);
-        }}
-        onKeyDown={async (e) => {
-          const checkIfMemberAlreadyExists = activeCollection.members.find(
-            (e) => e.user.email === memberEmail
-          );
+      <div className="relative">
+        <input
+          value={memberEmail}
+          onChange={(e) => {
+            setMemberEmail(e.target.value);
+          }}
+          type="text"
+          placeholder="Email"
+          className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
 
-          const ownerEmail = session.data?.user.email;
-
-          if (
-            e.key === "Enter" &&
-            // no duplicate members
-            !checkIfMemberAlreadyExists &&
-            // member can't be empty
-            memberEmail.trim() !== "" &&
-            // member can't be the owner
-            memberEmail.trim() !== ownerEmail
-          ) {
-            // Lookup, get data/err, list ...
-            const user = await getPublicUserDataByEmail(memberEmail.trim());
-
-            if (user.email) {
-              const newMember = {
-                collectionId: activeCollection.id,
-                userId: user.id,
-                canCreate: false,
-                canUpdate: false,
-                canDelete: false,
-                user: {
-                  name: user.name,
-                  email: user.email,
-                },
-              };
-
-              setActiveCollection({
-                ...activeCollection,
-                members: [...activeCollection.members, newMember],
-              });
-
-              setMemberEmail("");
-            }
+        <div
+          onClick={() =>
+            addMemberToCollection(
+              session.data?.user.email as string,
+              memberEmail,
+              activeCollection,
+              setMemberState,
+              "UPDATE"
+            )
           }
-        }}
-        type="text"
-        placeholder="Email"
-        className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-      />
-
+          className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer"
+        >
+          <FontAwesomeIcon icon={faPlus} className="w-4 h-4" />
+        </div>
+      </div>
       {activeCollection.members[0] ? (
-        <p className="text-center text-sky-500 text-xs sm:text-sm">
+        <p className="text-center text-gray-500 text-xs sm:text-sm">
           (All Members will have <b>Read</b> access to this collection.)
         </p>
       ) : null}
@@ -172,9 +157,17 @@ export default function EditCollection({
                 });
               }}
             />
-            <div>
-              <p className="text-sm font-bold text-sky-500">{e.user.name}</p>
-              <p className="text-sky-900">{e.user.email}</p>
+            <div className="flex items-center gap-2">
+              <img
+                // @ts-ignore
+                src={`/api/avatar/${e.userId}`}
+                className="h-10 w-10 rounded-full border border-sky-100"
+                alt=""
+              />
+              <div>
+                <p className="text-sm font-bold text-sky-500">{e.user.name}</p>
+                <p className="text-sky-900">{e.user.email}</p>
+              </div>
             </div>
             <div className="flex sm:block items-center gap-5">
               <div>