undo commit

components/ModalContent/EditCollectionSharingModal.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import toast from "react-hot-toast";
-import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
+import {
+  AccountSettings,
+  CollectionIncludingMembersAndLinkCount,
+  Member,
+} from "@/types/global";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import usePermissions from "@/hooks/usePermissions";
 import ProfilePhoto from "../ProfilePhoto";
@@ -11,6 +15,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUpdateCollection } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
+import CopyButton from "../CopyButton";
 
 type Props = {
   onClose: Function;
@@ -40,6 +45,7 @@ export default function EditCollectionSharingModal({
 
       await updateCollection.mutateAsync(collection, {
         onSettled: (data, error) => {
+          setSubmitLoader(false);
           toast.dismiss(load);
 
           if (error) {
@@ -50,8 +56,6 @@ export default function EditCollectionSharingModal({
           }
         },
       });
-
-      setSubmitLoader(false);
     }
   };
 
@@ -62,17 +66,11 @@ export default function EditCollectionSharingModal({
 
   const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
 
-  const [memberUsername, setMemberUsername] = useState("");
+  const [memberIdentifier, setMemberIdentifier] = useState("");
 
-  const [collectionOwner, setCollectionOwner] = useState({
-    id: null as unknown as number,
-    name: "",
-    username: "",
-    image: "",
-    archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsMonolith: undefined as unknown as boolean,
-    archiveAsPDF: undefined as unknown as boolean,
-  });
+  const [collectionOwner, setCollectionOwner] = useState<
+    Partial<AccountSettings>
+  >({});
 
   useEffect(() => {
     const fetchOwner = async () => {
@@ -93,7 +91,7 @@ export default function EditCollectionSharingModal({
       members: [...collection.members, newMember],
     });
 
-    setMemberUsername("");
+    setMemberIdentifier("");
   };
 
   return (
@@ -132,25 +130,15 @@ export default function EditCollectionSharingModal({
           </div>
         )}
 
-        {collection.isPublic ? (
-          <div className={permissions === true ? "pl-5" : ""}>
-            <p className="mb-2">{t("sharable_link_guide")}</p>
-            <div
-              onClick={() => {
-                try {
-                  navigator.clipboard
-                    .writeText(publicCollectionURL)
-                    .then(() => toast.success(t("copied")));
-                } catch (err) {
-                  console.log(err);
-                }
-              }}
-              className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border outline-none hover:border-primary dark:hover:border-primary duration-100 cursor-text"
-            >
+        {collection.isPublic && (
+          <div>
+            <p className="mb-2">{t("sharable_link")}</p>
+            <div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between">
               {publicCollectionURL}
+              <CopyButton text={publicCollectionURL} />
             </div>
           </div>
-        ) : null}
+        )}
 
         {permissions === true && <div className="divider my-3"></div>}
 
@@ -160,15 +148,15 @@ export default function EditCollectionSharingModal({
 
             <div className="flex items-center gap-2">
               <TextInput
-                value={memberUsername || ""}
+                value={memberIdentifier || ""}
                 className="bg-base-200"
-                placeholder={t("members_username_placeholder")}
-                onChange={(e) => setMemberUsername(e.target.value)}
+                placeholder={t("add_member_placeholder")}
+                onChange={(e) => setMemberIdentifier(e.target.value)}
                 onKeyDown={(e) =>
                   e.key === "Enter" &&
                   addMemberToCollection(
-                    user.username as string,
-                    memberUsername || "",
+                    user,
+                    memberIdentifier.replace(/^@/, "") || "",
                     collection,
                     setMemberState,
                     t
@@ -179,8 +167,8 @@ export default function EditCollectionSharingModal({
               <div
                 onClick={() =>
                   addMemberToCollection(
-                    user.username as string,
-                    memberUsername || "",
+                    user,
+                    memberIdentifier.replace(/^@/, "") || "",
                     collection,
                     setMemberState,
                     t