simplify code in popup page

agiledev-students-fall2023 · Oct 30, 2023 · 306e076 · 306e076
1 parent 7a3f390
commit 306e076
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 32 deletions.
diff --git a/front-end/GoodOldMap/src/components/popup/popupContent.jsx b/front-end/GoodOldMap/src/components/popup/popupContent.jsx
@@ -7,7 +7,7 @@ function PopupContent(props){
     // dark background
     <div 
       className="fixed top-0 left-0 z-50 w-full h-full bg-black bg-opacity-50 flex items-center justify-center" 
-      onClick={() => {props.onClose()}}>   
+      onClick={() => {props.handleClick()}}>   
       {/* white popup container: */}
       <div className="bg-white rounded-lg shadow-xl w-[80%]">
         <div className="p-8">

diff --git a/front-end/GoodOldMap/src/pages/AccountEdit/AccountEdit.jsx b/front-end/GoodOldMap/src/pages/AccountEdit/AccountEdit.jsx
@@ -1,18 +1,16 @@
 import React, { useState } from 'react';
 import PopupLink from '../../components/popup/popupLink';
-import PageLink from '../../components/common/pageLink';
 import PopupContent from '../../components/popup/popupContent';
 
 
 const AccountEdit = () => {
-  const [isPopupOpen, setPopupOpen] = useState(false);
   const [currentActionData, setCurrentActionData] = useState(null);
 
   //TO DO for Richard: send data to backend
   const discardChange = (evt) => {
     evt.preventDefault()
     evt.stopPropagation()
-    isPopupOpen && setPopupOpen(false);
+    currentActionData && setCurrentActionData(null);
   }
   const confirmChangeUsername = (evt) => {
     evt.preventDefault()
@@ -39,79 +37,77 @@ const AccountEdit = () => {
   //All PopupContent data
   const formData = {
     "changeUsername": {
+      link: "Change Username",
       title: "Change Username",
       inputs: [{id:"newUsername", type:"text", placeholder:"new username"}],
       buttons: [{value:"Discard", handleClick: discardChange},
                 {value:"Confirm", handleClick: confirmChangeUsername}],
     },
     "changeEmail": {
+      link: "Change Email",
       title: "Change Email",
       inputs: [{id:"newEmail", type:"text", placeholder:"new email"},
-      {id:"password", type:"password", placeholder:"password"}],
+                {id:"password", type:"password", placeholder:"password"}],
       buttons: [{value:"Discard", handleClick: discardChange},
-      {value:"Confirm", handleClick: confirmChangeEmail}],
+                {value:"Confirm", handleClick: confirmChangeEmail}],
     },
     "forgotPassword": {
+      link: "Forget Password",
       title: "Forget Password",
       inputs: [{id:"email", type:"text", placeholder:"email"}],
       buttons: [{value:"Discard", handleClick: discardChange},
-        {value: "Send Email", handleClick: sentForgetPwEmail}],
+                {value: "Send Email", handleClick: sentForgetPwEmail}],
     },
     "changePassword": {
+      link: "Change Password",
       title: "Change Password",
       inputs: [{id:"oldPassword", type:"password", placeholder:"old password"},
                 {id:"password", type:"password", placeholder:"password"},
                 {id:"confirmPassword", type:"password", placeholder:"confirm password"}],
       buttons: [{value:"Discard", handleClick: discardChange},
-        {value:"Confirm", handleClick: confirmChangePassword}],
+                {value:"Confirm", handleClick: confirmChangePassword}],
     },
     "logout": {
+      link: "Log Out",
       title: "Log Out",
       buttons: [{value:"Discard", handleClick: discardChange},
-      {value:"Confirm", handleClick: confirmDeleteAccount}],
-    }
-  }
-  const deleteAccountData ={
+                {value:"Confirm", handleClick: confirmDeleteAccount}],
+    },
     "deleteAccount": {
-    title: "You will not be able to recover this account",
-    buttons: [{value:"Discard", handleClick: discardChange},
-    {value:"Confirm", handleClick: confirmDeleteAccount}],
+      link: "Delete Account",
+      title: "You will not be able to recover this account",
+      buttons: [{value:"Discard", handleClick: discardChange},
+                {value:"Confirm", handleClick: confirmDeleteAccount}],
     }
   }
   const formKeys = Object.keys(formData);
 
   //Function to decide which PopupContent to display
-  const handleAction = (actionKey) => {
-    const actionData = actionKey === 'deleteAccount' ? deleteAccountData[actionKey] : formData[actionKey];
-
-    if (!actionData) {
-      console.error("No data found for action:", actionKey);
-      return;
+  const handleAction = (key) => {
+    const actionData = formData[key];
+    try {
+      if (!actionData) throw `No data found for action:: ${key}`
+      setCurrentActionData(actionData);
+    } catch (error) {
+      console.error(error)
     }
-
-    setCurrentActionData(actionData);
-    setPopupOpen(true); 
   };
 
   //Return the AccountEdit component
   return (
     <div>
         {/* TO DO: add image profile, add username, add user email */}
-        {formKeys.map((key, i)  => 
-        <PopupLink value={formData[key]["title"]} handleClick={() => handleAction(key)} key={i}/>)}
-        <PopupLink value={"Delete Account"} handleClick ={() => handleAction("deleteAccount")}/>
+        {formKeys.map((key, i) => <PopupLink value={formData[key]["link"]} handleClick={() => handleAction(key)} key={i}/>)}
         {/* TO DO: add logout link below*/}
         {/* <PageLink to={} from={} value={}/> */}
 
-        {isPopupOpen && currentActionData &&
-        <div>
+        {currentActionData &&
           <PopupContent 
             title={currentActionData.title}
             inputs={currentActionData.inputs}
             buttons={currentActionData.buttons}
-            onClose = {() => {setPopupOpen(false)}}
-          />
-        </div>}
+            handleClick = {() => {setCurrentActionData(null)}}
+          />}
 
     </div>
   );