From 7694cde6ab30f841b76271f74ad684637cd2c439 Mon Sep 17 00:00:00 2001 From: emyemy89 Date: Wed, 7 May 2025 15:26:04 +0200 Subject: [PATCH 1/4] changes layout of reviews, 2 rows --- .../src/views/Components/RatingComponent.jsx | 19 +- my-app/src/views/Components/StarComponent.jsx | 6 +- my-app/src/views/ReviewView.jsx | 218 +++++++++++++----- 3 files changed, 179 insertions(+), 64 deletions(-) diff --git a/my-app/src/views/Components/RatingComponent.jsx b/my-app/src/views/Components/RatingComponent.jsx index d543cbec..c3c093cf 100644 --- a/my-app/src/views/Components/RatingComponent.jsx +++ b/my-app/src/views/Components/RatingComponent.jsx @@ -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 ( -
-
- {Array.from({length: 5}, (_, index) => ( +
+ {/*
*/} +
+ + + {Array.from({ length: 5 }, (_, index) => ( {
); -} +}; -export default RatingComponent; \ No newline at end of file +export default RatingComponent; diff --git a/my-app/src/views/Components/StarComponent.jsx b/my-app/src/views/Components/StarComponent.jsx index 6ee2acfa..45f59c8e 100644 --- a/my-app/src/views/Components/StarComponent.jsx +++ b/my-app/src/views/Components/StarComponent.jsx @@ -15,12 +15,12 @@ const StarComponent = ({ index, rating, onRatingChange, onHover, readOnly = fals return (
!readOnly && onHover && onHover(index + 1)} onMouseLeave={() => !readOnly && onHover && onHover(0)} > {!readOnly && ( <> @@ -38,4 +38,4 @@ const StarComponent = ({ index, rating, onRatingChange, onHover, readOnly = fals ); }; -export default StarComponent; \ No newline at end of file +export default StarComponent; diff --git a/my-app/src/views/ReviewView.jsx b/my-app/src/views/ReviewView.jsx index b8203c61..31985942 100644 --- a/my-app/src/views/ReviewView.jsx +++ b/my-app/src/views/ReviewView.jsx @@ -1,34 +1,187 @@ -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 (
-
+
+
+

Overall rating

+ setFormData({ ...formData, overallRating: val })} + /> +
+ +
+

Difficulty rating

+ setFormData({ ...formData, difficultyRating: val })} + /> +
+ +
+

Professor rating

+ setFormData({ ...formData, professorRating: val })} + /> +
+
+ + {/*

Overall rating setFormData({ ...formData, overallRating: val })} />

-
+
*/} -
+ {/*

Difficulty rating setFormData({ ...formData, difficultyRating: val })} />

-
+
*/} + +
+ +{/* Grade Section */} +
+ +
+

Grade:

+ +
+ {/* Box that triggers the popup */} +
setShowGradeOptions((prev) => !prev)} + > + {formData.grade || "Select"} +
+ + {/* Popup options */} + {showGradeOptions && ( +
+ {grades.map((grade) => ( + + ))} +
+ )} +
+
+ +
+ +{/* Recommend Section */} +
+ + +
+

Recommend?

+ +
+ {/* Box that triggers the popup */} +
setShowRecommendOptions((prev) => !prev)} + > + {formData.recommend === null ? "Select" : formData.recommend ? "Yes" : "No"} +
+ + {/* Popup options */} + {showRecommendOptions && ( +
+ + +
+ )} +
+
+
+
+ +

@@ -45,63 +198,20 @@ export function ReviewView(props) {

-
+ {/*

Professor Rating setFormData({ ...formData, professorRating: val })} />

-
+
*/} -
-

Grade

-
- {grades.map((grade) => ( - - ))} -
-
+ -
-

- Would you recommend this course? -

-
- - -
- -
+
@@ -146,6 +256,8 @@ export function ReviewView(props) {

Overall Rating From 78814216cac51dc7f6df1ec3d4fa4c2792857cc7 Mon Sep 17 00:00:00 2001 From: emyemy89 Date: Wed, 7 May 2025 16:17:56 +0200 Subject: [PATCH 2/4] all categories in one row --- my-app/src/views/ReviewView.jsx | 253 ++++++++++++++------------------ 1 file changed, 109 insertions(+), 144 deletions(-) diff --git a/my-app/src/views/ReviewView.jsx b/my-app/src/views/ReviewView.jsx index 31985942..df0b93bb 100644 --- a/my-app/src/views/ReviewView.jsx +++ b/my-app/src/views/ReviewView.jsx @@ -35,150 +35,115 @@ export function ReviewView(props) {

-
-

Overall rating

- setFormData({ ...formData, overallRating: val })} - /> -
- -
-

Difficulty rating

- setFormData({ ...formData, difficultyRating: val })} - /> -
- -
-

Professor rating

- setFormData({ ...formData, professorRating: val })} - /> -
-
- - {/*
-

- Overall rating - setFormData({ ...formData, overallRating: val })} - /> -

-
*/} - - {/*
-

- Difficulty rating - setFormData({ ...formData, difficultyRating: val })} - /> -

-
*/} - -
- -{/* Grade Section */} -
- -
-

Grade:

- -
- {/* Box that triggers the popup */} -
setShowGradeOptions((prev) => !prev)} - > - {formData.grade || "Select"} -
- - {/* Popup options */} - {showGradeOptions && ( -
- {grades.map((grade) => ( - - ))} -
- )} -
-
- -
- -{/* Recommend Section */} -
- - -
-

Recommend?

- -
- {/* Box that triggers the popup */} -
setShowRecommendOptions((prev) => !prev)} - > - {formData.recommend === null ? "Select" : formData.recommend ? "Yes" : "No"} -
- - {/* Popup options */} - {showRecommendOptions && ( -
- - -
- )} -
-
-
+ {/* Overall Rating */} +
+

Overall rating

+ setFormData({ ...formData, overallRating: val })} + /> +
+ + {/* Difficulty Rating */} +
+

Difficulty rating

+ setFormData({ ...formData, difficultyRating: val })} + /> +
+ + {/* Professor Rating */} +
+

Professor rating

+ setFormData({ ...formData, professorRating: val })} + /> +
+ + {/* Grade Section */} +
+
+

Grade:

+
+
setShowGradeOptions((prev) => !prev)} + > + {formData.grade || "Select"} +
+ {showGradeOptions && ( +
+ {grades.map((grade) => ( + + ))} +
+ )} +
+
+
+ + {/* Recommend Section */} +
+
+

Recommend?

+
+
setShowRecommendOptions((prev) => !prev)} + > + {formData.recommend === null ? "Select" : formData.recommend ? "Yes" : "No"} +
+ {showRecommendOptions && ( +
+ + +
+ )} +
+
+
From 1c2247d00dc241c3fa99e430e6b40a80f76498f8 Mon Sep 17 00:00:00 2001 From: emyemy89 Date: Wed, 7 May 2025 16:37:46 +0200 Subject: [PATCH 3/4] adapt star size --- my-app/src/views/Components/StarComponent.jsx | 2 +- my-app/src/views/ReviewView.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/my-app/src/views/Components/StarComponent.jsx b/my-app/src/views/Components/StarComponent.jsx index 45f59c8e..bf4b5918 100644 --- a/my-app/src/views/Components/StarComponent.jsx +++ b/my-app/src/views/Components/StarComponent.jsx @@ -20,7 +20,7 @@ const StarComponent = ({ index, rating, onRatingChange, onHover, readOnly = fals onMouseLeave={() => !readOnly && onHover && onHover(0)} > {!readOnly && ( <> diff --git a/my-app/src/views/ReviewView.jsx b/my-app/src/views/ReviewView.jsx index df0b93bb..1007dec3 100644 --- a/my-app/src/views/ReviewView.jsx +++ b/my-app/src/views/ReviewView.jsx @@ -39,7 +39,7 @@ export function ReviewView(props) {

Overall rating

setFormData({ ...formData, overallRating: val })} /> @@ -49,7 +49,7 @@ export function ReviewView(props) {

Difficulty rating

setFormData({ ...formData, difficultyRating: val })} /> From e33f440e500a2b296334e6ae8071c78e4435650f Mon Sep 17 00:00:00 2001 From: emyemy89 Date: Wed, 7 May 2025 16:43:00 +0200 Subject: [PATCH 4/4] Update ReviewView.jsx --- my-app/src/views/ReviewView.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/my-app/src/views/ReviewView.jsx b/my-app/src/views/ReviewView.jsx index 1007dec3..6ae5d42d 100644 --- a/my-app/src/views/ReviewView.jsx +++ b/my-app/src/views/ReviewView.jsx @@ -149,9 +149,9 @@ export function ReviewView(props) {
-

+ {/*

Professor Name & Rating -

+

*/}