Refactor hooks to be easier to use

src-web/components/ResponsePane.tsx

@@ -1,6 +1,8 @@
 import classnames from 'classnames';
 import { memo, useEffect, useMemo, useState } from 'react';
-import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses';
+import { useDeleteResponses } from '../hooks/useDeleteResponses';
+import { useDeleteResponse } from '../hooks/useResponseDelete';
+import { useResponses } from '../hooks/useResponses';
 import { tryFormatJson } from '../lib/formatters';
 import { Dropdown } from './Dropdown';
 import { Editor } from './Editor';
@@ -11,23 +13,22 @@ import { StatusColor } from './StatusColor';
 import { Webview } from './Webview';
 
 interface Props {
-  requestId: string;
   className?: string;
 }
 
-export const ResponsePane = memo(function ResponsePane({ requestId, className }: Props) {
+export const ResponsePane = memo(function ResponsePane({ className }: Props) {
   const [activeResponseId, setActiveResponseId] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty');
-  const responses = useResponses(requestId);
+  const responses = useResponses();
   const response = activeResponseId
-    ? responses.data.find((r) => r.id === activeResponseId)
-    : responses.data[responses.data.length - 1];
+    ? responses.find((r) => r.id === activeResponseId)
+    : responses[responses.length - 1];
   const deleteResponse = useDeleteResponse(response);
-  const deleteAllResponses = useDeleteAllResponses(response?.requestId);
+  const deleteAllResponses = useDeleteResponses(response?.requestId);
 
   useEffect(() => {
     setActiveResponseId(null);
-  }, [responses.data?.length]);
+  }, [responses.length]);
 
   const contentType = useMemo(
     () =>
@@ -35,10 +36,6 @@ export const ResponsePane = memo(function ResponsePane({ requestId, className }:
     [response],
   );
 
-  if (!response) {
-    return null;
-  }
-
   return (
     <div className="p-2">
       <div
@@ -51,56 +48,56 @@ export const ResponsePane = memo(function ResponsePane({ requestId, className }:
       >
         {/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}
         {/*</HStack>*/}
+        <HStack
+          alignItems="center"
+          className="italic text-gray-700 text-sm w-full mb-1 flex-shrink-0 pl-2"
+        >
+          {response && response.status > 0 && (
+            <div className="whitespace-nowrap">
+              <StatusColor statusCode={response.status}>
+                {response.status}
+                {response.statusReason && ` ${response.statusReason}`}
+              </StatusColor>
+              &nbsp;&bull;&nbsp;
+              {response.elapsed}ms &nbsp;&bull;&nbsp;
+              {Math.round(response.body.length / 1000)} KB
+            </div>
+          )}
+
+          <HStack alignItems="center" className="ml-auto h-8">
+            <IconButton
+              icon={viewMode === 'pretty' ? 'eye' : 'code'}
+              size="sm"
+              className="ml-1"
+              onClick={() => setViewMode((m) => (m === 'pretty' ? 'raw' : 'pretty'))}
+            />
+            <Dropdown
+              items={[
+                {
+                  label: 'Clear Response',
+                  onSelect: deleteResponse.mutate,
+                  disabled: responses.length === 0,
+                },
+                {
+                  label: 'Clear All Responses',
+                  onSelect: deleteAllResponses.mutate,
+                  disabled: responses.length === 0,
+                },
+                '-----',
+                ...responses.slice(0, 10).map((r) => ({
+                  label: r.status + ' - ' + r.elapsed + ' ms',
+                  leftSlot: response?.id === r.id ? <Icon icon="check" /> : <></>,
+                  onSelect: () => setActiveResponseId(r.id),
+                })),
+              ]}
+            >
+              <IconButton icon="clock" className="ml-auto" size="sm" />
+            </Dropdown>
+          </HStack>
+        </HStack>
+
         {response && (
           <>
-            <HStack
-              alignItems="center"
-              className="italic text-gray-700 text-sm w-full mb-1 flex-shrink-0 pl-2"
-            >
-              {response.status > 0 && (
-                <div className="whitespace-nowrap">
-                  <StatusColor statusCode={response.status}>
-                    {response.status}
-                    {response.statusReason && ` ${response.statusReason}`}
-                  </StatusColor>
-                  &nbsp;&bull;&nbsp;
-                  {response.elapsed}ms &nbsp;&bull;&nbsp;
-                  {Math.round(response.body.length / 1000)} KB
-                </div>
-              )}
-
-              <HStack alignItems="center" className="ml-auto h-8">
-                <IconButton
-                  icon={viewMode === 'pretty' ? 'eye' : 'code'}
-                  size="sm"
-                  className="ml-1"
-                  onClick={() => setViewMode((m) => (m === 'pretty' ? 'raw' : 'pretty'))}
-                />
-                <Dropdown
-                  items={[
-                    {
-                      label: 'Clear Response',
-                      onSelect: deleteResponse.mutate,
-                      disabled: responses.data.length === 0,
-                    },
-                    {
-                      label: 'Clear All Responses',
-                      onSelect: deleteAllResponses.mutate,
-                      disabled: responses.data.length === 0,
-                    },
-                    '-----',
-                    ...responses.data.slice(0, 10).map((r) => ({
-                      label: r.status + ' - ' + r.elapsed + ' ms',
-                      leftSlot: response?.id === r.id ? <Icon icon="check" /> : <></>,
-                      onSelect: () => setActiveResponseId(r.id),
-                    })),
-                  ]}
-                >
-                  <IconButton icon="clock" className="ml-auto" size="sm" />
-                </Dropdown>
-              </HStack>
-            </HStack>
-
             {response?.error ? (
               <div className="p-1">
                 <div className="text-white bg-red-500 px-3 py-2 rounded">{response.error}</div>