Role‐Based Conditional Rendering Design Pattern - SENG-350-2024-fall/Team-1 GitHub Wiki

Source: app/frontend/src/components/dashboard/index.jsx, Lines 6-78.

Prepares the Dashboard component and retrieves userType from the authentication context to determine the user role for further conditional rendering.

const Dashboard = () => {
  const { logout, userType } = useAuth();
  const [value, setValue] = useState(0);

Conditional Rendering within the Box component uses the userType field to display different content specific to the user role.

{userType === 'patient' && ( ...)}
{userType === 'staff' && (...)}

Conditional Rendering within the Tabs component uses the userType field to display different dashboard tabs based on the user role.

{userType === 'patient'
    ? [...]
    : [...]
  }

The Role-Based Conditional Rendering design pattern is used in the Dashboard component to display specific content based on the user's role (userType). By checking if userType is "patient" or "staff," the component conditionally renders different pages and tabs. For instance, patients see options like "Appointments" and "Medical Records," while staff members see options like "Shift Schedule" and "Assigned Patients." This pattern is a good choice here because it keeps the user interface relevant and tailored to each user role, preventing unnecessary clutter and improving user experience. It also makes the code more maintainable, as role-specific content is logically grouped, making it easy to extend or modify in the future.