src/app/page.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

import SubscriberTable, {
    type SubscriberDataTableProp,
} from "../components/SubscriberTable/SubscriberTable";
import TitleBar from "../components/TitleBar/TitleBar";

async function Home() {
    const graphURL = process.env.NEXT_PUBLIC_GRAPH_URL;
    const data: SubscriberDataTableProp = await getData();
    return (
        <>
            <TitleBar title="PhaseTracker" backgroundColor="black" />
            <div
                className="sm:block hidden mt-4"
                style={{
                    overflow: "hidden",
                    height: "105vh",
                    position: "relative",
                }}
            >
                <iframe
                    title="Phase Connect Subscriber Count Graph"
                    src={graphURL}
                    style={{ position: "absolute", top: 0, left: 0 }}
                    width="100%"
                    height="100%"
                />
            </div>
            <SubscriberTable {...data} />
        </>
    );
}

async function getData() {
    const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING;
    const endpoint = "/api/subscribers";
    const headers = {
        "Cache-Control": "no-cache",
    };
    const cacheOption = "no-cache";

    const response = await fetch(`${apiUrl}${endpoint}`, {
        headers: headers,
        cache: cacheOption,
    });
    if (!response.ok) {
        console.log(response.statusText);
    }
    return response.json();
}
export default Home;