Add database with Prisma

* start

* ok

* Initial db setup

* Add schema

* Make a schema for Course and Term

* Create a prisma client

* Route test

* Implement api

* Change relation mode to prisma

---------

Co-authored-by: Kieren <kierenhuynh88@gmail.com>

Author: NE1NN

overload/.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

overload/package-lock.json

@@ -9,19 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@prisma/client": "^5.5.2",
+    "next": "13.5.6",
+    "prisma": "^5.5.2",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.6"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10",
+    "eslint": "^8",
+    "eslint-config-next": "13.5.6",
     "postcss": "^8",
     "tailwindcss": "^3",
-    "eslint": "^8",
-    "eslint-config-next": "13.5.6"
+    "typescript": "^5"
   }
 }

overload/package.json

@@ -0,0 +1,17 @@
+import { PrismaClient } from '@prisma/client';
+
+const prismaClientSingleton = () => {
+  return new PrismaClient();
+};
+
+type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClientSingleton | undefined;
+};
+
+const prisma = globalForPrisma.prisma ?? prismaClientSingleton();
+
+export default prisma;
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

overload/prisma/client.ts

@@ -0,0 +1,20 @@
+-- CreateTable
+CREATE TABLE `Course` (
+    `courseCode` VARCHAR(191) NOT NULL,
+    `courseName` VARCHAR(191) NOT NULL,
+    `doomness` INTEGER NOT NULL,
+
+    PRIMARY KEY (`courseCode`)
+) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+
+-- CreateTable
+CREATE TABLE `Term` (
+    `id` INTEGER NOT NULL AUTO_INCREMENT,
+    `courseId` VARCHAR(191) NOT NULL,
+    `term` VARCHAR(191) NOT NULL,
+
+    PRIMARY KEY (`id`)
+) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+
+-- AddForeignKey
+ALTER TABLE `Term` ADD CONSTRAINT `Term_courseId_fkey` FOREIGN KEY (`courseId`) REFERENCES `Course`(`courseCode`) ON DELETE RESTRICT ON UPDATE CASCADE;

overload/prisma/migrations/20231111040536_initial/migration.sql

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "mysql"

overload/prisma/migrations/migration_lock.toml

@@ -0,0 +1,28 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "mysql"
+  url      = env("DATABASE_URL")
+  relationMode = "prisma"
+}
+
+model Course {
+  courseCode   String @id
+  courseName   String
+  termsOffered Term[]
+  doomness     Int
+}
+
+model Term {
+  id       Int    @id @default(autoincrement())
+  courseId String
+  term     String
+  course   Course @relation(fields: [courseId], references: [courseCode])
+
+  @@index([courseId])
+}

overload/prisma/schema.prisma

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from 'next/server';
+import prisma from '../../../../prisma/client';
+
+export async function GET(request: NextRequest) {
+  const courses = await prisma.term.findMany({
+    where: {
+      term: 'Term 2'
+    },
+    include: {
+      course: true
+    }
+  })
+  console.log(courses)
+
+  return NextResponse.json(courses);
+}

overload/src/app/api/home/route.ts

@@ -0,0 +1,13 @@
+type CourseOptionProps = {
+    courseCode: string
+    courseName: string
+}
+export const CourseOption = ({courseCode, courseName}: CourseOptionProps) => {
+    return (
+        <div className="flex justify-center bg-white m-5">
+            {courseCode}: {courseName}
+        </div>
+    )
+}
+
+export default CourseOption;

overload/src/app/components/courseOption.tsx

@@ -0,0 +1,47 @@
+import CourseOption from './courseOption';
+
+// const courses = [
+//     { courseCode: 'COMP1511', courseName: 'Programming Fundementals' },
+//     { courseCode: 'COMP1521', courseName: 'Computer Fundementals' },
+//     { courseCode: 'COMP1531', courseName: 'Software Engineering Fundementals' }
+// ]
+
+type Course = {
+  courseCode: string;
+  courseName: string;
+};
+
+type Term = {
+  id: number;
+  courseId: string;
+  term: string;
+  course: Course;
+};
+
+export const CoursesList = async () => {
+  const res = await fetch('http://localhost:3000/api/home', {
+    cache: 'no-store',
+  });
+
+  const terms: Term[] = await res.json();
+
+  const allCourses = terms.map((term, index) => {
+    const course = term.course;
+    return (
+      <CourseOption
+        key={index}
+        courseCode={course.courseCode}
+        courseName={course.courseName}
+      />
+    );
+  });
+
+  return (
+    <div className="justify-center">
+      <h2 className="text-white text-center pt-5">Courses List</h2>
+      <div>{allCourses}</div>
+    </div>
+  );
+};
+
+export default CoursesList;

overload/src/app/components/coursesList.tsx

@@ -0,0 +1,9 @@
+export const SelectedCourse = () => {
+    return (
+        <div className="bg-white w-[100%] m-3 rounded-md">
+            SelectedCourse
+        </div>
+    )
+}
+
+export default SelectedCourse;

overload/src/app/components/selectedCourse.tsx

@@ -0,0 +1,19 @@
+import SelectedCourse from "./selectedCourse";
+import Dropdown from "./termSelectDropDown";
+
+export const SelectedCourses = () => {
+    return (
+        <div className="flex flex-col h-[70%]">
+            <div className="flex justify-center pb-8">
+                <Dropdown />
+            </div>
+            <div className="flex flex-col items-center p-8 bg-black ">
+                <SelectedCourse />
+                <SelectedCourse />
+                <SelectedCourse />
+            </div>
+        </div>
+    )
+}
+
+export default SelectedCourses;

overload/src/app/components/selectedCourses.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+export default function Dropdown() {
+//   const [selectedOption, setSelectedOption] = useState('');
+
+//   const handleChange = (event: any) => {
+//     setSelectedOption(event.target.value);
+//   };
+
+  return (
+    <div className="w-60">
+      <select
+        className="block w-full px-4 py-2 mt-2 bg-red-500 border border-gray-200 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+        //value={selectedOption}
+        //onChange={handleChange}
+      >
+        <option value="">Select a Term</option>
+        <option value="term1">Term 1</option>
+        <option value="term2">Term 2</option>
+        <option value="term3">Term 3</option>
+      </select>
+    </div>
+  );
+}

overload/src/app/components/termSelectDropDown.tsx

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+/* :root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;

overload/src/app/globals.css

@@ -0,0 +1,25 @@
+import SelectedCourses from "../components/selectedCourses";
+import CoursesList from "../components/coursesList";
+
+export const Home = async () => {
+
+    return (
+        <div className="bg-gray-500 h-[100vh]">
+            <div className="text-center h-[20vh]">
+                top
+            </div>
+            <div className="flex pr-[8vw] pl-[8vw]">
+                <div className="w-[70%]">
+                    {/* Content for the 70% width div */}
+                    <SelectedCourses />
+                </div>
+                <div className="w-[30%] bg-black">
+                    {/* Content for the 30% width div */}
+                    <CoursesList />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Home;