2 files changed, 53 insertions, 60 deletions

diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx
index 3cc7f99..e84dfed 100644
--- a/src/pages/stats/[slug].tsx
+++ b/src/pages/stats/[slug].tsx
@@ -156,24 +156,29 @@ function Page({
 }
 
 async function getGraphData(slug: string) {
-    const encodedSlug = encodeURIComponent(slug as string);
+    const encodedSlug = encodeURIComponent(slug as string).replace(/%20/g, "").replace(/\s+/g, "");
     const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-    const response = await fetch(apiUrl + `/api/subscribers/${encodedSlug}`, {
+    console.log(apiUrl + `/subscribers_${encodedSlug}.json`)
+    const response = await fetch(apiUrl + `/subscribers_${encodedSlug}.json`, {
         headers: {
             "Cache-Control": "no-cache",
         },
         cache: "no-cache",
     });
-    if (!response.ok) {
-        console.log(response.statusText);
+    const contentType = response.headers.get("content-type");
+    if (!response.ok || !contentType?.includes("application/json")) {
+        const text = await response.text();
+        console.error("Unexpected response:", text.slice(0, 200));
+        throw new Error(`Failed to load JSON. Status: ${response.status}`);
     }
+
     return response.json();
 }
 
 async function getChannelData(slug: string) {
-    const encodedSlug = encodeURIComponent(slug as string);
+    const encodedSlug = encodeURIComponent(slug as string).replace(/%20/g, "").replace(/\s+/g, "");
     const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-    const response = await fetch(apiUrl + `/api/channel/${encodedSlug}`, {
+    const response = await fetch(apiUrl + `/info_${encodedSlug}.json`, {
         headers: {
             "Cache-Control": "no-cache",
         },
@@ -186,10 +191,10 @@ async function getChannelData(slug: string) {
 }
 
 async function get7DGraphData(slug: string) {
-    const encodedSlug = encodeURIComponent(slug as string);
+    const encodedSlug = encodeURIComponent(slug as string).replace(/%20/g, "").replace(/\s+/g, "");
     const apiUrl = process.env.NEXT_PUBLIC_API_URL;
     const response = await fetch(
-        apiUrl + `/api/subscribers/${encodedSlug}/7d`,
+        apiUrl + `/subscribers_${encodedSlug}_7d.json`,
         {
             headers: {
                 "Cache-Control": "no-cache",
@@ -204,10 +209,10 @@ async function get7DGraphData(slug: string) {
 }
 
 async function getMilestoneData(slug: string) {
-    const encodedSlug = encodeURIComponent(slug as string);
+    const encodedSlug = encodeURIComponent(slug as string).replace(/%20/g, "").replace(/\s+/g, "");
     const apiUrl = process.env.NEXT_PUBLIC_API_URL;
     const response = await fetch(
-        apiUrl + `/api/subscribers/${encodedSlug}/milestones`,
+        apiUrl + `/milestones_${encodedSlug}.json`,
         {
             headers: {
                 "Cache-Control": "no-cache",
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