fix request scripts

EsperoTech · Jul 1, 2024 · bb61937 · bb61937
1 parent e77d7c1
commit bb61937
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 26 deletions.
diff --git a/client/src/components/collectionRequest/CollectionRequest.module.css b/client/src/components/collectionRequest/CollectionRequest.module.css
@@ -1,5 +1,8 @@
 .request {
   padding: 0 1rem 0 0.5rem;
+  height: 40px;
+  min-height: 40px;
+  max-height: 40px;
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -59,3 +62,12 @@
   margin-left: auto;
   flex-shrink: 0;
 }
+
+.line {
+  width: 1rem;
+  min-width: 1rem;
+  max-width: 1rem;
+  height: 100%;
+  border-right: 1px solid var(--chakra-colors-gray-500);
+  opacity: 0.5;
+}
diff --git a/client/src/components/collectionRequest/CollectionRequest.tsx b/client/src/components/collectionRequest/CollectionRequest.tsx
@@ -175,11 +175,11 @@ const CollectionRequest: FunctionComponent<CollectionRequestProps> = ({
       onKeyDown={(e) => handleOnKeyDown(e, () => selectRequest.current(request.id))}
       role="button"
       tabIndex={0}
-      style={{ paddingLeft: `${depth}rem` }}
     >
+      {Array(depth + 1).fill(<div className={styles.line} />)}
       <span
         className={cn(styles, 'requestMethod', [colorMode])}
-        style={{ ...getMethodColor(request.method), marginLeft: '1.8rem' }}
+        style={{ ...getMethodColor(request.method), marginLeft: '0.8rem' }}
       >
         {methodName}
       </span>

diff --git a/client/src/components/collectionView/MoveableHeader.module.css b/client/src/components/collectionView/MoveableHeader.module.css
@@ -57,8 +57,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: 0.8rem;
-  padding-right: 0.8rem;
+  padding-left: 0.7rem;
+  padding-right: 0.7rem;
 }
 
 .icon {
@@ -84,3 +84,12 @@
   outline: 1px solid var(--chakra-colors-green-500) !important;
   outline-offset: -1px;
 }
+
+.line {
+    width: 1rem;
+    min-width: 1rem;
+    max-width: 1rem;
+    height: 100%;
+    border-right: 1px solid var(--chakra-colors-gray-500);
+    opacity: 0.5;
+}
diff --git a/client/src/components/collectionView/MoveableHeader.tsx b/client/src/components/collectionView/MoveableHeader.tsx
@@ -663,8 +663,9 @@ function MoveableHeader({
       ref={ref}
       data-handler-id={handlerId}
       className={cn(styles, 'header', [...headerVariants, colorMode]) + ' ' + hoverClass}
-      style={{ boxShadow, opacity, paddingLeft: `${collection.depth}rem` }}
+      style={{ boxShadow, opacity }}
     >
+      {Array(collection.depth).fill(<div className={styles.line} />)}
       {iconVariants.includes('open') ? (
         <div
           className={cn(styles, 'icon-wrapper', [colorMode])}

diff --git a/client/src/components/requestPanel/RequestSender.tsx b/client/src/components/requestPanel/RequestSender.tsx
@@ -1,12 +1,17 @@
 import { Input, Select, useColorMode, useDisclosure, useToast } from '@chakra-ui/react';
-import { Dispatch, MutableRefObject, useRef, useState } from 'react';
+import { Dispatch, MutableRefObject, useMemo, useRef, useState } from 'react';
 
 import api from '../../api';
 import Collection from '../../model/Collection';
 import KVRow from '../../model/KVRow';
 import Request, { CurrentRequest } from '../../model/Request';
 import Response from '../../model/Response';
-import { CollectionsAction, CollectionsActionType } from '../../state/collections';
+import {
+  CollectionsAction,
+  CollectionsActionType,
+  findCollection,
+  findRequest,
+} from '../../state/collections';
 import {
   CurrentRequestAction,
   CurrentRequestActionType,
@@ -63,10 +68,10 @@ function RequestSender({
   function getEnv(collectionId: number, envName?: string) {
     if (!envName) return;
 
-    const i = collections.findIndex((c: Collection) => c.id === collectionId);
-    if (i === -1) return;
+    const c = findCollection(collections, collectionId);
+    if (!c) return;
 
-    const envs = collections[i].data?.envs;
+    const envs = c.data?.envs;
     if (!envs) return;
 
     return envs[envName];
@@ -124,10 +129,12 @@ function RequestSender({
     }
   }
 
-  const requestCollection = collections.find(
-    (c) => c.id === currentRequest?.collectionId,
-  );
-  const selectedEnv = requestCollection ? getSelectedEnv(requestCollection) : null;
+  const requestCollection = useMemo(() => {
+    return findCollection(collections, currentRequest?.collectionId);
+  }, [collections, currentRequest?.collectionId]);
+  const selectedEnv = useMemo(() => {
+    return requestCollection ? getSelectedEnv(requestCollection) : null;
+  }, [requestCollection]);
 
   if (collections.length > 0 && newReqForm.collectionId === -1) {
     setNewReqForm({ ...newReqForm, collectionId: collections[0].id });
@@ -145,10 +152,10 @@ function RequestSender({
     return (collections: Collection[], key: string): string => {
       if (!envName) return '';
 
-      const i = collections.findIndex((c: Collection) => c.id === collectionId);
-      if (i === -1) return '';
+      const c = findCollection(collections, collectionId);
+      if (!c) return '';
 
-      const envs = collections[i].data?.envs;
+      const envs = c.data?.envs;
       if (!envs) return '';
 
       const newEnv = envs[envName];
@@ -191,7 +198,7 @@ function RequestSender({
       throw Error('Exec loop detected in request script');
     }
 
-    const collection = collections.find((c) => c.id === request.collectionId);
+    const collection = findCollection(collections, request.collectionId);
 
     const enabledCollectionHeaders = collection?.data?.headers
       ? collection.data.headers.filter((h) => h.isEnabled !== false)
@@ -311,9 +318,7 @@ function RequestSender({
     const get = (key: string): string =>
       getEnvVar(request.collectionId, envName)(collections, key);
     const exec = async (requestId: number, envName?: string) => {
-      const request = collections
-        .flatMap((c) => c.requests)
-        .find((r) => r.id === requestId);
+      const request = findRequest(collections, requestId);
       if (!request) {
         throw Error(`Request with id ${requestId} not found`);
       }
@@ -387,7 +392,7 @@ function RequestSender({
       // TODO: check if this mutates the original request object
       let interpolatedRequest = { ...request };
       if (envName) {
-        const collection = collections.find((c) => c.id === request.collectionId);
+        const collection = findCollection(collections, request.collectionId);
         if (!collection) {
           throw Error('Collection not found for id: ' + request.collectionId);
         }
@@ -435,9 +440,8 @@ function RequestSender({
       data: { ...request.data },
     });
 
-    const i = collections.findIndex((c: Collection) => c.id === request.collectionId);
-    if (i === -1) return;
-    const collection = collections[i];
+    const collection = findCollection(collections, request.collectionId);
+    if (!collection) return;
 
     response = await api.updateCollection(collection);
     if (response.status !== 200)
@@ -449,7 +453,7 @@ function RequestSender({
     envName?: string,
   ): Promise<Response> {
     if (envName) {
-      const collection = collections.find((c) => c.id === request.collectionId);
+      const collection = findCollection(collections, request.collectionId);
       if (!collection) {
         throw Error('Collection not found for id: ' + request.collectionId);
       }