Skip to content

Mess Component

Overview

The Mess component serves as the main entry point for the Mess Subscription System. It implements role-based access control to display different interfaces based on the user's role—showing subscription forms for students, administrative controls for non-academic administrators, and an "access denied" message for unauthorized users.

Component Structure

The Mess component is a functional React component that consists of:

  1. A main component that conditionally renders different interfaces based on user role
  2. Three sub-components defined within the main component:
  3. Header: Navigation header with logo and title
  4. Unauthorized: Access denied message for users without permission
  5. Imported child components for specific role-based functionality

Dependencies

import React, { useContext } from 'react';
import StudentSubscriptionForm from './StudentSubscriptionForm';
import AdminSubscriptionRequests from './AdminSubscriptionRequests';
import { RoleContext } from '../../context/Rolecontext';
import { FaUtensils } from 'react-icons/fa';
import './styles/Mess.css';
Dependency Purpose
React Core library for building the component
useContext React hook for accessing context data
StudentSubscriptionForm Form component for student meal plan subscriptions
AdminSubscriptionRequests Admin interface for managing subscription requests
RoleContext Context providing the user's role information
FaUtensils Icon component from react-icons
./styles/Mess.css Component-specific styles

Context Usage

The component uses React's Context API to determine the user's role:

const { role } = useContext(RoleContext);

Sub-Components

A simple navigation bar component displaying the system's title with an icon:

const Header = () => (
  <nav className="bg-gradient-to-r from-blue-600 to-blue-800 shadow-lg">
    <div className="container mx-auto px-6 py-4 flex items-center">
      <FaUtensils className="text-white text-2xl mr-3" />
      <h1 className="text-2xl font-bold text-white">Mess Subscription System</h1>
    </div>
  </nav>
);

Unauthorized

A component displayed when a user lacks appropriate permissions:

const Unauthorized = () => (
  <div className="bg-white rounded-lg shadow-lg p-8 max-w-md mx-auto mt-10 text-center">
    {/* Warning icon and access denied message */}
    <div className="bg-red-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
      <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
    </div>
    <h2 className="text-2xl font-bold text-gray-800 mb-2">Access Denied</h2>
    <p className="text-gray-600 mb-4">You don't have permission to access the Mess Subscription System.</p>
    <div className="bg-gray-100 py-2 px-4 rounded-md inline-block">
      <span className="text-sm font-medium text-gray-700">Current role: </span>
      <span className="text-sm font-bold text-blue-600">{role || 'None'}</span>
    </div>
  </div>
);

Conditional Rendering Logic

The component uses conditional rendering based on the user's role:

if (role === 'student') {
  return (
    <div className="container mx-auto px-4 py-8">
      <StudentSubscriptionForm />
    </div>
  );
} else if (role === 'nonAcadAdmin') {
  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <div className="container mx-auto px-4 py-8">
        <AdminSubscriptionRequests />
      </div>
    </div>
  );
} else {
  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <div className="container mx-auto px-4 py-8">
        <Unauthorized />
      </div>
    </div>
  );
}
Role Component Rendered
student StudentSubscriptionForm
nonAcadAdmin Header + AdminSubscriptionRequests
other/undefined Header + Unauthorized

Implementation Notes

  1. Code Issue: There appears to be a structural inconsistency in the student view, where commented-out closing </div> tags and an extra commented-out <div> tag suggest the Header component may have been intended to be included but was removed or commented out.

  2. Layout Structure: The component uses Tailwind CSS for styling with consistent container classes across different role views:

  3. min-h-screen to ensure full-height layout
  4. bg-gray-50 for a light gray background
  5. container mx-auto for centered content with auto margins

  6. Consistent padding with px-4 py-8

  7. Security: Access control is implemented at the UI level, but should be complemented with server-side authorization checks.

Usage

This component should be mounted in a React application where the RoleContext provider has been properly set up with the user's role information:

import { RoleProvider } from './context/RoleContext';
import Mess from './components/Mess';

function App() {
  return (
    <RoleProvider>
      <Mess />
    </RoleProvider>
  );
}

Styling

The component uses: - Tailwind CSS utility classes for layout and component styling - Custom CSS imported from ./styles/Mess.css (content not shown in the provided code) - A blue gradient for the header background - Consistent shadow, padding, and color scheme throughout