Skip to content

Student Subscription Form Component

Overview

The StudentSubscriptionForm component provides an interface for students to request changes to their meal plans. Students can enter their ID, select their current meal plan, and choose a new desired meal plan. The component handles form validation, provides visual feedback, and simulates submission to a backend service.

Dependencies

  • React: Core library for building the UI
  • react-icons/fa: For icon components (FaUtensils, FaExchangeAlt, FaCheck, FaTimes)
  • Custom CSS: Imported from './styles/StudentSubscriptionForm.css'

Component Structure

Imported Modules

  • useState from 'react'
  • Icon components from 'react-icons/fa'
  • Custom CSS styles

State Management

  • studentId: String state for student identification number
  • currentPlan: String state for the student's current meal plan
  • newPlan: String state for the requested meal plan
  • error: String state for error messages
  • success: String state for success messages
  • isSubmitting: Boolean state to track form submission status

Functionality

Form Validation

  • Student ID Validation: Ensures ID is exactly 8 digits using regex
  • Plan Comparison: Prevents submission if current and new plans are identical
  • Input Limiting: Restricts student ID input to maximum 8 digits

Form Submission

  • Validation Check: Performs validation before attempting submission
  • API Simulation: Uses setTimeout to simulate an API call
  • Form Reset: Clears form fields after successful submission
  • Visual Feedback: Shows loading state during submission

UI Components

Form Header

  • Title: Displays form title with meal icon
  • Visual Styling: Blue background with white text for emphasis

Alert Messages

  • Error Alerts: Red-bordered alerts with error icon for validation failures
  • Success Alerts: Green-bordered alerts with check icon for successful submissions

Form Fields

  • Student ID Input: Numeric input field with validation guidance
  • Current Plan Selection: Radio button group with three plan options
  • New Plan Selection: Radio button group with icon and three plan options

Submission Button

  • Dynamic States: Changes appearance and text based on submission status
  • Loading State: Disabled with "Submitting..." text during submission

Styling

  • Uses Tailwind CSS for styling
  • Color Scheme:
  • Blue for primary actions and selected items
  • Red for errors
  • Green for success messages
  • Layout: Responsive grid for plan options
  • Visual Feedback: Highlighted selections with rings and color changes
  • Responsive Design: Adapts layout for different screen sizes

Implementation Details

  • Radio Selection: Custom styled radio buttons with visual feedback
  • Error Handling: Immediate validation feedback with clear messages
  • Loading States: Button disabling and text change during submission
  • Responsive Grid: Single column on mobile, three columns on larger screens
  • Form Accessibility: Properly associated labels with inputs

Best Practices Demonstrated

  • Form Validation: Client-side validation with clear error messages
  • Visual Feedback: Status indicators for form actions
  • Input Constraints: Limiting input to prevent invalid entries
  • Accessible Forms: Properly labeled form elements
  • Responsive Design: Layout adapts to different screen sizes
  • User Guidance: Instructional text and validation hints

Usage

// Import the component
import StudentSubscriptionForm from './path/to/StudentSubscriptionForm';

// Use within a parent component
function ParentComponent() {
  return (
    <div>
      <StudentSubscriptionForm />
    </div>
  );
}

Note: Ensure that the CSS file './styles/StudentSubscriptionForm.css' is properly imported and available.