many improvements + added public page

components/CollectionCard.tsx

@@ -11,8 +11,8 @@ import useLinkStore from "@/store/links";
 import Dropdown from "./Dropdown";
 import { useState } from "react";
 import Modal from "@/components/Modal";
-import CollectionModal from "@/components/Modal/CollectionModal";
+import CollectionInfo from "@/components/Modal/Collection/CollectionInfo";
-import DeleteCollection from "@/components/Modal/DeleteCollection";
+import DeleteCollection from "@/components/Modal/Collection/DeleteCollection";
 import ProfilePhoto from "./ProfilePhoto";
 
 export default function ({
@@ -63,7 +63,7 @@ export default function ({
           <div className="flex justify-between items-center">
             <div className="text-sky-400 flex items-center w-full">
               {collection.members
-                .sort((a, b) => (a.user.id as number) - (b.user.id as number))
+                .sort((a, b) => (a.userId as number) - (b.userId as number))
                 .map((e, i) => {
                   return (
                     <ProfilePhoto
@@ -120,7 +120,7 @@ export default function ({
 
       {editCollectionModal ? (
         <Modal toggleModal={toggleEditCollectionModal}>
-          <CollectionModal
+          <CollectionInfo
             toggleCollectionModal={toggleEditCollectionModal}
             activeCollection={collection}
             method="UPDATE"

components/Modal/Collection/CollectionInfo.tsx

@@ -0,0 +1,107 @@
+// 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,
+  faPenToSquare,
+  faPlus,
+  faTrashCan,
+  faUser,
+  faUserPlus,
+} from "@fortawesome/free-solid-svg-icons";
+import useCollectionStore from "@/store/collections";
+import { CollectionIncludingMembers, Member } from "@/types/global";
+import { useSession } from "next-auth/react";
+import Modal from "@/components/Modal";
+import DeleteCollection from "@/components/Modal/Collection/DeleteCollection";
+import RequiredBadge from "../../RequiredBadge";
+import addMemberToCollection from "@/lib/client/addMemberToCollection";
+import ImageWithFallback from "../../ImageWithFallback";
+import Checkbox from "../../Checkbox";
+
+type Props = {
+  toggleCollectionModal: Function;
+  activeCollection: CollectionIncludingMembers;
+  method: "CREATE" | "UPDATE";
+};
+
+export default function CollectionInfo({
+  toggleCollectionModal,
+  activeCollection,
+  method,
+}: Props) {
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembers>(activeCollection);
+
+  const { updateCollection, addCollection } = useCollectionStore();
+
+  const submit = async () => {
+    if (!collection) return null;
+
+    let response = null;
+
+    if (method === "CREATE") response = await addCollection(collection);
+    else if (method === "UPDATE") response = await updateCollection(collection);
+    else console.log("Unknown method.");
+
+    if (response) toggleCollectionModal();
+  };
+
+  return (
+    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+      <p className="text-xl text-sky-500 mb-2 text-center">
+        {method === "CREATE" ? "Add" : "Edit"} 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={collection.name}
+            onChange={(e) =>
+              setCollection({ ...collection, 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>
+          <textarea
+            className="w-full h-40 resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500"
+            placeholder="The purpose of this Collection..."
+            value={collection.description}
+            onChange={(e) =>
+              setCollection({
+                ...collection,
+                description: e.target.value,
+              })
+            }
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col justify-center items-center gap-2 mt-2">
+        <div
+          className="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={method === "CREATE" ? faPlus : faPenToSquare}
+            className="h-5"
+          />
+          {method === "CREATE" ? "Add Collection" : "Edit Collection"}
+        </div>
+      </div>
+    </div>
+  );
+}

components/Modal/Collection/TeamManagement.tsx

@@ -8,35 +8,34 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faClose,
   faPenToSquare,
-  faPlus,
-  faTrashCan,
   faUser,
   faUserPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembers, Member } from "@/types/global";
 import { useSession } from "next-auth/react";
-import Modal from "@/components/Modal";
-import DeleteCollection from "@/components/Modal/DeleteCollection";
-import RequiredBadge from "../RequiredBadge";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
-import ImageWithFallback from "../ImageWithFallback";
+import ImageWithFallback from "../../ImageWithFallback";
-import Checkbox from "../Checkbox";
+import Checkbox from "../../Checkbox";
 
 type Props = {
   toggleCollectionModal: Function;
   activeCollection: CollectionIncludingMembers;
-  method: "CREATE" | "UPDATE";
 };
 
-export default function CollectionModal({
+export default function TeamManagement({
   toggleCollectionModal,
   activeCollection,
-  method,
 }: Props) {
   const [collection, setCollection] =
     useState<CollectionIncludingMembers>(activeCollection);
 
+  const [isPublic, setIsPublic] = useState(false);
+
+  const currentURL = new URL(document.URL);
+
+  const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
+
   const [member, setMember] = useState<Member>({
     canCreate: false,
     canUpdate: false,
@@ -47,13 +46,7 @@ export default function CollectionModal({
     },
   });
 
-  const { updateCollection, addCollection } = useCollectionStore();
+  const { updateCollection } = useCollectionStore();
-
-  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
-
-  const toggleDeleteCollectionModal = () => {
-    setDeleteCollectionModal(!deleteCollectionModal);
-  };
 
   const session = useSession();
 
@@ -79,75 +72,48 @@ export default function CollectionModal({
   const submit = async () => {
     if (!collection) return null;
 
-    let response = null;
+    const response = await updateCollection(collection);
-
-    if (method === "CREATE") response = await addCollection(collection);
-    else if (method === "UPDATE") response = await updateCollection(collection);
-    else console.log("Unknown method.");
 
     if (response) toggleCollectionModal();
   };
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="text-xl text-sky-500 mb-2 text-center">
+      <p className="text-xl text-sky-500 mb-2 text-center w-5/6 mx-auto">
-        {method === "CREATE" ? "Add" : "Edit"} Collection
+        Sharing & Collaboration Settings
       </p>
 
-      <div className="flex flex-col sm:flex-row gap-3">
+      <p className="text-sm font-bold text-sky-300">Make Public</p>
-        <div className="w-full">
-          <p className="text-sm font-bold text-sky-300 mb-2">
-            Name
-            <RequiredBadge />
-          </p>
-          <input
-            value={collection.name}
-            onChange={(e) =>
-              setCollection({ ...collection, 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={collection.description}
-            onChange={(e) =>
-              setCollection({
-                ...collection,
-                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="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}
+        state={isPublic}
-        onClick={() => console.log("Clicked!")}
+        onClick={() => setIsPublic(!isPublic)}
       />
+
       <p className="text-gray-500 text-sm">
-        This will let anyone to access this collection.
+        This will let <b>Anyone</b> to view this collection.
-      </p> */}
+      </p>
+
+      {isPublic ? (
+        <div>
+          <p className="mb-2 text-gray-500">Public Link (Click to copy)</p>
+          <div
+            onClick={() =>
+              navigator.clipboard
+                .writeText(publicCollectionURL)
+                .then(() => console.log("Copied!"))
+            }
+            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-500 duration-100 cursor-text"
+          >
+            {publicCollectionURL}
+          </div>
+        </div>
+      ) : null}
+
+      <hr />
+
+      <p className="text-sm font-bold text-sky-300">Member Management</p>
 
       <div className="relative">
         <input
@@ -158,6 +124,15 @@ export default function CollectionModal({
               user: { ...member.user, email: e.target.value },
             });
           }}
+          onKeyDown={(e) =>
+            e.key === "Enter" &&
+            addMemberToCollection(
+              session.data?.user.email as string,
+              member.user.email,
+              collection,
+              setMemberState
+            )
+          }
           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"
@@ -183,7 +158,7 @@ export default function CollectionModal({
             (All Members have <b>Read</b> access to this collection.)
           </p>
 
-          <div className="h-36 overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
+          <div className="max-h-[20rem] overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
             {collection.members.map((e, i) => {
               return (
                 <div
@@ -325,46 +300,10 @@ export default function CollectionModal({
           className="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
+          <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
-            icon={method === "CREATE" ? faPlus : faPenToSquare}
+          Edit Collection
-            className="h-5"
-          />
-          {method === "CREATE" ? "Add Collection" : "Edit Collection"}
         </div>
-
-        {method === "UPDATE" ? (
-          <>
-            <div className="flex items-center justify-center gap-2">
-              <hr className="w-16 border" />
-
-              <p className="text-gray-400 font-bold">OR</p>
-
-              <hr className="w-16 border" />
-            </div>
-
-            <div
-              onClick={() => {
-                toggleDeleteCollectionModal();
-              }}
-              className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
-            >
-              <FontAwesomeIcon
-                icon={faTrashCan}
-                className="w-4 h-4 text-white"
-              />
-            </div>
-          </>
-        ) : null}
       </div>
-
-      {deleteCollectionModal ? (
-        <Modal toggleModal={toggleDeleteCollectionModal}>
-          <DeleteCollection
-            collection={collection}
-            toggleDeleteCollectionModal={toggleDeleteCollectionModal}
-          />
-        </Modal>
-      ) : null}
     </div>
   );
 }

components/Modal/UserSettings.tsx

@@ -236,7 +236,7 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
             onChange={(e) => {
               setWhiteListedUsersTextbox(e.target.value);
             }}
-          ></textarea>
+          />
         </div>
       ) : null}
 

layouts/AuthRedirect.tsx

@@ -22,22 +22,26 @@ export default function ({ children }: Props) {
   getInitialData();
 
   useEffect(() => {
-    if (
+    if (!router.pathname.startsWith("/public")) {
-      status === "authenticated" &&
+      if (
-      (router.pathname === "/login" || router.pathname === "/register")
+        status === "authenticated" &&
-    ) {
+        (router.pathname === "/login" || router.pathname === "/register")
-      router.push("/").then(() => {
+      ) {
-        setRedirect(false);
+        router.push("/").then(() => {
-      });
+          setRedirect(false);
-    } else if (
+        });
-      status === "unauthenticated" &&
+      } else if (
-      !(router.pathname === "/login" || router.pathname === "/register")
+        status === "unauthenticated" &&
-    ) {
+        !(router.pathname === "/login" || router.pathname === "/register")
-      router.push("/login").then(() => {
+      ) {
-        setRedirect(false);
+        router.push("/login").then(() => {
-      });
+          setRedirect(false);
-    } else if (status === "loading") setRedirect(true);
+        });
-    else setRedirect(false);
+      } else if (status === "loading") setRedirect(true);
+      else setRedirect(false);
+    } else {
+      setRedirect(false);
+    }
   }, [status]);
 
   if (status !== "loading" && !redirect) return <>{children}</>;

lib/api/controllers/collections/updateCollection.ts

@@ -51,6 +51,7 @@ export default async function (
               select: {
                 email: true,
                 name: true,
+                id: true,
               },
             },
           },

pages/collections/[id].tsx

@@ -7,8 +7,8 @@ import Dropdown from "@/components/Dropdown";
 import LinkList from "@/components/LinkList";
 import Modal from "@/components/Modal";
 import LinkModal from "@/components/Modal/LinkModal";
-import CollectionModal from "@/components/Modal/CollectionModal";
+import CollectionInfo from "@/components/Modal/Collection/CollectionInfo";
-import DeleteCollection from "@/components/Modal/DeleteCollection";
+import DeleteCollection from "@/components/Modal/Collection/DeleteCollection";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
 import { CollectionIncludingMembers } from "@/types/global";
@@ -25,6 +25,7 @@ import RadioButton from "@/components/RadioButton";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { useSession } from "next-auth/react";
 import ProfilePhoto from "@/components/ProfilePhoto";
+import TeamManagement from "@/components/Modal/Collection/TeamManagement";
 
 export default function () {
   const router = useRouter();
@@ -36,7 +37,8 @@ export default function () {
 
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [linkModal, setLinkModal] = useState(false);
-  const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [collectionInfoModal, setCollectionInfoModal] = useState(false);
+  const [collectionMembersModal, setCollectionMembersModal] = useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState("Name (A-Z)");
@@ -50,8 +52,12 @@ export default function () {
     setLinkModal(!linkModal);
   };
 
-  const toggleEditCollectionModal = () => {
+  const toggleCollectionInfoModal = () => {
-    setEditCollectionModal(!editCollectionModal);
+    setCollectionInfoModal(!collectionInfoModal);
+  };
+
+  const toggleCollectionMembersModal = () => {
+    setCollectionMembersModal(!collectionMembersModal);
   };
 
   const toggleDeleteCollectionModal = () => {
@@ -122,7 +128,10 @@ export default function () {
                   activeCollection.members[0] && "mr-3"
                 }`}
               >
-                <div className="flex justify-end items-center w-fit ml-auto group cursor-pointer">
+                <div
+                  onClick={toggleCollectionMembersModal}
+                  className="flex justify-end items-center w-fit ml-auto group cursor-pointer"
+                >
                   <div
                     className={`bg-sky-500 p-2 leading-3 select-none group-hover:bg-sky-400 duration-100 text-white rounded-full text-xs ${
                       activeCollection.members[0] && "mr-1"
@@ -134,9 +143,7 @@ export default function () {
                     Team
                   </div>
                   {activeCollection?.members
-                    .sort(
+                    .sort((a, b) => (a.userId as number) - (b.userId as number))
-                      (a, b) => (a.user.id as number) - (b.user.id as number)
-                    )
                     .map((e, i) => {
                       return (
                         <ProfilePhoto
@@ -249,20 +256,16 @@ export default function () {
                         },
                       },
                       {
-                        name: "Edit Collection",
+                        name: "Edit Collection Info",
                         onClick: () => {
-                          toggleEditCollectionModal();
+                          toggleCollectionInfoModal();
                           setExpandDropdown(false);
                         },
                       },
                       {
-                        name: `${
+                        name: "Share/Collaborate",
-                          activeCollection?.ownerId === data?.user.id
-                            ? "Manage"
-                            : "View"
-                        } Team`,
                         onClick: () => {
-                          toggleEditCollectionModal();
+                          toggleCollectionMembersModal();
                           setExpandDropdown(false);
                         },
                       },
@@ -279,7 +282,7 @@ export default function () {
                       if (target.id !== "expand-dropdown")
                         setExpandDropdown(false);
                     }}
-                    className="absolute top-8 right-0 z-10 w-36"
+                    className="absolute top-8 right-0 z-10 w-40"
                   />
                 ) : null}
 
@@ -292,16 +295,25 @@ export default function () {
                   </Modal>
                 ) : null}
 
-                {editCollectionModal && activeCollection ? (
+                {collectionInfoModal && activeCollection ? (
-                  <Modal toggleModal={toggleEditCollectionModal}>
+                  <Modal toggleModal={toggleCollectionInfoModal}>
-                    <CollectionModal
+                    <CollectionInfo
-                      toggleCollectionModal={toggleEditCollectionModal}
+                      toggleCollectionModal={toggleCollectionInfoModal}
                       activeCollection={activeCollection}
                       method="UPDATE"
                     />
                   </Modal>
                 ) : null}
 
+                {collectionMembersModal && activeCollection ? (
+                  <Modal toggleModal={toggleCollectionMembersModal}>
+                    <TeamManagement
+                      toggleCollectionModal={toggleCollectionMembersModal}
+                      activeCollection={activeCollection}
+                    />
+                  </Modal>
+                ) : null}
+
                 {deleteCollectionModal && activeCollection ? (
                   <Modal toggleModal={toggleDeleteCollectionModal}>
                     <DeleteCollection

pages/collections/index.tsx

@@ -18,7 +18,7 @@ import Modal from "@/components/Modal";
 import MainLayout from "@/layouts/MainLayout";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import RadioButton from "@/components/RadioButton";
-import CollectionModal from "@/components/Modal/CollectionModal";
+import CollectionInfo from "@/components/Modal/Collection/CollectionInfo";
 import { useSession } from "next-auth/react";
 
 export default function () {
@@ -214,7 +214,7 @@ export default function () {
 
       {collectionModal ? (
         <Modal toggleModal={toggleCollectionModal}>
-          <CollectionModal
+          <CollectionInfo
             activeCollection={{
               name: "",
               description: "",

pages/links.tsx

@@ -38,14 +38,16 @@ export default function Links() {
       setSortedLinks(
         linksArray.sort(
           (a, b) =>
-            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+            new Date(b.createdAt as string).getTime() -
+            new Date(a.createdAt as string).getTime()
         )
       );
     else if (sortBy === "Date (Oldest First)")
       setSortedLinks(
         linksArray.sort(
           (a, b) =>
-            new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+            new Date(a.createdAt as string).getTime() -
+            new Date(b.createdAt as string).getTime()
         )
       );
   }, [links, sortBy]);

pages/public/collections/[id].tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function PublicCollections() {
+  return <div>Hello</div>;
+}