Course-Compass/my-app/src/views/Components/CoursePagePopup.jsx at bcc7c7c7eb44b454f932830cfade44d47941a558 · InferenceKTH/Course-Compass · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React, { useEffect, useRef } from 'react';

function CoursePagePopup({
                             favouriteCourses,
                             handleFavouriteClick,
                             isOpen,
                             onClose,
                             course,
                             prerequisiteTree,
                             reviewPresenter,
                         }) {
    const treeRef = useRef(null);

    useEffect(() => {
        const handleKeyDown = (event) => {
            if (event.key === 'Escape') {
                onClose();
            }
        };
        if (isOpen) {
            window.addEventListener('keydown', handleKeyDown);
        }
        return () => {
            window.removeEventListener('keydown', handleKeyDown);
        };
    }, [isOpen, onClose]);

    const handleTreeClick = () => {
        if (treeRef.current) {
            treeRef.current.focus();
        }
    };

    if (!isOpen || !course) return null;

    return (
        <div
            className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
            onClick={onClose}
        >
            <div
                className="bg-indigo-300/75 backdrop-blur-lg h-full w-3/4 flex flex-col overflow-auto"
                onClick={(e) => e.stopPropagation()}
            >
                <div className="flex-1">
                    <div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
                        {/* Course Title Section */}
                        <div>
                            <h2 className="text-5xl font-extrabold text-[#2e2e4f]">
                                <span className="text-violet-700">{course.code}</span> - {course.name}
                                <span className="ml-4 text-lg text-violet-700 whitespace-nowrap">
                  ({course.credits} Credits)
                </span>
                            </h2>
                            <div className="my-6 h-1.5 w-full bg-violet-500"></div>
                        </div>
                        <div>
                            <button
                                className="text-yellow-100 bg-yellow-400 cursor-pointer"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    handleFavouriteClick(course);
                                }}
                            >
                                {favouriteCourses.some((fav) => fav.code === course.code)
                                    ? 'Remove from Favourites'
                                    : 'Add to Favourites'}
                            </button>
                        </div>
                        {/* Description Section */}
                        <div>
                            <h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
                            <div className="mb-3 h-0.5 w-full bg-violet-500"></div>
                            <div
                                className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
                                dangerouslySetInnerHTML={{ __html: course.description }}
                            />
                        </div>
                        {/* Prerequisite Graph Tree Section */}
                        <div>
                            <h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Prerequisite Graph Tree</h3>
                            <div className="mb-4 h-0.5 w-full bg-violet-500"></div>
                            <div
                                className="bg-indigo-300/50 outline-none focus:outline-none focus:ring-2 focus:ring-violet-600 rounded-lg transition-shadow"
                                ref={treeRef}
                                onClick={handleTreeClick}
                                tabIndex={0}
                            >
                                {prerequisiteTree}
                            </div>
                        </div>
                        {/* Reviews Section (optional) */}
                        {reviewPresenter && (
                            <div>
                                <h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Reviews</h3>
                                <div className="mb-4 h-0.5 w-full bg-violet-500"></div>
                                {reviewPresenter}
                            </div>
                        )}
                    </div>
                </div>
                <button onClick={onClose} className="px-4 py-2 bg-violet-500 text-white">
                    Close
                </button>
            </div>
        </div>
    );
}

export default CoursePagePopup;