Unverified Commit 906ec799 authored by Zeng1998's avatar Zeng1998 Committed by GitHub

fix: clear query text (#469)

* fix: clear query text

* update

* update
Co-authored-by: 's avatarboojack <stevenlgtm@gmail.com>
parent 5258b0a5
...@@ -61,7 +61,7 @@ const MemoFilter = () => { ...@@ -61,7 +61,7 @@ const MemoFilter = () => {
<div <div
className={"filter-item-container " + (textQuery ? "" : "!hidden")} className={"filter-item-container " + (textQuery ? "" : "!hidden")}
onClick={() => { onClick={() => {
locationService.setTextQuery(""); locationService.setTextQuery(undefined);
}} }}
> >
<Icon.Search className="icon-text" /> {textQuery} <Icon.Search className="icon-text" /> {textQuery}
......
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { locationService } from "../services"; import { locationService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
...@@ -8,6 +9,12 @@ import "../less/search-bar.less"; ...@@ -8,6 +9,12 @@ import "../less/search-bar.less";
const SearchBar = () => { const SearchBar = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const memoType = useAppSelector((state) => state.location.query?.type); const memoType = useAppSelector((state) => state.location.query?.type);
const [queryText, setQueryText] = useState("");
useEffect(() => {
const text = locationService.getState().query.text;
setQueryText(text === undefined ? "" : text);
}, [locationService.getState().query.text]);
const handleMemoTypeItemClick = (type: MemoSpecType | undefined) => { const handleMemoTypeItemClick = (type: MemoSpecType | undefined) => {
const { type: prevType } = locationService.getState().query ?? {}; const { type: prevType } = locationService.getState().query ?? {};
...@@ -19,6 +26,7 @@ const SearchBar = () => { ...@@ -19,6 +26,7 @@ const SearchBar = () => {
const handleTextQueryInput = (event: React.FormEvent<HTMLInputElement>) => { const handleTextQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
const text = event.currentTarget.value; const text = event.currentTarget.value;
setQueryText(text);
locationService.setTextQuery(text); locationService.setTextQuery(text);
}; };
...@@ -26,7 +34,7 @@ const SearchBar = () => { ...@@ -26,7 +34,7 @@ const SearchBar = () => {
<div className="search-bar-container"> <div className="search-bar-container">
<div className="search-bar-inputer"> <div className="search-bar-inputer">
<Icon.Search className="icon-img" /> <Icon.Search className="icon-img" />
<input className="text-input" type="text" placeholder="" onChange={handleTextQueryInput} /> <input className="text-input" type="text" placeholder="" value={queryText} onChange={handleTextQueryInput} />
</div> </div>
<div className="quickly-action-wrapper"> <div className="quickly-action-wrapper">
<div className="quickly-action-container"> <div className="quickly-action-container">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment