move things into components

.idea/workspace.xml

@@ -2,12 +2,10 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/components/IncidentCard.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/UptimeCard.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/nws-api/types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/nws-api/types.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -18,6 +16,7 @@
     <option name="RECENT_TEMPLATES">
       <list>
         <option value="TypeScript File" />
+        <option value="TypeScript JSX File" />
       </list>
     </option>
   </component>
@@ -69,7 +68,8 @@
       <workItem from="1643936709048" duration="547000" />
       <workItem from="1648500425230" duration="246000" />
       <workItem from="1658028513357" duration="2964000" />
-      <workItem from="1666469240565" duration="6879000" />
+      <workItem from="1666469240565" duration="7361000" />
+      <workItem from="1666543043382" duration="439000" />
     </task>
     <servers />
   </component>

src/App.tsx

@@ -5,16 +5,13 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import {Incident, UptimeResponse} from "./nws-api/types";
 import {getIncidents, getUptime} from "./nws-api/calls";
 import ReactTooltip from 'react-tooltip';
+import UptimeCard from "./components/UptimeCard";
+import IncidentCard from "./components/IncidentCard";
 
 function App() {
 
     const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services:[], lastUpdated: ""});
     const [incidents, setIncidents] = useState<Incident[]>([]);
-    const severityText: string[] = [
-        "Low Severity means that this issue does not affect any services running on NWS.",
-        "Medium Severity means that this issue may cause some slowdowns or outages on some services.",
-        "High Severity means that this issue causes an outage on the entire NWS network or most of the services running on it."
-    ];
 
     const fetchUptime = async () => {
         let resp: UptimeResponse = await getUptime();
@@ -55,32 +52,13 @@ function App() {
             </div>
 
             <div className={"text-left row"} style={{width: '75vw'}}>
-
                 <h2>NWS System Status</h2>
                 <p>Last updated at {new Date(uptime.lastUpdated).toLocaleString()}</p>
                 <div className={"col-md-6 col-12"}>
                      <h3>Service Status</h3>
                         {uptime.services.map((e) => {
                             return (
-                                <div className={"nws-card row mb-2"} style={{maxWidth: '100%'}}>
+                                <UptimeCard uptime={e}/>
-                                    <h3 className={"col-md-9 col-12"}><a href={e.url} style={{textDecoration: "none"}}>{e.name}</a></h3>
-                                    <div className={`col-md-3 col-12 d-flex d-md-none justify-content-start`}>
-                                        <p className={`fw-bold severity-label 
-                                    ${e.isUp ? 'low' : (e.undergoingMaintenance ? 'med' : 'high')}-severity`}
-                                           style={{width: "max-content"}}>
-                                            {e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')}
-                                        </p>
-                                    </div>
-                                    <div className={`d-md-flex col-md-3 col-12 d-none justify-content-end`}>
-                                        <p className={`fw-bold severity-label 
-                                    ${e.isUp ? 'low' : (e.undergoingMaintenance ? 'med' : 'high')}-severity`}
-                                           style={{width: "max-content"}}>
-                                            {e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')}
-                                        </p>
-                                    </div>
-                                    <p className={"col-md-12 col-12"}><b>Last Month Uptime:</b> {e.uptimeMonth}%</p>
-                                    <p className={"col-md-6 col-12"}><b>All Time Uptime:</b> {e.uptimeAllTime}%</p>
-                                </div>
                             );
                         })}
                 </div>
@@ -88,29 +66,10 @@ function App() {
                     <h3>Datacenter Status</h3>
                     {uptime.datacenters.map((e) => {
                         return (
-                            <div className={"nws-card row mb-2"} style={{maxWidth: '100%'}}>
+                            <UptimeCard uptime={e}/>
-                                <h3 className={"col-md-9 col-12"}>{e.name}</h3>
-                                <div className={`col-md-3 col-12 d-flex d-md-none justify-content-start`}>
-                                    <p className={`fw-bold severity-label 
-                                    ${e.isUp ? 'low' : (e.undergoingMaintenance ? 'med' : 'high')}-severity`}
-                                       style={{width: "max-content"}}>
-                                        {e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')}
-                                    </p>
-                                </div>
-                                <div className={`d-md-flex col-md-3 col-12 d-none justify-content-end`}>
-                                    <p className={`fw-bold severity-label 
-                                    ${e.isUp ? 'low' : (e.undergoingMaintenance ? 'med' : 'high')}-severity`}
-                                       style={{width: "max-content"}}>
-                                        {e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')}
-                                    </p>
-                                </div>
-                                <p className={"col-md-12 col-12"}><b>Last Month Uptime:</b> {e.uptimeMonth}%</p>
-                                <p className={"col-md-6 col-12"}><b>All Time Uptime:</b> {e.uptimeAllTime}%</p>
-                            </div>
                         );
                     })}
                 </div>
-
             </div>
 
             <div style={{width: '75vw'}}>
@@ -119,20 +78,8 @@ function App() {
             <div>
                 <h3>Service Alerts</h3>
                 {incidents.map((e) => {
-                    let severityClass: string = e.severity == 0 ? 'low' : (e.severity == 1 ? 'med' : 'high');
-                    let severityString: string = e.severity == 0 ? 'Low' : (e.severity == 1 ? 'Medium' : 'High');
                     return (
-                        <div className={`row text-left nws-card`} style={{width: '75vw'}}>
+                        <IncidentCard incident={e}/>
-                            <p className={"col-md-10 col-12 mb-2"}><b>{e.title}</b></p>
-                            <div className={`col-md-2 col-12 mb-2`}>
-                                <b className={`severity-label w-min-content ${severityClass}-severity`}
-                                   data-tip={severityText[e.severity]}>
-                                    {severityString} Severity ⓘ
-                                </b>
-                                <ReactTooltip />
-                            </div>
-                            <p className={"mb-0"}>{e.description}</p>
-                        </div>
                     );
                 })}
                 {incidents.length == 0 &&  <div className={`row text-center`} style={{width: '75vw'}}>

src/components/IncidentCard.tsx

@@ -0,0 +1,30 @@
+import {Incident} from "../nws-api/types";
+import ReactTooltip from "react-tooltip";
+import React from "react";
+
+export default function IncidentCard(props: {incident: Incident}) {
+
+    const severityText: string[] = [
+        "Low Severity means that this issue does not affect any services running on NWS.",
+        "Medium Severity means that this issue may cause some slowdowns or outages on some services.",
+        "High Severity means that this issue causes an outage on the entire NWS network or most of the services running on it."
+    ];
+    let severityClass: string = props.incident.severity == 0 ? 'low' : (props.incident.severity == 1 ? 'med' : 'high');
+    let severityString: string = props.incident.severity == 0 ? 'Low' : (props.incident.severity == 1 ? 'Medium' : 'High');
+
+    return (
+        <div className={`row text-left nws-card`} style={{width: '75vw'}}>
+            <p className={"col-md-10 col-12 mb-2"}><b>{props.incident.title}</b></p>
+            <div className={`col-md-2 col-12 mb-2`}>
+                <div className={`severity-label w-max-content ${severityClass}-severity`}
+                     data-tip={severityText[props.incident.severity]}>
+                    <b>
+                        {severityString} Severity ⓘ
+                    </b>
+                    <ReactTooltip />
+                </div>
+            </div>
+            <p className={"mb-0"}>{props.incident.description}</p>
+        </div>
+    );
+}

src/components/UptimeCard.tsx

@@ -0,0 +1,29 @@
+import {UptimeRecord} from "../nws-api/types";
+import React from "react";
+import '../App.css';
+
+export default function UptimeCard(props: {uptime: UptimeRecord}) {
+    return(
+        <div className={"nws-card row mb-2"} style={{maxWidth: '100%'}}>
+            {props.uptime.url != null && <h3 className={"col-md-9 col-12"}><a href={props.uptime.url} style={{textDecoration: "none"}}>{props.uptime.name}</a></h3>}
+            {props.uptime.url == null && <h3 className={"col-md-9 col-12"}>{props.uptime.name}</h3>}
+
+            <div className={`col-md-3 col-12 d-flex d-md-none justify-content-start`}>
+                <p className={`fw-bold severity-label 
+                                    ${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
+                   style={{width: "max-content"}}>
+                    {props.uptime.isUp ? 'Up' : (props.uptime.undergoingMaintenance ? 'Maintenance' : 'Down')}
+                </p>
+            </div>
+            <div className={`d-md-flex col-md-3 col-12 d-none justify-content-end`}>
+                <p className={`fw-bold severity-label 
+                                    ${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
+                   style={{width: "max-content"}}>
+                    {props.uptime.isUp ? 'Up' : (props.uptime.undergoingMaintenance ? 'Maintenance' : 'Down')}
+                </p>
+            </div>
+            <p className={"col-md-12 col-12"}><b>Last Month Uptime:</b> {props.uptime.uptimeMonth}%</p>
+            <p className={"col-md-6 col-12"}><b>All Time Uptime:</b> {props.uptime.uptimeAllTime}%</p>
+        </div>
+    );
+}