From bcb77d979d817e1e609adb4d007bbbcc3f61efbd Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Thu, 30 Dec 2021 09:51:00 +0100
Subject: Prepare for github

---
 .../RequestSummary/RequestSummary.module.scss      | 24 ++++++++++++++++
 src/components/RequestSummary/RequestSummary.tsx   | 33 ++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/components/RequestSummary/RequestSummary.module.scss
 create mode 100644 src/components/RequestSummary/RequestSummary.tsx

(limited to 'src/components/RequestSummary')

diff --git a/src/components/RequestSummary/RequestSummary.module.scss b/src/components/RequestSummary/RequestSummary.module.scss
new file mode 100644
index 0000000..e1752b3
--- /dev/null
+++ b/src/components/RequestSummary/RequestSummary.module.scss
@@ -0,0 +1,24 @@
+.requestSummary {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  padding: 1em;
+  grid-gap: 1em;
+  align-items: center;
+}
+
+.method {
+}
+
+.statusCode {
+  padding: 0.2em;
+  border-radius: 0.4em;
+  background-color: darkgray;
+
+  &.info, &.success, &.redirect {
+    background-color: forestgreen;
+  }
+
+  &.clientError, &.serverError {
+    background-color: red;
+  }
+}
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
new file mode 100644
index 0000000..af928c0
--- /dev/null
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -0,0 +1,33 @@
+import {RequestResponse} from "~hooks/useRequests";
+import * as React from "react";
+import classNames from "classnames";
+
+import styles from './RequestSummary.module.scss';
+
+interface RequestSummaryProps {
+  requestResponse: RequestResponse
+  className?: string
+}
+
+function isBetween(value: number, min: number, max: number) {
+  return value >= min && value <= max
+}
+
+export default function RequestSummary({ requestResponse: { request, response }, className = ''}: RequestSummaryProps) {
+  const statusCode = response?.status ?? 0
+  return (
+    <div className={classNames(styles.requestSummary, className)}>
+      <span className={styles.method}>{ request.method }</span>
+      <p>{ request.path }</p>
+      <span className={classNames(styles.statusCode, {
+        [styles.info]: isBetween(statusCode, 100, 199),
+        [styles.success]: isBetween(statusCode, 200, 299),
+        [styles.redirect]: isBetween(statusCode, 300, 399),
+        [styles.clientError]: isBetween(statusCode, 400, 499),
+        [styles.serverError]: isBetween(statusCode, 500, 599)
+      })}>
+        { response?.status ?? 'Loading...'}
+      </span>
+    </div>
+  )
+}
-- 
cgit v1.2.3