From 2734965bce60ccee63677dfde0fb7901ae703563 Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Mon, 3 Mar 2025 11:23:46 +0500 Subject: [PATCH] web: reset search on navigate --- .../src/components/cached-router/index.tsx | 2 ++ .../src/components/navigation-menu/index.tsx | 16 ++++++++--- .../src/components/route-container/index.tsx | 27 ++++++++++--------- apps/web/src/stores/search-store.ts | 15 +++-------- 4 files changed, 31 insertions(+), 29 deletions(-) diff --git a/apps/web/src/components/cached-router/index.tsx b/apps/web/src/components/cached-router/index.tsx index 6e2abc9f2..1b062825b 100644 --- a/apps/web/src/components/cached-router/index.tsx +++ b/apps/web/src/components/cached-router/index.tsx @@ -20,6 +20,7 @@ along with this program. If not, see . import React, { useEffect, useRef } from "react"; import { getHomeRoute, navigate, NavigationEvents } from "../../navigation"; import { store as selectionStore } from "../../stores/selection-store"; +import { useStore as useSearchStore } from "../../stores/search-store"; import useRoutes from "../../hooks/use-routes"; import RouteContainer from "../route-container"; import routes from "../../navigation/routes"; @@ -32,6 +33,7 @@ function CachedRouter() { hooks: { beforeNavigate: (location) => { selectionStore.toggleSelectionMode(false); + useSearchStore.getState().resetSearch(); if (location === "/") { console.log("Redirecting to", getHomeRoute()); navigate(getHomeRoute()); diff --git a/apps/web/src/components/navigation-menu/index.tsx b/apps/web/src/components/navigation-menu/index.tsx index d1064ee8c..fef9a1303 100644 --- a/apps/web/src/components/navigation-menu/index.tsx +++ b/apps/web/src/components/navigation-menu/index.tsx @@ -50,7 +50,12 @@ import { HamburgerMenu } from "../icons"; import { SortableNavigationItem } from "./navigation-item"; -import { hardNavigate, hashNavigate, navigate } from "../../navigation"; +import { + getCurrentPath, + hardNavigate, + hashNavigate, + navigate +} from "../../navigation"; import { db } from "../../common/db"; import { isMobile } from "../../hooks/use-mobile"; import { useStore as useAppStore } from "../../stores/app-store"; @@ -63,6 +68,7 @@ import { useStore as useMonographStore } from "../../stores/monograph-store"; import { useStore as useTrashStore } from "../../stores/trash-store"; import { useStore as useNotebookStore } from "../../stores/notebook-store"; import { useStore as useTagStore } from "../../stores/tag-store"; +import { useStore as useSearchStore } from "../../stores/search-store"; import useLocation from "../../hooks/use-location"; import { FlexScrollContainer } from "../scroll-container"; import { ScopedThemeProvider } from "../theme-provider"; @@ -435,8 +441,6 @@ function RouteItem({ : location.startsWith(item.path) } onClick={() => { - if (!isMobile() && location === item.path) - return useAppStore.getState().toggleListPane(); navigateToRoute(item.path); }} menuItems={[ @@ -918,6 +922,10 @@ async function getSidebarItemsAsMenuItems(): Promise { } function navigateToRoute(path: string) { - useAppStore.getState().toggleListPane(true); + if (!isMobile() && getCurrentPath() === path) { + if (useSearchStore.getState().isSearching) + return useSearchStore.getState().resetSearch(); + return useAppStore.getState().toggleListPane(); + } navigate(path); } diff --git a/apps/web/src/components/route-container/index.tsx b/apps/web/src/components/route-container/index.tsx index 113db0ddc..e3eb009a5 100644 --- a/apps/web/src/components/route-container/index.tsx +++ b/apps/web/src/components/route-container/index.tsx @@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { PropsWithChildren, useRef } from "react"; +import { PropsWithChildren, useEffect, useRef } from "react"; import { Box } from "@theme-ui/components"; import { Close, AddReminder } from "../icons"; import { useStore as useSearchStore } from "../../stores/search-store"; @@ -62,10 +62,20 @@ function Header(props: RouteContainerProps) { [props.title] ); const isMobile = useMobile(); - // const isSearching = useSearchStore((store) => store.isSearching); + const isSearching = useSearchStore((store) => store.isSearching); const query = useSearchStore((store) => store.query); const inputRef = useRef(null); + useEffect(() => { + if (inputRef.current && inputRef.current.value !== query) { + inputRef.current.value = query || ""; + } + }, [query]); + + useEffect(() => { + if (isSearching) inputRef.current?.focus(); + }, [isSearching]); + return ( { - if (e.key === "Escape") - useSearchStore.setState({ - isSearching: false, - searchType: undefined - }); + if (e.key === "Escape") useSearchStore.getState().resetSearch(); else useSearchStore.setState({ isSearching: true, searchType: type }); }} rightActions={[ @@ -137,11 +142,7 @@ function Header(props: RouteContainerProps) { testId: "search-button", onClick: () => { if (inputRef.current) inputRef.current.value = ""; - useSearchStore.setState({ - isSearching: false, - query: undefined, - searchType: undefined - }); + useSearchStore.getState().resetSearch(); } }, ...(type === "reminders" diff --git a/apps/web/src/stores/search-store.ts b/apps/web/src/stores/search-store.ts index e154a3150..38554c2ef 100644 --- a/apps/web/src/stores/search-store.ts +++ b/apps/web/src/stores/search-store.ts @@ -24,19 +24,10 @@ class SearchStore extends BaseStore { isSearching = false; query?: string; searchType?: string; - // startSearch = () => { - // this.set({ isSearching: true }); - // }; - // endSearch = () => { - // this.set({ isSearching: false }); - // }; - // results = []; - // search = async (items, query) => { - // const { type } = this.get(); - // const results = await db.lookup[type](items, query); - // this.set((state) => (state.results = results)); - // }; + resetSearch = () => { + this.set({ isSearching: false, query: undefined, searchType: undefined }); + }; } const [useStore, store] = createStore(