Refactor hooks to be easier to use

src-web/pages/Workspace.tsx

@@ -1,60 +1,40 @@
 import classnames from 'classnames';
-import { useParams } from 'react-router-dom';
 import { useWindowSize } from 'react-use';
-import { HeaderEditor } from '../components/HeaderEditor';
 import { RequestPane } from '../components/RequestPane';
 import { ResponsePane } from '../components/ResponsePane';
 import { Sidebar } from '../components/Sidebar';
 import { HStack } from '../components/Stacks';
 import { WindowDragRegion } from '../components/WindowDragRegion';
-import { useRequests } from '../hooks/useRequest';
-
-type Params = {
-  workspaceId: string;
-  requestId?: string;
-};
+import { useActiveRequest } from '../hooks/useActiveRequest';
 
 export default function Workspace() {
-  const params = useParams<Params>();
-  const workspaceId = params?.workspaceId ?? '';
-  const { data: requests } = useRequests(workspaceId);
-  const request = requests?.find((r) => r.id === params?.requestId);
+  const activeRequest = useActiveRequest();
   const { width } = useWindowSize();
   const isH = width > 900;
 
   return (
     <div className="grid grid-cols-[auto_1fr] grid-rows-1 h-full text-gray-900">
-      <Sidebar
-        requests={requests ?? []}
-        workspaceId={workspaceId}
-        activeRequestId={params?.requestId}
-      />
-      {request && (
-        <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
-          <HStack
-            as={WindowDragRegion}
-            className="px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
-            alignItems="center"
-          >
-            {request.name}
-          </HStack>
-          <div
-            className={classnames(
-              'grid',
-              isH
-                ? 'grid-cols-[1fr_1fr] grid-rows-1'
-                : 'grid-cols-1 grid-rows-[minmax(0,auto)_minmax(0,100%)]',
-            )}
-          >
-            <RequestPane
-              fullHeight={isH}
-              request={request}
-              className={classnames(!isH && 'pr-2 pb-0')}
-            />
-            <ResponsePane requestId={request.id} />
-          </div>
+      <Sidebar />
+      <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
+        <HStack
+          as={WindowDragRegion}
+          className="px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
+          alignItems="center"
+        >
+          {activeRequest?.name}
+        </HStack>
+        <div
+          className={classnames(
+            'grid',
+            isH
+              ? 'grid-cols-[1fr_1fr] grid-rows-1'
+              : 'grid-cols-1 grid-rows-[minmax(0,auto)_minmax(0,100%)]',
+          )}
+        >
+          <RequestPane fullHeight={isH} className={classnames(!isH && 'pr-2 pb-0')} />
+          <ResponsePane />
         </div>
-      )}
+      </div>
     </div>
   );
 }

src-web/pages/Workspaces.tsx

@@ -8,7 +8,7 @@ export default function Workspaces() {
   return (
     <VStack as="ul" className="p-12">
       <Heading>Workspaces</Heading>
-      {workspaces.data?.map((w) => (
+      {workspaces.map((w) => (
         <ButtonLink key={w.id} color="gray" to={`/workspaces/${w.id}`}>
           {w.name}
         </ButtonLink>