Skip to content

added avg rating. fixed some bugs #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Dinoxh merged 2 commits into from
Apr 16, 2025
Merged

added avg rating. fixed some bugs #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
916c99e
added avg rating. fixed some bugs
Dinoxh Apr 16, 2025
4fb43fc
Merge branch 'main' into reviews-improvment
Dinoxh Apr 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion my-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
"react-infinite-scroll-component": "^6.1.0",
"react-router-dom": "^7.4.0",
"reactflow": "^11.11.4",
"tailwindcss": "^4.0.17"
"tailwindcss": "^4.0.17",
"@react-buddy/ide-toolbox": "^2.4.0"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
Expand Down
70 changes: 70 additions & 0 deletions my-app/src/dev/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
This directory contains utility files which enable some visual features of the
[React Buddy](https://plugins.jetbrains.com/plugin/17467-react-buddy/) plugin.
Files in the directory should be committed to source control.

React Buddy palettes describe reusable components and building blocks. `React Palette` tool window becomes available
when an editor with React components is active. You can drag and drop items from the tool window to the code editor or
JSX Outline. Alternatively, you can insert components from the palette using code generation action (`alt+insert` /
`⌘ N`).

Add components to the palette using `Add to React Palette` intention or via palette editor (look for the corresponding
link in `palette.tsx`). There are some ready-to-use palettes for popular React libraries which are published as npm
packages and can be added as a dependency:

```jsx
import AntdPalette from "@react-buddy/palette-antd";
import ReactIntlPalette from "@react-buddy/palette-react-intl";

export const PaletteTree = () => (
<Palette>
<AntdPalette/>
<ReactIntlPalette/>
<Category name="App templates">
<Component name="Card">
<Variant name="Loading">
<Card title="Card title">
<Skeleton loading={true} avatar active>
Card content
</Skeleton>
</Card>
</Variant>
</Component>
<Component name="Form">
<Variant proto={FormTemplate}/>
</Component>
</Category>
</Palette>
)
```

React Buddy explicitly registers any previewed component in the `previews.tsx` file so that you can specify required
props.

```jsx
<ComponentPreview path="/Page">
<Page title={'Hello'}/>
</ComponentPreview>
```

You can add some global initialization logic for the preview mode in `useInitital.ts`,
e.g. implicitly obtain user session:

```typescript
export const useInitial: () => InitialHookStatus = () => {
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<boolean>(false);

useEffect(() => {
setLoading(true);
async function login() {
const response = await loginRequest(DEV_LOGIN, DEV_PASSWORD);
if (response?.status !== 200) {
setError(true);
}
setLoading(false);
}
login();
}, []);
return { loading, error };
};
```
9 changes: 9 additions & 0 deletions my-app/src/dev/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from "react"
import {useInitial} from "./useInitial"

const ComponentPreviews = React.lazy(() => import("./previews"))

export {
ComponentPreviews,
useInitial
}
25 changes: 25 additions & 0 deletions my-app/src/dev/palette.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {Fragment} from "react"
import {
Category,
Component,
Variant,
Palette,
} from "@react-buddy/ide-toolbox"

export const PaletteTree = () => (
<Palette>
<Category name="App">
<Component name="Loader">
<Variant>
<ExampleLoaderComponent/>
</Variant>
</Component>
</Category>
</Palette>
)

export function ExampleLoaderComponent() {
return (
<Fragment>Loading...</Fragment>
)
}
11 changes: 11 additions & 0 deletions my-app/src/dev/previews.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import {Previews} from '@react-buddy/ide-toolbox'
import {PaletteTree} from './palette'

const ComponentPreviews = () => {
return (
<Previews palette={<PaletteTree/>}>
</Previews>
)
}

export default ComponentPreviews
15 changes: 15 additions & 0 deletions my-app/src/dev/useInitial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {useState} from 'react'

export const useInitial = () => {
const [status, setStatus] = useState({
loading: false,
error: false
})
/*
Implement hook functionality here.
If you need to execute async operation, set loading to true and when it's over, set loading to false.
If you caught some errors, set error status to true.
Initial hook is considered to be successfully completed if it will return {loading: false, error: false}.
*/
return status
}
6 changes: 6 additions & 0 deletions my-app/src/model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,12 @@ export const model = {
// this.filterOptions.applyDepartmentFilter = departmentFilterState;
// },

async getAverageRating(courseCode) {
const reviews = await getReviewsForCourse(courseCode);
if (!reviews || reviews.length === 0) return null;
const total = reviews.reduce((sum, review) => sum + (review.overallRating || 0), 0);
return (total / reviews.length).toFixed(1);
},


};
13 changes: 7 additions & 6 deletions my-app/src/presenters/ListViewPresenter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ const ListViewPresenter = observer(({ model }) => {
const container = scrollContainerRef.current;
if (!container || !model.scrollPosition) return;



const attemptScroll = () => {

// refresh on significant change (same as in firebase)
if (Math.abs(container.scrollTop - model.scrollPosition) < 100)
if (Math.abs(container.scrollTop - model.scrollPosition) < 100)
return;

attempts++;
Expand All @@ -43,7 +43,7 @@ const ListViewPresenter = observer(({ model }) => {

useEffect(() => {
// Load initial scroll position
const savedPosition = model.user
const savedPosition = model.user
? model.scrollPosition
: localStorage.getItem("scrollPosition");
if (savedPosition) {
Expand Down Expand Up @@ -88,15 +88,16 @@ const ListViewPresenter = observer(({ model }) => {
isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)}
course={selectedCourse}
prerequisiteTree={preP}
reviewPresenter={reviewPresenter} />
reviewPresenter={reviewPresenter}/>




return <ListView
courses={model.courses}
searchResults={model.currentSearch}
currentSearchLenght={model.currentSearch.length}

favouriteCourses={model.favourites}
addFavourite={addFavourite}
removeFavourite={removeFavourite}
Expand All @@ -106,7 +107,7 @@ const ListViewPresenter = observer(({ model }) => {
setIsPopupOpen={setIsPopupOpen}
setSelectedCourse={setSelectedCourse}
popup={popup}

targetScroll={model.scrollPosition}
scrollContainerRef={scrollContainerRef}
persistantScrolling={persistantScrolling}
Expand Down
129 changes: 90 additions & 39 deletions my-app/src/views/Components/CoursePagePopup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,36 @@
import React, { useEffect, useRef, useState } from 'react';
import RatingComponent from "./RatingComponent.jsx";
import { model } from "../../model.js";

function CoursePagePopup({
favouriteCourses,
handleFavouriteClick,
isOpen,
onClose,
course,
prerequisiteTree,
reviewPresenter,
}) {
favouriteCourses,
handleFavouriteClick,
isOpen,
onClose,
course,
prerequisiteTree,
reviewPresenter,
}) {

const treeRef = useRef(null);
const [showOverlay, setShowOverlay] = useState(true);
const [averageRating, setAverageRating] = useState(null);


useEffect(() => {
const fetchAverageRating = async () => {
try {
const avg = await model.getAverageRating(course.code);
setAverageRating(avg);
} catch (error) {
setAverageRating(null);
}
};

if (isOpen && course) fetchAverageRating();

}, [isOpen, course]);


useEffect(() => {
const handleKeyDown = (event) => {
Expand Down Expand Up @@ -53,42 +73,74 @@ function CoursePagePopup({
<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>
({course.credits} Credits)
</span>
</h2>
<div className="my-6 h-1.5 w-full bg-violet-500"></div>
</div>
<div>
<div className="flex justify-between items-center">
<button
className={`inline-flex items-center px-4 py-2 gap-2 rounded-lg
transition-all duration-300 ease-in-out
font-semibold text-sm shadow-sm
${favouriteCourses.some((fav) => fav.code === course.code)
? 'bg-yellow-400 /90 hover:bg-yellow-500/90 border-2 border-yellow-600 hover:border-yellow-700 text-yellow-900'
: 'bg-yellow-200/90 hover:bg-yellow-300 border-2 border-yellow-400 hover:border-yellow-500 text-yellow-600 hover:text-yellow-700'
}`}
transition-all duration-300 ease-in-out
font-semibold text-sm shadow-sm
${
favouriteCourses.some((fav) => fav.code === course.code)
? 'bg-yellow-400/90 hover:bg-yellow-500/90 border-2 border-yellow-600 hover:border-yellow-700 text-yellow-900'
: 'bg-yellow-200/90 hover:bg-yellow-300 border-2 border-yellow-400 hover:border-yellow-500 text-yellow-600 hover:text-yellow-700'
}`}
onClick={(e) => {
e.stopPropagation();
handleFavouriteClick(course);
}}
>
{favouriteCourses.some((fav) => fav.code === course.code) ? (
<>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 fill-yellow-900" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 fill-yellow-900"
viewBox="0 0 20 20"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
Remove from Favourites
</>
) : (
<>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 stroke-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 stroke-yellow-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
/>
</svg>
Add to Favourites
</>
)}
</button>

<div className="flex flex-col items-center">
{averageRating !== null ? (
<p className="text-lg font-semibold text-violet-700">
Average Rating: {averageRating} / 5
</p>
) : (
<p className="text-lg font-semibold text-violet-700">
No Reviews Yet
</p>
)}
<RatingComponent readOnly={true} value={averageRating || 0} />
</div>
</div>

{/* Description Section */}
<div>
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
Expand All @@ -102,26 +154,25 @@ function CoursePagePopup({
<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 rounded-lg"></div>
<div className="relative rounded-lg">
{showOverlay && (
<div
className="absolute inset-0 z-10 bg-indigo-200/10 rounded-lg cursor-pointer flex items-center justify-center z-51"
onClick={(e) => {
e.stopPropagation();
setShowOverlay(false);
}}
>
</div>
)}
<div className="relative rounded-lg">
{showOverlay && (
<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>
className="absolute inset-0 z-10 bg-indigo-200/10 rounded-lg cursor-pointer flex items-center justify-center z-51"
onClick={(e) => {
e.stopPropagation();
setShowOverlay(false);
}}
></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>
</div>
{/* Reviews Section (optional) */}
{reviewPresenter && (
Expand Down
Loading
Loading