From 3dd828538c96bccd3f7974d6dffab451c53cad4e Mon Sep 17 00:00:00 2001
From: Nick Pang <nick95927@gmail.com>
Date: Fri, 12 Jul 2024 11:02:31 +1000
Subject: [PATCH 1/3] Added Past incident component, stories & example
 incidents json data file.

---
 public/incidents.json                         | 21 ++++++
 .../pastIncidents/PastIncidents.stories.tsx   | 22 ++++++
 .../pastIncidents/PastIncidents.tsx           | 68 +++++++++++++++++++
 src/components/pastIncidents/index.ts         |  1 +
 4 files changed, 112 insertions(+)
 create mode 100644 public/incidents.json
 create mode 100644 src/components/pastIncidents/PastIncidents.stories.tsx
 create mode 100644 src/components/pastIncidents/PastIncidents.tsx
 create mode 100644 src/components/pastIncidents/index.ts

diff --git a/public/incidents.json b/public/incidents.json
new file mode 100644
index 00000000..0234ac5b
--- /dev/null
+++ b/public/incidents.json
@@ -0,0 +1,21 @@
+{
+  "last_updated": "2024-07-02T15:53:42+1000",
+  "incidents": [
+    {
+      "datetime_reported": "2024-04-16T10:53:42+1000",
+      "reason": "PB Server - service disrupted"
+    },
+    {
+      "datetime_reported": "2024-02-12T09:43:42+1000",
+      "reason": "HPC-FS Scheduled maintenance"
+    },
+    {
+      "datetime_reported": "2023-12-13T06:33:42+1000",
+      "reason": "PB Server - service disrupted"
+    },
+    {
+      "datetime_reported": "2023-10-19T07:33:32+1000",
+      "reason": "HPC-FS Scheduled maintenance"
+    }
+  ]
+}
diff --git a/src/components/pastIncidents/PastIncidents.stories.tsx b/src/components/pastIncidents/PastIncidents.stories.tsx
new file mode 100644
index 00000000..e3d89541
--- /dev/null
+++ b/src/components/pastIncidents/PastIncidents.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { PastIncidents, PastIncidentsData } from "./PastIncidents";
+import jsonData from "../../../public/incidents.json";
+
+const typedJsonData: PastIncidentsData["data"] =
+  jsonData as PastIncidentsData["data"];
+
+export default {
+  title: "Component/PastIncidents",
+  component: PastIncidents,
+} as Meta<typeof PastIncidents>;
+
+const Template: StoryFn<typeof PastIncidents> = (args) => (
+  <PastIncidents {...args} />
+);
+
+export const Simple = Template.bind({});
+Simple.args = {
+  title: "Past Incidents",
+  subTitle: "Showing all past incidents in the last 6 months",
+  data: typedJsonData,
+};
diff --git a/src/components/pastIncidents/PastIncidents.tsx b/src/components/pastIncidents/PastIncidents.tsx
new file mode 100644
index 00000000..9560114d
--- /dev/null
+++ b/src/components/pastIncidents/PastIncidents.tsx
@@ -0,0 +1,68 @@
+import React, { FunctionComponent } from "react";
+import {
+  Text,
+  Flex,
+  Box,
+  Table,
+  Tbody,
+  Tr,
+  Td,
+  TableContainer,
+} from "@chakra-ui/react";
+
+interface Incident {
+  datetime_reported: string;
+  reason: string;
+}
+
+interface Data extends Incident {
+  last_updated?: string;
+  incidents: Incident[];
+}
+
+export interface PastIncidentsData extends Data {
+  title: string;
+  subTitle: string;
+  data?: Data;
+}
+
+export const PastIncidents: FunctionComponent<PastIncidentsData> = ({
+  title,
+  subTitle,
+  data,
+}) => {
+  return (
+    <Box>
+      <Flex direction="column" px={6} py={4}>
+        <Text as="b" fontSize="3xl">
+          {title}
+        </Text>
+        <Text fontSize="1xl">{subTitle}</Text>
+      </Flex>
+      <TableContainer>
+        <Table>
+          <Tbody>
+            {data && data?.incidents.length > 0 ? (
+              data.incidents.map((incident: any, index: number) => (
+                <Tr key={index}>
+                  <Td>
+                    <Text fontSize="2xl" as="b">
+                      {incident?.datetime_reported}
+                    </Text>
+                    <Text fontSize="1xl" my={2}>
+                      {incident?.reason}
+                    </Text>
+                  </Td>
+                </Tr>
+              ))
+            ) : (
+              <Tr></Tr>
+            )}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default PastIncidents;
diff --git a/src/components/pastIncidents/index.ts b/src/components/pastIncidents/index.ts
new file mode 100644
index 00000000..b750bf0b
--- /dev/null
+++ b/src/components/pastIncidents/index.ts
@@ -0,0 +1 @@
+export { PastIncidents, type PastIncidentsData } from "./PastIncidents";

From dc2ca1e7dfeddbdd78840b47e3bbf2bed18f173e Mon Sep 17 00:00:00 2001
From: Nick Pang <nick95927@gmail.com>
Date: Mon, 15 Jul 2024 15:06:33 +1000
Subject: [PATCH 2/3] Refractored component to follow standard as Operational
 Status component

---
 public/incidents.json                         | 21 ----------
 .../pastIncidents/PastIncidents.stories.tsx   | 33 +++++++++++++---
 .../pastIncidents/PastIncidents.tsx           | 38 +++++++++----------
 src/components/pastIncidents/index.ts         |  2 +-
 4 files changed, 46 insertions(+), 48 deletions(-)
 delete mode 100644 public/incidents.json

diff --git a/public/incidents.json b/public/incidents.json
deleted file mode 100644
index 0234ac5b..00000000
--- a/public/incidents.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "last_updated": "2024-07-02T15:53:42+1000",
-  "incidents": [
-    {
-      "datetime_reported": "2024-04-16T10:53:42+1000",
-      "reason": "PB Server - service disrupted"
-    },
-    {
-      "datetime_reported": "2024-02-12T09:43:42+1000",
-      "reason": "HPC-FS Scheduled maintenance"
-    },
-    {
-      "datetime_reported": "2023-12-13T06:33:42+1000",
-      "reason": "PB Server - service disrupted"
-    },
-    {
-      "datetime_reported": "2023-10-19T07:33:32+1000",
-      "reason": "HPC-FS Scheduled maintenance"
-    }
-  ]
-}
diff --git a/src/components/pastIncidents/PastIncidents.stories.tsx b/src/components/pastIncidents/PastIncidents.stories.tsx
index e3d89541..4afcbf91 100644
--- a/src/components/pastIncidents/PastIncidents.stories.tsx
+++ b/src/components/pastIncidents/PastIncidents.stories.tsx
@@ -1,9 +1,5 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { PastIncidents, PastIncidentsData } from "./PastIncidents";
-import jsonData from "../../../public/incidents.json";
-
-const typedJsonData: PastIncidentsData["data"] =
-  jsonData as PastIncidentsData["data"];
+import { PastIncidents } from "./PastIncidents";
 
 export default {
   title: "Component/PastIncidents",
@@ -18,5 +14,30 @@ export const Simple = Template.bind({});
 Simple.args = {
   title: "Past Incidents",
   subTitle: "Showing all past incidents in the last 6 months",
-  data: typedJsonData,
+  data: {
+    last_updated: "2024-07-02T15:53:42+1000",
+    incidents: [
+      {
+        datetime_reported: "2024-04-16T10:53:42+1000",
+        reason: "PB Server - service disrupted",
+      },
+      {
+        datetime_reported: "2024-02-12T09:43:42+1000",
+        reason: "HPC-FS Scheduled maintenance",
+      },
+      {
+        datetime_reported: "2023-12-13T06:33:42+1000",
+        reason: "PB Server - service disrupted",
+      },
+      {
+        datetime_reported: "2023-10-19T07:33:32+1000",
+        reason: "HPC-FS Scheduled maintenance",
+      },
+    ],
+  },
+};
+
+export const NoDataAvailable = Template.bind({});
+NoDataAvailable.args = {
+  data: undefined,
 };
diff --git a/src/components/pastIncidents/PastIncidents.tsx b/src/components/pastIncidents/PastIncidents.tsx
index 9560114d..bacba78b 100644
--- a/src/components/pastIncidents/PastIncidents.tsx
+++ b/src/components/pastIncidents/PastIncidents.tsx
@@ -15,22 +15,24 @@ interface Incident {
   reason: string;
 }
 
-interface Data extends Incident {
-  last_updated?: string;
+interface Data {
+  last_updated: string;
   incidents: Incident[];
 }
 
-export interface PastIncidentsData extends Data {
+export interface PastIncidentsProps {
   title: string;
   subTitle: string;
   data?: Data;
 }
 
-export const PastIncidents: FunctionComponent<PastIncidentsData> = ({
+export const PastIncidents: FunctionComponent<PastIncidentsProps> = ({
   title,
   subTitle,
   data,
 }) => {
+  if (!data || data?.incidents.length === 0) return null;
+
   return (
     <Box>
       <Flex direction="column" px={6} py={4}>
@@ -42,22 +44,18 @@ export const PastIncidents: FunctionComponent<PastIncidentsData> = ({
       <TableContainer>
         <Table>
           <Tbody>
-            {data && data?.incidents.length > 0 ? (
-              data.incidents.map((incident: any, index: number) => (
-                <Tr key={index}>
-                  <Td>
-                    <Text fontSize="2xl" as="b">
-                      {incident?.datetime_reported}
-                    </Text>
-                    <Text fontSize="1xl" my={2}>
-                      {incident?.reason}
-                    </Text>
-                  </Td>
-                </Tr>
-              ))
-            ) : (
-              <Tr></Tr>
-            )}
+            {data?.incidents.map((incident: any, index: number) => (
+              <Tr key={index}>
+                <Td>
+                  <Text fontSize="2xl" as="b">
+                    {incident?.datetime_reported}
+                  </Text>
+                  <Text fontSize="1xl" my={2}>
+                    {incident?.reason}
+                  </Text>
+                </Td>
+              </Tr>
+            ))}
           </Tbody>
         </Table>
       </TableContainer>
diff --git a/src/components/pastIncidents/index.ts b/src/components/pastIncidents/index.ts
index b750bf0b..6d69d8c7 100644
--- a/src/components/pastIncidents/index.ts
+++ b/src/components/pastIncidents/index.ts
@@ -1 +1 @@
-export { PastIncidents, type PastIncidentsData } from "./PastIncidents";
+export { PastIncidents, type PastIncidentsProps } from "./PastIncidents";

From 2fe37b95d50c780a09c665b47c4ddd42a6ed1b27 Mon Sep 17 00:00:00 2001
From: Nick Pang <nick95927@gmail.com>
Date: Tue, 16 Jul 2024 08:51:09 +1000
Subject: [PATCH 3/3] Renamed variable and removed middle 'Data' interface as
 suggested.

---
 .../pastIncidents/PastIncidents.stories.tsx   | 42 +++++++++----------
 .../pastIncidents/PastIncidents.tsx           | 22 +++++-----
 2 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/components/pastIncidents/PastIncidents.stories.tsx b/src/components/pastIncidents/PastIncidents.stories.tsx
index 4afcbf91..7c725ee6 100644
--- a/src/components/pastIncidents/PastIncidents.stories.tsx
+++ b/src/components/pastIncidents/PastIncidents.stories.tsx
@@ -14,30 +14,28 @@ export const Simple = Template.bind({});
 Simple.args = {
   title: "Past Incidents",
   subTitle: "Showing all past incidents in the last 6 months",
-  data: {
-    last_updated: "2024-07-02T15:53:42+1000",
-    incidents: [
-      {
-        datetime_reported: "2024-04-16T10:53:42+1000",
-        reason: "PB Server - service disrupted",
-      },
-      {
-        datetime_reported: "2024-02-12T09:43:42+1000",
-        reason: "HPC-FS Scheduled maintenance",
-      },
-      {
-        datetime_reported: "2023-12-13T06:33:42+1000",
-        reason: "PB Server - service disrupted",
-      },
-      {
-        datetime_reported: "2023-10-19T07:33:32+1000",
-        reason: "HPC-FS Scheduled maintenance",
-      },
-    ],
-  },
+  lastUpdated: "2024-07-02T15:53:42+1000",
+  incidents: [
+    {
+      reported: "2024-04-16T10:53:42+1000",
+      reason: "PB Server - service disrupted",
+    },
+    {
+      reported: "2024-02-12T09:43:42+1000",
+      reason: "HPC-FS Scheduled maintenance",
+    },
+    {
+      reported: "2023-12-13T06:33:42+1000",
+      reason: "PB Server - service disrupted",
+    },
+    {
+      reported: "2023-10-19T07:33:32+1000",
+      reason: "HPC-FS Scheduled maintenance",
+    },
+  ],
 };
 
 export const NoDataAvailable = Template.bind({});
 NoDataAvailable.args = {
-  data: undefined,
+  incidents: undefined,
 };
diff --git a/src/components/pastIncidents/PastIncidents.tsx b/src/components/pastIncidents/PastIncidents.tsx
index bacba78b..e0def163 100644
--- a/src/components/pastIncidents/PastIncidents.tsx
+++ b/src/components/pastIncidents/PastIncidents.tsx
@@ -11,27 +11,24 @@ import {
 } from "@chakra-ui/react";
 
 interface Incident {
-  datetime_reported: string;
+  reported: string;
   reason: string;
 }
 
-interface Data {
-  last_updated: string;
-  incidents: Incident[];
-}
-
 export interface PastIncidentsProps {
   title: string;
   subTitle: string;
-  data?: Data;
+  lastUpdated: string;
+  incidents: Incident[];
 }
 
 export const PastIncidents: FunctionComponent<PastIncidentsProps> = ({
   title,
   subTitle,
-  data,
+  lastUpdated = "",
+  incidents = [],
 }) => {
-  if (!data || data?.incidents.length === 0) return null;
+  if (incidents.length === 0) return null;
 
   return (
     <Box>
@@ -40,15 +37,18 @@ export const PastIncidents: FunctionComponent<PastIncidentsProps> = ({
           {title}
         </Text>
         <Text fontSize="1xl">{subTitle}</Text>
+        {lastUpdated !== "" && (
+          <Text fontSize="1x1">Last Updated: {lastUpdated}</Text>
+        )}
       </Flex>
       <TableContainer>
         <Table>
           <Tbody>
-            {data?.incidents.map((incident: any, index: number) => (
+            {incidents.map((incident: any, index: number) => (
               <Tr key={index}>
                 <Td>
                   <Text fontSize="2xl" as="b">
-                    {incident?.datetime_reported}
+                    {incident?.reported}
                   </Text>
                   <Text fontSize="1xl" my={2}>
                     {incident?.reason}