focalxaiinspection/src/lib/Components/CarServiceList/CarServiceList.js

Focalx AI Inspection

import React, {useState, useEffect} from "react";
import {Link} from 'react-router-dom';
import "./CarServiceList.scss";
import MyInspections from '../../services/Api/MyInspections';
import { CarServiceListData } from './../../Data/CarServiceListData';
const CarServiceList = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);
  useEffect(() => {
    MyInspections()
      .then((data) => {
        setData(data);
        // console.log(data);
        setLoading(false);
      })
      .catch((error) => {
        console.log("Error getting user profile:", error);
        setLoading(false);
      });
  }, []);
  return (
    <>    
     <div className="car-service-list">
            <div className="container">
            {/* {CarServiceListData.map((result, index) => {
              const {photo, carModel, carStatus, carId, date, statusClass } = result;
              return (
                <div className="custom-card car-service-card"  key={index}>
                    <figure>
                        <img src={photo} alt=""/>
                    </figure>
                    <div className="description">
                        <p className="car-model">{carModel}</p>
                        <p className={statusClass}>{carStatus}</p>
                        <p>{carId}</p>
                        <p>{date}</p>
                    </div>
                </div>
                );
              })} */}

           {/* Render data from MyInspections */}
                    
           {loading ? (
       <div className="lds-roller-overlay">
       <div className="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
       </div> 
    ) : (
      <>
          {data && data.inspections.map(({thumbnail_url_public, car_model, car, id}, index) => {
            const { model, is_active, created_on,  } = car_model;
            const { registration_number  } = car;
            // console.log(id);
            return (
              
              <div className="custom-card car-service-card" key={index}>
                <Link to={`/damage-report?id=${id}`}>
                <figure>
                  {thumbnail_url_public ? (
                      <img src={thumbnail_url_public} alt=""/>
                    ) : (
                      <img src={require('../../Assets/images/car.png')} alt=""/>
                    )}
                </figure>
                <div className="description">
                  <p className="car-model">{model}</p>
                  <p className={is_active ? 'text-danger' : 'text-success'}>
                    {is_active ? 'In Process' : 'Completed'}
                  </p>
                  <p>ID: {registration_number}</p>
                  <p>{new Date(created_on).toLocaleDateString('en-GB', {day: '2-digit', month: 'short', year: 'numeric'}).toUpperCase()}</p>
                </div>
                </Link>
              </div>
            
            );
          })}
            </>
      )}
            </div>
        </div>
    </>
  );
};
export default CarServiceList;