Request history navigator

src-web/hooks/useActiveRequestId.ts

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom';
-import type { RouteParamsRequest } from './useRoutes';
+import type { RouteParamsRequest } from './useAppRoutes';
 
 export function useActiveRequestId(): string | null {
   const { requestId } = useParams<RouteParamsRequest>();

src-web/hooks/useActiveWorkspaceId.ts

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom';
-import type { RouteParamsWorkspace } from './useRoutes';
+import type { RouteParamsWorkspace } from './useAppRoutes';
 
 export function useActiveWorkspaceId(): string | null {
   const { workspaceId } = useParams<RouteParamsWorkspace>();

src-web/hooks/useAppRoutes.ts

@@ -26,7 +26,7 @@ export const routePaths = {
   },
 };
 
-export function useRoutes() {
+export function useAppRoutes() {
   const navigate = useNavigate();
   return useMemo(
     () => ({

src-web/hooks/useCreateRequest.ts

@@ -2,12 +2,12 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useAppRoutes } from './useAppRoutes';
 import { requestsQueryKey, useRequests } from './useRequests';
-import { useRoutes } from './useRoutes';
 
 export function useCreateRequest({ navigateAfter }: { navigateAfter: boolean }) {
   const workspaceId = useActiveWorkspaceId();
-  const routes = useRoutes();
+  const routes = useAppRoutes();
   const requests = useRequests();
   const queryClient = useQueryClient();
 

src-web/hooks/useCreateWorkspace.ts

@@ -1,11 +1,11 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { Workspace } from '../lib/models';
-import { useRoutes } from './useRoutes';
+import { useAppRoutes } from './useAppRoutes';
 import { workspacesQueryKey } from './useWorkspaces';
 
 export function useCreateWorkspace({ navigateAfter }: { navigateAfter: boolean }) {
-  const routes = useRoutes();
+  const routes = useAppRoutes();
   const queryClient = useQueryClient();
   return useMutation<Workspace, unknown, Pick<Workspace, 'name'>>({
     mutationFn: (patch) => {

src-web/hooks/useDeleteWorkspace.tsx

@@ -3,15 +3,15 @@ import { invoke } from '@tauri-apps/api';
 import { InlineCode } from '../components/core/InlineCode';
 import type { Workspace } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useAppRoutes } from './useAppRoutes';
 import { useConfirm } from './useConfirm';
 import { requestsQueryKey } from './useRequests';
-import { useRoutes } from './useRoutes';
 import { workspacesQueryKey } from './useWorkspaces';
 
 export function useDeleteWorkspace(workspace: Workspace | null) {
   const queryClient = useQueryClient();
   const activeWorkspaceId = useActiveWorkspaceId();
-  const routes = useRoutes();
+  const routes = useAppRoutes();
   const confirm = useConfirm();
 
   return useMutation<Workspace | null, string>({

src-web/hooks/useDuplicateRequest.ts

@@ -2,8 +2,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useAppRoutes } from './useAppRoutes';
 import { requestsQueryKey } from './useRequests';
-import { useRoutes } from './useRoutes';
 
 export function useDuplicateRequest({
   id,
@@ -13,7 +13,7 @@ export function useDuplicateRequest({
   navigateAfter: boolean;
 }) {
   const workspaceId = useActiveWorkspaceId();
-  const routes = useRoutes();
+  const routes = useAppRoutes();
   const queryClient = useQueryClient();
   return useMutation<HttpRequest, string>({
     mutationFn: async () => {

src-web/hooks/useRecentRequests.ts

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { createGlobalState, useEffectOnce, useLocalStorage } from 'react-use';
+import { useActiveRequestId } from './useActiveRequestId';
+
+const useHistoryState = createGlobalState<string[]>([]);
+
+export function useRecentRequests() {
+  const [history, setHistory] = useHistoryState();
+  const activeRequestId = useActiveRequestId();
+  const [lsState, setLSState] = useLocalStorage<string[]>('recent_requests', []);
+
+  useEffect(() => {
+    setLSState(history);
+  }, [history, setLSState]);
+
+  useEffectOnce(() => {
+    if (lsState) {
+      setHistory(lsState);
+    }
+  });
+
+  useEffect(() => {
+    setHistory((h: string[]) => {
+      if (activeRequestId === null) return h;
+      const withoutCurrentRequest = h.filter((id) => id !== activeRequestId);
+      return [activeRequestId, ...withoutCurrentRequest];
+    });
+  }, [activeRequestId, setHistory]);
+
+  return history;
+}