2 files changed, 139 insertions, 115 deletions

diff --git a/src/components/RequestList/RequestList.module.scss b/src/components/RequestList/RequestList.module.scss
index 47f36c8..8022978 100644
--- a/src/components/RequestList/RequestList.module.scss
+++ b/src/components/RequestList/RequestList.module.scss
@@ -16,5 +16,4 @@
   overflow-y: hidden;
   display: flex;
   flex-flow: column nowrap;
-
 }
diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
index 95c5b75..6980738 100644
--- a/src/components/RequestList/RequestList.tsx
+++ b/src/components/RequestList/RequestList.tsx
@@ -11,26 +11,29 @@ import classNames from "classnames";
 import styles from "./RequestList.module.scss";
 import RequestSummary from "../RequestSummary/RequestSummary";
 import * as React from "react";
-import {useCallback, useContext, useMemo, useState} from "react";
-import {Method, RequestResponse} from "../../hooks/useRequests";
-import {DarkModeContext} from "../../contexts/DarkMode";
-import {Filter} from "../Icons/Filter";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { Method, RequestResponse } from "../../hooks/useRequests";
+import { DarkModeContext } from "../../contexts/DarkMode";
+import { Filter } from "../Icons/Filter";
 
 interface ListProps {
-  requests: RequestResponse[],
-  selectedRequestIndex: number | null
-  setSelectedRequestIndex: (index: number) => void
+  requests: RequestResponse[];
+  selectedRequestIndex: number | null;
+  setSelectedRequestIndex: (index: number) => void;
 }
 
 type EnabledMethods = {
-  [method in Method]: boolean
-}
-
-
-export default function RequestList({ requests, selectedRequestIndex, setSelectedRequestIndex }: ListProps) {
-  const {darkMode} = useContext(DarkModeContext)
+  [method in Method]: boolean;
+};
+
+export default function RequestList({
+  requests,
+  selectedRequestIndex,
+  setSelectedRequestIndex,
+}: ListProps) {
+  const { darkMode } = useContext(DarkModeContext);
   const [showFilterOptions, setShowFilterOptions] = useState(false);
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState("");
   const [enableRegex, setEnableRegex] = useState(false);
 
   const [methods, setMethods] = useState<EnabledMethods>({
@@ -49,7 +52,7 @@ export default function RequestList({ requests, selectedRequestIndex, setSelecte
       PUT: enabled,
       PATCH: enabled,
       DELETE: enabled,
-    }
+    };
 
     if (!enabled) {
       methods[method] = true;
@@ -58,146 +61,168 @@ export default function RequestList({ requests, selectedRequestIndex, setSelecte
     setMethods(methods);
   }, []);
 
-  const enabledMethods: Method[] = useMemo(() => (Object
-      .entries(methods)
-      .filter(([method, enabled]) => enabled)
-      .map(([method]) => method)
-  ), [methods]);
+  const enabledMethods: Method[] = useMemo(
+    () =>
+      Object.entries(methods)
+        .filter(([method, enabled]) => enabled)
+        .map(([method]) => method),
+    [methods]
+  );
 
   const methodLabel = useMemo(() => {
     if (enabledMethods.length == 1) {
-      return enabledMethods[0]
+      return enabledMethods[0];
     } else if (enabledMethods.length === 5) {
-      return 'ANY'
+      return "ANY";
     } else {
-      return 'CUSTOM'
+      return "CUSTOM";
     }
   }, [enabledMethods]);
 
-
-
   const filteredRequests = useMemo(() => {
-    let searchRegex = new RegExp('');
+    let searchRegex = new RegExp("");
     try {
       searchRegex = new RegExp(
-        enableRegex
-          ? search
-          : search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'),
-        'i');
-    } catch {
-
-    }
+        enableRegex ? search : search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
+        "i"
+      );
+    } catch {}
 
     return (
-      (
-        requests
-          .map((request, index) => [index, request])
-          .reverse() as [number, RequestResponse][]
-      )
-        .filter(([index, request]) => (
-          enabledMethods.length > 0 === null || enabledMethods.includes(request.request.method)
-        ))
-        .filter(([index, request]) => (
-          search === '' || searchRegex.test(`${request.request.method} ${request.request.path}`)
-        ))
+      requests.map((request, index) => [index, request]).reverse() as [
+        number,
+        RequestResponse
+      ][]
     )
-  }, [requests, search, enabledMethods, enableRegex])
+      .filter(
+        ([index, request]) =>
+          enabledMethods.length > 0 === null ||
+          enabledMethods.includes(request.request.method)
+      )
+      .filter(
+        ([index, request]) =>
+          search === "" ||
+          searchRegex.test(`${request.request.method} ${request.request.path}`)
+      );
+  }, [requests, search, enabledMethods, enableRegex]);
 
   return (
-    <div className={classNames(styles.listContainer, 'd-flex')}>
-      <ListGroup variant="flush"
-                 className={classNames('flex-grow-0', 'border-bottom')}>
+    <div className={classNames(styles.listContainer, "d-flex")}>
+      <ListGroup
+        variant="flush"
+        className={classNames("flex-grow-0", "border-bottom")}
+      >
         <ListGroup.Item>
           <InputGroup>
             <DropdownButton variant="primary" title={methodLabel}>
-              <Dropdown.Item
-                onClick={() => toggleMethods(null)}>ANY</Dropdown.Item>
-              <Dropdown.Divider/>
-              <Dropdown.Item
-                onClick={() => toggleMethods('GET')}>GET</Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => toggleMethods('POST')}>POST</Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => toggleMethods('PUT')}>PUT</Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => toggleMethods('PATCH')}>PATCH</Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => toggleMethods('DELETE')}>DELETE</Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods(null)}>
+                ANY
+              </Dropdown.Item>
+              <Dropdown.Divider />
+              <Dropdown.Item onClick={() => toggleMethods("GET")}>
+                GET
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods("POST")}>
+                POST
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods("PUT")}>
+                PUT
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods("PATCH")}>
+                PATCH
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods("DELETE")}>
+                DELETE
+              </Dropdown.Item>
             </DropdownButton>
-            <Form.Control type="text" className='border-secondary'
-                          value={search} placeholder="Search..."
-                          onChange={({target}) => setSearch(target.value)}/>
+            <Form.Control
+              type="text"
+              className="border-secondary"
+              value={search}
+              placeholder="Search..."
+              onChange={({ target }) => setSearch(target.value)}
+            />
             <Button
-              variant={showFilterOptions ? 'secondary' : 'outline-secondary'}
-              onClick={() => setShowFilterOptions(true)}>
-              <Filter/>
+              variant={showFilterOptions ? "secondary" : "outline-secondary"}
+              onClick={() => setShowFilterOptions(true)}
+            >
+              <Filter />
             </Button>
           </InputGroup>
         </ListGroup.Item>
       </ListGroup>
       <ListGroup
-        variant='flush'
+        variant="flush"
         as="ul"
-        className={classNames(styles.list, 'flex-grow-1')}
+        className={classNames(styles.list, "flex-grow-1")}