sdp-tech#559 fix : add queryparameter and searchpage error

youngsikkk · Nov 4, 2023 · dec8f2b · dec8f2b
1 parent cb66be6
commit dec8f2b
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 53 deletions.
diff --git a/src/components/Curation/components/CurationMoreView.jsx b/src/components/Curation/components/CurationMoreView.jsx
@@ -111,6 +111,7 @@ const CurationMoreView = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [limit, setLimit] = useState(4);
   const [search, setSearch] = useState("");
+  const [tempSearch, setTempSearch] = useState("");
   const [isSasmAdmin, setIsSasmAdmin] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
@@ -124,22 +125,18 @@ const CurationMoreView = () => {
 
   const onChangeSearch = (e) => {
     e.preventDefault();
-    setSearch(e.target.value);
+    setTempSearch(e.target.value);
   };
+
   useEffect(() =>{
    if (search) setPage(1);
   },[search]) // 검색할 때마다 페이지 번호 1로 수정
-
-  // page가 변경될 때마다 page를 붙여서 api 요청하기
-  useEffect(() => {
-    handleSearchToggle();
-    checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
-  }, [page]);
 
-
   const handleSearchToggle = async (e) => {
     if(e) e.preventDefault();
-
+    setSearch(tempSearch);
+  }
+  const getList = async () => {
     let searched
     if (location.state?.search) {
       searched = location.state.search;
@@ -160,6 +157,12 @@ const CurationMoreView = () => {
       setItem(response.data.data.results);
       setPageCount(response.data.data.count);
     }
+
+  // page가 변경될 때마다 page를 붙여서 api 요청하기
+  useEffect(() => {
+    getList()
+    checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
+  }, [page, search]);
 
   return (
     <>
@@ -171,7 +174,7 @@ const CurationMoreView = () => {
             <SearchBarSection>
               <SearchFilterBar>
                 <SearchBar
-                  search={search}
+                  search={tempSearch}
                   onChangeSearch={onChangeSearch}
                   handleSearchToggle={handleSearchToggle}
                   placeholder="원하는 장소를 입력해주세요."

diff --git a/src/components/Curation/components/CurationUserMoreView.jsx b/src/components/Curation/components/CurationUserMoreView.jsx
@@ -107,6 +107,7 @@ const CurationUserMoreView = () => {
   const [item, setItem] = useState([]);
   const [loading, setLoading] = useState(true);
   const [limit, setLimit] = useState(4);
+  const [tempSearch, setTempSearch] = useState("");
   const [search, setSearch] = useState("");
   const [pageCount, setPageCount] = useState([]);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -120,7 +121,7 @@ const CurationUserMoreView = () => {
 
   const onChangeSearch = (e) => {
     e.preventDefault();
-    setSearch(e.target.value);
+    setTempSearch(e.target.value);
   };
 
   const checkVerfied = async() => {
@@ -132,20 +133,19 @@ const CurationUserMoreView = () => {
     }
   }
 
+  useEffect(() => {
+    setSearch("");
+  },[location.search]);
+
   useEffect(() =>{
     if (search) setPage(1);
    },[search]) // 검색할 때마다 페이지 번호 1로 수정
 
-  // page가 변경될 때마다 page를 붙여서 api 요청하기
-  useEffect(() => {
-    handleSearchToggle();
-    checkVerfied();
-    checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
-  }, [page]);
-
   const handleSearchToggle = async (e) => {
     if(e) e.preventDefault();
-
+    setSearch(tempSearch);
+  }
+  const getList = async () => {
     let searched
     if (location.state?.search) {
       searched = location.state.search;
@@ -167,6 +167,13 @@ const CurationUserMoreView = () => {
     setPageCount(response.data.data.count);
     setLoading(false);
   };
+
+  // page가 변경될 때마다 page를 붙여서 api 요청하기
+  useEffect(() => {
+    getList();
+    checkVerfied();
+    checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
+  }, [page, search]);
 
   return (
     <>
@@ -178,7 +185,7 @@ const CurationUserMoreView = () => {
             <SearchBarSection>
               <SearchFilterBar>
                 <SearchBar
-                  search={search}
+                  search={tempSearch}
                   onChangeSearch={onChangeSearch}
                   handleSearchToggle={handleSearchToggle}
                   placeholder="원하는 장소를 입력해주세요."

diff --git a/src/components/Story/StoryListPage.jsx b/src/components/Story/StoryListPage.jsx
@@ -150,6 +150,9 @@ const StoryListPage = () => {
   const token = localStorage.getItem("accessTK"); //localStorage에서 accesstoken꺼내기
   const request = Request(navigate);
   const [page, setPage] = useState(1);
+  const queryString = qs.parse(location.search, {
+    ignoreQueryPrefix: true
+  });
 
   const handleToggleOpen = () => {
     setToggleOpen(!toggleOpen);
@@ -176,13 +179,12 @@ const StoryListPage = () => {
     setSearch(tempSearch);
   }
   const getList = async () => {
-    
+
     setSearchToggle(true);
     setLoading(true);
     let searched;
     if (location.state?.name) {
       searched = location.state.name;
-      location.state.name = "";
       setSearch("비건")
     } else {
       searched = search.trim();
@@ -192,22 +194,21 @@ const StoryListPage = () => {
 
     const response = await request.get("/stories/story_search/", {
       page: page,
-      search: searched,
+      search: search,
       order: order
     }, null);
 
     const params = {
       page: page
     }
-
-    if(search) params.search = search;
+    // navigate로 왔을 때, url 변경할 수 있게 하기...
+    if(search) params.search = searched;
     setSearchParams(params);
     setItem(response.data.data.results);
     setPageCount(response.data.data.count);
     setLoading(false);
   };
 
-
   return (
     <>
       {loading ? (

diff --git a/src/components/mypage/myInfo/FollowerList.jsx b/src/components/mypage/myInfo/FollowerList.jsx
@@ -121,14 +121,8 @@ const Follower = () => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const GetFollower = async () => {
-    let newPage;
-    if (page == 1) {
-      newPage = null;
-    } else {
-      newPage = page;
-    }
     const response = await request.get('/mypage/follower/', {
-      page: newPage,
+      page: page,
       email: myEmail,
       search_email: searchQuery
     });

diff --git a/src/components/mypage/myInfo/FollowingList.jsx b/src/components/mypage/myInfo/FollowingList.jsx
@@ -135,15 +135,8 @@ const Following = () => {
   }
 
   const GetFollowing = async () => {
-    let newPage;
-    if (page == 1) {
-      newPage = null;
-    } else {
-      newPage = page;
-    }
-
     const response = await request.get('/mypage/following/', {
-      page: newPage,
+      page: page,
       email: myEmail,
       search_email: searchQuery
     });
@@ -180,7 +173,7 @@ const Following = () => {
 
   useEffect(() => {
       GetFollowing();
-    }, [page, refresh, searchQuery])
+    }, [page, refresh, searchQuery]);
 
   return (
     <InfoBox style={{ backgroundColor: 'white' }}>

diff --git a/src/components/mypick/mycuration/MyCuration.jsx b/src/components/mypick/mycuration/MyCuration.jsx
@@ -166,12 +166,10 @@ const MyCuration = (props) => {
 
   const pageMyCuration = async () => {
 
-    let newPage = (page == 1) ? null : page
-
     setLoading(true);
 
     const response = await request.get("/mypage/my_liked_curation/", {
-      page: newPage,
+      page: page,
       search: search.trim()
     }, null);
 
@@ -187,7 +185,7 @@ const MyCuration = (props) => {
   };
 
   useEffect(() => {
-    if (search) page = 1;
+    if (search) setPage(1);
   }, [search]);
 
   // 초기에 좋아요 목록 불러오기

diff --git a/src/components/mypick/myplace/Myplace.jsx b/src/components/mypick/myplace/Myplace.jsx
@@ -165,12 +165,11 @@ const Myplace = () => {
 
   const pageMyplace = async () => {
 
-    let newPage = (page == 1) ? null : page
     setLoading(true);
     let params = new URLSearchParams();
     for (const category of checkedList) params.append('filter', category);
     const response = await request.get(`/mypage/myplace_search/?${params.toString()}`, {
-      page: newPage,
+      page: page,
       search: search.trim()
     }, null);
 
@@ -188,7 +187,7 @@ const Myplace = () => {
 
 
   useEffect(() => {
-    if (search || checkedList) page = 1;
+    if (search || checkedList) setPage(1);
   }, [checkedList, search]);
 
   // 초기에 좋아요 목록 불러오기

diff --git a/src/components/mypick/mystory/Mystory.jsx b/src/components/mypick/mystory/Mystory.jsx
@@ -165,16 +165,14 @@ const Mystory = () => {
   };
 
   const pageMystory = async () => {
-
-    let newPage = (page == 1) ? null : page
 
     setLoading(true);
     let params = new URLSearchParams();
 
     for (const category of checkedList) params.append('filter', category);
 
     const response = await request.get(`/mypage/mypick_story/?${params.toString()}`, {
-      page: newPage,
+      page: page,
       search: search.trim()
     }, null);
 
@@ -191,7 +189,7 @@ const Mystory = () => {
   };
 
   useEffect(() => {
-    if (search || checkedList) page = 1;
+    if (search || checkedList) setPage(1);
   }, [checkedList, search]);
 
   // 초기에 좋아요 목록 불러오기