Better recent work/env/req logic

src-tauri/src/main.rs

@@ -299,6 +299,7 @@ async fn cmd_grpc_go(
 
             match maybe_msg {
                 Some(Ok(msg)) => {
+                    println!("Message: {:?}", msg);
                     upsert_grpc_message(
                         &w,
                         &GrpcMessage {
@@ -329,7 +330,11 @@ async fn cmd_grpc_go(
             }
 
             let mut stream = match maybe_stream {
-                Some(Ok(Ok(s))) => s.into_inner(),
+                Some(Ok(Ok(s))) => {
+                    // TODO: Store metadata on... connection? Or in a message
+                    println!("METADATA: {:?}", s.metadata());
+                    s.into_inner()
+                }
                 Some(Ok(Err(e))) => {
                     // TODO: Make into error, and use status
                     println!("Connection status error: {:?}", e);
@@ -829,6 +834,8 @@ async fn cmd_create_http_request(
     name: &str,
     sort_priority: f64,
     folder_id: Option<&str>,
+    method: Option<&str>,
+    body_type: Option<&str>,
     w: Window,
 ) -> Result<HttpRequest, String> {
     upsert_http_request(
@@ -836,8 +843,9 @@ async fn cmd_create_http_request(
         HttpRequest {
             workspace_id: workspace_id.to_string(),
             name: name.to_string(),
-            method: "GET".to_string(),
             folder_id: folder_id.map(|s| s.to_string()),
+            body_type: body_type.map(|s| s.to_string()),
+            method: method.map(|s| s.to_string()).unwrap_or("GET".to_string()),
             sort_priority,
             ..Default::default()
         },

src-web/components/AppRouter.tsx

@@ -1,13 +1,10 @@
 import { createBrowserRouter, Navigate, Outlet, RouterProvider, useParams } from 'react-router-dom';
-import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
-import { useHttpRequests } from '../hooks/useHttpRequests';
-import { useRecentRequests } from '../hooks/useRecentRequests';
 import { DialogProvider } from './DialogContext';
 import { GlobalHooks } from './GlobalHooks';
 import RouteError from './RouteError';
 import Workspace from './Workspace';
-import Workspaces from './Workspaces';
+import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
 
 const router = createBrowserRouter([
   {
@@ -17,17 +14,17 @@ const router = createBrowserRouter([
     children: [
       {
         path: '/',
-        element: <Navigate to={routePaths.workspaces()} replace={true} />,
+        element: <RedirectToLatestWorkspace />,
       },
       {
         path: routePaths.workspaces(),
-        element: <Workspaces />,
+        element: <RedirectToLatestWorkspace />,
       },
       {
         path: routePaths.workspace({
           workspaceId: ':workspaceId',
         }),
-        element: <WorkspaceOrRedirect />,
+        element: <Workspace />,
       },
       {
         path: routePaths.request({
@@ -48,32 +45,6 @@ export function AppRouter() {
   return <RouterProvider router={router} />;
 }
 
-function WorkspaceOrRedirect() {
-  const recentRequests = useRecentRequests();
-  const requests = useHttpRequests();
-  const request = requests.find((r) => r.id === recentRequests[0]);
-  const routes = useAppRoutes();
-
-  // Keep environment if it's in the query params
-  const environmentId = useActiveEnvironmentId() ?? undefined;
-
-  if (request === undefined) {
-    return <Workspace />;
-  }
-
-  const { id: requestId, workspaceId } = request;
-
-  return (
-    <Navigate
-      to={routes.paths.request({
-        workspaceId,
-        environmentId,
-        requestId,
-      })}
-    />
-  );
-}
-
 function RedirectLegacyEnvironmentURLs() {
   const routes = useAppRoutes();
   const {

src-web/components/GraphQLEditor.tsx

@@ -38,7 +38,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
       const operationName = p.operationName;
       return { query, variables, operationName };
     } catch (err) {
-      return { query: 'failed to parse' };
+      return { query: '' };
     }
   }, [defaultValue]);
 

src-web/components/RecentRequestsDropdown.tsx

@@ -54,7 +54,7 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
   const items = useMemo<DropdownItem[]>(() => {
     if (activeWorkspaceId === null) return [];
 
-    const recentRequestItems: DropdownItem[] = [{ type: 'separator', label: 'Recent Requests' }];
+    const recentRequestItems: DropdownItem[] = [];
     for (const id of recentRequestIds) {
       const request = requests.find((r) => r.id === id);
       if (request === undefined) continue;

src-web/components/RedirectToLatestWorkspace.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAppRoutes } from '../hooks/useAppRoutes';
+import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
+import { getRecentRequests } from '../hooks/useRecentRequests';
+import { getRecentWorkspaces } from '../hooks/useRecentWorkspaces';
+import { useWorkspaces } from '../hooks/useWorkspaces';
+
+export function RedirectToLatestWorkspace() {
+  const navigate = useNavigate();
+  const routes = useAppRoutes();
+  const workspaces = useWorkspaces();
+
+  useEffect(() => {
+    (async function () {
+      const workspaceId = (await getRecentWorkspaces())[0] ?? workspaces[0]?.id ?? 'n/a';
+      const environmentId = (await getRecentEnvironments(workspaceId))[0];
+      const requestId = (await getRecentRequests(workspaceId))[0];
+
+      if (workspaceId != null && requestId != null) {
+        navigate(routes.paths.request({ workspaceId, environmentId, requestId }));
+      } else {
+        navigate(routes.paths.workspace({ workspaceId, environmentId }));
+      }
+    })();
+  }, [navigate, routes.paths, workspaces, workspaces.length]);
+
+  return <></>;
+}

src-web/components/SidebarActions.tsx

@@ -4,6 +4,7 @@ import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
 import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { trackEvent } from '../lib/analytics';
+import { BODY_TYPE_GRAPHQL } from '../lib/models';
 import { Dropdown } from './core/Dropdown';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
@@ -44,6 +45,12 @@ export const SidebarActions = memo(function SidebarActions() {
             label: 'GRPC Request',
             onSelect: () => createGrpcRequest.mutate({}),
           },
+          {
+            key: 'create-graphql-request',
+            label: 'GraphQL Request',
+            onSelect: () =>
+              createHttpRequest.mutate({ bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }),
+          },
           {
             key: 'create-folder',
             label: 'Folder',

src-web/components/WorkspaceActionsDropdown.tsx

@@ -7,6 +7,7 @@ import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
 import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
 import { usePrompt } from '../hooks/usePrompt';
 import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
+import { getRecentRequests } from '../hooks/useRecentRequests';
 import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 import type { ButtonProps } from './core/Button';
@@ -63,7 +64,12 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
                   onClick={async () => {
                     hide();
                     const environmentId = (await getRecentEnvironments(w.id))[0];
-                    routes.navigate('workspace', { workspaceId: w.id, environmentId });
+                    const requestId = (await getRecentRequests(w.id))[0];
+                    if (requestId != null) {
+                      routes.navigate('request', { workspaceId: w.id, environmentId, requestId });
+                    } else {
+                      routes.navigate('workspace', { workspaceId: w.id, environmentId });
+                    }
                   }}
                 >
                   This Window
@@ -75,9 +81,16 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
                   onClick={async () => {
                     hide();
                     const environmentId = (await getRecentEnvironments(w.id))[0];
-                    await invoke('cmd_new_window', {
+                    const requestId = (await getRecentRequests(w.id))[0];
-                      url: routes.paths.workspace({ workspaceId: w.id, environmentId }),
+                    const path =
-                    });
+                      requestId != null
+                        ? routes.paths.request({
+                            workspaceId: w.id,
+                            environmentId,
+                            requestId,
+                          })
+                        : routes.paths.workspace({ workspaceId: w.id, environmentId });
+                    await invoke('cmd_new_window', { url: path });
                   }}
                 >
                   New Window

src-web/components/Workspaces.tsx

@@ -1,25 +0,0 @@
-import { Navigate } from 'react-router-dom';
-import { useAppRoutes } from '../hooks/useAppRoutes';
-import { useWorkspaces } from '../hooks/useWorkspaces';
-import { Heading } from './core/Heading';
-import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
-
-export default function Workspaces() {
-  const routes = useAppRoutes();
-  const recentWorkspaceIds = useRecentWorkspaces();
-  const workspaces = useWorkspaces();
-
-  const loading = workspaces.length === 0 && recentWorkspaceIds.length === 0;
-  if (loading) {
-    return null;
-  }
-
-  const workspaceId = recentWorkspaceIds[0] ?? workspaces[0]?.id ?? null;
-
-  if (workspaceId === null) {
-    return <Heading>There are no workspaces</Heading>;
-  }
-
-  // TODO: Somehow get recent environmentId for the workspace in here too
-  return <Navigate to={routes.paths.workspace({ workspaceId })} />;
-}

src-web/hooks/useCreateGrpcRequest.ts

@@ -1,19 +1,16 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import { trackEvent } from '../lib/analytics';
 import type { GrpcRequest } from '../lib/models';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useAppRoutes } from './useAppRoutes';
-import { grpcRequestsQueryKey } from './useGrpcRequests';
 
 export function useCreateGrpcRequest() {
   const workspaceId = useActiveWorkspaceId();
   const activeEnvironmentId = useActiveEnvironmentId();
-  // const activeRequest = useActiveRequest();
   const activeRequest = null;
   const routes = useAppRoutes();
-  const queryClient = useQueryClient();
 
   return useMutation<
     GrpcRequest,
@@ -38,11 +35,6 @@ export function useCreateGrpcRequest() {
     },
     onSettled: () => trackEvent('GrpcRequest', 'Create'),
     onSuccess: async (request) => {
-      queryClient.setQueryData<GrpcRequest[]>(
-        grpcRequestsQueryKey({ workspaceId: request.workspaceId }),
-        (requests) => [...(requests ?? []), request],
-      );
-      // TODO: This should navigate to the new request
       routes.navigate('request', {
         workspaceId: request.workspaceId,
         requestId: request.id,

src-web/hooks/useCreateHttpRequest.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import { trackEvent } from '../lib/analytics';
 import type { HttpRequest } from '../lib/models';
@@ -6,19 +6,17 @@ import { useActiveEnvironmentId } from './useActiveEnvironmentId';
 import { useActiveRequest } from './useActiveRequest';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useAppRoutes } from './useAppRoutes';
-import { httpRequestsQueryKey } from './useHttpRequests';
 
 export function useCreateHttpRequest() {
   const workspaceId = useActiveWorkspaceId();
   const activeEnvironmentId = useActiveEnvironmentId();
   const activeRequest = useActiveRequest();
   const routes = useAppRoutes();
-  const queryClient = useQueryClient();
 
   return useMutation<
     HttpRequest,
     unknown,
-    Partial<Pick<HttpRequest, 'name' | 'sortPriority' | 'folderId'>>
+    Partial<Pick<HttpRequest, 'name' | 'sortPriority' | 'folderId' | 'bodyType' | 'method'>>
   >({
     mutationFn: (patch) => {
       if (workspaceId === null) {
@@ -38,10 +36,6 @@ export function useCreateHttpRequest() {
     },
     onSettled: () => trackEvent('HttpRequest', 'Create'),
     onSuccess: async (request) => {
-      queryClient.setQueryData<HttpRequest[]>(
-        httpRequestsQueryKey({ workspaceId: request.workspaceId }),
-        (requests) => [...(requests ?? []), request],
-      );
       routes.navigate('request', {
         workspaceId: request.workspaceId,
         requestId: request.id,

src-web/hooks/useRecentRequests.ts

@@ -1,30 +1,45 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
-import { createGlobalState, useEffectOnce, useLocalStorage } from 'react-use';
+import { createGlobalState, useEffectOnce } from 'react-use';
+import { getKeyValue, NAMESPACE_GLOBAL } from '../lib/keyValueStore';
 import { useActiveRequestId } from './useActiveRequestId';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useGrpcRequests } from './useGrpcRequests';
+import { useHttpRequest } from './useHttpRequest';
+import { useHttpRequests } from './useHttpRequests';
+import { useKeyValue } from './useKeyValue';
 
 const useHistoryState = createGlobalState<string[]>([]);
 
+const kvKey = (workspaceId: string) => 'recent_requests::' + workspaceId;
+const namespace = NAMESPACE_GLOBAL;
+const defaultValue: string[] = [];
+
 export function useRecentRequests() {
+  const httpRequests = useHttpRequests();
+  const grpcRequests = useGrpcRequests();
+  const requests = useMemo(() => [...httpRequests, ...grpcRequests], [httpRequests, grpcRequests]);
   const activeWorkspaceId = useActiveWorkspaceId();
   const activeRequestId = useActiveRequestId();
+
   const [history, setHistory] = useHistoryState();
-  const [lsState, setLSState] = useLocalStorage<string[]>(
+  const kv = useKeyValue<string[]>({
-    'recent_requests::' + activeWorkspaceId,
+    key: kvKey(activeWorkspaceId ?? 'n/a'),
-    [],
+    namespace,
-  );
+    defaultValue,
+  });
 
   // Load local storage state on initial render
   useEffectOnce(() => {
-    if (lsState) {
+    if (kv.value) {
-      setHistory(lsState);
+      setHistory(kv.value);
     }
   });
 
   // Update local storage state when history changes
   useEffect(() => {
-    setLSState(history);
+    kv.set(history);
-  }, [history, setLSState]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [history]);
 
   // Set history when active request changes
   useEffect(() => {
@@ -35,5 +50,18 @@ export function useRecentRequests() {
     });
   }, [activeRequestId, setHistory]);
 
-  return history;
+  const onlyValidIds = useMemo(
+    () => history.filter((id) => requests.some((r) => r.id === id)),
+    [history, requests],
+  );
+
+  return onlyValidIds;
+}
+
+export async function getRecentRequests(workspaceId: string) {
+  return getKeyValue<string[]>({
+    namespace,
+    key: kvKey(workspaceId),
+    fallback: defaultValue,
+  });
 }

src-web/hooks/useRecentWorkspaces.ts

@@ -1,34 +1,45 @@
 import { useEffect, useMemo } from 'react';
-import { createGlobalState, useEffectOnce, useLocalStorage } from 'react-use';
+import { createGlobalState, useEffectOnce } from 'react-use';
+import { getKeyValue, NAMESPACE_GLOBAL } from '../lib/keyValueStore';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useKeyValue } from './useKeyValue';
 import { useWorkspaces } from './useWorkspaces';
 
 const useHistoryState = createGlobalState<string[]>([]);
 
+const kvKey = () => 'recent_workspaces';
+const namespace = NAMESPACE_GLOBAL;
+const defaultValue: string[] = [];
+
 export function useRecentWorkspaces() {
   const workspaces = useWorkspaces();
   const activeWorkspaceId = useActiveWorkspaceId();
   const [history, setHistory] = useHistoryState();
-  const [lsState, setLSState] = useLocalStorage<string[]>('recent_workspaces', []);
+  const kv = useKeyValue<string[]>({
+    key: kvKey(),
+    namespace,
+    defaultValue,
+  });
 
   // Load local storage state on initial render
   useEffectOnce(() => {
-    if (lsState) {
+    if (kv.value) {
-      setHistory(lsState);
+      setHistory(kv.value);
     }
   });
 
   // Update local storage state when history changes
   useEffect(() => {
-    setLSState(history);
+    kv.set(history);
-  }, [history, setLSState]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [history]);
 
   // Set history when active request changes
   useEffect(() => {
     setHistory((currentHistory: string[]) => {
       if (activeWorkspaceId === null) return currentHistory;
-      const withoutCurrentWorkspace = currentHistory.filter((id) => id !== activeWorkspaceId);
+      const withoutCurrent = currentHistory.filter((id) => id !== activeWorkspaceId);
-      return [activeWorkspaceId, ...withoutCurrentWorkspace];
+      return [activeWorkspaceId, ...withoutCurrent];
     });
   }, [activeWorkspaceId, setHistory]);
 
@@ -39,3 +50,11 @@ export function useRecentWorkspaces() {
 
   return onlyValidIds;
 }
+
+export async function getRecentWorkspaces() {
+  return getKeyValue<string[]>({
+    namespace,
+    key: kvKey(),
+    fallback: defaultValue,
+  });
+}