diff --git a/front-end/GoodOldMap/src/components/popup/popupContent.jsx b/front-end/GoodOldMap/src/components/popup/popupContent.jsx index 28c9d45..7d823ee 100644 --- 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 index 6e274bf..e7ca491 100644 --- 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> );