Split sort button component

app/components/sort-button/index.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import Select from "react-select";
+
+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;
+};
+
+interface SortButtonProps {
+  defaultOrder: string;
+  onNewOrder: (order: string) => void;
+}
+
+export default function SortButton(props: SortButtonProps) {
+  const [order, setOrder] = useState(props.defaultOrder);
+
+  useEffect(() => setOrder(props.defaultOrder), [props.defaultOrder]);
+
+  // _root.tsx でエラーハンドリングがなされると（例: 404）emotion が追加した style tag が外れて悲惨な見た目になるが、
+  // そう起きないと信じて無視する
+  // https://github.com/remix-run/remix/issues/1136
+  return (
+    <>
+      <div className="col-auto ms-auto text-end ps-0">
+        <Select
+          options={sortOrderOptions}
+          value={getOrderOption(order)}
+          onChange={(e) => {
+            setOrder(order);
+            props.onNewOrder(e!.value);
+          }}
+          components={{ IndicatorSeparator: () => null }}
+          isSearchable={false}
+        />
+      </div>
+
+      {/* Dummy col for end offset */}
+      <div className="col-md-1" />
+    </>
+  );
+}

app/routes/search.pukiwiki/route.tsx

@@ -17,9 +17,9 @@ 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 SortButton from "~/components/sort-button";
 import { StatusIndicator } from "~/components/status-indicator";
 import { ELASTIC_SEARCH_MAX_SEARCH_WINDOW } from "~/utils";
 import { parseSearchParams, setNewOrder, setNewPage } from "~/utils/pukiwiki";
@@ -47,21 +47,6 @@ 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 (
@@ -85,21 +70,7 @@ const createOrderSelect = (params: URLSearchParams, setSearchParams) => {
     });
   };
 
-  return (
-    <>
-      <div className="col-auto ms-auto text-end">
-        <Select
-          options={sortOrderOptions}
-          value={getOrderOption(order)}
-          onChange={(e) => onNewOrder(e!.value)}
-          components={{ IndicatorSeparator: () => null }}
-        />
-      </div>
-
-      {/* Dummy col for end offset */}
-      <div className="col-md-1" />
-    </>
-  );
+  return <SortButton defaultOrder={order} onNewOrder={onNewOrder} />;
 };
 
 const createRequestingStatusIndicator = (params: URLSearchParams) => {

tsconfig.json

@@ -8,6 +8,7 @@
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "target": "ES2022",
+    "module": "ES2022",
     "strict": true,
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,