focalxaiinspection/src/lib/Components/DamageType/DamageType.js

Focalx AI Inspection

import React, {useState,useEffect} from 'react';
// import { DamageTypeData } from '../../Data/DamageTypeData';
import GetInspectionReport from '../../services/Api/GetInspectionReport';
import './DamageType.scss';

const DamageType = () => {
  const [data, setData] = useState(null);
  //console.log(data);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    GetInspectionReport()
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.log("Error getting user profile:", error);
        setLoading(false);
      });
  }, []);
  return(
  <>

{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> 
    ) : (
      <>
      <div className='car-img-list'>
      {data && data.image_report && data.image_report && data.image_report.map(({thumbnail_url_public, index}) => {
      
      return (
        <figure key={index}>
            <img src={thumbnail_url_public} alt=""/>
        </figure>
      );
    })} 
      </div>          
      </>
      )}
  
  </>
);
}

export default DamageType;