Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix search page

Browse Source
This commit is contained in:
Scott Merchant 2024-06-09 14:14:07 +09:30 committed by Zoe Roux
parent 881188c689
commit 0b3f70e48e
No known key found for this signature in database
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/packages/ui/src/browse/index.tsx
View File

@ -60,25 +60,28 @@ export const itemMap = (
item.kind === "show" ? item.watchStatus?.unseenEpisodesCount ?? item.episodesCount! : null,
});
export const createFilterString = (mediaType: MediaType): string | undefined => {
return mediaType !== MediaTypeAll ? `kind eq ${mediaType.key}` : undefined;
}
const query = (
mediaType: MediaType,
sortKey?: SortBy,
sortOrd?: SortOrd,
): QueryIdentifier<LibraryItem> => {
const filter = mediaType !== MediaTypeAll ? `kind eq ${mediaType.key}` : undefined;
return {
parser: LibraryItemP,
path: ["items"],
infinite: true,
params: {
sortBy: sortKey ? `${sortKey}:${sortOrd ?? "asc"}` : "name:asc",
filter,
filter: createFilterString(mediaType),
fields: ["watchStatus", "episodesCount"],
},
};
};
const getMediaTypeFromParam = (mediaTypeParam?: string): MediaType => {
export const getMediaTypeFromParam = (mediaTypeParam?: string): MediaType => {
const mediaTypeKey = (mediaTypeParam as MediaTypeKey) || MediaTypeKey.All;
return MediaTypes.find((t) => t.key === mediaTypeKey) ?? MediaTypeAll;
};

27
front/packages/ui/src/search/index.tsx
View File

@ -23,17 +23,18 @@ import { usePageStyle } from "@kyoo/primitives";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { createParam } from "solito";
import { itemMap } from "../browse";
import {createFilterString, getMediaTypeFromParam, itemMap} from "../browse";
import { ItemGrid } from "../browse/grid";
import { BrowseSettings } from "../browse/header";
import { ItemList } from "../browse/list";
import { Layout, SearchSort, SortOrd } from "../browse/types";
import {Layout, type MediaType, MediaTypes, SearchSort, SortOrd} from "../browse/types";
import { InfiniteFetch } from "../fetch-infinite";
import { DefaultLayout } from "../layout";
const { useParam } = createParam<{ sortBy?: string }>();
const { useParam } = createParam<{ sortBy?: string, mediaType?: string }>();
const query = (
mediaType: MediaType,
query?: string,
sortKey?: SearchSort,
sortOrd?: SortOrd,
@ -43,6 +44,7 @@ const query = (
infinite: true,
params: {
q: query,
filter: createFilterString(mediaType),
sortBy:
sortKey && sortKey !== SearchSort.Relevance ? `${sortKey}:${sortOrd ?? "asc"}` : undefined,
},
@ -52,15 +54,18 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
const pageStyle = usePageStyle();
const { t } = useTranslation();
const [sort, setSort] = useParam("sortBy");
const [mediaTypeParam, setMediaTypeParam] = useParam("mediaType");
const sortKey = (sort?.split(":")[0] as SearchSort) || SearchSort.Relevance;
const sortOrd = (sort?.split(":")[1] as SortOrd) || SortOrd.Asc;
const [layout, setLayout] = useState(Layout.Grid);
const mediaType = getMediaTypeFromParam(mediaTypeParam);
console.log("search: mediaType", mediaType);
const LayoutComponent = layout === Layout.Grid ? ItemGrid : ItemList;
return (
<InfiniteFetch
query={query(q, sortKey, sortOrd)}
query={query(mediaType, q, sortKey, sortOrd)}
layout={LayoutComponent.layout}
empty={t("search.empty")}
incremental
@ -72,6 +77,11 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
setSort={(key, ord) => {
setSort(`${key}:${ord}`);
}}
mediaType={mediaType}
availableMediaTypes={MediaTypes}
setMediaType={(mediaType) => {
setMediaTypeParam(mediaType.key);
}}
layout={layout}
setLayout={setLayout}
/>
@ -84,6 +94,9 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
};
SearchPage.getLayout = DefaultLayout;
SearchPage.getFetchUrls = ({ q, sortBy }) => [
query(q, sortBy?.split("-")[0] as SearchSort, sortBy?.split("-")[1] as SortOrd),
];
SearchPage.getFetchUrls = ({ q, sortBy, mediaType }) => {
const mediaTypeObj = getMediaTypeFromParam(mediaType);
return [
query(mediaTypeObj, q, sortBy?.split("-")[0] as SearchSort, sortBy?.split("-")[1] as SortOrd),
];
}