diff --git a/front/apps/mobile/app/search/index.tsx b/front/apps/mobile/app/search/index.tsx
index ffd70f6f..4c0d1c88 100644
--- a/front/apps/mobile/app/search/index.tsx
+++ b/front/apps/mobile/app/search/index.tsx
@@ -19,7 +19,7 @@
*/
import { SearchPage } from "@kyoo/ui";
-import { Stack } from "expo-router";
+import { Stack, useLocalSearchParams } from "expo-router";
import { useTranslation } from "react-i18next";
import { createParam } from "solito";
import { useRouter } from "solito/router";
@@ -27,11 +27,12 @@ import { useTheme } from "yoshiki/native";
const { useParam } = createParam<{ q?: string }>();
-const Search = ({ route }: { route: any }) => {
+const Search = () => {
const theme = useTheme();
const { back } = useRouter();
const { t } = useTranslation();
const [query, setQuery] = useParam("q");
+ const routeParams = useLocalSearchParams();
return (
<>
@@ -51,7 +52,7 @@ const Search = ({ route }: { route: any }) => {
},
}}
/>
-
+
>
);
};
diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx
index 7200d5f2..f559dbb6 100644
--- a/front/packages/ui/src/fetch-infinite.tsx
+++ b/front/packages/ui/src/fetch-infinite.tsx
@@ -21,13 +21,13 @@
import { Page, QueryIdentifier, useInfiniteFetch } from "@kyoo/models";
import { useBreakpointMap, HR } from "@kyoo/primitives";
import { FlashList } from "@shopify/flash-list";
-import { ComponentType, isValidElement, ReactElement } from "react";
+import { ComponentType, isValidElement, ReactElement, useRef } from "react";
import { EmptyView, ErrorView, Layout, WithLoading } from "./fetch";
export const InfiniteFetch = ({
query,
placeholderCount = 15,
- suspense = false,
+ incremental = false,
horizontal = false,
children,
layout,
@@ -46,7 +46,7 @@ export const InfiniteFetch = ({
i: number,
) => ReactElement | null;
empty?: string | JSX.Element;
- suspense?: boolean;
+ incremental?: boolean;
divider?: boolean | ComponentType;
Header?: ComponentType | ReactElement;
headerProps?: Props
@@ -54,13 +54,14 @@ export const InfiniteFetch = ({
if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
const { numColumns, size } = useBreakpointMap(layout);
- const { items, error, fetchNextPage, hasNextPage, refetch, isRefetching } = useInfiniteFetch(
+ const oldItems = useRef();
+ let { items, error, fetchNextPage, hasNextPage, refetch, isRefetching } = useInfiniteFetch(
query,
{
- suspense: suspense,
useErrorBoundary: false,
},
);
+ if (incremental && items) oldItems.current = items;
if (error) return ;
if (empty && items && items.length === 0) {
@@ -68,6 +69,8 @@ export const InfiniteFetch = ({
return ;
}
+ if (incremental)
+ items ??= oldItems.current;
const count = items ? numColumns - (items.length % numColumns) : placeholderCount;
const placeholders = [...Array(count === 0 ? numColumns : count)].map(
(_, i) => ({ id: `gen${i}`, isLoading: true } as Data),
diff --git a/front/packages/ui/src/fetch-infinite.web.tsx b/front/packages/ui/src/fetch-infinite.web.tsx
index 72bc6262..26f555d2 100644
--- a/front/packages/ui/src/fetch-infinite.web.tsx
+++ b/front/packages/ui/src/fetch-infinite.web.tsx
@@ -103,7 +103,7 @@ const InfiniteScroll = ({
export const InfiniteFetch = ({
query,
- suspense = false,
+ incremental = false,
placeholderCount = 15,
children,
layout,
@@ -114,7 +114,7 @@ export const InfiniteFetch = ({
...props
}: {
query: QueryIdentifier;
- suspense?: boolean;
+ incremental?: boolean;
placeholderCount?: number;
layout: Layout;
horizontal?: boolean;
@@ -128,12 +128,14 @@ export const InfiniteFetch = ({
}): JSX.Element | null => {
if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
+ const oldItems = useRef();
const { items, error, fetchNextPage, hasNextPage, isFetching } = useInfiniteFetch(query, {
- suspense: suspense,
useErrorBoundary: false,
});
const grid = layout.numColumns !== 1;
+ if (incremental && items) oldItems.current = items;
+
if (error) return addHeader(Header, );
if (empty && items && items.length === 0) {
if (typeof empty !== "string") return empty;
@@ -155,7 +157,7 @@ export const InfiniteFetch = ({
Header={Header}
{...props}
>
- {items?.map((item, i) => (
+ {(items ?? oldItems.current)?.map((item, i) => (
{Divider && i !== 0 && (Divider === true ?
: )}
{children({ ...item, isLoading: false } as any, i)}
diff --git a/front/packages/ui/src/navbar/index.tsx b/front/packages/ui/src/navbar/index.tsx
index eaefa430..bf7c3a1a 100644
--- a/front/packages/ui/src/navbar/index.tsx
+++ b/front/packages/ui/src/navbar/index.tsx
@@ -28,7 +28,6 @@ import {
Skeleton,
tooltip,
ts,
- Link,
Menu,
} from "@kyoo/primitives";
import { Platform, TextInput, View, ViewProps } from "react-native";
@@ -72,7 +71,7 @@ const SearchBar = forwardRef<
onChangeText={(q) => {
if (Platform.OS === "web") {
const action = window.location.pathname.startsWith("/search") ? replace : push;
- if (q) action(`/search?q=${q}`, undefined, { shallow: true });
+ if (q) action(`/search?q=${encodeURI(q)}`, undefined, { shallow: true });
else back();
}
}}
diff --git a/front/packages/ui/src/search/index.tsx b/front/packages/ui/src/search/index.tsx
index 0230ae62..ebe08fdd 100644
--- a/front/packages/ui/src/search/index.tsx
+++ b/front/packages/ui/src/search/index.tsx
@@ -19,8 +19,6 @@
*/
import { LibraryItem, LibraryItemP, QueryIdentifier, QueryPage } from "@kyoo/models";
-import { P } from "@kyoo/primitives";
-import { Suspense, useRef, useDeferredValue } from "react";
import { useTranslation } from "react-i18next";
import { ItemGrid } from "../browse/grid";
import { itemMap } from "../browse/index";
@@ -44,7 +42,7 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {