feat: add Course and Review data models; enhance CourseCard and ReviewForm components with detailed comments and validation logic

Author: davidsnowden0072

edurate/frontend/src/components/CourseCard.jsx

@@ -1,3 +1,13 @@
+/**
+ * CourseCard.jsx
+ * 
+ * Displays a single course as a clickable card showing:
+ * - Course name, department, and ID
+ * - Average rating badge (color-coded)
+ * - Number of reviews
+ * 
+ * Clicking the card navigates to the course details page.
+ */
 import { useNavigate } from 'react-router-dom';
 import { getRatingColor } from '../utils/helpers';
 

edurate/frontend/src/components/ReviewForm.jsx

@@ -1,5 +1,18 @@
+/**
+ * ReviewForm.jsx
+ * 
+ * Form component for submitting course reviews.
+ * Allows users to:
+ * - Select a star rating (1-5)
+ * - Write a text review (minimum 10 characters)
+ * - Optionally provide their name
+ * 
+ * Validates input and displays success/error messages.
+ */
+
 import { useState } from 'react';
 import { submitReview } from '../api';
+import { MIN_RATING, MAX_RATING, MIN_COMMENT_LENGTH, SUCCESS_MESSAGE_DURATION } from '../constants';
 
 function ReviewForm({ courseId, onReviewSubmitted }) {
   const [rating, setRating] = useState(0);
@@ -18,8 +31,13 @@ function ReviewForm({ courseId, onReviewSubmitted }) {
       return;
     }
 
-    if (comment.trim().length < 10) {
-      setError('Comment must be at least 10 characters');
+    if (rating < MIN_RATING || rating > MAX_RATING) {
+      setError(`Rating must be between ${MIN_RATING} and ${MAX_RATING}`);
+      return;
+    }
+    
+    if (comment.trim().length < MIN_COMMENT_LENGTH) {
+      setError(`Comment must be at least ${MIN_COMMENT_LENGTH} characters`);
       return;
     }
 
@@ -42,8 +60,8 @@ function ReviewForm({ courseId, onReviewSubmitted }) {
         // Notify parent to reload data
         onReviewSubmitted();
 
-        // Hide success message after 3 seconds
-        setTimeout(() => setSuccess(false), 3000);
+        // Hide success message after configured duration
+        setTimeout(() => setSuccess(false), SUCCESS_MESSAGE_DURATION);
       } else {
         setError(result.error || 'Failed to submit review');
       }
@@ -54,6 +72,12 @@ function ReviewForm({ courseId, onReviewSubmitted }) {
     }
   };
 
+  // Generate array of star ratings based on constants
+  const ratingOptions = Array.from(
+    { length: MAX_RATING }, 
+    (_, i) => i + MIN_RATING
+  );
+
   return (
     <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-8">
       <h2 className="text-xl font-bold text-gray-900 mb-4">Write a Review</h2>
@@ -65,7 +89,7 @@ function ReviewForm({ courseId, onReviewSubmitted }) {
             Your Rating *
           </label>
           <div className="flex gap-2">
-            {[1, 2, 3, 4, 5].map((star) => (
+            {ratingOptions.map((star) => (
               <button
                 key={star}
                 type="button"
@@ -80,7 +104,7 @@ function ReviewForm({ courseId, onReviewSubmitted }) {
           </div>
           {rating > 0 && (
             <p className="text-sm text-gray-600 mt-1">
-              You rated: {rating} out of 5
+              You rated: {rating} out of {MAX_RATING}
             </p>
           )}
         </div>
@@ -99,7 +123,7 @@ function ReviewForm({ courseId, onReviewSubmitted }) {
             required
           />
           <p className="text-xs text-gray-500 mt-1">
-            {comment.length} characters (minimum 10)
+            {comment.length} characters (minimum {MIN_COMMENT_LENGTH})
           </p>
         </div>
 

edurate/frontend/src/models/Course.js

@@ -0,0 +1,24 @@
+/**
+ * Course.js
+ * 
+ * Data model for Course objects.
+ */
+export class Course {
+  constructor(data) {
+    this.id = data.id;
+    this.name = data.Course_name;
+    this.department = data.Department;
+    this.courseId = data.Course_ID;
+    this.rating = data.rating || 0;
+    this.numReviews = data.numReviews || 0;
+    this.createdAt = data.created_at;
+  }
+
+  hasReviews() {
+    return this.numReviews > 0;
+  }
+
+  getRatingDisplay() {
+    return this.rating === 0 ? 'N/A' : this.rating.toFixed(1);
+  }
+}

edurate/frontend/src/models/Review.js

@@ -0,0 +1,27 @@
+/**
+ * Review.js
+ * 
+ * Data model for Review objects.
+ */
+export class Review {
+  constructor(data) {
+    this.id = data.id;
+    this.courseId = data.course_id;
+    this.rating = data.rating;
+    this.comment = data.comment;
+    this.studentName = data.student_name || 'Anonymous';
+    this.createdAt = new Date(data.created_at);
+  }
+
+  getFormattedDate() {
+    return this.createdAt.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  }
+
+  isAnonymous() {
+    return this.studentName === 'Anonymous';
+  }
+}

edurate/frontend/src/utils/helpers.js

@@ -1,12 +1,31 @@
-// Helper function to determine rating badge color based on score
+/**
+ * helpers.js
+ * 
+ * Utility functions for course filtering, searching, and rating display.
+ * Uses constants from constants.js for consistent values across the app.
+ */
+
+import { RATING_GREAT, RATING_GOOD, COLORS } from '../constants';
+
+/**
+ * Determine rating badge color based on score
+ * @param {number} rating - Course rating (0-5)
+ * @returns {string} Tailwind CSS color class
+ */
 export const getRatingColor = (rating) => {
-  if (rating >= 4.0) return 'bg-red-600';      // Red for great ratings
-  if (rating >= 3.0) return 'bg-orange-500';   // Orange for good ratings
-  if (rating > 0) return 'bg-gray-600';        // Gray for okay ratings
-  return 'bg-gray-400';                        // Light gray for no rating
+  if (rating >= RATING_GREAT) return COLORS.GREAT;
+  if (rating >= RATING_GOOD) return COLORS.GOOD;
+  if (rating > 0) return COLORS.OKAY;
+  return COLORS.NONE;
 };
 
-// Filter courses based on search term and department
+/**
+ * Filter courses based on search term and department
+ * @param {Array} courses - Array of course objects
+ * @param {string} searchTerm - Search query for course name or ID
+ * @param {string} selectedDepartment - Department filter ('All' or department name)
+ * @returns {Array} Filtered array of courses
+ */
 export const filterCourses = (courses, searchTerm, selectedDepartment) => {
   return courses.filter(course => {
     const matchesSearch = 
@@ -21,7 +40,11 @@ export const filterCourses = (courses, searchTerm, selectedDepartment) => {
   });
 };
 
-// Extract unique departments from courses
+/**
+ * Extract unique departments from courses array
+ * @param {Array} courses - Array of course objects
+ * @returns {Array} Array of unique department names with 'All' prepended
+ */
 export const getUniqueDepartments = (courses) => {
   return ['All', ...new Set(courses.map(c => c.Department))];
 };