Skip to content

Improved reviews #95

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
LSKpr merged 4 commits into from
May 7, 2025
Merged

Improved reviews #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7694cde
changes layout of reviews, 2 rows
emyemy89 May 7, 2025
7881421
all categories in one row
emyemy89 May 7, 2025
1c2247d
adapt star size
emyemy89 May 7, 2025
e33f440
Update ReviewView.jsx
emyemy89 May 7, 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
19 changes: 11 additions & 8 deletions my-app/src/views/Components/RatingComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import React from 'react';
import StarComponent from "./StarComponent.jsx";

const RatingComponent = ({ value = 0, onChange, readOnly = false }) => {
const RatingComponent = ({ value = 0, onChange, readOnly = false, className = "" }) => {
const handleRating = (starIndex, isLeftHalf) => {
if (readOnly) return; // if readOnly, do nothing
if (readOnly) return;
const newRating = isLeftHalf ? starIndex + 0.5 : starIndex + 1;
onChange(newRating);
}
};

return (
<div className="font-kanit flex justify-center items-center bg-transparent">
<div className="flex justify-center mb-4 gap-1 sm:gap-2">
{Array.from({length: 5}, (_, index) => (
<div className={`font-kanit flex justify-center items-center bg-transparent ${className}`}>
{/* <div className="flex gap-1 sm:gap-2"> */}
<div className="flex gap-[1px] text-xs leading-none">


{Array.from({ length: 5 }, (_, index) => (
<StarComponent
key={index}
index={index}
Expand All @@ -23,6 +26,6 @@ const RatingComponent = ({ value = 0, onChange, readOnly = false }) => {
</div>
</div>
);
}
};

export default RatingComponent;
export default RatingComponent;
6 changes: 3 additions & 3 deletions my-app/src/views/Components/StarComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ const StarComponent = ({ index, rating, onRatingChange, onHover, readOnly = fals

return (
<div
className={`relative group ${readOnly ? 'cursor-default' : 'cursor-pointer'}`}
className={`relative group leading-none ${readOnly ? 'cursor-default' : 'cursor-pointer'}`}
onMouseEnter={() => !readOnly && onHover && onHover(index + 1)}
onMouseLeave={() => !readOnly && onHover && onHover(0)}
>
<i
className={`bx ${starClass} text-5xl text-violet-500 t-500 transition-transform duration-200 ${!readOnly && 'group-hover:scale-110'}`}
className={`bx ${starClass} text-xl text-violet-500 transition-transform duration-200 ${!readOnly && 'group-hover:scale-110'}`}
></i>
{!readOnly && (
<>
Expand All @@ -38,4 +38,4 @@ const StarComponent = ({ index, rating, onRatingChange, onHover, readOnly = fals
);
};

export default StarComponent;
export default StarComponent;
215 changes: 146 additions & 69 deletions my-app/src/views/ReviewView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,157 @@
import React from "react";
import React, { useState, useRef, useEffect } from "react";


import RatingComponent from "../views/Components/RatingComponent.jsx";

export function ReviewView(props) {
const grades = ["🅰️", "B", "C", "D", "E", "F"];
const {formData, setFormData} = props;
const [showGradeOptions, setShowGradeOptions] = useState(false);
const [showRecommendOptions, setShowRecommendOptions] = useState(false);
const gradeRef = useRef(null);
const recommendRef = useRef(null);


useEffect(() => {
function handleClickOutside(event) {
if (gradeRef.current && !gradeRef.current.contains(event.target)) {
setShowGradeOptions(false);
}
if (recommendRef.current && !recommendRef.current.contains(event.target)) {
setShowRecommendOptions(false);
}
}

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);


return (
<div>
<div className="mt-4">
<div className="border border-black space-y-6 pb-4 mb-4">

<div className="center-align ">
<p className="font-bold font-kanit items-center text-center">
Overall rating
<RatingComponent
value={formData.overallRating}
onChange={(val) => setFormData({ ...formData, overallRating: val })}
/>
</p>
</div>
<div className="flex flex-wrap justify-center gap-6 mt-4">
{/* Overall Rating */}
<div className="text-center">
<p className="font-bold font-kanit mb-1">Overall rating</p>
<RatingComponent
className="flex gap-[2px] text-base justify-center"
value={formData.overallRating}
onChange={(val) => setFormData({ ...formData, overallRating: val })}
/>
</div>

{/* Difficulty Rating */}
<div className="text-center">
<p className="font-bold font-kanit mb-1">Difficulty rating</p>
<RatingComponent
className="flex gap-[2px] text-[1.25rem] justify-center"
value={formData.difficultyRating}
onChange={(val) => setFormData({ ...formData, difficultyRating: val })}
/>
</div>

{/* Professor Rating */}
<div className="text-center">
<p className="font-bold font-kanit mb-1">Professor rating</p>
<RatingComponent
className="flex gap-[2px] text-sm justify-center"
value={formData.professorRating}
onChange={(val) => setFormData({ ...formData, professorRating: val })}
/>
</div>

{/* Grade Section */}
<div className="relative" ref={gradeRef}>
<div className="flex-1 flex items-center justify-center gap-2">
<p className="font-bold font-kanit text-center">Grade:</p>
<div className="relative">
<div
className="px-2 py-1 border border-gray-300 rounded-sm text-sm cursor-pointer text-center"
onClick={() => setShowGradeOptions((prev) => !prev)}
>
{formData.grade || "Select"}
</div>
{showGradeOptions && (
<div className="absolute left-1/2 -translate-x-1/2 mt-2 bg-white p-2 rounded-md shadow-lg space-x-2 z-10 flex">
{grades.map((grade) => (
<button
key={grade}
onClick={() => {
setFormData({ ...formData, grade });
setShowGradeOptions(false);
}}
className={`px-4 py-2 rounded-md shadow-md ${
formData.grade === grade
? "bg-violet-600 text-white"
: "bg-violet-200 hover:bg-violet-300"
}`}
>
{grade}
</button>
))}
</div>
)}
</div>
</div>
</div>

{/* Recommend Section */}
<div className="relative" ref={recommendRef}>
<div className="flex-1 flex items-center justify-center gap-2">
<p className="font-bold font-kanit text-center">Recommend?</p>
<div className="relative">
<div
className="px-2 py-1 border border-gray-300 rounded-sm text-sm cursor-pointer text-center"
onClick={() => setShowRecommendOptions((prev) => !prev)}
>
{formData.recommend === null ? "Select" : formData.recommend ? "Yes" : "No"}
</div>
{showRecommendOptions && (
<div className="absolute left-1/2 -translate-x-1/2 mt-2 bg-white p-2 rounded-md shadow-lg space-x-2 z-10 flex">
<button
onClick={() => {
setFormData({ ...formData, recommend: true });
setShowRecommendOptions(false);
}}
className={`px-4 py-2 rounded-md shadow-md ${
formData.recommend
? "bg-violet-600 text-white"
: "bg-violet-200 hover:bg-violet-300"
}`}
>
Yes
</button>
<button
onClick={() => {
setFormData({ ...formData, recommend: false });
setShowRecommendOptions(false);
}}
className={`px-4 py-2 rounded-md shadow-md ${
formData.recommend === false
? "bg-violet-600 text-white"
: "bg-violet-200 hover:bg-violet-300"
}`}
>
No
</button>
</div>
)}
</div>
</div>
</div>
</div>


<div>
<p className="font-bold font-kanit items-center text-center">
Difficulty rating
<RatingComponent
value={formData.difficultyRating}
onChange={(val) => setFormData({ ...formData, difficultyRating: val })}
/>
</p>
</div>

<div>
<p className="font-bold font-kanit items-center text-center">
{/* <p className="font-bold font-kanit items-center text-center">
Professor Name & Rating
</p>
</p> */}
<div className="font-kanit flex justify-center mt-2">
<input
type="text"
Expand All @@ -45,63 +163,20 @@ export function ReviewView(props) {
</div>
</div>

<div>
{/* <div>
<p className="font-bold font-kanit items-center text-center">
Professor Rating
<RatingComponent
className="flex gap-[2px] text-sm justify-center"
value={formData.professorRating}
onChange={(val) => setFormData({ ...formData, professorRating: val })}
/>
</p>
</div>

<div>
<p className="font-bold font-kanit items-center text-center">Grade</p>
<div className="flex font-kanit justify-center space-x-2 mt-2">
{grades.map((grade) => (
<button
key={grade}
onClick={() => setFormData({ ...formData, grade })}
className={`px-4 py-2 rounded-md shadow-md ${
formData.grade === grade
? "bg-violet-600 text-white"
: "bg-violet-200 hover:bg-violet-300"
}`}
>
{grade}
</button>
))}
</div>
</div>
</div> */}

<div>
<p className="font-bold font-kanit items-center text-center">
Would you recommend this course?
</p>
<div className="flex font-kanit justify-center space-x-2 mt-2">
<button
onClick={() => setFormData({ ...formData, recommend: true })}
className={`px-4 py-2 rounded-md shadow-md ${
formData.recommend
? "bg-violet-600 text-white"
: "bg-violet-200 hover:bg-violet-300"
}`}
>
Yes
</button>
<button
onClick={() => setFormData({ ...formData, recommend: false })}
className={`px-4 py-2 rounded-md shadow-md ${
formData.recommend === false
? "bg-violet-600 text-white"
: "bg-violet-200 hover:bg-violet-300"
}`}
>
No
</button>
</div>


</div>


<div className="relative flex justify-center mt-2">
<div className="w-3/4 relative">
Expand Down Expand Up @@ -146,6 +221,8 @@ export function ReviewView(props) {
<p className="font-bold font-kanit items-center text-center">
Overall Rating
<RatingComponent
//
className="flex space-x-1 text-sm justify-center mb-1"
value={rev.overallRating}
readOnly={true}
/>
Expand Down
Loading