1 files changed, 38 insertions, 50 deletions

diff --git a/src/pages/twitch/index.tsx b/src/pages/twitch/index.tsx
index 43d88ed..fc389c2 100644
--- a/src/pages/twitch/index.tsx
+++ b/src/pages/twitch/index.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import TwitchDataTable, {
   type TwitchDataTableProp,
 } from "../../components/SubscriberTable/TwitchDataTable";
@@ -6,60 +5,49 @@ import TitleBar from "../../components/TitleBar/TitleBar";
 import Announcement from "../../components/Announcement";
 import "../../app/globals.css";
 
-function TwitchPage() {
-  const [twitchData, setTwitchData] = useState<TwitchDataTableProp | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const announcementText = process.env.NEXT_PUBLIC_ANNOUNCEMENT;
-
-  useEffect(() => {
-    async function fetchTwitchData() {
-      try {
-        const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING;
-        const endpoint = "/api/twitch";
-        const headers = {
-          "Cache-Control": "no-cache",
-        };
-        const cacheOption = "no-cache";
-
-        const response = await fetch(`${apiUrl}${endpoint}`, {
-          headers: headers,
-          cache: cacheOption,
-        });
-
-        if (!response.ok) {
-          throw new Error(response.statusText);
-        }
-
-        const data = await response.json();
-        setTwitchData(data);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "An error occurred");
-      }
-    }
-
-    fetchTwitchData();
-  }, []);
+type Props = {
+  data: TwitchDataTableProp;
+  graphURL: string | undefined;
+  announcementText: string | undefined;
+};
 
+function TwitchPage({ data, graphURL, announcementText }: Props) {
   return (
     <>
       <TitleBar title="PhaseTracker" backgroundColor="black" />
-      {announcementText && (
-        <Announcement
-          message={announcementText}
-          backgroundColor="#e0f7fa"
-          textColor="#006064"
-        />
-      )}
-      {error ? (
-        <div>Error: {error}</div>
-      ) : twitchData ? (
-        <TwitchDataTable {...twitchData} />
-      ) : (
-        <div>Loading...</div>
-      )}
+      <TwitchDataTable {...data} />
     </>
   );
 }
 
-export default TwitchPage;
+export async function getServerSideProps() {
+  const graphURL = process.env.NEXT_PUBLIC_TWITCH_GRAPH_URL;
+  const announcementText = process.env.NEXT_PUBLIC_ANNOUNCEMENT;
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING;
+  const endpoint = "/twitch.json";
+  const headers = {
+    "Cache-Control": "no-cache",
+  };
+  const cacheOption = "no-cache";
+
+  const response = await fetch(`${apiUrl}${endpoint}`, {
+    headers: headers,
+    cache: cacheOption,
+  });
+  let data = {};
+  if (response.ok) {
+    data = await response.json();
+  } else {
+    console.log(response.statusText);
+  }
+
+  return {
+    props: {
+      data,
+      graphURL: graphURL ?? null,
+      announcementText: announcementText ?? null,
+    },
+  };
+}
+
+export default TwitchPage;
\ No newline at end of file