Skip to content
Snippets Groups Projects
Commit 4710304a authored by Seung Hun Han's avatar Seung Hun Han
Browse files

Feat: Sync into BackEnd

parent 1bb6bcf3
Branches
No related tags found
No related merge requests found
Pipeline #8463 passed
Source diff could not be displayed: it is too large. Options to address this: view the blob.
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material'; import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
import SearchPage from './addSearch' import SearchPage from './addSearch'
import MyFavorites from './Favorites' import MyFavorites from './Favorites'
import { useEffect } from 'react';
export default function App () { export default function App () {
const [activeTab, setActiveTab] = React.useState(0); const [activeTab, setActiveTab] = React.useState(0);
...@@ -9,15 +10,70 @@ export default function App () { ...@@ -9,15 +10,70 @@ export default function App () {
const [likedItems, setLikedItems] = React.useState({}); const [likedItems, setLikedItems] = React.useState({});
const [favoriteItems, setFavoriteItems] = React.useState([]); const [favoriteItems, setFavoriteItems] = React.useState([]);
React.useEffect(() => {
fetch('http://localhost:12345/likes')
.then(response => response.json())
.then(data => {
let newLikedItems = {};
data.forEach(item => {
newLikedItems[item.collectionId] = true;
});
setLikedItems(newLikedItems);
setFavoriteItems(data);
})
.catch(error => {
console.error('Error:', error);
});
}, []);
const toggleLike = (id, item) => { const toggleLike = (id, item) => {
setLikedItems({...likedItems, [id] : !likedItems[id]}); setLikedItems({...likedItems, [id] : !likedItems[id]});
if (likedItems[id]) { if (likedItems[id]) {
setFavoriteItems(prevFavorites => prevFavorites.filter(fav => fav.collectionId !== id)); setFavoriteItems(prevFavorites => prevFavorites.filter(fav => fav.collectionId !== id));
console.log(id);
fetch(`http://localhost:12345/likes/${id}`, {
method: 'DELETE',
})
.then(response => {
if (response.ok) {
console.log(response);
} else {
console.error('Error:', error);
}
})
.then(responseData => {
console.log('Response:', responseData);
})
.catch(error => {
console.error('Error:', error);
});
} else { } else {
setFavoriteItems(prevFavorites => [...prevFavorites, item]); setFavoriteItems(prevFavorites => [...prevFavorites, item]);
//console.log(item);
fetch('http://localhost:12345/likes', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(item)
})
.then(response => {
if (response.ok) {
console.log(response);
} else {
console.error('Error:', error);
} }
}; })
.then(responseData => {
console.log('Response:', responseData);
})
.catch(error => {
console.error('Error:', error);
});
}
}
const handleTabSwitch = (event, newValue) => { const handleTabSwitch = (event, newValue) => {
setActiveTab(newValue); setActiveTab(newValue);
......
...@@ -44,8 +44,7 @@ export default function MusicList({list, onLike, likes}) { ...@@ -44,8 +44,7 @@ export default function MusicList({list, onLike, likes}) {
</CardContent> </CardContent>
<CardActions> <CardActions>
<IconButton onClick={toggleFavoriteStatus(item.collectionId, item.collectionCensoredName, item)}> <IconButton onClick={toggleFavoriteStatus(item.collectionId, item.collectionCensoredName, item)}>
{(likes[item.collectionId] === true) ? {likes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
<Favorite /> : <FavoriteBorder /> }
</IconButton> </IconButton>
<SnackMsg open = {snackState.open} message={snackState.msg} onClose={handleSnackbarClose}/> <SnackMsg open = {snackState.open} message={snackState.msg} onClose={handleSnackbarClose}/>
</CardActions> </CardActions>
......
...@@ -9,7 +9,8 @@ export default function SearchPage({list, onSearch, likes, onLike}) { ...@@ -9,7 +9,8 @@ export default function SearchPage({list, onSearch, likes, onLike}) {
event.preventDefault(); event.preventDefault();
console.log(searchWord); console.log(searchWord);
setSearchWord(''); setSearchWord('');
fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`) //fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
fetch(`http://127.0.0.1:12345/musicSearch/${searchWord}`)
.then(r => r.json()).then(r => { .then(r => r.json()).then(r => {
console.log(r); console.log(r);
onSearch(r.results); onSearch(r.results);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment