An unsatisfying solution to the problem

src/app/api/route.ts

@@ -0,0 +1,78 @@
+import {NextRequest} from "next/server";
+import {getData, OverviewConfig} from "@/data/fetchWithSQL";
+
+export const semester1Revision: OverviewConfig = {
+    title: 'Semester 1 Revision',
+    periodKey: 'y5-s1-revision',
+    goalHours: 4,
+    subjects: [
+        {
+            projectId: 195482340,
+        },
+        {
+            title: 'Measure Theory',
+            projectId: 195519024,
+        },
+        {
+            title: 'Quantum Mechanics',
+            projectId: 195518593,
+        },
+        {
+            projectId: 195754611,
+        }
+    ],
+    timePeriod: {
+        start: "2023-12-15T00:00:00.000Z",
+        end: "2024-01-25T00:00:00.000Z"
+    }
+}
+
+export const semester2: OverviewConfig = {
+    title: 'Semester 2',
+    periodKey: 'y5-s2',
+    goalHours: 7.5,
+    subjects: [
+        {
+            projectId: 195754611,
+        },
+        {
+            projectId: 199383703,
+        },
+        {
+            projectId: 199383691,
+        },
+        {
+            projectId: 198859760,
+        },
+        {
+            projectId: 199383698,
+        },
+    ],
+    timePeriod: {
+        start: "2024-02-03T00:00:00.000Z",
+        end: "2024-05-10T00:00:00.000Z"
+    }
+}
+
+export type PeriodKey = keyof typeof periodMap;
+const periodMap = {
+    'y5-s1-revision': semester1Revision,
+    'y5-s2': semester2,
+}
+
+export async function GET(request: NextRequest): Promise<Response> {
+    const period = request.nextUrl.searchParams.get('period');
+
+    if (period == null) {
+        return new Response('No period provided', {status: 400});
+    }
+
+    if (!periodMap.hasOwnProperty(period)) {
+        return new Response('Invalid period', {status: 400});
+    }
+
+    const config = periodMap[period as keyof typeof periodMap];
+    const data = await getData(config);
+
+    return Response.json(data)
+}

src/app/sem1-revision/page.tsx

@@ -1,30 +1,6 @@
-import OverviewPage, {OverviewConfig} from "@/components/OverviewPage";
-
-const semester1Revision: OverviewConfig = {
-    title: 'Semester 1 Revision',
-    goalHours: 4,
-    subjects: [
-        {
-            projectId: 195482340,
-        },
-        {
-            title: 'Measure Theory',
-            projectId: 195519024,
-        },
-        {
-            title: 'Quantum Mechanics',
-            projectId: 195518593,
-        },
-        {
-            projectId: 195754611,
-        }
-    ],
-    timePeriod: {
-        start: "2023-12-15T00:00:00.000Z",
-        end: "2024-01-25T00:00:00.000Z"
-    }
-}
+import {semester1Revision} from "@/app/api/route";
+import OverviewPageWrapper from "@/components/PageWrapper";
 
 export default function Home() {
-    return <OverviewPage config={semester1Revision}/>
+    return <OverviewPageWrapper config={semester1Revision}/>
 }

src/app/sem2/page.tsx

@@ -1,31 +1,6 @@
-import OverviewPage, {OverviewConfig} from "@/components/OverviewPage";
-
-const semester2: OverviewConfig = {
-    title: 'Semester 2',
-    goalHours: 7.5,
-    subjects: [
-        {
-            projectId: 195754611,
-        },
-        {
-            projectId: 199383703,
-        },
-        {
-            projectId: 199383691,
-        },
-        {
-            projectId: 198859760,
-        },
-        {
-            projectId: 199383698,
-        },
-    ],
-    timePeriod: {
-        start: "2024-02-03T00:00:00.000Z",
-        end: "2024-05-10T00:00:00.000Z"
-    }
-}
+import {semester2} from "@/app/api/route";
+import OverviewPageWrapper from "@/components/PageWrapper";
 
 export default function Home() {
-    return <OverviewPage config={semester2}/>
+    return <OverviewPageWrapper config={semester2}/>
 }

src/components/OverviewPage.tsx

@@ -1,28 +1,35 @@
+"use client";
+
 import {SubjectComparisonCard} from "@/components/cards/subjectComparisonCard";
 import {CalendarOverviewCard} from "@/components/cards/calendarOverviewCard";
 import {SubjectOverviewCard} from "@/components/cards/subjectOverviewCard";
-import {getDataSQL} from "@/data/fetchWithSQL";
+import {PeriodKey} from "@/app/api/route";
+import useSWR from "swr";
+import {Data} from "@/data/fetchData";
+import {OverviewConfig} from "@/data/fetchWithSQL";
 
-export interface OverviewConfig {
-    title: string,
+function useData(periodKey: PeriodKey, initialData: Data = {
+    projects: [],
+    timeEntries: [],
+}): Data {
+    const {data} = useSWR(periodKey, async () => {
+        const res = await fetch(`/api?period=${periodKey}`);
+        const json = await res.json();
+        return json as Data;
+    });
 
-    subjects: {
-        title?: string,
-        projectId: number,
-    }[],
-
-    goalHours: number,
-
-    timePeriod: {
-        start: string,
-        end: string
-    },
+    return data ?? initialData;
 }
 
-export default async function OverviewPage({config}: {
-    config: OverviewConfig
+
+export default function OverviewPage({
+                                         config,
+                                         initialData
+                                     }: {
+    config: OverviewConfig,
+    initialData?: Data,
 }) {
-    const data = await getDataSQL(config);
+    const data = useData(config.periodKey, initialData);
 
     return (
         <main className="m-6">

src/components/PageWrapper.tsx

@@ -0,0 +1,11 @@
+"use server";
+
+import {getData, OverviewConfig} from "@/data/fetchWithSQL";
+import OverviewPage from "@/components/OverviewPage";
+
+export default async function OverviewPageWrapper({config}: {
+    config: OverviewConfig
+}) {
+    const data = await getData(config);
+    return <OverviewPage config={config} initialData={data}/>;
+}

src/data/fetchWithSQL.ts

@@ -1,9 +1,26 @@
-import {OverviewConfig} from "@/components/OverviewPage";
 import {Data} from "@/data/fetchData";
 import {db} from "@/data/database";
 import * as dFns from "date-fns";
+import {PeriodKey} from "@/app/api/route";
 
-export async function getDataSQL(config: OverviewConfig): Promise<Data> {
+export interface OverviewConfig {
+    title: string,
+    periodKey: PeriodKey,
+
+    subjects: {
+        title?: string,
+        projectId: number,
+    }[],
+
+    goalHours: number,
+
+    timePeriod: {
+        start: string,
+        end: string
+    },
+}
+
+export async function getData(config: OverviewConfig): Promise<Data> {
     // If we're in build-time, we don't have access to the database
     if (!db) {
         return {
@@ -12,6 +29,8 @@ export async function getDataSQL(config: OverviewConfig): Promise<Data> {
         }
     }
 
+    console.log('fetching data from SQL')
+
     let projectIds = config.subjects.map((subject) => subject.projectId.toString());
 
     const projects = await db.selectFrom('project')