Skip to content
Snippets Groups Projects
Commit 13194e42 authored by nahyun's avatar nahyun
Browse files

최교수님 덕분에 finish. 감사합니다

parent 52394b9c
Branches main
No related tags found
No related merge requests found
Pipeline #8508 passed
...@@ -12,273 +12,18 @@ export default function App() { ...@@ -12,273 +12,18 @@ export default function App() {
const [currentTab, setCurrentTab] = React.useState(0); const [currentTab, setCurrentTab] = React.useState(0);
const [searchResult, setSearchResult] = React.useState([]); const [searchResult, setSearchResult] = React.useState([]);
const [favorites, setFavorites] = React.useState([]); const [favorites, setFavorites] = React.useState([]);
//const [like, setLike] = React.useState([]);
// 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')
// // .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);
} }
// useEffect(() => {
// axios.get('/likes')
// .then((response) => {
// const data = response.data;
// setFavorites(data);
// })
// .catch((error) => {
// console.error('Error:', error);
// });
// }, []);
//수정 - 버전1
// const handleOnLike = (item) => {
// let value = favorites.find(it => it.collectionId == item.collectionId)
// if (value) {
// let i = searchResult.find(it => it.collectionId == item.collectionId)
// if (i) {
// item.like = false;
// }
// let remains = favorites.filter((it) => it.collectionId !== item.collectionId);
// setFavorites(remains);
// } else {
// let i = searchResult.find(it => it.collectionId == item.collectionId)
// if (i) {
// item.like = true;
// }
// setFavorites([...favorites, item]);
// }
// };
//버전2 - 돌아가긴 함. (최종 버전 spring 병합이 안됌)
// const handleOnLike = (item) => {
// let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
// if (favoriteItem) {
// // item.like = false;
// //favorite & search 둘다 삭제
// let a = searchResult.find((it) => it.collectionId === item.collectionId);
// if (a) {
// item.like = false;
// }
// let b = favorites.filter((it) => it.collectionId !== item.collectionId);
// setFavorites(b);
// }
// else {
// let a = searchResult.find((it) => it.collectionId === item.collectionId);
// if (a) {
// item.like = true;
// }
// setFavorites([...favorites, item]);
// //setFavorites([...favorites, { ...item, like: true }]);
// //좋아요 아이템 spring 서버로 보내기
// axios.post('/likes', {
// collectionId: item.collectionId,
// collectionType: item.collectionType,
// artistId: item.artistId
// }
// )
// .then((response) => {
// console.log(response.data);
// })
// .catch((error) => {
// console.error('Error:', error);
// });
// }
//버전3 - 연결시키기 위해 노력 - 최종
// const handleOnLike = (item) => {
// let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
// if (favoriteItem) {
// // item.like = false;
// //favorite & search 둘다 삭제
// let a = searchResult.find((it) => it.collectionId === item.collectionId);
// if (a) {
// item.like = false;
// }
// let b = favorites.filter((it) => it.collectionId !== item.collectionId);
// setFavorites(b);
// axios.delete(`/likes/${item.collectionId}`)
// .then((response) => {
// console.log(response.data);
// })
// .catch((error) => {
// console.error('Error: ', error);
// })
// }
// else {
// let a = searchResult.find((it) => it.collectionId !== item.collectionId);
// if (a) {
// item.like = true;
// }
// setFavorites([...favorites, item]);
// //setFavorites([...favorites, { ...item, like: true }]);
// //좋아요 아이템 spring 서버로 보내기
// axios.post('/likes', {
// collectionId: item.collectionId,
// collectionType: item.collectionType,
// artistId: item.artistId,
// artistName: item.artistName,
// artistViewUrl: item.artistViewUrl,
// collectionName: item.collectionName,
// collectionViewUrl: item.collectionViewUrl
// }
// )
// .then((response) => {
// console.log(response.data);
// })
// .catch((error) => {
// console.error('Error:', error);
// });
// }
// const handleOnLike = (item) => {
// let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
// if (favoriteItem) {
// let a = searchResult.find((it) => it.collectionId === item.collectionId);
// if (a) {
// item.like = false;
// }
// let updatedFavorites = favorites.filter((it) => it.collectionId !== item.collectionId);
// setFavorites(updatedFavorites);
// // 좋아요 아이템 spring 서버로 보내기
// axios.post('/likes', {
// collectionId: item.collectionId,
// collectionType: item.collectionType,
// artistId: item.artistId
// })
// .then((response) => {
// console.log(response.data);
// })
// .catch((error) => {
// console.error('Error:', error);
// });
// } else {
// let a = searchResult.find((it) => it.collectionId === item.collectionId);
// if (a) {
// item.like = true;
// }
// setFavorites([...favorites, item]);
// // 좋아요 아이템 spring 서버로 보내기
// axios.post('/likes', {
// collectionId: item.collectionId,
// collectionType: item.collectionType,
// artistId: item.artistId
// })
// .then((response) => {
// console.log(response.data);
// })
// .catch((error) => {
// console.error('Error:', error);
// });
// }
// };
// const updatedSearchResult = searchResult.map((it) =>
// it.collectionId === item.collectionId ? { ...it, like: !favoriteItem } : it
// );
// 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
// }
// })
// }
// }
// const handleOnLike = (item) => {
// let favoriteItem = favorites.find(it => it.collectionId == item.collectionId)
// if (favoriteItem) {
// fetch(`/likes/${item.collectionId}`, {
// method: 'DELETE',
// headers: {},
// })
// .then(r => {
// let i = searchResult.find(it => it.collectionId == item.collectionId)
// if (i) {
// item.like = false;
// }
// let remains = favorites.filter((it) => it.collectionId !== item.collectionId);
// setFavorites(remains);
// })
// .catch(e => console.log('error when delete method >', e));
// }
// else {
// fetch(`/likes`, {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify(item)
// })
// .then(r => r.json())
// .then(r => {
// let i = searchResult.find(it => it.collectionId == item.collectionId)
// if (i) {
// item.like = true;
// }
// setFavorites([...favorites, item]);
// })
// .catch(e => console.log('error when post >', e));
// }
React.useEffect(() => { React.useEffect(() => {
const getLikesData = async () => { const getLikesData = async () => {
try { try {
const res = await axios.get("http://localhost:8888/likes"); const res = await axios.get("/likes");
const temp = res.data.map((item) => ({ ...item, like: true })); const temp = res.data.map((item) => ({ ...item, like: true }));
console.log(temp);
setFavorites(temp); setFavorites(temp);
//setFavorites(res.data);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
...@@ -286,6 +31,19 @@ export default function App() { ...@@ -286,6 +31,19 @@ export default function App() {
getLikesData(); getLikesData();
}, []); }, []);
const handleOnSearch = (list) => {
list.forEach(item => {
let f = favorites.find(it => it.collectionId == item.collectionId)
if (f) {
item.like = true;
}
else {
item.like = false;
}
});
setSearchResult(list);
}
const handleOnlike = (item) => { const handleOnlike = (item) => {
let t = favorites.find(it => it.collectionId == item.collectionId) let t = favorites.find(it => it.collectionId == item.collectionId)
...@@ -339,7 +97,7 @@ export default function App() { ...@@ -339,7 +97,7 @@ export default function App() {
</Tabs> </Tabs>
</Box> </Box>
{currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} onLike={handleOnlike} />} {currentTab == 0 && <SearchPage list={searchResult} onSearch={handleOnSearch} onLike={handleOnlike} />}
{currentTab == 1 && <Favorites list={favorites} 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>}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment