Add back search logic

front/src/ui/browse/index.tsx

@@ -8,6 +8,7 @@ import type { SortBy, SortOrd } from "./types";
 export const BrowsePage = () => {
 	const [filter, setFilter] = useQueryState("filter", "");
 	const [sort, setSort] = useQueryState("sort", "name");
+	const [search] = useQueryState("q", "");
 	const sortOrd = sort.startsWith("-") ? "desc" : "asc";
 	const sortBy = (sort.startsWith("-") ? sort.substring(1) : sort) as SortBy;
 
@@ -17,7 +18,7 @@ export const BrowsePage = () => {
 	return (
 		<InfiniteFetch
 			key={layout}
-			query={BrowsePage.query(filter, sortBy, sortOrd)}
+			query={BrowsePage.query({ filter, sortBy, sortOrd, search })}
 			layout={LayoutComponent.layout}
 			Header={
 				<BrowseSettings
@@ -38,11 +39,17 @@ export const BrowsePage = () => {
 	);
 };
 
-BrowsePage.query = (
-	filter?: string,
-	sortBy?: SortBy,
-	sortOrd?: SortOrd,
-): QueryIdentifier<Show> => {
+BrowsePage.query = ({
+	filter,
+	sortBy,
+	sortOrd,
+	search,
+}: {
+	filter?: string;
+	sortBy?: SortBy;
+	sortOrd?: SortOrd;
+	search?: string;
+}): QueryIdentifier<Show> => {
 	return {
 		parser: Show,
 		path: ["api", "shows"],
@@ -50,6 +57,7 @@ BrowsePage.query = (
 		params: {
 			sort: sortBy ? `${sortOrd === "desc" ? "-" : ""}${sortBy}` : "name",
 			filter,
+			query: search,
 		},
 	};
 };

front/src/ui/navbar/index.tsx

@@ -4,7 +4,8 @@ import Login from "@material-symbols/svg-400/rounded/login.svg";
 import Logout from "@material-symbols/svg-400/rounded/logout.svg";
 import Search from "@material-symbols/svg-400/rounded/search-fill.svg";
 import Settings from "@material-symbols/svg-400/rounded/settings.svg";
-import type { Ref } from "react";
+import { useGlobalSearchParams, usePathname, useRouter } from "expo-router";
+import { type Ref, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
 	Platform,
@@ -28,7 +29,6 @@ import {
 } from "~/primitives";
 import { useAccount, useAccounts } from "~/providers/account-context";
 import { logout } from "~/ui/login/logic";
-import { useQueryState } from "~/utils";
 import { KyooLongLogo } from "./icon";
 
 export const NavbarTitle = (props: { onLayout?: ViewProps["onLayout"] }) => {
@@ -52,13 +52,31 @@ const SearchBar = ({
 }: TextInputProps & { ref?: Ref<TextInput> }) => {
 	const { theme } = useYoshiki();
 	const { t } = useTranslation();
-	const [query, setQuery] = useQueryState("q", "");
+	const params = useGlobalSearchParams();
+	const [query, setQuery] = useState((params.q as string) ?? "");
+	const path = usePathname();
+	const router = useRouter();
+	const inputRef = useRef<TextInput>(null);
+
+	useEffect(() => {
+		if (path === "/browse") {
+			inputRef.current?.focus();
+			setQuery(params.q as string);
+		} else {
+			inputRef.current?.blur();
+			setQuery("");
+		}
+	}, [path, params.q]);
 
 	return (
 		<Input
-			ref={ref}
-			value={query ?? ""}
-			onChangeText={setQuery}
+			ref={inputRef}
+			value={query}
+			onChangeText={(q) => {
+				setQuery(q);
+				if (path !== "/browse") router.navigate(`/browse?q=${q}`);
+				else router.setParams({ q });
+			}}
 			placeholder={t("navbar.search")}
 			placeholderTextColor={theme.contrast}
 			containerStyle={{
@@ -153,7 +171,7 @@ export const NavbarRight = () => {
 					icon={Search}
 					color={theme.colors.white}
 					as={Link}
-					href={"/search"}
+					href={"/browse"}
 					{...tooltip(t("navbar.search"))}
 				/>
 			)}

front/src/utils.ts

@@ -1,5 +1,5 @@
-import { NavigationContext, useRoute } from "@react-navigation/native";
-import { useCallback, useContext } from "react";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useCallback } from "react";
 import type { Movie, Show } from "~/models";
 
 export function setServerData(_key: string, _val: any) {}
@@ -8,15 +8,15 @@ export function getServerData(key: string) {
 }
 
 export const useQueryState = <S>(key: string, initial: S) => {
-	const route = useRoute();
-	const nav = useContext(NavigationContext);
+	const params = useLocalSearchParams();
+	const router = useRouter();
 
-	const state = ((route.params as any)?.[key] as S) ?? initial;
+	const state = (params[key] as S) ?? initial;
 	const update = useCallback(
 		(val: S | ((old: S) => S)) => {
-			nav!.setParams({ [key]: val });
+			router.setParams({ [key]: val } as any);
 		},
-		[nav, key],
+		[router, key],
 	);
 	return [state, update] as const;
 };