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