focalxaiinspection/src/lib/Components/CarInformation/CarInformation.js

Focalx AI Inspection

import React, { useState, useRef } from "react";
import { Link, useNavigate } from "react-router-dom";
import "./CarInformation.scss";

const CarInformation = () => {
  const navigate = useNavigate();
  const numberPlateRef = useRef(null);
  const vinRef = useRef(null);
  const makeRef = useRef(null);
  const modelRef = useRef(null);
  const yearRef = useRef(null);
  const mileageRef = useRef(null);
  const [formData, setFormData] = useState({
    numberPlate: "",
    vin: "",
    make: "",
    model: "",
    year: "",
    mileage: "",
  });

  const handleCarInfoChange = (e) => {
    const { id, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [id]: value,
    }));
  };

  const validateForm = (formData) => {
    const errors = {};
    if (!formData.numberPlate) {
      errors.numberPlate = "Number plate is required";
      // numberPlateRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (!formData.vin) {
      errors.vin = "VIN is required";
    }
    if (!formData.make) {
      errors.make = "Make is required";
    }
    if (!formData.model) {
      errors.model = "Model is required";
    }
    if (!formData.year) {
      errors.year = "Year is required";
    } else if (!/^\d{4}$/.test(formData.year)) {
      errors.year = "Year must be a 4-digit number";
    }
    if (!formData.mileage) {
      errors.mileage = "Mileage is required";
    } 
    return errors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errors = validateForm(formData); // define errors object
    if (Object.keys(errors).length === 0) {
      // check if errors object is empty
      sessionStorage.setItem("carInformation", JSON.stringify(formData));
      // console.log(formData);
      navigate("/car-body-type");
    } else {
      // find the first input field with an error
    const firstErrorField = document.querySelector(".form-control.is-invalid");
    if (firstErrorField) {
      // scroll the field into view
      firstErrorField.scrollIntoView({ behavior: "smooth" });
    }
      alert("Please fill all the fields correctly");
    }
  };

  // define errors variable using the validateForm function
  const errors = validateForm(formData);

  return (
    <div className="car-info-form">
      <div className="container">
        <form className="form" onSubmit={handleSubmit}>
          <div className="form-group" ref={numberPlateRef}>
            <label htmlFor="numberPlate" className="form-label">
              Number Plate
            </label>
            <input
              type="text"
              className="form-control"
              id="numberPlate"
              value={formData.numberPlate}
              onChange={handleCarInfoChange}
            />
            {errors.numberPlate && (
              <div className="text-danger">{errors.numberPlate}</div>
            )}
          </div>

          <div className="form-group">
            <label htmlFor="vin" className="form-label">
              VIN
            </label>
            <input
              type="text"
              className="form-control"
              id="vin"
              value={formData.vin}
              onChange={handleCarInfoChange}
            />
            {errors?.vin && <div className="text-danger">{errors.vin}</div>}
          </div>
          <div className="form-group">
            <label htmlFor="make" className="form-label">
              Make
            </label>
            <input
              type="text"
              className="form-control"
              id="make"
              value={formData.make}
              onChange={handleCarInfoChange}
            />
            {errors?.make && <div className="text-danger">{errors.make}</div>}
          </div>
          <div className="form-group">
            <label htmlFor="model" className="form-label">
              Model
            </label>
            <input
              type="text"
              className="form-control"
              id="model"
              value={formData.model}
              onChange={handleCarInfoChange}
            />
            {errors?.model && <div className="text-danger">{errors.model}</div>}
          </div>
          <div className="form-group">
            <label htmlFor="year" className="form-label">
              Year
            </label>
           
            <input
              type="number"
              className="form-control"
              id="year"
              value={formData.year}
              onChange={handleCarInfoChange}
            />
            {errors?.year && <div className="text-danger">{errors.year}</div>}
          </div>
          <div className="form-group">
            <label htmlFor="mileage" className="form-label">
            Mileage
            </label>
           
            <input
              type="number"
              className="form-control"
              id="mileage"
              value={formData.mileage}
              onChange={handleCarInfoChange}
            />
            {errors?.mileage && <div className="text-danger">{errors.mileage}</div>}
          </div>

          <div className="action-btn-wrap bottom-action-btns">
            <Link
              to="/onboarding"
              className="custom-secondary-outline-button left-side-btn justify-content-center">
              Back
            </Link>
            <button
              type="submit"
              className="custom-primary-button right-side-btn justify-content-center">
              Next
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CarInformation;