#245 - use collection store

src/renderer/components/mainWindow/MainTopBar.tsx

@@ -8,7 +8,7 @@ import { SendButton } from './mainTopBar/SendButton';
 import { SaveButton } from './mainTopBar/SaveButton';
 import { cn } from '@/lib/utils';
 import { RendererEventService } from '@/services/event/renderer-event-service';
-import { selectRequest, useRequestActions, useRequestStore } from '@/state/requestStore';
+import { selectRequest, useCollectionActions, useCollectionStore } from '@/state/collectionStore';
 import { useResponseActions } from '@/state/responseStore';
 
 const httpService = HttpService.instance;
@@ -17,10 +17,10 @@ const eventService = RendererEventService.instance;
 export function MainTopBar() {
   const [hasError, setHasError] = useState(false);
 
-  const { updateRequest } = useRequestActions();
+  const { updateRequest } = useCollectionActions();
   const { addResponse } = useResponseActions();
-  const requestEditor = useRequestStore((state) => state.requestEditor);
-  const request = useRequestStore(selectRequest);
+  const requestEditor = useCollectionStore((state) => state.requestEditor);
+  const request = useCollectionStore(selectRequest);
   const selectedHttpMethod = request?.method;
   const url = request?.url;
 

src/renderer/components/mainWindow/bodyTabs/InputTabs/index.tsx

@@ -18,7 +18,7 @@ import {
 } from '@/components/ui/table';
 import { cn } from '@/lib/utils';
 import { TrufosHeader } from 'shim/objects/headers';
-import { selectRequest, useRequestActions, useRequestStore } from '@/state/requestStore';
+import { selectRequest, useCollectionActions, useCollectionStore } from '@/state/collectionStore';
 import { SimpleSelect } from '@/components/mainWindow/bodyTabs/InputTabs/SimpleSelect';
 import { Language } from '@/lib/monaco/language';
 
@@ -36,10 +36,10 @@ export function InputTabs(props: InputTabsProps) {
     deleteHeader,
     clearHeaders,
     updateHeader,
-  } = useRequestActions();
+  } = useCollectionActions();
 
-  const requestBody = useRequestStore((state) => selectRequest(state).body);
-  const headers = useRequestStore((state) => selectRequest(state).headers);
+  const requestBody = useCollectionStore((state) => selectRequest(state).body);
+  const headers = useCollectionStore((state) => selectRequest(state).headers);
   const [language, setLanguage] = useState(Language.JSON);
 
   const changeBodyType = useCallback(

src/renderer/components/mainWindow/bodyTabs/OutputTabs.tsx

@@ -7,7 +7,7 @@ import { useEffect, useRef } from 'react';
 import { ResponseStatus } from '@/components/mainWindow/responseStatus/ResponseStatus';
 import { IpcPushStream } from '@/lib/ipc-stream';
 import { selectResponse, useResponseActions, useResponseStore } from '@/state/responseStore';
-import { selectRequest, useRequestStore } from '@/state/requestStore';
+import { selectRequest, useCollectionStore } from '@/state/collectionStore';
 
 /**
  * Get the mime type from the content type.
@@ -39,7 +39,7 @@ export function OutputTabs(props: OutputTabsProps) {
   const { className } = props;
   const { setResponseEditor } = useResponseActions();
   const editor = useResponseStore((state) => state.editor);
-  const requestId = useRequestStore((state) => selectRequest(state)?.id);
+  const requestId = useCollectionStore((state) => selectRequest(state)?.id);
   const response = useResponseStore((state) => selectResponse(state, requestId));
   const tabsRef = useRef(null);
 

src/renderer/components/mainWindow/responseStatus/ResponseStatus.tsx

@@ -5,11 +5,11 @@ import {
   getSizeText,
 } from '@/components/mainWindow/responseStatus/ResponseStatusFormatter';
 import { selectResponse, useResponseStore } from '@/state/responseStore';
-import { selectRequest, useRequestStore } from '@/state/requestStore';
+import { selectRequest, useCollectionStore } from '@/state/collectionStore';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 export function ResponseStatus() {
-  const requestId = useRequestStore((state) => selectRequest(state)?.id);
+  const requestId = useCollectionStore((state) => selectRequest(state).id);
   const response = useResponseStore((state) => selectResponse(state, requestId));
 
   if (response?.metaInfo == null) {

src/renderer/components/sidebar/SidebarRequestList/ContextMenu/RequestContextMenu.tsx

@@ -1,28 +1,29 @@
 import React from 'react';
 import { CiMenuKebab } from 'react-icons/ci';
-import { useRequestActions } from '@/state/requestStore';
+import { useCollectionActions } from '@/state/collectionStore';
 import { handleMouseEvent } from '@/util/callback-util';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { TrufosRequest } from 'shim/objects/request';
 
 interface RequestContextMenuProps {
-  index: number;
+  requestId: TrufosRequest['id'];
 }
 
-export const RequestContextMenu = ({ index }: RequestContextMenuProps) => {
-  const { deleteRequest } = useRequestActions();
+export const RequestContextMenu = ({ requestId }: RequestContextMenuProps) => {
+  const { deleteRequest } = useCollectionActions();
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
         <CiMenuKebab className="cursor-pointer hover:fill-gray-900" />
       </DropdownMenuTrigger>
       <DropdownMenuContent className={'bg-background'}>
         <DropdownMenuItem
-          onClick={handleMouseEvent(() => deleteRequest(index))}
+          onClick={handleMouseEvent(() => deleteRequest(requestId))}
           className="text-danger"
         >
           Delete

src/renderer/components/sidebar/SidebarRequestList/index.tsx

@@ -1,19 +1,20 @@
+import './index.css';
 import { httpMethodColor } from '@/services/StyleHelper';
 import { RequestBodyType } from 'shim/objects/request';
 import React, { useEffect } from 'react';
 import { IpcPushStream } from '@/lib/ipc-stream';
-import { useRequestActions, useRequestStore } from '@/state/requestStore';
+import { selectRequest, useCollectionActions, useCollectionStore } from '@/state/collectionStore';
 import { handleMouseEvent } from '@/util/callback-util';
-import './index.css';
 import { RequestContextMenu } from '@/components/sidebar/SidebarRequestList/ContextMenu/RequestContextMenu';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 export const SidebarRequestList = () => {
-  const { setSelectedRequest } = useRequestActions();
-  const requestEditor = useRequestStore((state) => state.requestEditor);
-  const requests = useRequestStore((state) => state.requests);
-  const selectedRequestIndex = useRequestStore((state) => state.selectedRequestIndex);
-  const request = requests[selectedRequestIndex];
+  const { setSelectedRequest } = useCollectionActions();
+  const { selectedRequestId } = useCollectionStore();
+  const requestEditor = useCollectionStore((state) => state.requestEditor);
+  const collectionItems = useCollectionStore((state) => state.items);
+  const request = useCollectionStore(selectRequest);
+  const requests = Array.from(collectionItems.values()).filter((item) => item.type === 'request');
 
   useEffect(() => {
     if (requestEditor == null) {
@@ -28,14 +29,10 @@ export const SidebarRequestList = () => {
   }, [request?.id, requestEditor]);
 
   return (
-    <div
-      className="flex flex-1 flex-col overflow-y-auto -mx-6"
-      id="sidebar-request-list"
-      onClick={handleMouseEvent(() => setSelectedRequest(-1))}
-    >
-      {requests.map((request, index) => (
+    <div className="flex flex-1 flex-col overflow-y-auto -mx-6" id="sidebar-request-list">
+      {requests.map((request) => (
         <span
-          key={index}
+          key={request.id}
           className={joinClassNames(
             'sidebar-request-list-item',
             'cursor-pointer',
@@ -46,9 +43,9 @@ export const SidebarRequestList = () => {
             'py-2',
             'px-6',
             'gap-2',
-            selectedRequestIndex === index ? 'selected' : ''
+            selectedRequestId === request.id ? 'selected' : ''
           )}
-          onClick={handleMouseEvent(() => setSelectedRequest(index))}
+          onClick={handleMouseEvent(() => setSelectedRequest(request.id))}
         >
           <div className={joinClassNames('font-bold', httpMethodColor(request.method))}>
             {request.method}
@@ -62,7 +59,7 @@ export const SidebarRequestList = () => {
             </TooltipContent>
           </Tooltip>
           <div className="items-center justify-center flex">
-            <RequestContextMenu index={index} />
+            <RequestContextMenu requestId={request.id} />
           </div>
         </span>
       ))}

src/renderer/components/sidebar/SidebarSearch.tsx

@@ -2,10 +2,10 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { AddIcon } from '@/components/icons';
 import React from 'react';
-import { useRequestActions } from '@/state/requestStore';
+import { useCollectionActions } from '@/state/collectionStore';
 
 export const SidebarSearch = () => {
-  const { addNewRequest } = useRequestActions();
+  const { addNewRequest } = useCollectionActions();
 
   return (
     <div className="flex w-full max-w-sm items-center space-x-[24px]">

src/renderer/index.tsx

@@ -1,15 +1,20 @@
+import { enableMapSet } from 'immer';
+
+enableMapSet();
+
 import '@/styles/tailwind.css';
 import { createRoot } from 'react-dom/client';
 import { App } from '@/App';
 import { RendererEventService } from '@/services/event/renderer-event-service';
-import { useRequestStore } from '@/state/requestStore';
-import { TrufosRequest } from 'shim/objects/request';
+import { useCollectionStore } from '@/state/collectionStore';
 
 import('@/lib/monaco/config'); // lazy load monaco editor to improve startup time
 
-const { initialize } = useRequestStore.getState();
+// set up store
+const { initialize } = useCollectionStore.getState();
 console.info('Initializing renderer process...');
 
+// declare global functions
 declare global {
   function joinClassNames(...classNames: string[]): string;
 }
@@ -21,8 +26,8 @@ document.getElementById('body')?.classList.add('dark');
 const container = document.getElementById('root');
 const root = createRoot(container);
 
+// load collection and render app
 RendererEventService.instance.loadCollection().then((collection) => {
-  const requests = collection.children.filter((c) => c.type === 'request') as TrufosRequest[];
-  initialize({ requests, collectionId: collection.id });
+  initialize(collection);
   root.render(<App />);
 });

src/renderer/state/collectionStore.ts

@@ -8,6 +8,7 @@ import { RendererEventService } from '@/services/event/renderer-event-service';
 import { useActions } from '@/state/util';
 import { TrufosObject } from 'shim/objects';
 import { Collection } from 'shim/objects/collection';
+import { Folder } from '../../shim/objects/folder';
 
 const eventService = RendererEventService.instance;
 eventService.on('before-close', async () => {
@@ -24,13 +25,10 @@ eventService.on('before-close', async () => {
   eventService.emit('ready-to-close');
 });
 
-type CollectionItem = Collection['children'][number];
-type ParentItem = Exclude<TrufosObject, TrufosRequest>;
-
 interface CollectionState {
   collection?: Omit<Collection, 'dirPath' | 'type'>;
 
-  items: Map<CollectionItem['id'], CollectionItem>;
+  items: Map<TrufosObject['id'], TrufosObject>;
 
   /** The ID of the currently selected request */
   selectedRequestId?: TrufosRequest['id'];
@@ -97,8 +95,10 @@ export const useCollectionStore = create<CollectionState & CollectionStateAction
     items: new Map(),
 
     initialize: (collection) => {
-      const items = new Map<CollectionItem['id'], CollectionItem>();
-      const stack: CollectionItem[] = [...collection.children];
+      const items = new Map<TrufosObject['id'], TrufosObject>();
+      items.set(collection.id, collection);
+
+      const stack = [...collection.children];
       while (stack.length > 0) {
         const current = stack.pop()!;
         items.set(current.id, current);
@@ -126,10 +126,11 @@ export const useCollectionStore = create<CollectionState & CollectionStateAction
           mimeType: 'text/plain',
         },
       });
+      console.info('Created new request with ID', request.id);
 
       set((state) => {
         state.items.set(request.id, request);
-        const parent = state.items.get(request.parentId) as ParentItem;
+        const parent = state.items.get(request.parentId) as Collection | Folder;
         parent.children.push(request);
       });
     },