added update account functionality

components/Modal/UserSettings.tsx

@@ -8,27 +8,43 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleUser, faClose } from "@fortawesome/free-solid-svg-icons";
 import Checkbox from "../Checkbox";
 import useAccountStore from "@/store/account";
+import { AccountSettings } from "@/types/global";
 
 type Props = {
   toggleSettingsModal: Function;
 };
 
 export default function UserSettings({ toggleSettingsModal }: Props) {
-  const { account } = useAccountStore();
-  const [collectionProtection, setCollectionProtection] = useState(false);
+  const { account, updateAccount } = useAccountStore();
+
+  let initialUser = {
+    name: account.name,
+    email: account.email,
+    collectionProtection: account.collectionProtection,
+    whitelistedUsers: account.whitelistedUsers,
+  };
+
+  const [user, setUser] = useState<AccountSettings>(initialUser);
 
-  const [name, setName] = useState(account.name);
-  const [email, setEmail] = useState(account.email);
   const [selectedFile, setSelectedFile] = useState(null);
 
-  const handleFileChange = async (e) => {
-    const file = e.target.files[0];
-    setSelectedFile(file);
+  const handleFileChange = (e: any) => {
+    setSelectedFile(e.target.files[0]);
+  };
+
+  const stateIsTampered = () => {
+    return JSON.stringify(user) !== JSON.stringify(initialUser);
   };
 
   const submit = async () => {
-    // const response = await addLink(newLink as NewLink);
-    // if (response) toggleSettingsModal();
+    updateAccount(user);
+
+    initialUser = {
+      name: account.name,
+      email: account.email,
+      collectionProtection: account.collectionProtection,
+      whitelistedUsers: account.whitelistedUsers,
+    };
   };
 
   return (
@@ -43,8 +59,8 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
             <p className="text-sm font-bold text-sky-300 mb-2">Display Name</p>
             <input
               type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
+              value={user.name}
+              onChange={(e) => setUser({ ...user, name: e.target.value })}
               className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
             />
           </div>
@@ -53,8 +69,8 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
             <p className="text-sm font-bold text-sky-300 mb-2">Email</p>
             <input
               type="text"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              value={user.email}
+              onChange={(e) => setUser({ ...user, email: e.target.value })}
               className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
             />
           </div>
@@ -70,12 +86,12 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
           </div>
         </div>
 
-        <div className="sm:row-span-2 sm:justify-self-center mb-3">
+        {/* <div className="sm:row-span-2 sm:justify-self-center mb-3">
           <p className="text-sm font-bold text-sky-300 mb-2 sm:text-center">
             Profile Photo
           </p>
           <div className="w-28 h-28 flex items-center justify-center border border-sky-100 rounded-full relative">
-            {/* Image goes here */}
+            // Image goes here 
             <FontAwesomeIcon
               icon={faCircleUser}
               className="w-28 h-28 text-sky-500"
@@ -101,7 +117,7 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
               </label>
             </div>
           </div>
-        </div>
+        </div> */}
       </div>
 
       <hr />
@@ -119,30 +135,35 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
       <p className="text-sky-600">Privacy Settings</p>
 
       <Checkbox
-        label="Control who can add you to other Collections"
-        state={collectionProtection}
+        label="Limit who can add you to other Collections"
+        state={user.collectionProtection}
         className="text-sm sm:text-base"
-        onClick={() => setCollectionProtection(!collectionProtection)}
+        onClick={() =>
+          setUser({ ...user, collectionProtection: !user.collectionProtection })
+        }
       />
 
-      <div className="w-fit">
-        <div
-          className={`border rounded-md duration-100 bg-white px-2 py-1 text-center select-none ${
-            collectionProtection
-              ? "text-sky-900 border-sky-100 cursor-pointer hover:border-sky-500"
-              : "text-gray-400 border-gray-100"
-          }`}
-        >
-          Manage Allowed Users
+      {user.collectionProtection ? (
+        <div>
+          <p className="text-gray-500 text-sm mb-3">
+            Please enter the email addresses of the users who are allowed to add
+            you to additional collections in the box below, separated by spaces.
+          </p>
+          <textarea
+            className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"
+            placeholder="No one can add you to any collections right now..."
+          ></textarea>
         </div>
-      </div>
+      ) : null}
 
-      <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}
-      >
-        Apply Settings
-      </div>
+      {stateIsTampered() ? (
+        <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}
+        >
+          Apply Settings
+        </div>
+      ) : null}
     </div>
   );
 }