{"size": 1844, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "timesofbeer/marksafe.me", "max_stars_repo_stars_event_min_datetime": "2020-05-28T07:09:13.000Z", "max_stars_repo_stars_event_max_datetime": "2020-11-09T03:05:20.000Z", "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "timesofbeer/marksafe.me", "max_issues_repo_issues_event_min_datetime": "2021-05-11T15:22:57.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T05:29:39.000Z", "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "timesofbeer/marksafe.me", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 6, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 21.9523809524, "max_line_length": 85, "alphanum_fraction": 0.6073752711}
import React, { Component } from 'react';
import './font/Sen-Bold.ttf'
import MapDisplay from "./map/map"
import  Lottie  from "react-lottie";
import 'notie/dist/notie.css';
import virus from './resources/virus.png';
import axios from 'axios';
import config from './config';
import l1 from './resources/loader/loader1.json';
import l2 from './resources/loader/loader2.json';
import l3 from './resources/loader/loader3.json';
import l4 from './resources/loader/loader4.json';
import l5 from './resources/loader/loader5.json';
import l6 from './resources/loader/loader6.json';


import './App.css';
  

class App extends Component {
  state = {
    loading: true,

  };
  
  componentDidMount(){
    this.loader().then(() => this.setState({ loading: false }));
     this.getUser();
  }
async  getUser() {
  try {
 let users= await axios.get(config.endPoint.getUser);

 this.setState({users:users.data}) ;
  } catch (error) {
    console.log(error); 
  }

  

 }
  loader(){
   
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{resolve()},4000)

    })
  }

   
  render() {
   // this.getUser();
   var data =[l1,l2,l3,l4,l5,l6];
   if(this.state.loading){
    const defaultOptions = {
      loop: true,
      autoplay: true, 
     animationData: data[Math.abs(Math.ceil(Math.random()*(7-1)-1))],
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
      }
    };
    
     return (<div> <Lottie options={defaultOptions} height={300} width={300}/></div>)
   } else{
    return (
  
      <div className="App">
        <div className="App-header">
    <div style={{"display":"flex"}}></div>
       <img id='virus' alt="" src={virus}/>  <h1 >Mark Safe - Covid-19  </h1>
         
          </div>
          <MapDisplay users={this.state.users}></MapDisplay>
      </div>
    );
   }


  }
}

export default App;
