changes/fixes + some WIP

components/CollectionCard.tsx

@@ -41,7 +41,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
   };
 
   return (
-    <div className="p-5 bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none group relative">
+    <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md shadow duration-100 hover:shadow-none group relative">
       <div
         onClick={() => setExpandDropdown(!expandDropdown)}
         id="edit-dropdown"
@@ -54,7 +54,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
         />
       </div>
       <Link href={`/collections/${collection.id}`}>
-        <div className="flex flex-col gap-2 justify-between h-full select-none">
+        <div className="flex flex-col gap-2 justify-between h-full select-none p-5 cursor-pointer">
           <p className="text-2xl font-bold capitalize text-sky-600 break-words w-4/5">
             {collection.name}
           </p>

components/Dropdown.tsx

@@ -24,7 +24,7 @@ export default function ({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} border border-sky-100 shadow-md mb-5 bg-gray-50 rounded-md flex flex-col`}
+      className={`${className} border border-sky-100 shadow-md mb-5 bg-gray-50 rounded-md flex flex-col z-10`}
     >
       {items.map((e, i) => {
         const inner = (

components/Modal/AddCollection.tsx

@@ -5,7 +5,12 @@
 
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose, faPlus, faUser } from "@fortawesome/free-solid-svg-icons";
+import {
+  faClose,
+  faPlus,
+  faUser,
+  faUserPlus,
+} from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection, NewCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
@@ -111,7 +116,7 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
           }
           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" />
+          <FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" />
         </div>
       </div>
 

components/Modal/EditCollection.tsx

@@ -11,6 +11,7 @@ import {
   faPlus,
   faTrashCan,
   faUser,
+  faUserPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection } from "@/types/global";
@@ -20,6 +21,7 @@ import DeleteCollection from "@/components/Modal/DeleteCollection";
 import RequiredBadge from "../RequiredBadge";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import ImageWithFallback from "../ImageWithFallback";
+import Checkbox from "../Checkbox";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -102,9 +104,27 @@ export default function EditCollection({
         </div>
       </div>
 
-      <hr className="border rounded my-2" />
+      <hr className="my-2" />
+
+      {/* <p className="text-sky-600">Sharing & Collaboration Settings</p>
+
+      <p className="text-sm font-bold text-sky-300">Collaboration</p>
+
+      <div className="w-fit">
+        <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500">
+          Manage Team
+        </div>
+      </div>
+
+      <Checkbox
+        label="Make this a public collection."
+        state={true}
+        onClick={() => console.log("Clicked!")}
+      />
+      <p className="text-gray-500 text-sm">
+        This will let anyone to access this collection.
+      </p> */}
 
-      <p className="text-sm font-bold text-sky-300">Members</p>
       <div className="relative">
         <input
           value={memberEmail}
@@ -128,7 +148,7 @@ export default function EditCollection({
           }
           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" />
+          <FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" />
         </div>
       </div>
       {activeCollection.members[0] ? (

components/Modal/Team.tsx

@@ -0,0 +1,265 @@
+// Copyright (C) 2022-present Daniel31x13 <daniel31x13@gmail.com>
+// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
+// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClose, faPlus, faUser } from "@fortawesome/free-solid-svg-icons";
+import useCollectionStore from "@/store/collections";
+import { ExtendedCollection, NewCollection } from "@/types/global";
+import { useSession } from "next-auth/react";
+import RequiredBadge from "../RequiredBadge";
+import addMemberToCollection from "@/lib/client/addMemberToCollection";
+import ImageWithFallback from "../ImageWithFallback";
+
+type Props = {
+  toggleCollectionModal: Function;
+};
+
+export default function AddCollection({ toggleCollectionModal }: Props) {
+  const [newCollection, setNewCollection] = useState<NewCollection>({
+    name: "",
+    description: "",
+    members: [],
+  });
+
+  const [memberEmail, setMemberEmail] = useState("");
+
+  const { addCollection } = useCollectionStore();
+
+  const session = useSession();
+
+  const submit = async () => {
+    console.log(newCollection);
+
+    const response = await addCollection(newCollection as NewCollection);
+
+    if (response) toggleCollectionModal();
+  };
+
+  const setMemberState = (newMember: any) => {
+    setNewCollection({
+      ...newCollection,
+      members: [...newCollection.members, newMember],
+    });
+
+    setMemberEmail("");
+  };
+
+  return (
+    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+      <p className="text-xl text-sky-500 mb-2 text-center">New Collection</p>
+
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="w-full">
+          <p className="text-sm font-bold text-sky-300 mb-2">
+            Name
+            <RequiredBadge />
+          </p>
+          <input
+            value={newCollection.name}
+            onChange={(e) =>
+              setNewCollection({ ...newCollection, name: e.target.value })
+            }
+            type="text"
+            placeholder="e.g. Example Collection"
+            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+        </div>
+
+        <div className="w-full">
+          <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
+          <input
+            value={newCollection.description}
+            onChange={(e) =>
+              setNewCollection({
+                ...newCollection,
+                description: e.target.value,
+              })
+            }
+            type="text"
+            placeholder="Collection description"
+            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+        </div>
+      </div>
+
+      <hr className="border rounded my-2" />
+
+      <p className="text-sm font-bold text-sky-300">Members</p>
+      <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"
+        />
+
+        <div
+          onClick={() =>
+            addMemberToCollection(
+              session.data?.user.email as string,
+              memberEmail,
+              newCollection as unknown as ExtendedCollection,
+              setMemberState,
+              "ADD"
+            )
+          }
+          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>
+
+      {newCollection.members[0] ? (
+        <p className="text-center text-gray-500 text-xs sm:text-sm">
+          (All Members have <b>Read</b> access to this collection.)
+        </p>
+      ) : null}
+
+      <div className="h-36 overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
+        {newCollection.members.map((e, i) => {
+          return (
+            <div
+              key={i}
+              className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+            >
+              <FontAwesomeIcon
+                icon={faClose}
+                className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+                title="Remove Member"
+                onClick={() => {
+                  const updatedMembers = newCollection.members.filter(
+                    (member) => {
+                      return member.email !== e.email;
+                    }
+                  );
+                  setNewCollection({
+                    ...newCollection,
+                    members: updatedMembers,
+                  });
+                }}
+              />
+              <div className="flex items-center gap-2">
+                <ImageWithFallback
+                  key={i}
+                  // @ts-ignore
+                  src={`/api/avatar/${e.id}`}
+                  className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
+                >
+                  <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
+                    <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+                  </div>
+                </ImageWithFallback>
+                <div>
+                  <p className="text-sm font-bold text-sky-500">{e.name}</p>
+                  <p className="text-sky-900">{e.email}</p>
+                </div>
+              </div>
+              <div className="flex sm:block items-center gap-5">
+                <div>
+                  <p className="font-bold text-sm text-gray-500">Permissions</p>
+                  <p className="text-xs text-gray-400 mb-2">
+                    (Click to toggle.)
+                  </p>
+                </div>
+
+                <div>
+                  <label className="cursor-pointer mr-1">
+                    <input
+                      type="checkbox"
+                      id="canCreate"
+                      className="peer sr-only"
+                      checked={e.canCreate}
+                      onChange={() => {
+                        const updatedMembers = newCollection.members.map(
+                          (member) => {
+                            if (member.email === e.email) {
+                              return { ...member, canCreate: !e.canCreate };
+                            }
+                            return member;
+                          }
+                        );
+                        setNewCollection({
+                          ...newCollection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                      Create
+                    </span>
+                  </label>
+
+                  <label className="cursor-pointer mr-1">
+                    <input
+                      type="checkbox"
+                      id="canUpdate"
+                      className="peer sr-only"
+                      checked={e.canUpdate}
+                      onChange={() => {
+                        const updatedMembers = newCollection.members.map(
+                          (member) => {
+                            if (member.email === e.email) {
+                              return { ...member, canUpdate: !e.canUpdate };
+                            }
+                            return member;
+                          }
+                        );
+                        setNewCollection({
+                          ...newCollection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                      Update
+                    </span>
+                  </label>
+
+                  <label className="cursor-pointer mr-1">
+                    <input
+                      type="checkbox"
+                      id="canDelete"
+                      className="peer sr-only"
+                      checked={e.canDelete}
+                      onChange={() => {
+                        const updatedMembers = newCollection.members.map(
+                          (member) => {
+                            if (member.email === e.email) {
+                              return { ...member, canDelete: !e.canDelete };
+                            }
+                            return member;
+                          }
+                        );
+                        setNewCollection({
+                          ...newCollection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                      Delete
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div
+        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+        onClick={submit}
+      >
+        <FontAwesomeIcon icon={faPlus} className="h-5" />
+        Add Collection
+      </div>
+    </div>
+  );
+}

components/Modal/UserSettings.tsx

@@ -41,16 +41,6 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
     setUser({ ...user, oldPassword, newPassword });
   };
 
-  // useEffect(() => {
-  //   const determineProfilePicSource = async () => {
-  //     const path = `/api/avatar/${account.id}`;
-  //     const imageExists = await avatarExists(path).catch((e) => console.log(e));
-  //     if (imageExists) setUser({ ...user, profilePic: path });
-  //   };
-
-  //   determineProfilePicSource();
-  // }, []);
-
   useEffect(() => {
     setUser({
       ...user,

components/Sidebar/SidebarItem.tsx

@@ -28,12 +28,14 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
       <div
         className={`${
           active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100"
-        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2 ${className}`}
+        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2 w-full ${className}`}
       >
         {React.cloneElement(icon, {
           className: `w-4 ${active ? "text-white" : "text-sky-300"}`,
         })}
-        <p className={`${active ? "text-white" : "text-sky-900"}`}>{text}</p>
+        <p className={`${active ? "text-white" : "text-sky-900"} truncate`}>
+          {text}
+        </p>
       </div>
     </Link>
   );

lib/api/controllers/users/updateUser.ts

@@ -12,7 +12,7 @@ import bcrypt from "bcrypt";
 export default async function (user: AccountSettings, userId: number) {
   const profilePic = user.profilePic;
 
-  if (profilePic && profilePic !== "DELETE") {
+  if (profilePic?.startsWith("data:image/jpeg;base64")) {
     if ((user?.profilePic?.length as number) < 1572864) {
       try {
         const filePath = path.join(

pages/collections/[id].tsx

@@ -28,6 +28,7 @@ import MainLayout from "@/layouts/MainLayout";
 import RadioButton from "@/components/RadioButton";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import ImageWithFallback from "@/components/ImageWithFallback";
+import { useSession } from "next-auth/react";
 
 export default function () {
   const router = useRouter();
@@ -35,6 +36,8 @@ export default function () {
   const { links } = useLinkStore();
   const { collections } = useCollectionStore();
 
+  const { data } = useSession();
+
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [linkModal, setLinkModal] = useState(false);
   const [editCollectionModal, setEditCollectionModal] = useState(false);
@@ -102,7 +105,7 @@ export default function () {
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
-          <div className="flex flex-col sm:flex-row gap-3 items-center justify-between">
+          <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
             <div className="flex gap-3 items-center">
               <div className="flex gap-2">
                 <FontAwesomeIcon
@@ -117,9 +120,12 @@ export default function () {
 
             {activeCollection?.members[0] ? (
               <div>
-                <div className="text-sky-400 flex justify-end items-center w-56 mr-3">
+                <div className="text-sky-400 flex justify-end items-center w-60 mr-3">
-                  <div className="mr-1 bg-sky-500 p-1 leading-3 select-none cursor-pointer hover:bg-sky-400 duration-100 text-white rounded-full text-xs">
+                  <div className="mr-1 bg-sky-500 p-2 leading-3 select-none cursor-pointer hover:bg-sky-400 duration-100 text-white rounded-full text-xs">
-                    View Team
+                    {activeCollection.ownerId === data?.user.id
+                      ? "Manage"
+                      : "View"}{" "}
+                    Team
                   </div>
                   {activeCollection?.members
                     .sort((a, b) => a.userId - b.userId)
@@ -143,7 +149,7 @@ export default function () {
                   {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-500 border-sky-100 -mr-3">
-                      +{activeCollection?.members?.length - 3}
+                      +{activeCollection?.members?.length - 4}
                     </div>
                   ) : null}
                 </div>