From 8d752cafe9cc3e68f0ca31000664bfb94b29ba8a Mon Sep 17 00:00:00 2001 From: nonylene Date: Tue, 2 Jan 2024 04:23:55 +0900 Subject: [PATCH] Sort selection Close #3 --- app/components/status-indicator/index.tsx | 7 +- app/routes/search.pukiwiki/route.tsx | 83 +++-- package-lock.json | 360 +++++++++++++++++++--- package.json | 3 +- 4 files changed, 381 insertions(+), 72 deletions(-) diff --git a/app/components/status-indicator/index.tsx b/app/components/status-indicator/index.tsx index 9d32100..190a4f4 100644 --- a/app/components/status-indicator/index.tsx +++ b/app/components/status-indicator/index.tsx @@ -20,13 +20,14 @@ export function StatusIndicator(props: StatusIndicatorProps) { text = `${pageStr}${props.totalCount!} hits`; } return ( -
+

 {text}  diff --git a/app/routes/search.pukiwiki/route.tsx b/app/routes/search.pukiwiki/route.tsx index 3e25c71..70e9ff5 100644 --- a/app/routes/search.pukiwiki/route.tsx +++ b/app/routes/search.pukiwiki/route.tsx @@ -17,11 +17,12 @@ import { useSearchParams, } from "@remix-run/react"; import { Suspense } from "react"; +import Select from "react-select"; import HeinekenError from "~/components/heineken-error"; import { Pager, links as pagerLinks } from "~/components/pager"; import { StatusIndicator } from "~/components/status-indicator"; import { ELASTIC_SEARCH_MAX_SEARCH_WINDOW } from "~/utils"; -import { parseSearchParams, setNewPage } from "~/utils/pukiwiki"; +import { parseSearchParams, setNewOrder, setNewPage } from "~/utils/pukiwiki"; export const meta: MetaFunction = () => { return [{ title: "PukiWiki - Heineken" }]; @@ -46,6 +47,21 @@ export const loader = async ({ request }: LoaderFunctionArgs) => { return defer({ pageResult, pukiwikiBaseURL }); }; +const sortOrderOptions = [ + { value: "s", label: "Score" }, + { value: "m", label: "Modified" }, + { value: "ta", label: "Title asc" }, + { value: "td", label: "Title desc" }, +]; + +const getOrderOption = (val: string) => { + const option = sortOrderOptions.find(({ value }) => value === val); + if (option === undefined) { + throw Error(`value ${val} is not found on sortOrderOptions`); + } + return option; +}; + const createSearchBox = (params: URLSearchParams) => { const { query, order, advanced } = parseSearchParams(params); return ( @@ -57,6 +73,34 @@ const createSearchBox = (params: URLSearchParams) => { ); }; +// @ts-expect-error SetURLSearchParams type is not exported +const createOrderSelect = (params: URLSearchParams, setSearchParams) => { + const { order } = parseSearchParams(params); + + const onNewOrder = (order: string) => { + // @ts-expect-error SetURLSearchParams type is not exported + setSearchParams((prev) => { + setNewOrder(prev, order); + return prev; + }); + }; + + return ( + <> +

+