setup warning fetching on client side

components/WarningHeader.tsx

@@ -1,6 +1,6 @@
 import { GetStaticProps } from "next";
-import { getCurrentWarning, Warning } from "pages/api/warnings";
-import React from "react";
+import { Warning } from "pages/api/currentWarning";
+import React, { useState, useEffect } from "react";
 
 import { getCurrentTerm } from "@/lib/events";
 
@@ -8,10 +8,22 @@ import styles from "./WarningHeader.module.css";
 
 export function WarningHeader() {
   //  We can't use getStaticProps since its a component, and we can't put it getStaticProps in its parents because nextjs doesnt support it in the _app.js
-  return (
-    <div className={styles.warning}>
-      Warning: The computers will be down for a scheduled maintenance unitl Jan
-      28, 2021.
-    </div>
-  );
+  const [warning, setWarning] = useState<Warning | null>(null);
+
+  useEffect(() => {
+    fetch("api/currentWarning/")
+      .then((res) => res.json())
+      .then((data) => {
+        setWarning(data);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  });
+
+  if (!warning || !warning.content || warning.content == "") {
+    return <></>;
+  }
+
+  return <div className={styles.warning}>{warning.content}</div>;
 }

content/warnings/2022-01-29-testWarning.txt

@@ -0,0 +1,6 @@
+---
+startDate: 'January 29 2022 21:00'
+endDate: 'January 30 2022 18:00'
+---
+This is a test warning. Again!
+