#559 fix : tempsearch for querystring and go back data update mypick (#…

…577)
sdp-tech · Nov 17, 2023 · e5456c8 · e5456c8
1 parent 6791820
commit e5456c8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 deletions.
diff --git a/src/components/mypick/mycuration/MyCuration.jsx b/src/components/mypick/mycuration/MyCuration.jsx
@@ -167,16 +167,24 @@ const MyCuration = (props) => {
 
   const onChangeSearch = (e) => {
     e.preventDefault();
-    setSearch(e.target.value);
+    setTempSearch(e.target.value);
   };
 
+  const handleSearchToggle = async (e) => {
+    if (e) {
+      e.preventDefault();
+    } //초기화 방지
+    setSearch(tempSearch);
+  }
+
   const pageMyCuration = async () => {
 
     setLoading(true);
+    setSearch(queryString.search);
 
     const response = await request.get("/mypage/my_liked_curation/", {
       page: queryString.page,
-      search: search.trim()
+      search: queryString.search
     }, null);
 
     setPageCount(response.data.data.length);
@@ -206,7 +214,8 @@ const MyCuration = (props) => {
   useEffect(() => {
     pageMyCuration();
     if (parseInt(queryString.page) !== page) setPage(parseInt(queryString.page));
-  }, [queryString.page]);
+    if (queryString.search) setTempSearch(queryString.search);
+  }, [queryString.page, queryString.search]);
   return (
     <>
       {loading ? (
@@ -219,9 +228,9 @@ const MyCuration = (props) => {
             </span>
             <SearchFilterBar>
                 <SearchBar
-                  search={search}
+                  search={tempSearch}
                   onChangeSearch={onChangeSearch}
-                  handleSearchToggle={pageMyCuration}
+                  handleSearchToggle={handleSearchToggle}
                   placeholder="어떤 장소의 이야기가 궁금하신가요?"
                   searchIcon={searchBlack}
                   background="white"

diff --git a/src/components/mypick/myplace/Myplace.jsx b/src/components/mypick/myplace/Myplace.jsx
@@ -143,6 +143,7 @@ const MoveSection = styled.div`
 const Myplace = () => {
   const [info, setInfo] = useState([]);
   const [pageCount, setPageCount] = useState(1);
+  const [tempSearch, setTempSearch] = useState("");
   const [search, setSearch] = useState("");
   const [limit, setLimit] = useState(6);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -165,17 +166,25 @@ const Myplace = () => {
 
   const onChangeSearch = (e) => {
     e.preventDefault();
-    setSearch(e.target.value);
+    setTempSearch(e.target.value);
   };
 
+  const handleSearchToggle = async (e) => {
+    if (e) {
+      e.preventDefault();
+    } //초기화 방지
+    setSearch(tempSearch);
+  }
+
   const pageMyplace = async () => {
 
     setLoading(true);
+    setSearch(queryString.search);
     let params = new URLSearchParams();
     for (const category of checkedList) params.append('filter', category);
     const response = await request.get(`/mypage/myplace_search/?${params.toString()}`, {
       page: queryString.page,
-      search: search.trim()
+      search: queryString.search
     }, null);
     setPageCount(response.data.data.count);
     setInfo(response.data.data.results);
@@ -206,7 +215,8 @@ const Myplace = () => {
   useEffect(() => {
     pageMyplace();
     if (parseInt(queryString.page) !== page) setPage(parseInt(queryString.page));
-  }, [queryString.page, checkedList]);
+    if (queryString.search) setTempSearch(queryString.search);
+  }, [queryString.page, checkedList, queryString.search]);
 
   return (
     <>
@@ -220,9 +230,9 @@ const Myplace = () => {
             </span>
             <SearchFilterBar>
                 <SearchBar
-                  search={search}
+                  search={tempSearch}
                   onChangeSearch={onChangeSearch}
-                  handleSearchToggle={pageMyplace}
+                  handleSearchToggle={handleSearchToggle}
                   placeholder="어떤 장소의 이야기가 궁금하신가요?"
                   searchIcon={searchBlack}
                   background="white"

diff --git a/src/components/mypick/mystory/Mystory.jsx b/src/components/mypick/mystory/Mystory.jsx
@@ -144,6 +144,7 @@ const MoveSection = styled.div`
 const Mystory = () => {
   const [checkedList, setCheckedList] = useState('');
   const [info, setInfo] = useState([]);
+  const [tempSearch, setTempSearch] = useState("");
   const [search, setSearch] = useState("");
   const [searchParams, setSearchParams] = useSearchParams();
   const [pageCount, setPageCount] = useState(1);
@@ -166,19 +167,26 @@ const Mystory = () => {
 
   const onChangeSearch = (e) => {
     e.preventDefault();
-    setSearch(e.target.value);
+    setTempSearch(e.target.value);
   };
 
+  const handleSearchToggle = async (e) => {
+    if (e) {
+      e.preventDefault();
+    } //초기화 방지
+    setSearch(tempSearch);
+  }
+
   const pageMystory = async () => {
 
     setLoading(true);
     let params = new URLSearchParams();
-
+    setSearch(queryString.search);
     for (const category of checkedList) params.append('filter', category);
 
     const response = await request.get(`/mypage/mypick_story/?${params.toString()}`, {
       page: queryString.page,
-      search: search.trim()
+      search: queryString.search
     }, null);
 
     setPageCount(response.data.data.count);
@@ -188,15 +196,15 @@ const Mystory = () => {
 
   useEffect(() => {
     if (search || checkedList) setPage(1);
-  }, [checkedList, search, queryString.page]);
+  }, [checkedList, search]);
   useEffect(() => {
     const params = {
        page: page,
        me: nickname
     };
     if (search) params.search = search;
     if (checkedList) params.checkedList = checkedList
-    if ((page===1 && search||page===1 && checkedList)||page !== 1) {
+    if ((page===1 && search)||(page===1 && checkedList)||page !== 1) {
       setSearchParams(params);
       setPageOneFlag(true);
     } else if (page === 1 && pageOneFlag) {
@@ -208,7 +216,8 @@ const Mystory = () => {
   useEffect(() => {
     pageMystory();
     if (parseInt(queryString.page) !== page) setPage(parseInt(queryString.page));
-  }, [queryString.page, checkedList]);
+    if (queryString.search) setTempSearch(queryString.search);
+  }, [queryString.page, checkedList, queryString.search]);
   return (
     <>
       {loading ? (
@@ -221,9 +230,9 @@ const Mystory = () => {
             </span>
             <SearchFilterBar>
                 <SearchBar
-                  search={search}
+                  search={tempSearch}
                   onChangeSearch={onChangeSearch}
-                  handleSearchToggle={pageMystory}
+                  handleSearchToggle={handleSearchToggle}
                   placeholder="어떤 장소의 이야기가 궁금하신가요?"
                   searchIcon={searchBlack}
                   background="white"