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

---
 package.json                                     |  1 +
 src/components/RequestList/RequestList.tsx       |  6 +++---
 src/components/RequestSummary/RequestSummary.tsx | 15 +++++++++++++++
 src/hooks/useRequests.tsx                        |  1 +
 src/index.tsx                                    |  4 ++++
 ttun/client.py                                   | 10 +++++++++-
 yarn.lock                                        |  5 +++++
 7 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 28b664f..51a2660 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "bootstrap-darkmode": "5.0.0-beta.1",
     "bootstrap-icons": "^1.7.2",
     "classnames": "^2.3.1",
+    "dayjs": "^1.10.7",
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.1",
     "react-dom": "^17.0.2",
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 />
diff --git a/ttun/client.py b/ttun/client.py
index fe51b1a..671ac59 100644
--- a/ttun/client.py
+++ b/ttun/client.py
@@ -2,6 +2,7 @@ import asyncio
 import json
 from base64 import b64decode
 from base64 import b64encode
+from datetime import datetime
 from time import perf_counter
 from typing import Awaitable
 from typing import Callable
@@ -80,7 +81,14 @@ class Client:
         async with ClientSession(cookie_jar=DummyCookieJar()) as session:
             request_id = uuid4()
             await PubSub.publish(
-                {"type": "request", "payload": {"id": request_id.hex, **request}}
+                {
+                    "type": "request",
+                    "payload": {
+                        "id": request_id.hex,
+                        "timestamp": datetime.now().isoformat(),
+                        **request,
+                    },
+                }
             )
 
             start = perf_counter()
diff --git a/yarn.lock b/yarn.lock
index 371732f..83f0506 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -688,6 +688,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
   integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
 
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 debug@^4.1.0, debug@^4.1.1:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
-- 
cgit v1.2.3