From 244dc0b48ca3c05d8bbd13d671d7aa453e28b9b1 Mon Sep 17 00:00:00 2001
From: ChiefOfGxBxL <langgb@clarksonalumni.com>
Date: Sat, 2 Nov 2024 20:04:40 -0400
Subject: [PATCH] Add approximate size to titlebar of responses and redirects

---
 src/components/Response/Redirect.js  | 11 +++++++++--
 src/components/Response/Response.js  |  9 ++++++---
 src/components/Response/SizeBytes.js | 17 +++++++++++++++++
 src/utils/byteFormatter.js           | 14 ++++++++++++++
 4 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Response/SizeBytes.js
 create mode 100644 src/utils/byteFormatter.js

diff --git a/src/components/Response/Redirect.js b/src/components/Response/Redirect.js
index f97abdf..b228079 100644
--- a/src/components/Response/Redirect.js
+++ b/src/components/Response/Redirect.js
@@ -4,13 +4,16 @@ import responsePropTypes, { redirectShape } from 'propTypes/redirect';
 import { StyledResponse, StyledHeader } from './StyledComponents';
 import Headers from './Headers';
 import StatusChip from './StatusChip';
+import SizeBytes from './SizeBytes';
 
-function Titlebar({ url, time, statusCode, onClick }) {
+function Titlebar({ url, time, size, statusCode, onClick }) {
   return (
     <StyledHeader expandable onClick={onClick}>
       <h3>
         <StatusChip statusCode={statusCode} />
-        Redirect ({(time / 1000).toFixed(3)}s)
+        <span>Redirect</span>
+        <SizeBytes size={size} />
+        <span>({(time / 1000).toFixed(3)}s)</span>
         <a href={url} className="text-muted">{url}</a>
       </h3>
     </StyledHeader>
@@ -36,6 +39,9 @@ function Redirect(props) {
 
   const { method, url, time, statusCode } = response;
 
+  const contentLength = headers.find((header) => header.name.toLowerCase() === 'content-length')
+  const contentSize = contentLength ? Number(contentLength.value) : 0
+
   return (
     <StyledResponse
       collapsible
@@ -45,6 +51,7 @@ function Redirect(props) {
           method={method}
           statusCode={statusCode}
           url={url}
+          size={contentSize}
           time={time}
           onClick={setExpanded}
         />
diff --git a/src/components/Response/Response.js b/src/components/Response/Response.js
index c088e7e..fda57cc 100644
--- a/src/components/Response/Response.js
+++ b/src/components/Response/Response.js
@@ -14,13 +14,16 @@ import { StyledResponse, StyledHeader } from './StyledComponents';
 import Headers from './Headers';
 import RenderedResponse from './RenderedResponse';
 import StatusChip from './StatusChip';
+import SizeBytes from './SizeBytes';
 
-function Titlebar({ url, time, statusCode }) {
+function Titlebar({ url, time, size, statusCode }) {
   return (
     <StyledHeader>
       <h3>
         <StatusChip statusCode={statusCode} />
-        Response ({time})
+        <span>Response</span>
+        <SizeBytes size={size} />
+        <span>({time})</span>
         <a href={url} className="text-muted">{url}</a>
       </h3>
     </StyledHeader>
@@ -82,7 +85,7 @@ export function Response(props) {
   return (
     <StyledResponse
       wrapResponse={wrapResponse}
-      header={<Titlebar statusCode={status} method={method} url={url} time={time} />}
+      header={<Titlebar statusCode={status} method={method} url={url} size={contentSize} time={time} />}
     >
       <Headers headers={interceptedResponse.responseHeaders} />
       {type.html && <RenderedResponse html={body} />}
diff --git a/src/components/Response/SizeBytes.js b/src/components/Response/SizeBytes.js
new file mode 100644
index 0000000..b04b09e
--- /dev/null
+++ b/src/components/Response/SizeBytes.js
@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+import byteFormatter from 'utils/byteFormatter';
+
+function SizeBytes({ size }) {
+  return (
+    <span title={`${size} bytes`}>
+      {byteFormatter(size)}
+    </span>
+  );
+}
+
+SizeBytes.propTypes = {
+  size: PropTypes.number.isRequired
+};
+
+export default SizeBytes;
diff --git a/src/utils/byteFormatter.js b/src/utils/byteFormatter.js
new file mode 100644
index 0000000..75649cf
--- /dev/null
+++ b/src/utils/byteFormatter.js
@@ -0,0 +1,14 @@
+const KB = 1024
+const MB = 1024 * KB
+const GB = 1024 * MB
+
+/*
+ * Formats the provided number in bytes as a string of bytes,
+ * KB, MB, or GB, with one decimal point and the unit suffix.
+ */
+export default function byteFormatter(bytes) {
+  if (bytes < 100) return `${bytes} bytes`
+  if (bytes > GB) return (bytes / GB).toFixed(1) + ' GB'
+  if (bytes > MB) return (bytes / MB).toFixed(1) + ' MB'
+  return (bytes / KB).toFixed(1) + ' KB'
+}