-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request agiledev-students-fall2023#112 from agiledev-stude…
…nts-fall2023/test/104/108/109/110/111 Test/104/108/109/110/111
- Loading branch information
Showing
8 changed files
with
197 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| let arts = [ | ||
| // Sample data structure | ||
| { id: '1', name: 'art1', author: 'Leonardo da Vinci', year: '4321', url: 'https://picsum.photos/200', inFavList: true }, | ||
| { id: '2', name: 'art2', author: 'XXXXXX', year: '1234', url: 'https://picsum.photos/200', inFavList: false }, | ||
|
|
||
| ]; | ||
|
|
||
| // export const removeFavListRouter = (req, res) => { | ||
| // const { id } = req.body; | ||
| // const index = favorites.findIndex(f => f.id === id); | ||
| // if (index !== -1) { | ||
| // favorites.splice(index, 1); | ||
| // res.status(200).send('Item removed from favorites.'); | ||
| // } | ||
| // } | ||
|
|
||
| export const getArts = (req,res) => { | ||
| try { | ||
| const {location, time} = req.body; | ||
| res.status(200).send(arts); | ||
| } catch (error) { | ||
| res.sendStatus(404); | ||
| } | ||
| } | ||
|
|
||
| export const favListRouter = (req, res) => { | ||
| const favorites = arts.filter(art => art.inFavList === true); | ||
| res.status(200).send(favorites); | ||
| }; | ||
|
|
||
|
|
||
| export const addFavListRouter = (req, res) => { | ||
| const artToUpdate = req.body; | ||
|
|
||
| const artIndex = arts.findIndex(art => art.id === artToUpdate.id); | ||
|
|
||
| if (artIndex > -1) { | ||
| arts[artIndex].inFavList = !arts[artIndex].inFavList; | ||
| res.status(200).json(arts[artIndex]); | ||
| } else { | ||
| res.status(404).send('Art not found'); | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| export default { addFavListRouter,favListRouter, getArts }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,63 @@ | ||
| import React from 'react'; | ||
| import { useNavigate, useLocation } from 'react-router-dom' | ||
| import React, { useState } from 'react'; | ||
| import { useNavigate, useLocation } from 'react-router-dom'; | ||
|
|
||
| import Card from '../common/card'; | ||
| import IconButton from '@mui/material/IconButton'; | ||
| import FavoriteIcon from '@mui/icons-material/Favorite'; | ||
| import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'; | ||
| import axios from 'axios'; | ||
|
|
||
| const ArtItem = ({ art, updateFavorites }) => { // Added updateFavorites prop to update parent component | ||
| const navigate = useNavigate(); | ||
| const location = useLocation(); | ||
| const [isFavorited, setIsFavorited] = useState(art.inFavList); | ||
|
|
||
| const navigateToDetail = () => { | ||
| navigate("/info", { state: { from: location.pathname, art } }); | ||
| }; | ||
|
|
||
| const toggleFavorite = async (event) => { | ||
| event.stopPropagation(); | ||
| const newFavoritedState = !isFavorited; | ||
|
|
||
| setIsFavorited(newFavoritedState); | ||
| const artData = { | ||
| id: art.id, | ||
| inFavList: newFavoritedState, | ||
| }; | ||
|
|
||
| try { | ||
| const response = await axios.post('http://localhost:3000/favlist/add', artData); | ||
|
|
||
| if (response.data) { | ||
| setIsFavorited(response.data.inFavList); | ||
| if (updateFavorites) { | ||
| updateFavorites(art.id, response.data.inFavList); | ||
| } | ||
| } | ||
| } catch (error) { | ||
| console.error('Error updating favorites', error); | ||
| setIsFavorited(!newFavoritedState); | ||
| } | ||
| }; | ||
|
|
||
| const ArtItem = ({ art,onRemoveFromFavorites }) => { | ||
| const navigate = useNavigate() | ||
| const location = useLocation() | ||
|
|
||
| const navigateToDetail = (evt) => { | ||
| evt.preventDefault() | ||
| navigate("/info", {state:{from:location.pathname}}); // Adjust this path as necessary | ||
| // window.location.href = "/info"; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="mb-4"> | ||
| <Card> | ||
| <div className="relative mx-auto"> | ||
| <img className="w-full rounded-lg" src={art.url} alt={art.name} onClick={navigateToDetail} /> | ||
| <p className='absolute bottom-[0.15rem] left-[0.15rem] rounded-xl px-1 | ||
| <Card onClick={navigateToDetail}> | ||
| {/* ...other card content... */} | ||
| <img className="w-full rounded-lg" src={art.url} alt={art.name} /> | ||
| <p className='absolute bottom-[0.15rem] left-[0.15rem] rounded-xl px-1 | ||
| text-lg text-center bg-white bg-opacity-60'> | ||
| <span className='pr-[0.15rem]' onClick={onRemoveFromFavorites}>❤️</span> | ||
| {art.name} | ||
| {/* {art.name} */} | ||
| </p> | ||
| </div> | ||
| <p className="pt-1">{`Van Gogh, Holland, ${art.year}`}</p> | ||
| <IconButton onClick={toggleFavorite}> | ||
| {isFavorited ? <FavoriteIcon style={{ color: 'red' }} /> : <FavoriteBorderIcon />} | ||
| </IconButton> | ||
| <p className="pt-1">{`${art.name} , ${art.year}`}</p> | ||
| {/* The rest of your card content, such as art title, author, year, etc. */} | ||
| </Card> | ||
| </div> | ||
| ); | ||
|
|
||
| }; | ||
|
|
||
| export default ArtItem; | ||
| export default ArtItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.