Added search and filter options

8 files changed, 257 insertions, 64 deletions

diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
index 088a4f6..61e399e 100644
--- a/src/components/App/App.module.scss
+++ b/src/components/App/App.module.scss
@@ -16,7 +16,6 @@
 .sidebar {
   width: calc((6 / 16) * 100%);
   height: 100%;
-  overflow-y: auto;
 }
 
 .details {
@@ -24,11 +23,3 @@
   overflow: hidden;
   height: 100%;
 }
-
-.noRequest, .noRequestSelected {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 55ab5b4..e08c84f 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -6,8 +6,7 @@ import useRequests, {
 } from "../../hooks/useRequests";
 
 import styles from './App.module.scss';
-import Details from "../Details/Details";
-import RequestSummary from "../RequestSummary/RequestSummary";
+import RequestDetails from "../RequestDetails/RequestDetails";
 import {getHost} from "../../utils";
 import {Container, ListGroup, Nav, Navbar, NavDropdown} from "react-bootstrap";
 import classNames from "classnames";
@@ -16,6 +15,7 @@ import {Sun} from "../Icons/Sun";
 import {Moon} from "../Icons/Moon";
 import Trash from "../Icons/Trash";
 import {DarkModeContext} from "../../contexts/DarkMode";
+import RequestList from "../RequestList/RequestList";
 
 interface Config {
   url: string
@@ -143,53 +143,11 @@ export default function App() {
       </Navbar>
 
       <main className={styles.main}>
-        <ListGroup
-          variant='flush'
-          as="ul"
-          className={classNames("border-end", styles.sidebar)}
-        >
-          {
-            calls.length > 0
-              ? (
-                calls.slice(0).reverse().map((requestResponse, index) => {
-                  const selected = selectedRequestIndex === calls.length - index - 1;
-                  return (
-                    <ListGroup.Item
-                      as="li"
-                      onClick={() => setSelectedRequestIndex(calls.length - index - 1)}
-                      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>
+        <div className={classNames("border-end", styles.sidebar)}>
+          <RequestList requests={calls} selectedRequestIndex={selectedRequestIndex} setSelectedRequestIndex={setSelectedRequestIndex}/>
+        </div>
         <div className={styles.details}>
-          {
-            selectedRequest !== null
-              ? (
-                <Details requestResponse={selectedRequest} />
-              ) : (
-                <div className={styles.noRequestSelected}>
-                  <p>Select a request to inspect it</p>
-                </div>
-              )
-          }
+          <RequestDetails requestResponse={selectedRequest} />
         </div>
       </main>
     </div>
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 3d747b2..c7a5f58 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -7,7 +7,6 @@ import {Button, Col, Container, Row} from "react-bootstrap";
 import {DarkModeContext} from "../../contexts/DarkMode";
 
 function getHeader(headers: Headers, key: string, unit?: string): string | null {
-  console.log(headers, key)
   try {
     const [_, value] = headers.find(([headerKey]) => headerKey.toLowerCase() === key.toLowerCase())
     return unit !== undefined
diff --git a/src/components/Icons/Filter.tsx b/src/components/Icons/Filter.tsx
new file mode 100644
index 0000000..a14183d
--- /dev/null
+++ b/src/components/Icons/Filter.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+export function Filter() {
+  return <svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" fill="currentColor" className="bi bi-filter"
+              viewBox="0 0 16 16">
+    <path
+      d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+  </svg>;
+}
diff --git a/src/components/Details/Details.module.scss b/src/components/RequestDetails/RequestDetails.module.scss
index 146b5d8..8a872f7 100644
--- a/src/components/Details/Details.module.scss
+++ b/src/components/RequestDetails/RequestDetails.module.scss
@@ -16,3 +16,11 @@
   flex-shrink: 1;
   overflow-y: auto;
 }
+
+.noRequestSelected {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/Details/Details.tsx b/src/components/RequestDetails/RequestDetails.tsx
index 96f0790..34e572c 100644
--- a/src/components/Details/Details.tsx
+++ b/src/components/RequestDetails/RequestDetails.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {useCallback, useMemo, useState} from "react";
-import {RequestResponse, Headers} from "~hooks/useRequests";
-import styles from "./Details.module.scss";
+import {RequestResponse, Headers} from "../../hooks/useRequests";
+import styles from "./RequestDetails.module.scss";
 import RequestSummary from "../RequestSummary/RequestSummary";
 import Content from "../Content/Content";
 import {getHost} from "../../utils";
@@ -62,16 +62,16 @@ function Headers({ title, headers }: HeadersProps) {
 }
 
 interface DetailsProps {
-  requestResponse: RequestResponse
+  requestResponse: RequestResponse | null
 }
 
 type Tab = 'headers' | 'request' | 'response'
 
-export default function Details({ requestResponse }: DetailsProps) {
+export default function RequestDetails({ requestResponse }: DetailsProps) {
   const [tab, selectTab] = useState<Tab>('headers');
   const [raw, setRaw] = useState(false);
 
-  const resend = useCallback(async () => fetch(
+  const resend = useCallback(async () => requestResponse !== null && fetch(
     `http://${getHost()}/resend/`,
     {
       method: 'POST',
@@ -82,7 +82,7 @@ export default function Details({ requestResponse }: DetailsProps) {
     }
   ), [requestResponse]);
 
-  return (
+  return requestResponse !== null ? (
     <div className={styles.details}>
       <div className={styles.header}>
         <Row>
@@ -158,5 +158,9 @@ export default function Details({ requestResponse }: DetailsProps) {
         }
       </div>
     </div>
+  ) : (
+    <div className={styles.noRequestSelected}>
+      <p>Select a request to inspect it</p>
+    </div>
   )
 }
diff --git a/src/components/RequestList/RequestList.module.scss b/src/components/RequestList/RequestList.module.scss
new file mode 100644
index 0000000..47f36c8
--- /dev/null
+++ b/src/components/RequestList/RequestList.module.scss
@@ -0,0 +1,20 @@
+.noRequest {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.list {
+  //height: 100%;
+  overflow-y: auto;
+}
+
+.listContainer {
+  height: 100%;
+  overflow-y: hidden;
+  display: flex;
+  flex-flow: column nowrap;
+
+}
diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
new file mode 100644
index 0000000..95c5b75
--- /dev/null
+++ b/src/components/RequestList/RequestList.tsx
@@ -0,0 +1,203 @@
+import {
+  Button,
+  Dropdown,
+  DropdownButton,
+  Form,
+  InputGroup,
+  ListGroup,
+  Offcanvas,
+} from "react-bootstrap";
+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";
+
+interface ListProps {
+  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)
+  const [showFilterOptions, setShowFilterOptions] = useState(false);
+  const [search, setSearch] = useState('');
+  const [enableRegex, setEnableRegex] = useState(false);
+
+  const [methods, setMethods] = useState<EnabledMethods>({
+    GET: true,
+    POST: true,
+    PUT: true,
+    PATCH: true,
+    DELETE: true,
+  });
+
+  const toggleMethods = useCallback((method: Method | null) => {
+    const enabled = method == null;
+    const methods = {
+      GET: enabled,
+      POST: enabled,
+      PUT: enabled,
+      PATCH: enabled,
+      DELETE: enabled,
+    }
+
+    if (!enabled) {
+      methods[method] = true;
+    }
+
+    setMethods(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]
+    } else if (enabledMethods.length === 5) {
+      return 'ANY'
+    } else {
+      return 'CUSTOM'
+    }
+  }, [enabledMethods]);
+
+
+
+  const filteredRequests = useMemo(() => {
+    let searchRegex = new RegExp('');
+    try {
+      searchRegex = new RegExp(
+        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, search, enabledMethods, enableRegex])
+
+  return (
+    <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>
+            </DropdownButton>
+            <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/>
+            </Button>
+          </InputGroup>
+        </ListGroup.Item>
+      </ListGroup>
+      <ListGroup
+        variant='flush'
+        as="ul"
+        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>
+            )
+        }
+      </ListGroup>
+      <Offcanvas className={
+        classNames({
+          'bg-dark': darkMode
+        })
+      }
+                 show={showFilterOptions}
+                 onHide={() => setShowFilterOptions(false)}>
+        <Offcanvas.Header closeButton>
+          <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.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.Group>
+        </Offcanvas.Body>
+      </Offcanvas>
+    </div>
+  )
+}