search

src/components/mobile/Search.tsx

@@ -1,15 +1,16 @@
 import classNames from "classnames/bind";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styles from "./Search.scss";
 
 import { ReactComponent as IconClose } from "@assets/img/svg/ico_close.svg";
 import { ReactComponent as IconSearchGray } from "@assets/img/svg/ico_search_gray.svg";
 import URLInfo from "@src/constants/URLInfo";
 import useSearch from "@src/hooks/useSearch";
-import { useSelector } from "react-redux";
-import { useHistory } from "react-router";
-import { useOnClickOutside } from "usehooks-ts";
+import { useDispatch, useSelector } from "react-redux";
+import { useHistory, useLocation } from "react-router";
+import { useDebounce, useOnClickOutside } from "usehooks-ts";
 import AutoCompleteSearch from "../common/AutoCompleteSearch";
+import { fetchExploreHint } from "@src/store/reducers/ExploreReducer";
 
 const cx = classNames.bind(styles);
 
@@ -20,6 +21,7 @@ interface IOwnProps {
 const Search: React.FC<IOwnProps> = ({ onClose }) => {
   const history = useHistory();
   const searchRef = useRef(null);
+  const dispatch = useDispatch();
   const { hint } = useSelector((state) => state.explore);
   const [showAutoComplete, setShowAutoComplete] = useState<boolean>(false);
   const onSearch = () => {
@@ -34,11 +36,40 @@ const Search: React.FC<IOwnProps> = ({ onClose }) => {
   const { keyword, setKeyword, onKeyPress, handleSearch } = useSearch({
     onSearch,
   });
-
+  const debouncedValue = useDebounce<string>(keyword, 1000);
+  const location = useLocation();
+  const searchText = new URLSearchParams(location.search).get(
+    URLInfo.SEARCH_PARAM.SEARCH_TEXT
+  );
   useOnClickOutside(searchRef, () => {
     setShowAutoComplete(false);
   });
 
+  const dispatchHint = (token_name: string) => {
+    dispatch(
+      fetchExploreHint({
+        token_name,
+      })
+    );
+  };
+
+  useEffect(() => {
+    dispatchHint(keyword);
+    if (URLInfo.isExplorePage(location)) {
+      history.push(URLInfo.getSearchResultUrl(keyword));
+    }
+  }, [debouncedValue]);
+
+  useEffect(() => {
+    if (!URLInfo.isExplorePage(location)) {
+      setKeyword("");
+    } else {
+      if (searchText) {
+        setKeyword(searchText);
+      }
+    }
+  }, [location]);
+
   return (
     <div className={cx("ly_search")} ref={searchRef}>
       <div className={cx("input_box")}>

src/components/pc/Header.tsx

@@ -1,38 +1,38 @@
-import React, { useEffect, useState, useRef } from "react";
-import classNames from "classnames/bind";
-import styles from "./Header.scss";
-import { Link } from "react-router-dom";
-import { ReactComponent as IconLogo } from "@assets/img/svg/logo_metarare.svg";
-import { ReactComponent as IconSearchGray } from "@assets/img/svg/ico_search_gray.svg";
-import { ReactComponent as IconArrow } from "@assets/img/svg/ico_arr_gray.svg";
 import { ReactComponent as IconActivity } from "@assets/img/svg/ico_activity.svg";
-import { ReactComponent as IconTwitter } from "@assets/img/svg/ico_twitter.svg";
-import { ReactComponent as IconInstagram } from "@assets/img/svg/ico_insta.svg";
+import { ReactComponent as IconArrow } from "@assets/img/svg/ico_arr_gray.svg";
 import { ReactComponent as IconFacebook } from "@assets/img/svg/ico_facebook.svg";
+import { ReactComponent as IconInstagram } from "@assets/img/svg/ico_insta.svg";
+import { ReactComponent as IconSearchGray } from "@assets/img/svg/ico_search_gray.svg";
+import { ReactComponent as IconTwitter } from "@assets/img/svg/ico_twitter.svg";
+import { ReactComponent as IconLogo } from "@assets/img/svg/logo_metarare.svg";
 import URLInfo from "@src/constants/URLInfo";
-import useSearch from "@src/hooks/useSearch";
-import ProfileModal from "../common/ProfileModal";
 import LayerContainer from "@src/containers/common/LayerContainer";
-import { useDispatch, useSelector } from "react-redux";
 import useLogin from "@src/hooks/useLogin";
-import { useHistory, useLocation } from "react-router";
+import useSearch from "@src/hooks/useSearch";
+import { fetchExploreHint } from "@src/store/reducers/ExploreReducer";
 import { fetchUserInfo } from "@src/store/reducers/UserReducer";
-import { YoutubeIcon } from "../common/icon/youtube";
-import { useDebounce, useOnClickOutside} from "usehooks-ts";
+import classNames from "classnames/bind";
+import React, { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useHistory, useLocation } from "react-router";
+import { Link } from "react-router-dom";
+import { useDebounce, useOnClickOutside } from "usehooks-ts";
 import AutoCompleteSearch from "../common/AutoCompleteSearch";
-import { fetchExploreHint } from "@src/store/reducers/ExploreReducer";
+import ProfileModal from "../common/ProfileModal";
+import { YoutubeIcon } from "../common/icon/youtube";
+import styles from "./Header.scss";
 
 const cx = classNames.bind(styles);
 
 const Header: React.FC = () => {
-  const searchRef = useRef(null)
+  const searchRef = useRef(null);
   const history = useHistory();
   const dispatch = useDispatch();
   const [showAutoComplete, setShowAutoComplete] = useState<boolean>(false);
   const { userInfo, isUserInfoLoaded } = useSelector((store) => store.user);
   const onSearch = () => {
     history.push(URLInfo.getSearchResultUrl(keyword));
-    setShowAutoComplete(false)
+    setShowAutoComplete(false);
   };
   const SelectTextComplete = (text: string) => {
     history.push(URLInfo.getSearchResultUrl(text));
@@ -40,7 +40,7 @@ const Header: React.FC = () => {
   const { keyword, setKeyword, onKeyPress, handleSearch } = useSearch({
     onSearch,
   });
-  const debouncedValue = useDebounce<string>(keyword, 1000)
+  const debouncedValue = useDebounce<string>(keyword, 1000);
   const [showCommunity, setShowCommunity] = useState(false);
   const [showProfile, setShowProfile] = useState<boolean>(false);
   const location = useLocation();
@@ -48,7 +48,7 @@ const Header: React.FC = () => {
   const searchText = new URLSearchParams(location.search).get(
     URLInfo.SEARCH_PARAM.SEARCH_TEXT
   );
-  const { hint } = useSelector((state) => state.explore)
+  const { hint } = useSelector((state) => state.explore);
   useEffect(() => {
     if (showProfile) {
       dispatch(fetchUserInfo());
@@ -74,18 +74,21 @@ const Header: React.FC = () => {
   });
 
   useEffect(() => {
-      dispatchHint(keyword)
+    dispatchHint(keyword);
+    if (URLInfo.isExplorePage(location)) {
+      history.push(URLInfo.getSearchResultUrl(keyword));
+    }
   }, [debouncedValue]);
 
   useEffect(() => {
-    if(!URLInfo.isExplorePage(location)){
-      setKeyword('')
+    if (!URLInfo.isExplorePage(location)) {
+      setKeyword("");
     } else {
-      if(searchText){
-        setKeyword(searchText)
+      if (searchText) {
+        setKeyword(searchText);
       }
     }
-  }, [location])
+  }, [location]);
 
   return (
     <div className={cx("header_wrap")}>