src/pages/index.js
/**
   * mapEffect
   * @description Fires a callback once the page renders
   * @example Here this is and example of being used to zoom in and set a popup on load
   */
mapEffect
@description Fires a callback once the page renders
@example Here this is and example of being used to zoom in and set a popup on load
mapEffect @description Fires a callback once the page renders @example Here this is and example of being used to zoom in and set a popup on load
async function mapEffect({ leafletElement: map } = {}) {
    let response;
    try {
      response = await axios.get( 'https://corona.lmao.ninja/v2/countries' );
    } catch ( e ) {
      console.log( `Failed to fetch countries: ${e.message}`, e );
      return;
    }
    const { data = [] } = response;
    const hasData = Array.isArray( data ) && data.length > 0;
    if ( !hasData ) return;
    const geoJson = {
      type: 'FeatureCollection',
      features: data.map(( country = {}) => {
        const { countryInfo = {} } = country;
        const { lat, long: lng, flag } = countryInfo;
        return {
          type: 'Feature',
          properties: {
            ...country,
            flag,
          },
          geometry: {
            type: 'Point',
            coordinates: [lng, lat],
          },
        };
      }),
    };
    const geoJsonLayers = new L.GeoJSON( geoJson, {
      pointToLayer: ( feature = {}, latlng ) => {
        const { properties = {} } = feature;
        let updatedFormatted;
        let casesString;
        const {
          country,
          flag,
          updated,
          cases,
          casesPerOneMillion,
          deaths,
          deathsPerOneMillion,
          recovered,
          active,
          critical,
          tests,
          testsPerOneMillion,
        } = properties;
        casesString = `${cases}`;
        if ( cases > 1000000 ) {
          casesString = `${casesString.slice( 0, -6 )}.${casesString.slice( -6, -5 )}M+`;
        } else if ( cases > 1000 ) {
          casesString = `${casesString.slice( 0, -3 )}K+`;
        }
        if ( updated ) {
          updatedFormatted = new Date( updated ).toLocaleString();
        }
        const html = `
          <span class="icon-marker">
            ${casesString}
          </span>
        `;
        const stats = `
        <span class="icon-marker-tooltip">
          <h2><img src="${flag}"> ${country}</h2>
          <ul>
            <li><strong>Confirmed:</strong> ${cases.toLocaleString()}</li>
            <li><strong>Cases per Million</strong> ${casesPerOneMillion.toLocaleString()}</li>
            <li><strong>Deaths:</strong> ${deaths.toLocaleString()}</li>
            <li><strong>Deaths per Million</strong> ${deathsPerOneMillion.toLocaleString()}</li>
            <li><strong>Recovered: </strong>${recovered.toLocaleString()}</li>
            <li><strong>Active Cases:</strong> ${active.toLocaleString()}</li>
            <li><strong>Critical Cases:</strong> ${critical.toLocaleString()}</li>
            <li><strong>Tested:</strong> ${tests.toLocaleString()}</li>
            <li><strong>Tested per Million:</strong> ${testsPerOneMillion.toLocaleString()}</li>
            <li><strong>Last Update:</strong> ${updatedFormatted.toLocaleString()}</li>
          </ul>
          </span>
          `;
        const popup = L.popup({
          maxWidth: 700,
        }).setContent( stats );
        return L.marker( latlng, {
          icon: L.divIcon({
            className: 'icon',
            html,
          }),
          riseOnHover: true,
        }).bindPopup( popup );
      },
    });
    geoJsonLayers.addTo( map );
  }
async function mapEffect ( { leafletElement : map } = { } ) { let response ; try { response = await axios . get ( 'https://corona.lmao.ninja/v2/countries' ) ; } catch ( e ) { console . log ( ` ${ e . message } ` , e ) ; return ; } const { data = [ ] } = response ; const hasData = Array . isArray ( data ) && data . length > 0 ; if ( ! hasData ) return ; const geoJson = { type : 'FeatureCollection' , features : data . map ( ( country = { } ) => { const { countryInfo = { } } = country ; const { lat , long : lng , flag } = countryInfo ; return { type : 'Feature' , properties : { ... country , flag , } , geometry : { type : 'Point' , coordinates : [ lng , lat ] , } , } ; } ) , } ; const geoJsonLayers = new L . GeoJSON ( geoJson , { pointToLayer : ( feature = { } , latlng ) => { const { properties = { } } = feature ; let updatedFormatted ; let casesString ; const { country , flag , updated , cases , casesPerOneMillion , deaths , deathsPerOneMillion , recovered , active , critical , tests , testsPerOneMillion , } = properties ; casesString = ` ${ cases } ` ; if ( cases > 1000000 ) { casesString = ` ${ casesString . slice ( 0 , - 6 ) } ${ casesString . slice ( - 6 , - 5 ) } ` ; } else if ( cases > 1000 ) { casesString = ` ${ casesString . slice ( 0 , - 3 ) } ` ; } if ( updated ) { updatedFormatted = new Date ( updated ) . toLocaleString ( ) ; } const html = ` ${ casesString } ` ; const stats = ` ${ flag } ${ country } ${ cases . toLocaleString ( ) } ${ casesPerOneMillion . toLocaleString ( ) } ${ deaths . toLocaleString ( ) } ${ deathsPerOneMillion . toLocaleString ( ) } ${ recovered . toLocaleString ( ) } ${ active . toLocaleString ( ) } ${ critical . toLocaleString ( ) } ${ tests . toLocaleString ( ) } ${ testsPerOneMillion . toLocaleString ( ) } ${ updatedFormatted . toLocaleString ( ) } ` ; const popup = L . popup ( { maxWidth : 700 , } ) . setContent ( stats ) ; return L . marker ( latlng , { icon : L . divIcon ( { className : 'icon' , html , } ) , riseOnHover : true , } ) . bindPopup ( popup ) ; } , } ) ; geoJsonLayers . addTo ( map ) ; }
mapEffect
 @description Fires a callback once the page renders
 @example Here this is and example of being used to zoom in and set a popup on load
mapEffect @description Fires a callback once the page renders @example Here this is and example of being used to zoom in and set a popup on load
//Try to pull the info, if no info then show an error message //Create an array for the data and confirm that it has values in it and is an array //If not an array or no data, exit