Back to React

src-web/pages/Workspace.tsx

@@ -1,4 +1,5 @@
 import classnames from 'classnames';
+import { useParams } from 'react-router-dom';
 import { useWindowSize } from 'react-use';
 import { RequestPane } from '../components/RequestPane';
 import { ResponsePane } from '../components/ResponsePane';
@@ -12,10 +13,11 @@ type Params = {
   requestId?: string;
 };
 
-export function Workspace({ matches }: { path: string; matches?: Params }) {
-  const workspaceId = matches?.workspaceId ?? '';
+export function Workspace() {
+  const params = useParams<Params>();
+  const workspaceId = params?.workspaceId ?? '';
   const { data: requests } = useRequests(workspaceId);
-  const request = requests?.find((r) => r.id === matches?.requestId);
+  const request = requests?.find((r) => r.id === params?.requestId);
   const { width } = useWindowSize();
   const isH = width > 900;
 
@@ -24,7 +26,7 @@ export function Workspace({ matches }: { path: string; matches?: Params }) {
       <Sidebar
         requests={requests ?? []}
         workspaceId={workspaceId}
-        activeRequestId={matches?.requestId}
+        activeRequestId={params?.requestId}
       />
       {request && (
         <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">

src-web/pages/Workspaces.tsx

@@ -3,14 +3,13 @@ import { Heading } from '../components/Heading';
 import { VStack } from '../components/Stacks';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function Workspaces(props: { path: string }) {
+export function Workspaces() {
   const workspaces = useWorkspaces();
   return (
     <VStack as="ul" className="p-12">
       <Heading>Workspaces</Heading>
       {workspaces.data?.map((w) => (
-        <ButtonLink key={w.id} color="gray" href={`/workspaces/${w.id}`}>
+        <ButtonLink key={w.id} color="gray" to={`/workspaces/${w.id}`}>
           {w.name}
         </ButtonLink>
       ))}