Add course details page

overload/prisma/schema.prisma

@@ -6,16 +6,18 @@ generator client {
 }
 
 datasource db {
-  provider = "mysql"
-  url      = env("DATABASE_URL")
+  provider     = "mysql"
+  url          = env("DATABASE_URL")
   relationMode = "prisma"
 }
 
 model Course {
-  courseCode   String @id
-  courseName   String
-  termsOffered Term[]
-  doomness     Int
+  courseCode     String @id
+  courseName     String
+  termsOffered   Term[]
+  doomness       Int
+  doomnessVoters Int    @default(1)
+  description    String @db.Text
 }
 
 model Term {

overload/src/app/api/course-details/[courseCode]/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import prisma from '../../../../../prisma/client';
+
+export async function GET(request: NextRequest, { params }: { params: { courseCode: string } }) {
+  const courseCode = params.courseCode
+
+  if (courseCode) {
+    try {
+      const course = await prisma.course.findUnique({
+        where: {
+          courseCode: courseCode,
+        },
+      });
+
+      if (course) {
+        return NextResponse.json(course, { status: 200 });
+      } else {
+        return NextResponse.json(
+          { error: 'Course not found' },
+          { status: 404 }
+        );
+      }
+    } catch (err) {
+      console.error('Error fetching course:', err);
+      return NextResponse.json(
+        { error: 'Internal server error' },
+        { status: 500 }
+      );
+    }
+  } else {
+    return NextResponse.json(
+      { error: 'Course code is empty' },
+      { status: 400 }
+    );
+  }
+}

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

@@ -10,7 +10,5 @@ export async function GET(request: NextRequest) {
       course: true
     }
   })
-  console.log(courses)
-
   return NextResponse.json(courses);
 }

overload/src/app/course-details/[...courseCode]/ScaleModal.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import React, { useState } from 'react';
+
+type ScaleModalProps = {
+  closeModal: () => void;
+};
+
+export default function ScaleModal({ closeModal }: ScaleModalProps) {
+  const [scale, setScale] = useState('');
+
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    const newValue = e.currentTarget.value;
+    if (parseInt(newValue) > 0 && parseInt(newValue) <= 5) {
+      setScale(newValue);
+    } else if (newValue == '') {
+      setScale(newValue);
+    }
+  };
+
+  return (
+    <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 top bg-white text-black p-5 rounded-md font-bold flex flex-col items-center">
+      <button
+        className="top-0 right-1 absolute font-light"
+        onClick={closeModal}
+      >
+        X
+      </button>
+      <div className="mb-3">Insert your scale of 1-5 for the course</div>
+      <input
+        className="bg-black text-white h-12 rounded-md w-full"
+        onChange={handleInput}
+        value={scale}
+      ></input>
+      <button className='bg-blue-500 p-1.5 rounded-md ml-auto mt-3 text-sm hover:opacity-60'>Submit</button>
+    </div>
+  );
+}

overload/src/app/course-details/[...courseCode]/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+import { useEffect, useState } from 'react';
+import ScaleModal from './ScaleModal';
+
+export default function Page({ params }: { params: { courseCode: string } }) {
+  const [courseData, setCourseData] = useState({
+    courseCode: '',
+    description: '',
+    doomness: 0,
+  });
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    const populatePage = async () => {
+      const courseCode = params.courseCode;
+      const courseRes = await fetch(
+        `http://localhost:3000/api/course-details/${courseCode}`
+      ).then((res) => res.json());
+      console.log(courseRes)
+
+      setCourseData((prev) => ({
+        ...prev,
+        courseCode: courseRes.courseCode,
+        description: courseRes.description,
+        doomness: courseRes.doomness,
+      }));
+    };
+    populatePage();
+  }, [params.courseCode]);
+
+  return (
+    <div className="flex bg-black h-screen text-white px-28 py-20 justify-evenly gap-72">
+      <div>
+        <div className="text-4xl font-bold mb-10">{courseData.courseCode}</div>
+        <div>{courseData.description}</div>
+      </div>
+      <div className="flex flex-col items-center">
+        <div className="text-4xl font-bold mb-10">OverLoad Scale</div>
+        <div
+          className={`w-80 h-80 rounded-full ${
+            courseData.doomness == 1 ? 'bg-green-500' : 'bg-red-500'
+          }`}
+        ></div>
+        <button
+          className="text-black bg-white rounded-sm px-3 py-2 font-bold text-sm mt-10 hover:opacity-40"
+          onClick={() => setIsModalOpen(true)}
+        >
+          Add Own Scale
+        </button>
+      </div>
+      {isModalOpen && <ScaleModal closeModal={() => setIsModalOpen(false)} />}
+    </div>
+  );
+}

overload/src/app/globals.css

@@ -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;
@@ -18,4 +18,4 @@
 
 body {
   background-color: #221f1f;
-}
+} */

overload/tailwind.config.ts

@@ -1,4 +1,4 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
@@ -13,8 +13,12 @@ const config: Config = {
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      colors: {
+        skullGreen: '#3DD44C',
+        skullRed: '#E74444',
+      },
     },
   },
   plugins: [],
-}
-export default config
+};
+export default config;