From 871a85d9343cf49646d13dc455c062efadcb959a Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Sat, 12 Feb 2022 11:33:52 +0100
Subject: Beatified code

---
 src/components/RequestList/RequestList.module.scss |   1 -
 src/components/RequestList/RequestList.tsx         | 253 +++++++++++----------
 2 files changed, 139 insertions(+), 115 deletions(-)

(limited to 'src/components/RequestList')

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")}
       >
-        {
-          filteredRequests.length > 0
-            ? (
-              filteredRequests.map(([index, requestResponse]) => {
-                const selected = selectedRequestIndex === index;
-                return (
-                  <ListGroup.Item
-                    as="li"
-                    onClick={() => setSelectedRequestIndex(index)}
-                    key={`request-${index}`}
-                    className={classNames({
-                      'bg-primary': selected,
-                      'text-light': selected,
-                      'border-bottom': true
-                    })}
-                  >
-                    <RequestSummary
-                      requestResponse={requestResponse}
-                      selected={selected}
-                    />
-                  </ListGroup.Item>
-                )
-              })
-            )
-            : (
-              <div className={styles.noRequest}>
-                <p>No requests</p>
-              </div>
-            )
-        }
+        {filteredRequests.length > 0 ? (
+          filteredRequests.map(([index, requestResponse]) => {
+            const selected = selectedRequestIndex === index;
+            return (
+              <ListGroup.Item
+                as="li"
+                onClick={() => setSelectedRequestIndex(index)}
+                key={`request-${index}`}
+                className={classNames({
+                  "bg-primary": selected,
+                  "text-light": selected,
+                  "border-bottom": true,
+                })}
+              >
+                <RequestSummary
+                  requestResponse={requestResponse}
+                  selected={selected}
+                />
+              </ListGroup.Item>
+            );
+          })
+        ) : (
+          <div className={styles.noRequest}>
+            <p>No requests</p>
+          </div>
+        )}
       </ListGroup>
-      <Offcanvas className={
-        classNames({
-          'bg-dark': darkMode
-        })
-      }
-                 show={showFilterOptions}
-                 onHide={() => setShowFilterOptions(false)}>
+      <Offcanvas
+        className={classNames({
+          "bg-dark": darkMode,
+        })}
+        show={showFilterOptions}
+        onHide={() => setShowFilterOptions(false)}
+      >
         <Offcanvas.Header closeButton>
-          <Offcanvas.Title>
-            Filter Options
-          </Offcanvas.Title>
+          <Offcanvas.Title>Filter Options</Offcanvas.Title>
         </Offcanvas.Header>
         <Offcanvas.Body>
           <Form.Group className="mb-4">
             <Form.Label className="fw-bold">Search</Form.Label>
-            <Form.Control type="text" value={search} placeholder="Search..."
-                          onChange={({target}) => setSearch(target.value)}/>
-            <Form.Check className="mt-2" type='switch' label='Regex search' checked={enableRegex} onChange={() => setEnableRegex(!enableRegex)} />
+            <Form.Control
+              type="text"
+              value={search}
+              placeholder="Search..."
+              onChange={({ target }) => setSearch(target.value)}
+            />
+            <Form.Check
+              className="mt-2"
+              type="switch"
+              label="Regex search"
+              checked={enableRegex}
+              onChange={() => setEnableRegex(!enableRegex)}
+            />
           </Form.Group>
           <Form.Group>
             <Form.Label className="fw-bold">Method</Form.Label>
             {Object.entries(methods).map(([method, enabled]) => (
-              <Form.Check type='switch' label={method} checked={enabled} onChange={() => setMethods({...methods, [method]: !enabled})} />
+              <Form.Check
+                type="switch"
+                label={method}
+                checked={enabled}
+                onChange={() => setMethods({ ...methods, [method]: !enabled })}
+              />
             ))}
           </Form.Group>
         </Offcanvas.Body>
       </Offcanvas>
     </div>
-  )
+  );
 }
-- 
cgit v1.2.3