src/pages/twitch/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

import TwitchDataTable, {
  type TwitchDataTableProp,
} from "../../components/SubscriberTable/TwitchDataTable";
import TitleBar from "../../components/TitleBar/TitleBar";
import "../../app/globals.css";

type Props = {
  data: TwitchDataTableProp;
  graphURL: string | undefined;
  announcementText: string | undefined;
};

function TwitchPage({ data, graphURL, announcementText }: Props) {
  return (
    <>
      <TitleBar title="PhaseTracker" backgroundColor="black" />
      <TwitchDataTable {...data} />
    </>
  );
}

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;