Download Active Response (#49)

This PR prompts you to save un-previewable file types and adds an option
to save to the response history.

src-web/hooks/usePinnedHttpResponse.ts

@@ -5,7 +5,7 @@ import { useLatestHttpResponse } from './useLatestHttpResponse';
 
 export function usePinnedHttpResponse(activeRequest: HttpRequest) {
   const latestResponse = useLatestHttpResponse(activeRequest.id);
-  const { set: setPinnedResponseId, value: pinnedResponseId } = useKeyValue<string | null>({
+  const { set, value: pinnedResponseId } = useKeyValue<string | null>({
     // Key on latest response instead of activeRequest because responses change out of band of active request
     key: ['pinned_http_response_id', latestResponse?.id ?? 'n/a'],
     fallback: null,
@@ -15,5 +15,13 @@ export function usePinnedHttpResponse(activeRequest: HttpRequest) {
   const activeResponse: HttpResponse | null =
     responses.find((r) => r.id === pinnedResponseId) ?? latestResponse;
 
+  const setPinnedResponseId = async (id: string) => {
+    if (pinnedResponseId === id) {
+      await set(null);
+    } else {
+      await set(id);
+    }
+  };
+
   return { activeResponse, setPinnedResponseId, pinnedResponseId, responses } as const;
 }

src-web/hooks/useSaveResponse.tsx

@@ -0,0 +1,37 @@
+import { useMutation } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api/core';
+import { save } from '@tauri-apps/plugin-dialog';
+import mime from 'mime';
+import slugify from 'slugify';
+import { InlineCode } from '../components/core/InlineCode';
+import { useToast } from '../components/ToastContext';
+import type { HttpResponse } from '../lib/models';
+import { getContentTypeHeader } from '../lib/models';
+import { getHttpRequest } from '../lib/store';
+
+export function useSaveResponse(response: HttpResponse) {
+  const toast = useToast();
+
+  return useMutation({
+    mutationFn: async () => {
+      const request = await getHttpRequest(response.requestId);
+      if (request == null) return null;
+
+      const contentType = getContentTypeHeader(response.headers) ?? 'unknown';
+      const ext = mime.getExtension(contentType);
+      const slug = slugify(request.name, { lower: true });
+      const filepath = await save({
+        defaultPath: ext ? `${slug}.${ext}` : slug,
+        title: 'Save Response',
+      });
+      await invoke('cmd_save_response', { responseId: response.id, filepath });
+      toast.show({
+        message: (
+          <>
+            Response saved to <InlineCode>{filepath}</InlineCode>
+          </>
+        ),
+      });
+    },
+  });
+}