Account detail, url routing fix, favorite list

front-end/GoodOldMap/src/App.jsx

@@ -8,6 +8,7 @@ import Error from './pages/Error/Error';
 import InfoDetail from './pages/InfoDetail/InfoDetail';
 import AuthLayout from './pages/Authenticate/AuthLayout';
 import AccountLayout from './pages/Account/AccountLayout';
+import Favorite from './pages/FavoriteList/Favorite';
 
 const App = () => {
 
@@ -23,9 +24,10 @@ const App = () => {
           </Route>
           {/* TODO: add params: /info/:pieceInfo */}
           <Route path="/info" element={<InfoDetail/>}/>
-          <Route path="/account" element={<AccountLayout />}>
-            <Route path="" element={<Account />}/>
-            <Route path="edit" element={<AccountEdit />} />
+          <Route path="" element={<AccountLayout />}>
+           <Route path="/favorite" element={<Favorite />}/>
+            <Route path="/account" element={<Account />}/>
+            <Route path="/edit" element={<AccountEdit />} />
           </Route>
         </Routes>
       </BrowserRouter>

front-end/GoodOldMap/src/pages/Account/Account.jsx

@@ -1,10 +1,38 @@
-const Account = () => {
+import React from "react"
+import AccountLayout from "./AccountLayout";
+import { Link } from "react-router-dom";
+import PopupLink from '../../components/popup/popupLink';
 
+const Account = () => {
+  // parameters: pic, username, email,
+  let props = {};
+  props.pic = "https://cdn.icon-icons.com/icons2/2645/PNG/512/person_icon_159921.png"
+  props.username = "John Doe"
+  props.email = "[email protected]"
+
   return(
-    <>
-    account page
-    </>
+    <div>    
+      <div className="min-h-screen flex flex-col items-center justify-center">
+        <Link to="/ChangeProfilePic">
+          <img className="w-32 h-32 rounded-full object-cover cursor-pointer" src={props.pic} alt="profile picture" />
+          </Link>
+
+        <h1 className="text-2xl font-bold mt-4">{props.username}</h1>
+        <p className="text-gray-500">{props.email}</p>
+        {/* Add a button that redirects to another place */}
+        <Link to="/edit">
+          <button className="bg-white-500 text-black font-bold py-2 px-4 rounded mt-4">
+          Edit Account
+          </button>
+        </Link>
+        <Link to="/Favorite">
+          <button className="bg-white-500 text-black font-bold py-2 px-4 rounded mt-4">
+          My Fav
+          </button>
+        </Link>
+      </div>
+
+    </div>
   )
 }
-
-export default Account
+export default Account

front-end/GoodOldMap/src/pages/AccountEdit/AccountEdit.jsx

@@ -9,9 +9,8 @@ const AccountEdit = () => {
   const [currentActionData, setCurrentActionData] = useState(null);
 
   //TO DO for Richard: send data to backend
-  const discardChangeUsername = (evt) => {
-    evt.preventDefault()
-    evt.stopPropagation()
+  const discardChange = (evt) => {
+    isPopupOpen && setPopupOpen(false);
   }
   const confirmChangeUsername = (evt) => {
     evt.preventDefault()
@@ -33,43 +32,48 @@ const AccountEdit = () => {
     evt.preventDefault()
     evt.stopPropagation()
   }
-  const discardDeleteAccount = (evt) => {
-    evt.preventDefault()
-    evt.stopPropagation()
-  }
+
 
   //All PopupContent data
   const formData = {
     "changeUsername": {
       title: "Change Username",
       inputs: [{id:"newUsername", type:"text", placeholder:"new username"}],
-      buttons: [{value:"Discard", function: discardChangeUsername},
+      buttons: [{value:"Discard", function: discardChange},
                 {value:"Confirm", function: confirmChangeUsername}],
     },
     "changeEmail": {
       title: "Change Email",
       inputs: [{id:"newEmail", type:"text", placeholder:"new email"},
-              {id:"password", type:"password", placeholder:"password"}],
-      buttons: [{value:"Confirm", function: confirmChangeEmail}],
+      {id:"password", type:"password", placeholder:"password"}],
+      buttons: [{value:"Discard", function: discardChange},
+      {value:"Confirm", function: confirmChangeEmail}],
     },
     "forgotPassword": {
       title: "Forget Password",
       inputs: [{id:"email", type:"text", placeholder:"email"}],
-      buttons: [{value: "Send Email", function: sentForgetPwEmail}],
+      buttons: [{value:"Discard", function: discardChange},
+        {value: "Send Email", function: sentForgetPwEmail}],
     },
     "changePassword": {
       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:"Confirm", function: confirmChangePassword}],
+      buttons: [{value:"Discard", function: discardChange},
+        {value:"Confirm", function: confirmChangePassword}],
+    },
+    "logout": {
+      title: "Log Out",
+      buttons: [{value:"Discard", function: discardChange},
+      {value:"Confirm", function: confirmDeleteAccount}],
     }
   }
   const deleteAccountData ={
     "deleteAccount": {
     title: "You will not be able to recover this account",
-    buttons: [{value:"Discard", function: discardDeleteAccount},
-              {value:"Confirm", function: confirmDeleteAccount}],
+    buttons: [{value:"Discard", function: discardChange},
+    {value:"Confirm", function: confirmDeleteAccount}],
     }
   }
   const formKeys = Object.keys(formData);
@@ -95,7 +99,6 @@ const AccountEdit = () => {
         {formKeys.map((key, i)  => 
         <PopupLink value={formData[key]["title"]} handleClick={() => handleAction(key)} key={i}/>)}
         <PopupLink value={"Delete Account"} handleClick ={() => handleAction("deleteAccount")}/>
-
         {/* TO DO: add logout link below*/}
         {/* <PageLink to={} from={} value={}/> */}
 

front-end/GoodOldMap/src/pages/FavoriteList/Favorite.jsx

@@ -0,0 +1,8 @@
+const Favorite = () => {
+    return(
+        <div>    
+            <h1 className="text-2xl font-bold mt-4">Favorites</h1>
+        </div>
+    )
+}
+export default Favorite