converted cds forms to server side

src/app/[lang]/cds/CdsCourseForm.tsx

@@ -1,3 +1,4 @@
+'use client';
 import Timetable from '@/components/Timetable/Timetable';
 import { FC, Fragment, useState, useRef, useEffect, useMemo } from 'react';
 import { scheduleTimeSlots } from '@/const/timetable';

src/app/[lang]/cds/CdsFormContainer.tsx

@@ -2,19 +2,24 @@ import {CircularProgress} from '@mui/joy';
 import useSWR from 'swr';
 import CdsCoursesForm from './CdsCourseForm';
 import supabase from '@/config/supabase';
+import { getServerSession } from 'next-auth';
+import { redirect } from 'next/navigation';
 
-const CdsFormContainer = () => {
-    //assuming preferences is a string of raw_id
+const getUserPreferences = async () => {
+    const session = await getServerSession();
+    if(session == null || !session.user) return redirect('/');
     const preferences: string[] = [];
 
-    const { data: preferenceCourses = [], error, isLoading } = useSWR(['cds_courses'], async () => {
-        const { data = [], error } = await supabase.from('cds_courses').select('*').in('raw_id', preferences);
-        if(error) throw error;
-        return data ?? [];
-    })
+    //get user preferences
+    const { data: preferenceCourses = [], error } = await supabase.from('cds_courses').select('*').in('raw_id', preferences);
+    if(error) throw error;
 
+    return preferenceCourses ?? [];
+}
+
+const CdsFormContainer = async () => {
+    const preferenceCourses = await getUserPreferences();
 
-    if(isLoading) return <CircularProgress/>
     return ( <div className='p-4'>
         <CdsCoursesForm initialSubmission={{ preferences: preferenceCourses }}/>
     </div>)

src/app/[lang]/cds/NTHULoginButton.tsx

@@ -0,0 +1,13 @@
+'use client';
+import NTHUBirdIcon from '@/components/NTHUBirdIcon';
+import { Button } from '@mui/joy';
+import { signIn } from 'next-auth/react';
+import { FC } from 'react';
+
+const NTHULoginButton: FC = () => {
+    return <div className="text-center space-y-3 py-4 w-full">
+        <Button startDecorator={<NTHUBirdIcon />} variant="outlined" color="neutral" onClick={() => signIn('nthu')}>Login with NTHU</Button>
+    </div>
+}
+
+export default NTHULoginButton;

src/app/[lang]/cds/page.tsx

@@ -1,27 +1,20 @@
-'use client';;
 import NTHUBirdIcon from "@/components/NTHUBirdIcon"
 import { Alert, Button, Divider } from "@mui/joy";
 import { signIn, useSession } from "next-auth/react"
 import { FC } from "react";
 import CdsFormContainer from "./CdsFormContainer";
-import { useSettings } from "@/hooks/contexts/settings";
+import { cookies } from "next/headers";
+import {getServerSession} from 'next-auth';
+import NTHULoginButton from "./NTHULoginButton";
 
-const CdsFormBeforeSignIn: FC<{ isLoggingIn: boolean }> = ({ isLoggingIn }) => {
-    return <div className="text-center space-y-3 py-4 w-full">
-        <Button startDecorator={<NTHUBirdIcon />} variant="outlined" color="neutral" onClick={() => signIn('nthu')}>Login with NTHU</Button>
-    </div>
-}
-
-const CourseDemandSurvey = () => {
-    const { data, status, update } = useSession();
-    const { darkMode } = useSettings();
-
-    console.log(data, status);
-
-
-    // if(true) return <CdsFormContainer/>
+const CourseDemandSurvey = async () => {
+    const cookieStore = cookies()
+    const theme = cookieStore.get('theme');
+    const darkMode = theme?.value == 'dark';
+    const session = await getServerSession();
 
-    return <div className="flex flex-col items-center justify-center h-full w-full" style={{ background: darkMode ? "radial-gradient(213.94% 85.75% at 93.76% -9.79%, rgb(251, 165, 255) 0%, rgb(23, 23, 23) 29.64%)" : "radial-gradient(213.94% 85.75% at 93.76% -9.79%, rgb(251, 165, 255) 0%, rgb(255, 255, 255) 29.64%)", backdropFilter: 'blur(4px)' }}>
+    if(session) return <CdsFormContainer/>
+    else return <div className="flex flex-col items-center justify-center h-full w-full" style={{ background: darkMode ? "" : "radial-gradient(213.94% 85.75% at 93.76% -9.79%, rgb(251, 165, 255) 0%, rgb(255, 255, 255) 29.64%)", backdropFilter: 'blur(4px)' }}>
         <div className="flex flex-col items-center justify-center max-w-xl space-y-2 w-[64rem]">
             <div className="text-left space-y-3 py-4 w-full text-gray-700">
                 <h1 className="text-4xl font-bold">選課意願調查</h1>
@@ -36,9 +29,9 @@ const CourseDemandSurvey = () => {
                 <p>開放時間：2021/10/18 00:00 ~ 2021/10/24 23:59</p>
             </div>
             <Divider />
-            <CdsFormBeforeSignIn isLoggingIn={status == 'loading'} />
+            <NTHULoginButton/>
         </div>
-        <CdsFormContainer />
+        {/* <CdsFormContainer /> */}
     </div>
 }
 

src/middleware.ts

@@ -13,7 +13,7 @@ function getLocale(request: NextRequest) {
 
     return match(languages, locales, defaultLocale)
  }
- 
+
 export function middleware(request: NextRequest) {
   // Check if there is any supported locale in the pathname
   const { pathname } = request.nextUrl