Skip to content

FacultyDashboard Component

Overview

The FacultyDashboard component is a React functional component that serves as the main dashboard for faculty members in an academic course management system. It displays a list of courses assigned to the logged-in faculty member and provides navigation links to manage student registrations for each course.

Code Structure and Explanation

Imports

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
  • React, useEffect, and useState hooks for component structure and state management
  • Link from React Router for navigation between routes
  • axios for making HTTP requests to the backend API

Component Definition and State Management

const FacultyDashboard = () => {
  const [courses, setCourses] = useState([]);
  const [loading, setLoading] = useState(true);

  // Get userId from localStorage
  const { data: userData } = JSON.parse(localStorage.getItem("currentUser"));
  const { userId } = userData.user;

  // ... component implementation
}
  • courses: Array state that stores the list of courses assigned to the faculty
  • loading: Boolean state to track data loading status
  • userData: Retrieved from browser's localStorage, containing the logged-in user's data
  • userId: Extracted from userData to identify the current faculty member

Data Fetching

const fetchFacultyCourses = async () => {
  try {
    console.log(userId);
    const response = await axios.get(`http://localhost:8000/api/facultyCourse/courses/${userId}`);

    if (response.data.success) {
      setCourses(response.data.data);
    }
  } catch (error) {
    console.error("Error fetching faculty courses:", error);
  } finally {
    setLoading(false);
  }
};

useEffect(() => {
  if (userId) {
    fetchFacultyCourses();
  }
}, [userId]);
  • fetchFacultyCourses: Asynchronous function that retrieves courses assigned to the faculty
  • Uses the faculty's userId to make a personalized API request
  • Updates the courses state with the response data on successful fetch
  • Error handling with console logging
  • Sets loading state to false regardless of success/failure
  • useEffect: Hook that calls fetchFacultyCourses when the component mounts or when userId changes
  • Conditional execution that only triggers the fetch if userId is available

Render Function

return (
  <div className="p-5">
    <h2 className="text-2xl font-bold mb-4">Your Courses</h2>

    {loading ? (
      <p>Loading courses...</p>
    ) : courses.length === 0 ? (
      <p>No courses assigned.</p>
    ) : (
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {courses.map((course) => (
          <Link
            key={course._id}
            to={`/facultyregistration/${course.courseCode}`}
            className="block p-4 border border-gray-300 rounded-lg shadow-md hover:shadow-lg transition"
          >
            <h3 className="text-lg font-semibold">{course.courseName}</h3>
            <p className="text-sm text-gray-600">{course.courseCode}</p>
          </Link>
        ))}
      </div>
    )}
  </div>
);

UI Structure and Elements

  1. Container: Main div with padding
  2. Header: Title indicating "Your Courses"
  3. Conditional Rendering:
  4. Shows "Loading courses..." when data is being fetched
  5. Shows "No courses assigned." when fetch completes but no courses are available
  6. Renders the course grid when courses are available
  7. Course Grid:
  8. Responsive layout (1 column on mobile, 3 columns on medium screens and larger)
  9. Each course represented as a card with:
    • Course name in larger, semibold font
    • Course code in smaller, gray font
  10. Each card is a link to the faculty registration page for that course
  11. Visual feedback on hover with increased shadow effect

Technical Considerations

Authentication and User Identity

  • User identity is retrieved from localStorage rather than props or context
  • The component expects a specific structure in the stored user data
  • This approach assumes the user is already authenticated and their data is available

Data Flow

  1. User's faculty ID is extracted from localStorage
  2. Courses data is fetched from the API using this ID
  3. UI is rendered based on the fetched data
  4. Navigation links are provided to course-specific pages

User Experience Features

  • Loading state during data fetching
  • Empty state message when no courses are assigned
  • Card-based interface for course selection
  • Hover effects for interactive elements
  • Responsive layout for different screen sizes
  • Each course card is wrapped in a React Router Link component
  • Links direct to a course-specific registration page
  • Route parameters include the course code for identification

Error Handling

  • API fetch errors are logged to console
  • Loading state properly reflects data availability
  • User is not shown technical error details

Integration Points

  • Connects to faculty course API endpoint
  • Uses React Router for navigation
  • Assumes authentication has already occurred
  • Expects user data structure in localStorage
  • Links to faculty registration pages for specific courses