feat: fetch student data as surname is validated & building name utils

triamudomcmc · May 13, 2024 · 6831660 · 6831660
1 parent 131acf6
commit 6831660
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 69 deletions.
diff --git a/src/components/announce/get_room/03_display_data.client.tsx b/src/components/announce/get_room/03_display_data.client.tsx
@@ -1,37 +1,13 @@
 "use client";
+import { getBuildingName } from "@/lib/utils";
 import { type Process } from "./get_room.client";
 import { AnnounceHeading } from "./heading";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useFetch } from "@/lib/fetch";
+import type { student as StudentData } from "@/schema";
 
 interface DisplayDataProps {
   process: Process;
-  studentId: string;
-}
-
-/*
-ex.
-ชื่อ  นางสาวสุทธิชา  สีผาย
-เลขประจำตัว  63012
-แผนการเรียน  วิทย์ - คณิต
-ชั้น  ม.5
-ตึก  คุณหญิงหรั่ง กันตารัติ
-ห้อง  833
-เลขที่  20
-ครูที่ปรึกษา  เรียนเด่น เล่นดี
-                   เรียนเด่น เล่นดี
-*/
-
-// to be replaced with actual type
-interface StudentData {
-  name: string;
-  studentId: string;
-  academicProgram: string;
-  grade: string;
-  building: string;
-  room: string;
-  number: string;
-  advisor: string[];
+  studentData: StudentData;
 }
 
 const ClipboardIcon = () => (
@@ -99,19 +75,19 @@ const StudentDataPanel = ({ studentData }: { studentData: StudentData }) => (
     </div>
     <div className="flex gap-2">
       <h2 className="text-slate-600">เลขประจำตัว</h2>
-      <h2 className="text-slate-800">{studentData.studentId}</h2>
+      <h2 className="text-slate-800">{studentData.id}</h2>
     </div>
     <div className="flex gap-2">
       <h2 className="text-slate-600">แผนการเรียน</h2>
-      <h2 className="text-slate-800">{studentData.academicProgram}</h2>
+      <h2 className="text-slate-800">{studentData.program}</h2>
     </div>
     <div className="flex gap-2">
       <h2 className="text-slate-600">ชั้น</h2>
-      <h2 className="text-slate-800">{studentData.grade}</h2>
+      <h2 className="text-slate-800">{studentData.level}</h2>
     </div>
     <div className="flex gap-2">
       <h2 className="text-slate-600">ตึก</h2>
-      <h2 className="text-slate-800">{studentData.building}</h2>
+      <h2 className="text-slate-800">{getBuildingName(studentData.room)}</h2>
     </div>
     <div className="flex gap-2">
       <h2 className="text-slate-600">ห้อง</h2>
@@ -124,36 +100,28 @@ const StudentDataPanel = ({ studentData }: { studentData: StudentData }) => (
     <div className="flex gap-2">
       <h2 className="text-slate-600">ครูที่ปรึกษา</h2>
       <div className="flex flex-col gap-1">
-        {studentData.advisor.map((advisor, index) => (
+        {/* {studentData.advisor.map((advisor, index) => (
           <h2 key={index} className="text-slate-800">
             {advisor}
           </h2>
-        ))}
+        ))} */}
       </div>
     </div>
+    <div className="flex gap-2">
+      <h2 className="text-slate-600">รหัสไวไฟ</h2>
+      <div className="flex flex-col gap-1">{studentData.wifi}</div>
+    </div>
+    <div className="flex gap-2">
+      <h2 className="text-slate-600">อีเมล</h2>
+      <div className="flex flex-col gap-1">{studentData.outlook}</div>
+    </div>
   </div>
 );
 
-const mock = true;
-
-export default function DisplayData({ studentId, process }: DisplayDataProps) {
-  const { data: studentData, loading: studentDataLoading } =
-    useFetch<StudentData>(
-      `/api/student/${studentId}/data`,
-      mock
-        ? {
-            name: "นางสาวสุทธิชา สีผาย",
-            studentId: "63012",
-            academicProgram: "วิทย์ - คณิต",
-            grade: "ม.5",
-            building: "คุณหญิงหรั่ง กันตารัติ",
-            room: "833",
-            number: "20",
-            advisor: ["เรียนเด่น เล่นดี", "เรียนเด่น เล่นดี"],
-          }
-        : undefined,
-    );
-
+export default function DisplayData({
+  studentData,
+  process,
+}: DisplayDataProps) {
   return (
     <div className="flex flex-col gap-2">
       <AnnounceHeading
@@ -169,12 +137,7 @@ export default function DisplayData({ studentId, process }: DisplayDataProps) {
             <h2 className="text-lg font-bold">ข้อมูลนักเรียน</h2>
           </div>
 
-          {/* student data */}
-          {studentDataLoading ? (
-            <StudentLoadingSkeleton />
-          ) : (
-            <StudentDataPanel studentData={studentData as StudentData} />
-          )}
+          <StudentDataPanel studentData={studentData} />
         </div>
       )}
     </div>

diff --git a/src/components/announce/get_room/get_room.client.tsx b/src/components/announce/get_room/get_room.client.tsx
@@ -1,9 +1,9 @@
 "use client";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import StudentId from "./01_student_id.client";
 import ValidateSurname from "./02_validate_surname.client";
 import DisplayData from "./03_display_data.client";
-import { httpFetch, mockFetch } from "@/lib/fetch";
+import { student as StudentData, emptyStudent } from "@/schema";
 
 export type Process = "idle" | "editing" | "done";
 
@@ -24,6 +24,7 @@ export default function GetRoom() {
     studentId: "",
     firstNameCheck: "",
   });
+  const [studentData, setStudentData] = useState<StudentData>(emptyStudent);
 
   const [process, setProcess] = useState<
     Record<"step_1" | "step_2" | "step_3", Process>
@@ -50,7 +51,7 @@ export default function GetRoom() {
 
     setStudentInput({
       studentId: studentId,
-      firstNameCheck: studentName.firstname,
+      firstNameCheck: studentName,
     });
   };
 
@@ -66,6 +67,9 @@ export default function GetRoom() {
     if (validateSurname.status === 404) {
       throw new Error("Invalid surname");
     }
+
+    const studentData = await validateSurname.json();
+    setStudentData(studentData);
   };
 
   return (
@@ -108,10 +112,7 @@ export default function GetRoom() {
           saveInput={handleSaveSurname}
           firstNameCheck={studentInput.firstNameCheck}
         />
-        <DisplayData
-          process={process.step_3}
-          studentId={studentInput.studentId}
-        />
+        <DisplayData process={process.step_3} studentData={studentData} />
       </div>
     </section>
   );

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,6 +1,33 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+
+const buildingNames: Record<string, string> = {
+  "1": "ตึก 2",
+  "2": "ตึก 3",
+  "3": "ตึก 60 ปี",
+  "4": "ตึกเฉลิมพระเกียรติฯ 72 พรรษา",
+  "6": "ตึก 55 ปี",
+  "8": "ตึก คุณหญิงหรั่งฯ",
+  "9": "ตึก 9",
+};
+
+const building1 = [3, 4, 5];
+const artBuilding = [6, 7, 8];
+
+export function getBuildingName(room: string) {
+  // if building is two digits and the first digit is 3,4,5 then it is building 1
+
+  if (room.length === 2 && building1.includes(parseInt(room[0]))) {
+    return "ตึก 1";
+  }
+
+  if (room.length === 2 && artBuilding.includes(parseInt(room[0]))) {
+    return "ตึกศิลปะ";
+  }
+
+  return buildingNames[room[0]];
 }
diff --git a/src/schema.ts b/src/schema.ts
@@ -16,4 +16,19 @@ export const StudentsTable = pgTable("students", {
   level: integer("level").notNull(),
 });
 
+export const emptyStudent = {
+  id: 0,
+  title: "",
+  name: "",
+  lastname: "",
+  room: "",
+  number: 0,
+  program: "",
+  gmail: "",
+  outlook: "",
+  wifi: "",
+  password: "",
+  level: 0,
+};
+
 export type student = InferSelectModel<typeof StudentsTable>;