From fcbecb5bc577120e6bd9b430c28474bfb7629e06 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Sun, 28 May 2023 20:52:01 +0330
Subject: [PATCH] bug fixes

---
 .../Modal/Collection/TeamManagement.tsx       | 284 +++++++++---------
 components/ProfilePhoto.tsx                   |   2 +-
 pages/collections/[id].tsx                    |   2 +-
 tailwind.config.js                            |   4 +
 4 files changed, 156 insertions(+), 136 deletions(-)

diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 1253f1a..5d98ae9 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -99,11 +99,16 @@ export default function TeamManagement({
         <div>
           <p className="mb-2 text-gray-500">Public Link (Click to copy)</p>
           <div
-            onClick={() =>
-              navigator.clipboard
-                .writeText(publicCollectionURL)
-                .then(() => console.log("Copied!"))
-            }
+            onClick={() => {
+              try {
+                navigator.clipboard
+                  .writeText(publicCollectionURL)
+                  .then(() => console.log("Copied!"));
+              } catch (err) {
+                alert(err);
+                console.log(err);
+              }
+            }}
             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}
@@ -159,138 +164,149 @@ export default function TeamManagement({
           </p>
 
           <div className="max-h-[20rem] overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
-            {collection.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 = collection.members.filter(
-                        (member) => {
-                          return member.user.email !== e.user.email;
-                        }
-                      );
-                      setCollection({
-                        ...collection,
-                        members: updatedMembers,
-                      });
-                    }}
-                  />
-                  <div className="flex items-center gap-2">
-                    <ImageWithFallback
-                      key={i}
-                      src={`/api/avatar/${e.userId}`}
-                      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" />
+            {collection.members
+              .sort((a, b) => (a.userId as number) - (b.userId as number))
+              .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 = collection.members.filter(
+                          (member) => {
+                            return member.user.email !== e.user.email;
+                          }
+                        );
+                        setCollection({
+                          ...collection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <div className="flex items-center gap-2">
+                      <ImageWithFallback
+                        key={i}
+                        src={`/api/avatar/${e.userId}`}
+                        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.user.name}
+                        </p>
+                        <p className="text-sky-900">{e.user.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 = collection.members.map(
+                                (member) => {
+                                  if (member.user.email === e.user.email) {
+                                    return {
+                                      ...member,
+                                      canCreate: !e.canCreate,
+                                    };
+                                  }
+                                  return member;
+                                }
+                              );
+                              setCollection({
+                                ...collection,
+                                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 = collection.members.map(
+                                (member) => {
+                                  if (member.user.email === e.user.email) {
+                                    return {
+                                      ...member,
+                                      canUpdate: !e.canUpdate,
+                                    };
+                                  }
+                                  return member;
+                                }
+                              );
+                              setCollection({
+                                ...collection,
+                                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 = collection.members.map(
+                                (member) => {
+                                  if (member.user.email === e.user.email) {
+                                    return {
+                                      ...member,
+                                      canDelete: !e.canDelete,
+                                    };
+                                  }
+                                  return member;
+                                }
+                              );
+                              setCollection({
+                                ...collection,
+                                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>
-                    </ImageWithFallback>
-                    <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>
-                      <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 = collection.members.map(
-                              (member) => {
-                                if (member.user.email === e.user.email) {
-                                  return { ...member, canCreate: !e.canCreate };
-                                }
-                                return member;
-                              }
-                            );
-                            setCollection({
-                              ...collection,
-                              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 = collection.members.map(
-                              (member) => {
-                                if (member.user.email === e.user.email) {
-                                  return { ...member, canUpdate: !e.canUpdate };
-                                }
-                                return member;
-                              }
-                            );
-                            setCollection({
-                              ...collection,
-                              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 = collection.members.map(
-                              (member) => {
-                                if (member.user.email === e.user.email) {
-                                  return { ...member, canDelete: !e.canDelete };
-                                }
-                                return member;
-                              }
-                            );
-                            setCollection({
-                              ...collection,
-                              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>
         </>
       ) : null}
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index 9330f98..12f86cb 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -15,7 +15,7 @@ export default function ProfilePhoto({ src, className }: Props) {
       className={`h-10 w-10 shadow rounded-full border-[3px] border-sky-100 ${className}`}
     >
       <div
-        className={`text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center ${className}`}
+        className={`bg-sky-500 text-white h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center ${className}`}
       >
         <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
       </div>
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 2e5e2c6..9f0c767 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -149,7 +149,7 @@ export default function () {
                         <ProfilePhoto
                           key={i}
                           src={`/api/avatar/${e.userId}`}
-                          className="-mr-3 bg-white duration-100"
+                          className="-mr-3 duration-100"
                         />
                       );
                     })
diff --git a/tailwind.config.js b/tailwind.config.js
index 87aedba..eb74f32 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,13 @@
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
+
+    // For the "layouts" directory
+    "./layouts/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},