Applicant Registration Form

Steps

1. Fetch the list of application categories for the dropdown when the component mounts.
2. Fetch the current academic settings (year and intake) to populate the read-only fields.
3. Allow the user to select an application category from the dropdown.

When to Fetch Data from Backend

• Application Categories: Fetch when the component mounts to populate the dropdown.

  • Request: GET /api/application-categories
  • Sample Response:

  [
    { "id": 1, "title": "Undergraduate", "programme_level_id": 1 },
    { "id": 2, "title": "Postgraduate", "programme_level_id": 2 }
  ]
  

• Academic Settings: Fetch when the component mounts to set the year and intake.

  • Request: GET /api/academic-settings
  • Sample Response:

  {
    "academic_year": "2023/2024",
    "intake_description": "September Intake"
  }
  

React Implementation

import { Form, Select, Input } from "antd";
import { useEffect, useState } from "react";

const ApplicationCategorySection = ({ formData, setFormData }) => {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    // Simulate fetching categories
    const fetchCategories = async () => {
      const response = [
        { id: 1, title: "\"Undergraduate\", programme_level_id: 1 },"
        { id: 2, title: "\"Postgraduate\", programme_level_id: 2 },"
      ];
      setCategories(response);
    };
    const fetchSettings = async () => {
      const settings = { academic_year: "2023/2024", intake_description: "\"September Intake\" };"
      setFormData((prev) => ({ ...prev, ...settings }));
    };
    fetchCategories();
    fetchSettings();
  }, [setFormData]);

  return (
    <div>
      <h5>Application Category</h5>
      <Form.Item label="Applying For" required>
        <Select
          value={formData.programme_level_id}
          onChange={(value) => setFormData({ ...formData, programme_level_id: value })}
          placeholder="Choose Area of Study"
        >
          {categories.map((cat) => (
            <Select.Option key={cat.id} value={cat.programme_level_id}>
              {cat.title}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="Year">
        <Input value={formData.academic_year} readOnly />
      </Form.Item>
      <Form.Item label="Intake">
        <Input value={formData.intake_description} readOnly />
      </Form.Item>
    </div>
  );
};

Notes

• If the category list is empty, display a warning: "Window for new Application is currently closed," and disable the rest of the form.

2. Secondary School Section

Description

This section collects secondary school examination details (e.g., NECTA Form Four in Tanzania) and fetches additional data based on the input. It is only shown if there are active application categories.

Inputs

• CSEE Country (csee_country_id):
  • Type: Dropdown ( from Antd)
    Options: List of countries
    Required: Yes
    Index Number (index_number):

    • Type: Text input (
    from Antd)
  • Placeholder: "CSEE or Equivalent Index Number"
  • Read-only: Optional (can be editable for now)
  • Format Note: "SXXXX/XXXX" or "PXXXX/XXXX" for NECTA, "EQYYYYXXXXXX" for equivalents
• Exam Year (exam_year):
  • Type: Dropdown ( from Antd)
    Options: Years from 1970 to the previous year (generate dynamically)
    Required: Yes

    Steps

    1. Fetch the list of countries for the CSEE Country dropdown.
    2. Generate the Exam Year options dynamically (1970 to current year - 1).
    3. When the user changes the Index Number or Exam Year, fetch NECTA data if both fields are filled and the Index Number is at least 10 characters long.
    4. Display a loading indicator (e.g., from Antd) while fetching.
    5. Show the fetched school name and applicant name below the inputs.

    When to Fetch Data from Backend

    • Countries: Fetch when the component mounts.

      • Request: GET /api/countries
      • Sample Response:

      [
        { "id": 1, "name": "Tanzania" },
        { "id": 2, "name": "Kenya" }
      ]
      

    • NECTA Data: Fetch when Index Number or Exam Year changes.

      • Request: POST /api/get-necta-data
      • Request Body:

      {
        "index_number": "S1234/5678",
        "exam_year": "2020",
        "csee_country_id": 1,
        "exam_type_id": 1
      }
      

      • Sample Success Response:

      {
        "status": 1,
        "message": "Data fetched successfully",
        "csee_school_name": "Sample School",
        "result_string": "John Middle Doe"
      }
      

      • Sample Error Response:

      {
        "status": 0,
        "message": "Invalid index number"
      }
      

    React Implementation

    import { Form, Select, Input, Spin } from "antd";
    import { useEffect, useState } from "react";
    
    const SecondarySchoolSection = ({ formData, setFormData, setNectaData, setShowProfile }) => {
      const [countries, setCountries] = useState([]);
      const [years] = useState(() => {
        const currentYear = new Date().getFullYear() - 1;
        return Array.from({ length: currentYear - 1970 + 1 }, (_, i) => currentYear - i);
      });
      const [loading, setLoading] = useState(false);
    
      useEffect(() => {
        const fetchCountries = async () => {
          const response = [
            { id: 1, name: "Tanzania" },
            { id: 2, name: "Kenya" },
          ];
          setCountries(response);
        };
        fetchCountries();
      }, []);
    
      const fetchNectaData = async () => {
        if (formData.index_number && formData.exam_year && formData.index_number.length >= 10) {
          setLoading(true);
          const mockResponse = {
            status: 1,
            message: "Data fetched successfully",
            csee_school_name: "Sample School",
            result_string: "John Middle Doe",
          };
          setLoading(false);
          if (mockResponse.status === 1) {
            setNectaData(mockResponse);
            const [first_name, ...rest] = mockResponse.result_string.split(" ");
            const surname = rest.pop();
            const middle_name = rest.join(" ");
            setFormData((prev) => ({
              ...prev,
              first_name,
              middle_name,
              surname,
            }));
            setShowProfile(true);
          }
        }
      };
    
      return (
        <div>
          <h5>Secondary School</h5>
          <p>
            <strong>Note:</strong> For NECTA, use format SXXXX/XXXX or PXXXX/XXXX. For equivalents, use
            EQYYYYXXXXXX.
          </p>
          <Form.Item label="CSEE Country" required>
            <Select
              value={formData.csee_country_id}
              onChange={(value) => setFormData({ ...formData, csee_country_id: value })}
              placeholder="Select O' Level Country"
            >
              {countries.map((country) => (
                <Select.Option key={country.id} value={country.id}>
                  {country.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="Index Number" required>
            <Input
              value={formData.index_number}
              onChange={(e) => {
                setFormData({ ...formData, index_number: e.target.value });
                fetchNectaData();
              }}
              placeholder="CSEE or Equivalent Index Number"
            />
          </Form.Item>
          <Form.Item label="Exam Year" required>
            <Select
              value={formData.exam_year}
              onChange={(value) => {
                setFormData({ ...formData, exam_year: value });
                fetchNectaData();
              }}
              placeholder="Select CSEE Year"
            >
              {years.map((year) => (
                <Select.Option key={year} value={year}>
                  {year}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          {loading && <Spin />}
          {nectaData && (
            <div>
              <p><strong>O'LEVEL SCHOOL NAME: {nectaData.csee_school_name}
              
    APPLICANT NAME: {nectaData.result_string}
            

    )} ); };

    Notes

    • After a successful NECTA fetch, parse result_string (e.g., "John Middle Doe") into first_name, middle_name, and surname for form submission, even though these fields aren’t editable in the UI.

    3. Primary School Section

    Description

    This section collects primary school details and is shown only after NECTA data is successfully fetched (controlled by showProfile).

    Inputs

    • Primary School (primary_school):
      • Type: Text input (
    from Antd)
  • Required: Yes
• Primary School Region (primary_school_region):
  • Type: Dropdown ( from Antd)
    Options: List of regions
    Required: Yes
    Primary School District (primary_school_district):

    • Type: Dropdown (
    from Antd)
  • Options: List of districts, dependent on the selected region
  • Required: Yes