Skip to content

Commit 4b683ad

Browse files
NE1NNunknown
NE1NN
and
unknown
authored
Fix Home Page (#6)
* chaange course * pointer * make courses controlled * add gap * add handledeselectcourse * add doombar * add skull img * add more skulls * add doombar * margin --------- Co-authored-by: unknown <hsuputra@gmaill.com>
1 parent ad1649a commit 4b683ad

File tree

6 files changed

+207
-128
lines changed

6 files changed

+207
-128
lines changed

‎overload/src/app/components/DoomBar.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import skullSvg from '@/app/resources/skull-head-svgrepo-com.svg';
3+
import Image from 'next/image';
4+
5+
type DoomBarProps = {
6+
doomness: number;
7+
};
8+
9+
export default function DoomBar({ doomness }: DoomBarProps) {
10+
const doomColors: { [key: number]: string } = {
11+
1: 'bg-green-500',
12+
2: 'bg-yellow-500',
13+
3: 'bg-red-500',
14+
};
15+
16+
return (
17+
<div
18+
className={`w-full h-16 flex mt-auto items-center justify-evenly ${doomColors[doomness]}`}
19+
>
20+
{Array.from({ length: 3 }).map((_, idx) => (
21+
<div
22+
key={idx}
23+
className={`${
24+
idx >= doomness && 'bg-white'
25+
} w-full flex justify-center`}
26+
>
27+
<Image
28+
src={skullSvg}
29+
alt="skull-logo"
30+
className="object-cover h-16 w-16"
31+
/>
32+
</div>
33+
))}
34+
</div>
35+
);
36+
}

‎overload/src/app/components/courseOption.tsx

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
1-
"use client"
2-
import { Button } from "@nextui-org/react";
3-
import { Course } from "../home/page";
1+
'use client';
2+
import { Button } from '@nextui-org/react';
3+
import { Course } from '../home/page';
44

55
type CourseOptionProps = {
6-
courseCode: string
7-
courseName: string
8-
handleSelectCourse: (course: Course) => void;
9-
}
10-
export const CourseOption = ({courseCode, courseName, handleSelectCourse}: CourseOptionProps) => {
11-
return (
12-
<div className=" flex justify-center bg-white m-5" onClick={() => handleSelectCourse({courseCode, courseName})}>
13-
{courseCode}: {courseName}
14-
</div>
15-
)
16-
}
6+
course: Course;
7+
handleSelectCourse: (course: Course) => void;
8+
};
9+
export const CourseOption = ({
10+
course,
11+
handleSelectCourse,
12+
}: CourseOptionProps) => {
13+
return (
14+
<div
15+
className=" flex justify-center bg-white m-5 cursor-pointer"
16+
onClick={() => handleSelectCourse(course)}
17+
>
18+
{course.courseCode}: {course.courseName}
19+
</div>
20+
);
21+
};
1722

18-
export default CourseOption;
23+
export default CourseOption;

‎overload/src/app/components/coursesList.tsx

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,37 @@
1-
"use client"
1+
'use client';
2+
import { Course } from '../home/page';
23
import CourseOption from './courseOption';
34

4-
// const courses = [
5-
// { courseCode: 'COMP1511', courseName: 'Programming Fundementals' },
6-
// { courseCode: 'COMP1521', courseName: 'Computer Fundementals' },
7-
// { courseCode: 'COMP1531', courseName: 'Software Engineering Fundementals' }
8-
// ]
9-
10-
type Course = {
11-
courseCode: string;
12-
courseName: string;
13-
};
14-
15-
type Term = {
16-
id: number;
17-
courseId: string;
18-
term: string;
19-
course: Course;
20-
};
21-
225
type CoursesListProps = {
23-
selectedTerm: number
24-
selectedCourses: Course[]
6+
selectedTerm: number;
7+
selectedCourses: Course[];
8+
courses: Course[];
259
handleSelectCourse: (course: Course) => void;
26-
}
27-
28-
export const CoursesList = async ({ selectedTerm, selectedCourses, handleSelectCourse }: CoursesListProps) => {
29-
const res = await fetch('http://localhost:3000/api/home', {
30-
cache: 'no-store',
31-
});
32-
33-
const courses: Term[] = await res.json();
10+
};
3411

12+
export const CoursesList = async ({
13+
selectedTerm,
14+
selectedCourses,
15+
courses,
16+
handleSelectCourse,
17+
}: CoursesListProps) => {
18+
// const res = await fetch('http://localhost:3000/api/home', {
19+
// cache: 'no-store',
20+
// });
21+
22+
// const courses: Course[] = await res.json();
3523
const allCourses = courses.map((course, index) => {
36-
const courseObj = course.course;
37-
const alreadySelected = selectedCourses.find((c) => c.courseCode === courseObj.courseCode);
24+
const alreadySelected = selectedCourses.find(
25+
(c) => c.courseCode === course.courseCode
26+
);
3827
// if (parseInt(course.term.split(" ")[1]) !== selectedTerm) return;
3928
// console.log(course.term.split(" ")[1])
4029
// console.log(selectedTerm)
4130
if (alreadySelected) return;
4231
return (
4332
<CourseOption
4433
key={index}
45-
courseCode={courseObj.courseCode}
46-
courseName={courseObj.courseName}
34+
course={course}
4735
handleSelectCourse={handleSelectCourse}
4836
/>
4937
);

‎overload/src/app/components/selectedCourse.tsx

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
1+
import { Course } from '../home/page';
2+
13
type SelectedCourseProps = {
2-
courseCode: string
3-
courseName: string
4-
}
4+
courseCode: string;
5+
courseName: string;
6+
handleDeselectCourse: (courseCode: string) => void;
7+
};
58

6-
export const SelectedCourse = ({ courseCode, courseName }: SelectedCourseProps) => {
7-
return (
8-
<div className="bg-white w-[100%] m-3 rounded-md">
9-
{courseCode}: {courseName}
10-
</div>
11-
)
12-
}
9+
export const SelectedCourse = ({
10+
courseCode,
11+
courseName,
12+
handleDeselectCourse,
13+
}: SelectedCourseProps) => {
14+
return (
15+
<div
16+
className="bg-white w-[100%] m-3 rounded-md cursor-pointer"
17+
onClick={() => handleDeselectCourse(courseCode)}
18+
>
19+
{courseCode}: {courseName}
20+
</div>
21+
);
22+
};
1323

14-
export default SelectedCourse;
24+
export default SelectedCourse;

‎overload/src/app/components/selectedCourses.tsx

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
1-
"use client"
2-
import { Course } from "../home/page";
3-
import SelectedCourse from "./selectedCourse";
4-
import Dropdown from "./termSelectDropDown";
1+
'use client';
2+
import { Course } from '../home/page';
3+
import SelectedCourse from './selectedCourse';
4+
import Dropdown from './termSelectDropDown';
55

66
type SelectedCoursesProps = {
7-
selectedCourses: Course[]
8-
handleSelectTerm: (term: number) => void;
9-
}
7+
selectedCourses: Course[];
8+
handleSelectTerm: (term: number) => void;
9+
handleDeselectCourse: (courseCode: string) => void;
10+
};
1011

11-
export const SelectedCourses = ({ selectedCourses, handleSelectTerm }: SelectedCoursesProps) => {
12-
const courses = selectedCourses.map((course) => <SelectedCourse key={course.courseCode} courseCode={course.courseCode} courseName={course.courseName}/>)
12+
export const SelectedCourses = ({
13+
selectedCourses,
14+
handleSelectTerm,
15+
handleDeselectCourse,
16+
}: SelectedCoursesProps) => {
17+
const courses = selectedCourses.map((course) => (
18+
<SelectedCourse
19+
key={course.courseCode}
20+
courseCode={course.courseCode}
21+
courseName={course.courseName}
22+
handleDeselectCourse={handleDeselectCourse}
23+
/>
24+
));
1325

14-
return (
15-
<div className="flex flex-col h-[70%]">
16-
<div className="flex justify-center pb-8">
17-
<Dropdown handleSelectTerm={handleSelectTerm}/>
18-
</div>
19-
<div className="flex flex-col items-center p-8 bg-black ">
20-
{courses}
21-
</div>
22-
</div>
23-
)
24-
}
26+
return (
27+
<div className="flex flex-col h-[70%]">
28+
<div className="flex justify-center pb-8">
29+
<Dropdown handleSelectTerm={handleSelectTerm} />
30+
</div>
31+
<div className="flex flex-col items-center p-8 bg-black ">{courses}</div>
32+
</div>
33+
);
34+
};
2535

26-
export default SelectedCourses;
36+
export default SelectedCourses;

‎overload/src/app/home/page.tsx

Lines changed: 78 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,87 @@
1-
"use client"
2-
import SelectedCourses from "../components/selectedCourses";
3-
import CoursesList from "../components/coursesList";
4-
import { useState } from "react";
5-
import Navbar from "../components/NavBar";
1+
'use client';
2+
import SelectedCourses from '../components/selectedCourses';
3+
import CoursesList from '../components/coursesList';
4+
import { useEffect, useState } from 'react';
5+
import Navbar from '../components/NavBar';
6+
import DoomBar from '../components/DoomBar';
67

78
export type Course = {
8-
courseCode: string
9-
courseName: string
10-
}
9+
courseCode: string;
10+
courseName: string;
11+
doomness: number;
12+
};
1113

1214
export const Home = () => {
13-
const [selectedTerm, setSelectedTerm] = useState<number>(1);
14-
const [selectedCourses, setSelectedCourses] = useState<Course[]>([
15-
// {
16-
// courseCode: "COMP1511",
17-
// courseName: "Programming fundementalss"
18-
// }
19-
])
20-
21-
const handleSelectTerm = (term: number) => {
22-
setSelectedTerm(term);
23-
}
15+
const [selectedTerm, setSelectedTerm] = useState<number>(1);
16+
const [selectedCourses, setSelectedCourses] = useState<Course[]>([]);
17+
const [allCourses, setAllCourses] = useState<Course[]>([]);
18+
const [doomness, setDoomness] = useState(1);
19+
20+
useEffect(() => {
21+
const fetchData = async () => {
22+
const res = await fetch('http://localhost:3000/api/home', {
23+
cache: 'no-store',
24+
});
25+
const courses = await res.json();
26+
setAllCourses(courses);
27+
};
28+
fetchData();
29+
}, []);
2430

25-
const handleSelectCourse = (course: Course) => {
26-
const currentlySelectedCourses = [...selectedCourses]
27-
if (currentlySelectedCourses.length > 2) return;
28-
currentlySelectedCourses.push(course);
29-
setSelectedCourses(currentlySelectedCourses);
31+
useEffect(() => {
32+
let result = 0;
33+
selectedCourses.forEach((course) => {
34+
result += course.doomness;
35+
});
36+
if (result) {
37+
setDoomness(Math.floor(result / selectedCourses.length));
38+
} else {
39+
setDoomness(1);
3040
}
41+
}, [selectedCourses]);
42+
43+
const handleSelectTerm = (term: number) => {
44+
setSelectedTerm(term);
45+
};
3146

32-
return (
33-
<div className="bg-gray-500 h-[100vh]">
34-
{/* <div className="text-center h-[20vh]">
35-
hello
36-
</div> */}
37-
<div className="text-center h-[20vh]">
38-
39-
</div>
40-
<div className="flex pr-[8vw] pl-[8vw]">
41-
<div className="w-[70%]">
42-
{/* Content for the 70% width div */}
43-
<SelectedCourses selectedCourses={selectedCourses} handleSelectTerm={handleSelectTerm}/>
44-
</div>
45-
<div className="w-[30%] bg-black">
46-
{/* Content for the 30% width div */}
47-
<CoursesList selectedTerm={selectedTerm} selectedCourses={selectedCourses} handleSelectCourse={handleSelectCourse}/>
48-
</div>
49-
</div>
50-
<div className="text-center">
51-
{/* you are doomed */}
52-
</div>
47+
const handleSelectCourse = (course: Course) => {
48+
const currentlySelectedCourses = [...selectedCourses];
49+
if (currentlySelectedCourses.length > 2) return;
50+
currentlySelectedCourses.push(course);
51+
setSelectedCourses(currentlySelectedCourses);
52+
};
53+
54+
const handleDeselectCourse = (courseCode: string) => {
55+
const newSelectedCourses = selectedCourses.filter(
56+
(c) => c.courseCode !== courseCode
57+
);
58+
setSelectedCourses(newSelectedCourses);
59+
};
60+
61+
return (
62+
<div className="bg-[#221f1f] min-h-screen">
63+
<div className="text-center h-[20vh]"></div>
64+
<div className="flex pr-[8vw] pl-[8vw] gap-5">
65+
<div className="w-[70%] flex flex-col">
66+
<SelectedCourses
67+
selectedCourses={selectedCourses}
68+
handleSelectTerm={handleSelectTerm}
69+
handleDeselectCourse={handleDeselectCourse}
70+
/>
71+
<DoomBar doomness={doomness} />
72+
</div>
73+
<div className="w-[30%] bg-black">
74+
<CoursesList
75+
selectedTerm={selectedTerm}
76+
selectedCourses={selectedCourses}
77+
courses={allCourses}
78+
handleSelectCourse={handleSelectCourse}
79+
/>
5380
</div>
54-
)
55-
}
81+
</div>
82+
<div className="text-center">{/* you are doomed */}</div>
83+
</div>
84+
);
85+
};
5686

57-
export default Home;
87+
export default Home;

0 commit comments

Comments
 (0)