From 13194e42ed5b74d14df55772f6d7d299f56ee8ac Mon Sep 17 00:00:00 2001 From: NaHyun22 <nhle0217@ajou.ac.kr> Date: Tue, 8 Aug 2023 16:29:00 +0900 Subject: [PATCH] =?UTF-8?q?=EC=B5=9C=EA=B5=90=EC=88=98=EB=8B=98=20?= =?UTF-8?q?=EB=8D=95=EB=B6=84=EC=97=90=20finish.=20=EA=B0=90=EC=82=AC?= =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 274 ++++------------------------------------------------- 1 file changed, 16 insertions(+), 258 deletions(-) diff --git a/src/App.js b/src/App.js index ae69bc0..9b3a870 100644 --- a/src/App.js +++ b/src/App.js @@ -12,273 +12,18 @@ export default function App() { const [currentTab, setCurrentTab] = React.useState(0); const [searchResult, setSearchResult] = 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) => { 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(() => { const getLikesData = async () => { 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 })); + console.log(temp); setFavorites(temp); - //setFavorites(res.data); - } catch (e) { console.log(e); } @@ -286,6 +31,19 @@ export default function App() { 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) => { let t = favorites.find(it => it.collectionId == item.collectionId) @@ -339,7 +97,7 @@ export default function App() { </Tabs> </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 == 2 && <Typography align="center" variant="h2">Item Three</Typography>} -- GitLab