From a86f0a804bf8d1ff37d9027930aad1fdcbde3ad6 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Wed, 16 Feb 2022 21:10:39 +0100
Subject: Added a timestamp

---
 src/components/RequestList/RequestList.tsx       |  6 +++---
 src/components/RequestSummary/RequestSummary.tsx | 15 +++++++++++++++
 src/hooks/useRequests.tsx                        |  1 +
 src/index.tsx                                    |  4 ++++
 4 files changed, 23 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
index 06a78a3..acef47a 100644
--- a/src/components/RequestList/RequestList.tsx
+++ b/src/components/RequestList/RequestList.tsx
@@ -106,8 +106,7 @@ export default function RequestList({
       )
       .filter(
         ([index, request]) =>
-          search === "" ||
-          searchRegex.test(`${request.request.method} ${request.request.path}`)
+          search === "" || searchRegex.test(request.request.path)
       );
   }, [requests, search, enabledMethods, enableRegex]);
 
@@ -168,6 +167,7 @@ export default function RequestList({
                 <RequestSummary
                   requestResponse={requestResponse}
                   selected={selected}
+                  showTime
                 />
               </ListGroup.Item>
             );
@@ -205,7 +205,7 @@ export default function RequestList({
               onChange={() => setEnableRegex(!enableRegex)}
             />
           </Form.Group>
-          <Form.Group>
+          <Form.Group className="mb-4">
             <Form.Label className="fw-bold">Method</Form.Label>
             {Object.entries(methods).map(([method, enabled]) => (
               <Form.Check
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
index 44254d0..49e6086 100644
--- a/src/components/RequestSummary/RequestSummary.tsx
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -3,10 +3,12 @@ import * as React from "react";
 import classNames from "classnames";
 
 import { Badge, Col, Row } from "react-bootstrap";
+import dayjs from "dayjs";
 
 interface RequestSummaryProps {
   selected?: boolean;
   requestResponse: RequestResponse;
+  showTime?: boolean;
 }
 
 function isBetween(value: number, min: number, max: number) {
@@ -32,9 +34,22 @@ function calcBadgeVariant(statusCode: number | undefined): string {
 export default function RequestSummary({
   requestResponse: { request, response },
   selected = false,
+  showTime = false,
 }: RequestSummaryProps) {
   return (
     <Row>
+      {showTime && (
+        <Col
+          className={classNames(
+            "flex-grow-0 d-flex align-items-center text-nowrap",
+            {
+              "text-muted": !selected,
+            }
+          )}
+        >
+          {dayjs(request.timestamp).format("LTS")}
+        </Col>
+      )}
       <Col className="flex-grow-0 d-flex align-items-center">
         {request.method}
       </Col>
diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx
index feba4fa..1361949 100644
--- a/src/hooks/useRequests.tsx
+++ b/src/hooks/useRequests.tsx
@@ -15,6 +15,7 @@ export type Method =
 
 export interface RequestPayload {
   id: string;
+  timestamp: string;
   body: string;
   headers: Headers;
   method: Method;
diff --git a/src/index.tsx b/src/index.tsx
index 83f8970..d83fd38 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,10 @@ import App from "~/components/App/App";
 import "~/index.scss";
 import DarkModeProvider from "./contexts/DarkMode";
 
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+dayjs.extend(localizedFormat);
+
 ReactDOM.render(
   <DarkModeProvider>
     <App />
-- 
cgit v1.2.3