Use router to change the URL when the user selects a fill

sdss · Sep 22, 2024 · 6e27297 · 6e27297
1 parent cd17a34
commit 6e27297
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/app/fills/[[...pk]]/header.tsx b/app/fills/[[...pk]]/header.tsx
@@ -6,17 +6,19 @@
  */
 
 import React from 'react';
+import { useRouter } from 'next/navigation';
 import { Box, Group, Loader, NativeSelect, Title } from '@mantine/core';
 import { FillListType } from './types';
 
 export function Header(props: {
   pk: number | null;
   records: FillListType;
-  setPK: (pk: number) => void;
   status: boolean | null;
 }) {
   const [data, setData] = React.useState<{ label: string; value: string }[]>([]);
 
+  const router = useRouter();
+
   React.useEffect(() => {
     if (props.records.size === 0) {
       return;
@@ -45,7 +47,7 @@ export function Header(props: {
       <NativeSelect
         value={(props.pk || 0).toString()}
         onChange={(event) => {
-          props.setPK(parseInt(event.currentTarget.value, 10));
+          router.push(`/fills/${parseInt(event.currentTarget.value, 10)}`);
         }}
         data={data}
         h={36}

diff --git a/app/fills/[[...pk]]/page.tsx b/app/fills/[[...pk]]/page.tsx
@@ -9,6 +9,7 @@
 
 import React from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { Box, Container, rem, SimpleGrid, Skeleton, Stack, Title } from '@mantine/core';
 import { fetchFillData, fetchFillList } from './fetchData';
 import { Header } from './header';
@@ -62,6 +63,8 @@ export default function FillPage({ params }: { params: { pk: string[] } }) {
 
   const [notFound, setNotFound] = React.useState<boolean>(false);
 
+  const router = useRouter();
+
   React.useEffect(() => {
     if (pks.length === 0) {
       fetchFillList().then((response) => {
@@ -72,7 +75,7 @@ export default function FillPage({ params }: { params: { pk: string[] } }) {
     }
 
     if (!params.pk || params.pk.length === 0) {
-      setPK(pks[pks.length - 1]);
+      router.push(`/fills/${pks[pks.length - 1]}`);
       return;
     }
 
@@ -129,7 +132,6 @@ export default function FillPage({ params }: { params: { pk: string[] } }) {
         <Header
           pk={pk}
           records={records}
-          setPK={setPK}
           status={!fillData ? null : !fillData.failed && !fillData.aborted}
         />
         {!fillData ? <DataSkeleton /> : <FillData data={fillData} />}