sdp-tech#559 fix : queryparameter navigate error

youngsikkk · Nov 6, 2023 · e7ca2e6 · e7ca2e6
1 parent 0ab6617
commit e7ca2e6
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 82 deletions.
diff --git a/src/components/Community/CommunityList.jsx b/src/components/Community/CommunityList.jsx
@@ -110,6 +110,7 @@ export default function CommunityList({ board, format }) {
   const [search, setSearch] = useState('');
   const [tempSearch, setTempSearch] = useState('');
   const [searchParams, setSearchParams] = useSearchParams();
+  const [page, setPage] = useState(1);
   const queryString = qs.parse(location.search, {
     ignoreQueryPrefix: true
   });
@@ -122,11 +123,11 @@ export default function CommunityList({ board, format }) {
       page: queryString.page,
       latest: 'true',
     }, null);
-    const params = {
-      page : queryString.page
-    }
-    if (search) params.search = search
-    setSearchParams(params);
+    // const params = {
+    //   page : queryString.page
+    // }
+    // if (search) params.search = search
+    // setSearchParams(params);
     setList(response.data.data.results);
     setTotal(response.data.data.count);
     setLoading(false);
@@ -185,6 +186,18 @@ export default function CommunityList({ board, format }) {
     setTotal(response.data.data.count);
     setLoading(false);
   }
+  useEffect(() => {
+    const params = { page: page };
+    if (tempSearch) params.search = tempSearch;
+    if (search) params.search = search;
+
+    if (location.state?.name && page === 1) {
+      setSearch(location.state.name);
+      location.state.name = null;
+    } else if ((page===1 && search)||page !== 1) {
+      setSearchParams(params);
+    }
+  }, [tempSearch, page]);
   useEffect(() => {
     getItem();
     setMode(false);
@@ -242,7 +255,7 @@ export default function CommunityList({ board, format }) {
               글쓰기
             </UploadButton>
           </Section>
-          <Pagination total={total} limit="5" page={queryString.page} />
+          <Pagination total={total} limit="5" page={page} setPage={setPage} />
         </>
       }
     </>

diff --git a/src/components/Curation/components/CurationMoreView.jsx b/src/components/Curation/components/CurationMoreView.jsx
@@ -146,23 +146,31 @@ const CurationMoreView = () => {
       searched = search.trim();
     }
       const response = await request.get("/curations/admin_curations/", {
-      page: page,
-      search: searched
+      page: queryString.page,
+      search: queryString.search || searched
     }, null);
-    const params = {
-      page: page
-    }
-      if(search) params.search = search;
-      setSearchParams(params);
       setItem(response.data.data.results);
       setPageCount(response.data.data.count);
     }
+
+    useEffect(() => {
+      const params = { page: page };
+      if (tempSearch) params.search = tempSearch;
+      if (search) params.search = search;
+
+      if (location.state?.name && page === 1) {
+        setSearch(location.state.name);
+        location.state.name = null;
+      } else if ((page===1 && search)||page !== 1) {
+        setSearchParams(params);
+      }
+    }, [tempSearch, page]);
 
   // page가 변경될 때마다 page를 붙여서 api 요청하기
   useEffect(() => {
     getList()
     checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
-  }, [page, search]);
+  }, [queryString.page, search]);
 
   return (
     <>

diff --git a/src/components/Curation/components/CurationUserMoreView.jsx b/src/components/Curation/components/CurationUserMoreView.jsx
@@ -9,6 +9,7 @@ import Request from "../../../functions/common/Request";
 import checkSasmAdmin from "../../Admin/Common";
 import Pagination from "../../common/Pagination";
 import AdminButton from "../../Admin/components/AdminButton";
+import qs from "qs";
 
 const Section = styled.div`
   box-sizing: border-box;
@@ -118,6 +119,9 @@ const CurationUserMoreView = () => {
   const [page, setPage] = useState(1);
   const token = localStorage.getItem("accessTK"); //localStorage에서 accesstoken꺼내기
   const request = Request(navigate);
+  const queryString = qs.parse(location.search, {
+      ignoreQueryPrefix: true
+    });
 
   const onChangeSearch = (e) => {
     e.preventDefault();
@@ -133,10 +137,6 @@ const CurationUserMoreView = () => {
     }
   }
 
-  useEffect(() => {
-    setSearch("");
-  },[location.search]);
-
   useEffect(() =>{
     if (search) setPage(1);
    },[search]) // 검색할 때마다 페이지 번호 1로 수정
@@ -155,25 +155,33 @@ const CurationUserMoreView = () => {
       searched = search.trim();
     }
     const response = await request.get("/curations/verified_user_curations/", {
-      page: page,
-      search: searched
+      page: queryString.page,
+      search: queryString.search || searched
     }, null);
-    const params = {
-      page: page
-    }
-    if(search) params.search = search;
-    setSearchParams(params);
     setItem(response.data.data.results);
     setPageCount(response.data.data.count);
     setLoading(false);
   };
+
+  useEffect(() => {
+    const params = { page: page };
+    if (tempSearch) params.search = tempSearch;
+    if (search) params.search = search;
+
+    if (location.state?.name && page === 1) {
+      setSearch(location.state.name);
+      location.state.name = null;
+    } else if ((page===1 && search)||page !== 1) {
+      setSearchParams(params);
+    }
+  }, [tempSearch, page]);
 
   // page가 변경될 때마다 page를 붙여서 api 요청하기
   useEffect(() => {
     getList();
     checkVerfied();
     checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
-  }, [page, search]);
+  }, [queryString.page, search]);
 
   return (
     <>

diff --git a/src/components/SpotMap/DataContainer.jsx b/src/components/SpotMap/DataContainer.jsx
@@ -102,12 +102,6 @@ export default function DataContainer({ Location }) {
                 search: queryParams.search, // gotomap으로 넘어왔을 때
                 filter: queryParams.filter
             });
-        const params = {
-            page: page
-        }
-        if (search) params.search = search;
-        if (checkedList) params.checkedList = checkedList;
-        setSearchParams(params);
         setPlaceData({
             total: response_list.data.data.count,
             MapList: response_list.data.data.results,
@@ -120,6 +114,17 @@ export default function DataContainer({ Location }) {
         }
     }; 
 
+    useEffect(() => {
+        const params = {
+           page: page
+        };
+        if (search) params.search = search;
+        if (checkedList) params.checkedList = checkedList
+        if ((page===1 && search||page===1 && checkedList)||page !== 1) {
+          setSearchParams(params);
+        }
+      }, [search, page, checkedList]);
+
     //admin 여부 체크
     useEffect(() => {
         checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));

diff --git a/src/components/Story/StoryListPage.jsx b/src/components/Story/StoryListPage.jsx
@@ -174,6 +174,7 @@ const StoryListPage = () => {
   useEffect(() => {
   const params = { page: page };
   if (tempSearch) params.search = tempSearch;
+
   if (search) params.search = search;
 
   if (location.state?.name && page === 1) {
@@ -183,6 +184,7 @@ const StoryListPage = () => {
     setSearchParams(params);
   }
 }, [tempSearch, page]);
+console.log(typeof page)
 
   //검색 요청 api url
   const handleSearchToggle = async (e) => {
@@ -194,12 +196,12 @@ const StoryListPage = () => {
   const getList = async () => {
     setSearchToggle(true);
     setLoading(true);
-    let searched = location.state?.name || search.trim();
+    let searched = search.trim() || queryString.search;
     const order = orderList ? "latest" : "oldest";
     setSearch(searched);
     const response = await request.get("/stories/story_search/", {
       page: queryString.page,
-      search: queryString.search || searched,
+      search:searched,
       order: order
     }, null);
     setItem(response.data.data.results);

diff --git a/src/components/mypage/myInfo/FollowerList.jsx b/src/components/mypage/myInfo/FollowerList.jsx
@@ -120,19 +120,16 @@ const Follower = () => {
   const [page, setPage] = useState(1);
   const [searchParams, setSearchParams] = useSearchParams();
   const nickname = localStorage.getItem('nickname');
+  const queryString = qs.parse(location.search, {
+    ignoreQueryPrefix: true
+  });
 
   const GetFollower = async () => {
     const response = await request.get('/mypage/follower/', {
-      page: page,
+      page: queryString.page,
       email: myEmail,
       search_email: searchQuery
     });
-    const params = {
-      page: page,
-      me: nickname
-    } 
-    if (searchQuery) params.search = searchQuery
-    setSearchParams(params);
     setFollowerList(response.data.data.results);
     setTotal(response.data.data.count);
   }
@@ -154,6 +151,17 @@ const Follower = () => {
     setSearchQuery(e.target.value);
   };
 
+  useEffect(() => {
+    const params = {
+       page: page,
+       me: nickname
+    };
+    if (searchQuery) params.search = searchQuery;
+    if ((page===1 && searchQuery)||page !== 1) {
+      setSearchParams(params);
+    }
+  }, [searchQuery, page]);
+
   useEffect(() => {
       GetFollower();
     }, [searchQuery, page]);

diff --git a/src/components/mypage/myInfo/FollowingList.jsx b/src/components/mypage/myInfo/FollowingList.jsx
@@ -131,22 +131,20 @@ const Following = () => {
   const [refresh, setRefresh] = useState(false);
   const [page, setPage] = useState(1);
   const nickname = localStorage.getItem('nickname');
+  const queryString = qs.parse(location.search, {
+    ignoreQueryPrefix: true
+  });
   const rerender = () => {
     setRefresh(!refresh);
   }
+  console.log(typeof page);
 
   const GetFollowing = async () => {
     const response = await request.get('/mypage/following/', {
-      page: page,
+      page: queryString.page,
       email: myEmail,
       search_email: searchQuery
     });
-    const params = {
-      page: page,
-      me: nickname
-    } 
-    if (searchQuery) params.search = searchQuery
-    setSearchParams(params);
     setFollowingList(response.data.data.results);
     setTotal(response.data.data.count);
   }
@@ -173,9 +171,20 @@ const Following = () => {
     setOpen(false);
   }
 
+  useEffect(() => {
+    const params = {
+       page: page,
+       me: nickname
+    };
+    if (searchQuery) params.search = searchQuery;
+    if ((page===1 && searchQuery)||page !== 1) {
+      setSearchParams(params);
+    }
+  }, [searchQuery, page]);
+
   useEffect(() => {
       GetFollowing();
-    }, [page, refresh, searchQuery]);
+    }, [queryString.page, refresh, searchQuery]);
 
   return (
     <InfoBox style={{ backgroundColor: 'white' }}>

diff --git a/src/components/mypage/myInfo/InfoForm.jsx b/src/components/mypage/myInfo/InfoForm.jsx
@@ -200,7 +200,7 @@ export default function InfoForm(props) {
     const response_myStory = await request.get('/mypage/my_story/',null, null);
     const response_myReviewPlace = await request.get('/mypage/my_reviewed_place/',null, null);
 
-    setSearchParams({me: myNickname});
+    // setSearchParams({me: myNickname});
     setMyReviewedPlace(response_myReviewPlace.data.data.results);
     setMyStory(response_myStory.data.data.results);
     setMyCuration(response_myCuration.data.data);

diff --git a/src/components/mypick/mycuration/MyCuration.jsx b/src/components/mypick/mycuration/MyCuration.jsx
@@ -174,18 +174,22 @@ const MyCuration = (props) => {
       search: search.trim()
     }, null);
 
-    const urlParams = {
-      page: page,
-      me: nickname, 
-    }
-    if (search) urlParams.search = search
-
     setPageCount(response.data.data.length);
-    setSearchParams(urlParams);
     setInfo(response.data.data);
     setLoading(false);
   };
 
+  useEffect(() => {
+    const params = {
+       page: page,
+       me: nickname
+    };
+    if (search) params.search = search;
+    if ((page===1 && search)||page !== 1) {
+      setSearchParams(params);
+    }
+  }, [search, page]);
+
   useEffect(() => {
     if (search) setPage(1);
   }, [search]);
@@ -219,13 +223,13 @@ const MyCuration = (props) => {
             <HeaderSection>
               <MoveSection>
                 <MenuSection>
-                  <ChangeModeButton to={`/mypick/mystory?page=1`}>
+                  <ChangeModeButton to={`/mypick/mystory?page=1&me=${nickname}`}>
                     <img src={ChangeMode} style={{ marginRight: '10px' }} />
                     STORY
                   </ChangeModeButton>
                 </MenuSection>
                 <MenuSection>
-                  <ChangeModeButton to={`/mypick/myplace?page=1`}>
+                  <ChangeModeButton to={`/mypick/myplace?page=1&me=${nickname}`}>
                     <img src={ChangeMode} style={{ marginRight: '10px' }} />
                     PLACE
                   </ChangeModeButton>