Skip to content
Snippets Groups Projects
Commit 9b73b379 authored by nahyun's avatar nahyun
Browse files

middle

parent 35b64778
No related branches found
No related tags found
No related merge requests found
Pipeline #8492 passed
//import React from 'react'; import React from 'react';
import React, { useEffect } from 'react'; //import React, { useEffect } from 'react';
import MusicList from './MusicList'; import MusicList from './MusicList';
import music_list from './data'; import music_list from './data';
...@@ -14,27 +14,14 @@ export default function App() { ...@@ -14,27 +14,14 @@ export default function App() {
const [favorites, setFavorites] = React.useState([]); const [favorites, setFavorites] = React.useState([]);
//const [like, setLike] = React.useState([]); //const [like, setLike] = React.useState([]);
const fetchfunc = () => { // const fetchfunc = () => {
axios.get('http://localhost:8888/likes')
.then((response) => {
const data = response.data;
data.map(item => {
console.log(item);
handleOnLike(item);
})
//onLike(data);
//setFavorites(data);
console.log(data);
})
.catch((error) => {
console.error('Error:', error);
});
}
useEffect(() => {
// axios.get('http://localhost:8888/likes') // axios.get('http://localhost:8888/likes')
// .then((response) => { // .then((response) => {
// const data = response.data; // const data = response.data;
// data.map(item => {
// console.log(item);
// handleOnLike(item);
// })
// //onLike(data); // //onLike(data);
// //setFavorites(data); // //setFavorites(data);
// console.log(data); // console.log(data);
...@@ -42,8 +29,21 @@ export default function App() { ...@@ -42,8 +29,21 @@ export default function App() {
// .catch((error) => { // .catch((error) => {
// console.error('Error:', error); // console.error('Error:', error);
// }); // });
fetchfunc(); // }
}, []);
// useEffect(() => {
// // axios.get('http://localhost:8888/likes')
// // .then((response) => {
// // const data = response.data;
// // //onLike(data);
// // //setFavorites(data);
// // console.log(data);
// // })
// // .catch((error) => {
// // console.error('Error:', error);
// // });
// fetchfunc();
// }, []);
const handleTabChange = (event, newValue) => { const handleTabChange = (event, newValue) => {
setCurrentTab(newValue); setCurrentTab(newValue);
...@@ -117,7 +117,7 @@ export default function App() { ...@@ -117,7 +117,7 @@ export default function App() {
// }); // });
// } // }
//버전3 - 연결시키기 위해 노력 //버전3 - 연결시키기 위해 노력 - 최종
const handleOnLike = (item) => { const handleOnLike = (item) => {
let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId); let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
...@@ -131,7 +131,7 @@ export default function App() { ...@@ -131,7 +131,7 @@ export default function App() {
let b = favorites.filter((it) => it.collectionId !== item.collectionId); let b = favorites.filter((it) => it.collectionId !== item.collectionId);
setFavorites(b); setFavorites(b);
axios.delete(`http://localhost:8888/likes/${item.collectionId}`) axios.delete(`/likes/${item.collectionId}`)
.then((response) => { .then((response) => {
console.log(response.data); console.log(response.data);
}) })
...@@ -150,7 +150,7 @@ export default function App() { ...@@ -150,7 +150,7 @@ export default function App() {
//setFavorites([...favorites, { ...item, like: true }]); //setFavorites([...favorites, { ...item, like: true }]);
//좋아요 아이템 spring 서버로 보내기 //좋아요 아이템 spring 서버로 보내기
axios.post('http://localhost:8888/likes', { axios.post('/likes', {
collectionId: item.collectionId, collectionId: item.collectionId,
collectionType: item.collectionType, collectionType: item.collectionType,
artistId: item.artistId, artistId: item.artistId,
...@@ -220,6 +220,22 @@ export default function App() { ...@@ -220,6 +220,22 @@ export default function App() {
// it.collectionId === item.collectionId ? { ...it, like: !favoriteItem } : it // it.collectionId === item.collectionId ? { ...it, like: !favoriteItem } : it
// ); // );
// setSearchResult(updatedSearchResult); // setSearchResult(updatedSearchResult);
//고쳐보자..
// const handOnLike = (item) => {
// let favoriteitem = favorite.find(it => it.collectionId == item.collectionId)
// if (favoriteitem) {
// fetch(`/likes/${item.collectionId}`, {
// method: "Delete",
// headers: {},
// }).then((response) => {
// if(response.ok){
// let
// }
// })
// }
// }
}; };
return ( return (
...@@ -240,7 +256,7 @@ export default function App() { ...@@ -240,7 +256,7 @@ export default function App() {
</Box> </Box>
{currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} onLike={handleOnLike} />} {currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} onLike={handleOnLike} />}
{currentTab == 1 && <Favorites list={favorites} onFavorite={setFavorites} onLike={handleOnLike} />} {currentTab == 1 && <Favorites list={favorites} onLike={handleOnLike} />}
{currentTab == 2 && {currentTab == 2 &&
<Typography align="center" variant="h2">Item Three</Typography>} <Typography align="center" variant="h2">Item Three</Typography>}
</React.Fragment> </React.Fragment>
......
//import React from 'react'; import React from 'react';
import { Typography } from '@mui/material'; import { Typography } from '@mui/material';
import MusicList from './MusicList'; import MusicList from './MusicList';
import axios from 'axios'; import axios from 'axios';
import React, { useEffect } from 'react'; //import React, { useEffect } from 'react';
import App from './App'; import App from './App';
const Favorites = ({ list, onSearch, onLike }) => { const Favorites = ({ list, onLike }) => {
//const [Favorites, setFavorites] = React.useState([]); const [Favorites, setFavorites] = React.useState([]);
// useEffect(() => { // useEffect(() => {
// axios.get('http://localhost:8888/likes') // axios.get('http://localhost:8888/likes')
...@@ -21,6 +21,16 @@ const Favorites = ({ list, onSearch, onLike }) => { ...@@ -21,6 +21,16 @@ const Favorites = ({ list, onSearch, onLike }) => {
// }); // });
// }, []); // }, []);
React.useEffect(() => {
fetch(`/likes`, {
method: 'GET',
headers: {},
}).then((response) => response.json())
.then((data) => {
setFavorites(data);
}).catch((e) => console.log("Error fetching favorites: ", e));
}, []);
return ( return (
<React.Fragment> <React.Fragment>
<MusicList list={list} onLike={onLike} /> <MusicList list={list} onLike={onLike} />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment