Skip to content

MyCourses Component Documentation

Overview

The MyCourses component displays the courses a student is currently enrolled in for the semester. It handles data fetching with loading, error, and empty states, and provides quick access links for announcements, assignments, attendance, feedback, and course details.

File Location

File Name: MyCourses.js (or .jsx)

Dependencies

  • React: Core UI library.
  • React Query (@tanstack/react-query): For data fetching and state management.
  • newRequest: Custom HTTP client from ../../utils/newRequest.
  • React Icons (react-icons/fa): Icons like FaBookOpen, FaBullhorn, FaComments.
  • React Router (react-router-dom): Link for navigation.

Data Fetching

  • Retrieves userId from localStorage (currentUser object).
  • Uses useQuery with key ["courses"] to fetch /student/{userId}/courses.
  • Sets isFeedbackAvailable based on res.data.feedbackOpen.

Component Structure

  1. Header
  2. Title <h1>: "My Courses"
  3. Subtitle <p>: "Current semester enrolled courses"
  4. Loading State
  5. Spinner with loading message.
  6. Error State
  7. Error message and link to course registration.
  8. Empty State
  9. Message when no courses are enrolled and link to registration.
  10. Courses Grid (grid-cols-1 lg:grid-cols-2)
  11. Course Card:
    • Header: Course name, instructor, and course ID badge.
    • Stats Row: Credits, assignments, attendance.
    • Quick Access: Links for announcements (with count), assignments, attendance, and feedback (locked or available).
    • Detail Link: View course details.
  12. Additional Links
  13. Link to drop courses.
  14. Link to view completed courses.
  15. Feedback Notice
  16. Notice when feedback is closed.

Usage Example

import MyCourses from './MyCourses';

function Dashboard() {
  return <MyCourses />;
}

Notes

  • Query Key: Consider namespacing with ['myCourses', userId] to avoid cache collisions.
  • Console Logs: Remove console.log statements in production.
  • Accessibility: Add ARIA labels for icons and ensure link text clarity.
  • Tailwind CSS: Ensure Tailwind is configured in the project.