From 2a1bbc2da16ec29317dbf1a99496c0cbdbf22ffa Mon Sep 17 00:00:00 2001
From: Kenneth Kalmer <kenneth.kalmer@ably.com>
Date: Mon, 25 Nov 2024 15:11:24 +0000
Subject: [PATCH] refactor: Status component rebuilt with SWR

Main reason is to have only a single ajax request for status data on the
page, no matter how many status icons are embedded.

Also extract the icon portion into its own StatusIcon component that can
be better used in other components, especially inside other anchor tags
---
 src/core/Status.tsx                | 68 +++++++++++++++---------------
 src/core/Status/Status.stories.tsx | 42 ++++++++++++++----
 2 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/src/core/Status.tsx b/src/core/Status.tsx
index c3f9c9ee9..4c800d8cf 100644
--- a/src/core/Status.tsx
+++ b/src/core/Status.tsx
@@ -1,4 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
+import useSWR from "swr";
+import clsx from "clsx";
+
+// Our SWR fetcher function
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 const indicatorClass = (indicator?: string) => {
   switch (indicator) {
@@ -17,41 +22,37 @@ const indicatorClass = (indicator?: string) => {
   }
 };
 
+export const StatusIcon = ({
+  statusUrl,
+  refreshInterval = 1000 * 60,
+}: {
+  statusUrl: string;
+  refreshInterval?: number;
+}) => {
+  const { data, error, isLoading } = useSWR(statusUrl, fetcher, {
+    refreshInterval,
+  });
+
+  return (
+    <span
+      className={clsx(
+        "inline-flex h-[1rem] aspect-square m-[0.25rem] rounded-full",
+        indicatorClass(data?.status?.indicator),
+        { "animate-pulse": isLoading || error },
+      )}
+    ></span>
+  );
+};
+
 const Status = ({
   statusUrl,
   additionalCSS,
+  refreshInterval = 1000 * 60,
 }: {
   statusUrl: string;
   additionalCSS?: string;
+  refreshInterval?: number;
 }) => {
-  const [data, setData] = useState<{ status: { indicator: string } } | null>(
-    null,
-  );
-
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-
-    if (statusUrl !== "") {
-      const fetchData = async () => {
-        try {
-          const response = await fetch(statusUrl);
-          const jsonData = await response.json();
-          setData(jsonData);
-        } catch (error) {
-          console.error("Error fetching status data:", error);
-        }
-      };
-
-      fetchData();
-
-      interval = setInterval(fetchData, 60000); // Fetch data every minute
-    }
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [statusUrl]);
-
   return (
     <a
       href="https://status.ably.com"
@@ -59,11 +60,10 @@ const Status = ({
       target="_blank"
       rel="noreferrer"
     >
-      <span className="flex items-center h-[1.5rem] p-[0.25rem]">
-        <span
-          className={`w-[1rem] h-[1rem] leading-[1rem] rounded-full ${!data ? "animate-pulse" : ""} ${indicatorClass(data?.status?.indicator)}`}
-        ></span>
-      </span>
+      <StatusIcon
+        statusUrl={statusUrl}
+        refreshInterval={refreshInterval ?? 1000 * 60}
+      />
     </a>
   );
 };
diff --git a/src/core/Status/Status.stories.tsx b/src/core/Status/Status.stories.tsx
index 91c7b2423..0880ea9c1 100644
--- a/src/core/Status/Status.stories.tsx
+++ b/src/core/Status/Status.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { delay, http, HttpResponse } from "msw";
+import { SWRConfig } from "swr";
 import Status from "../Status";
 
 const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
@@ -13,6 +14,10 @@ export default {
   tags: ["!autodocs"],
 };
 
+const withEmptySWRCache = (component: JSX.Element) => (
+  <SWRConfig value={{ provider: () => new Map() }}>{component}</SWRConfig>
+);
+
 export const Loading = {
   parameters: {
     msw: {
@@ -29,10 +34,25 @@ export const Loading = {
       },
     },
   },
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
+};
+
+export const Error = {
+  parameters: {
+    msw: {
+      handlers: {
+        statusError: http.get(statusUrl, () => {
+          return HttpResponse.error();
+        }),
+      },
+    },
+  },
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
-const mockParametersWithStatus = (indicator) => {
+const mockParametersWithStatus = (indicator: string) => {
   return {
     msw: {
       handlers: {
@@ -52,30 +72,36 @@ const mockParametersWithStatus = (indicator) => {
 
 export const None = {
   parameters: mockParametersWithStatus("none"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Operational = {
   parameters: mockParametersWithStatus("operational"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Minor = {
   parameters: mockParametersWithStatus("minor"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Major = {
   parameters: mockParametersWithStatus("major"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Critical = {
   parameters: mockParametersWithStatus("critical"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Unknown = {
   parameters: mockParametersWithStatus("unknown"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };