Favlist

front-end/GoodOldMap/src/App.jsx

@@ -6,7 +6,7 @@ import Login from './pages/Authenticate/Login';
 import Register from './pages/Authenticate/Register';
 import Error from './pages/Error/Error';
 import InfoDetail from './pages/InfoDetail/InfoDetail';
-import FavoriteList from './pages/FavoriteList/Favorite';
+import FavoriteList from './pages/FavoriteList/FavoriteList';
 import AuthLayout from './pages/Authenticate/AuthLayout';
 import AccountLayout from './pages/Account/AccountLayout';
 import MapLayout from './pages/MainMap/MapLayout';
@@ -26,10 +26,9 @@ const App = () => {
           </Route>
           {/* TODO: add params: /info/:pieceInfo */}
           <Route path="/info" element={<InfoDetail/>}/>
-
+          <Route path="/favoritelist" element={<FavoriteList />}/>
           <Route path="/account" element={<AccountLayout />}>
             <Route path="" element={<Account />} />
-            <Route path="favoritelist" element={<FavoriteList />}/>
             <Route path="edit" element={<AccountEdit />} />
           </Route>
 

front-end/GoodOldMap/src/components/common/ArtItem.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom'
+
+const ArtItem = ({ art,onRemoveFromFavorites }) => {
+
+    const navigate = useNavigate();
+
+    const navigateToDetail = (evt) => {
+        evt.preventDefault()
+        navigate("/info");  // Adjust this path as necessary
+        // window.location.href = "/info";
+    }
+
+    return (
+        <div className="w-[30%] m-auto fle">
+            <img src={art.url} alt={art.name} onClick= {navigateToDetail}/>
+            <p>
+                <span onClick={onRemoveFromFavorites} >❤️</span>
+                {art.name}
+                {art.year}
+            </p>
+        </div>
+    );
+};
+
+export default ArtItem;

front-end/GoodOldMap/src/components/common/Logo.jsx

@@ -6,6 +6,7 @@ const Logo = () => {
     evt.stopPropagation()
     navigate("/")
     }
+
   return (
     <>
     {/* Reference: <a href="https://www.flaticon.com/free-icons/map" title="map icons">Map icons created by Freepik - Flaticon</a> */}

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

@@ -1,3 +1,4 @@
+
 import React from "react"
 import AccountLayout from "./AccountLayout";
 import { Link } from "react-router-dom";
@@ -25,7 +26,9 @@ const Account = () => {
           Edit Account
           </button>
         </Link>
-        <Link to="favorite">
+
+        <Link to="/favoritelist">
+
           <button className="bg-white-500 text-black font-bold py-2 px-4 rounded mt-4">
           My Fav
           </button>

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

@@ -1,9 +1,11 @@
+
 import React, { useState } from 'react';
 import PopupLink from '../../components/popup/popupLink';
 import PopupContent from '../../components/popup/popupContent';
 
 
 const AccountEdit = () => {
+
   const [currentActionData, setCurrentActionData] = useState(null);
 
   //TO DO for Richard: send data to backend
@@ -118,3 +120,4 @@ const AccountEdit = () => {
 };
 
 export default AccountEdit;
+

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

@@ -0,0 +1,77 @@
+import { useNavigate } from 'react-router-dom'
+import NavBar from "../../components/common/navBar"
+import LeftBtn from "../../components/common/leftBtn"
+import Logo from '../../components/common/Logo'
+import ArtItem from "../../components/common/ArtItem.jsx"
+
+import React, { useState } from 'react';
+
+
+const FavoriteList = () => {
+  // Declare your arts data array inside the FavoriteList component
+
+  const url_temp = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Vincent_van_Gogh_-_Road_with_Cypress_and_Star_-_c._12-15_May_1890.jpg/1200px-Vincent_van_Gogh_-_Road_with_Cypress_and_Star_-_c._12-15_May_1890.jpg"
+  const urt_temp1 = "https://upload.wikimedia.org/wikipedia/commons/9/9d/Vincent_van_Gogh_-_Sunflowers_-_VGM_F458.jpg"
+  const url_temp2 = "https://upload.wikimedia.org/wikipedia/commons/6/6d/Vincent_van_Gogh_-_De_stoel_van_Gauguin_-_Google_Art_Project.jpg"
+  //TODO: will be a fetch request from the backend database later
+  const [arts, setArts] = useState([
+    { id: 1, name: 'Art name A', url: url_temp, year: 2023 },
+    { id: 2, name: 'Art name C', url: urt_temp1, year: 2000 },
+    { id: 3, name: 'Art name B', url: url_temp2, year: 1990 }
+  ]);
+
+  const navigate = useNavigate();
+
+  const navigateToDetail = (evt) => {
+    evt.preventDefault()
+    navigate("/info");  // Adjust this path as necessary
+  }
+
+  const sortArts = (criteria) => {
+    if (criteria === "name") {
+      setArts(prevArts => [...prevArts].sort((a, b) => a.name.localeCompare(b.name)));
+    } else if (criteria === "year") {
+      setArts(prevArts => [...prevArts].sort((a, b) => a.year - b.year));
+    }
+  }
+
+  const handleRemoveFromFavorites = (idToRemove) => {
+    // Remove the art with the specified ID from the favorites list
+    setArts(prevArts => prevArts.filter(art => art.id !== idToRemove));
+  }
+
+
+
+  return (
+    <>
+      <div className="min-h-screen flex flex-col">
+        <NavBar className="flex">
+          <LeftBtn className="flex-grow" />
+          <Logo />
+        </NavBar>
+
+        {/* <div className="max-h-[80vh] max-w-full m-auto flex items-center"> */}
+        <div className="mx-auto items-center">
+          <h1>My Favorite</h1>
+          <button onClick={() => sortArts("name")}>Sort by Name</button>
+          <button onClick={() => sortArts("year")}>Sort by Year</button> 
+        </div>
+
+        <div className="mx-auto items-center">
+          {
+            arts.map(art => <ArtItem
+              key={art.id}
+              art={art}
+              onRemoveFromFavorites={() => handleRemoveFromFavorites(art.id)} />)
+          }
+        </div>
+      </div>
+    </>
+
+
+  )
+};
+
+export default FavoriteList;
+
+