adrianhajdin / project_corona_tracker

This is a code repository for the corresponding YouTube video. In this tutorial, we are going to build and deploy a corona tracker application. Covered topics: React.js, Chart.js, Material UI, and much more.
https://covid19statswebsite.netlify.com/
1.46k stars 483 forks source link

hello sir i have issue that my cards are not showing result of a specific country it will show the global result but does not show specific country report #5

Open priyanshisharma-21 opened 4 years ago

priyanshisharma-21 commented 4 years ago

app.js code import React from 'react'; import{ Cards,Chart, CountryPicker} from './components'; import styles from './App.module.css'; import {fetchData} from './api/'; // import styles from './Chart.module.css';

class App extends React.Component{ state = { data:{}, country: '', } async componentDidMount(){ const fetchedData =await fetchData(); this.setState({data: fetchedData }); }

handleCountryChange = async (country) =>{
    const fetchedData =await fetchData(country);
    // console.log(fetchedData);
    this.setState({ data: fetchedData, country: country});

}
render()

{ const {data} = this.state; return(

{/* */}
);

} } export default App;

SohamDave08 commented 4 years ago

Can you send api/index.js file? I faced the same issue but recovered from it.

priyanshisharma-21 commented 4 years ago

api/index.js

import axios from 'axios';

const url='https://covid19.mathdro.id/api'; export const fetchData = async (country) => { let changeableUrl =url; if(country){ changeableUrl = 'https://covid19.mathdro.id/api/countries/country'; } try{ const {data:{confirmed, recovered, deaths, lastUpdate}} = await axios.get(url);

    return {confirmed, recovered, deaths, lastUpdate};
}catch (error){
     console.log(error);

}

} export const fetchDailyData = async ()=> { try{ const {data} = await axios.get(url('https://covid19.mathdro.id/api/daily')); const modifiedData = data.map((dailyData)=> ({ confirmed: dailyData.confirmed.total, deaths: dailyData.deaths.total, date: dailyData.reportDate, })); return modifiedData; }catch (error){}

} export const fetchCountries = async () => {

try{
    const {data: {countries}}=  await axios.get('https://covid19.mathdro.id/api/countries ');

    return countries.map((country) => country.name);

}catch(error){
    console.log(error);

}

};

SohamDave08 commented 4 years ago

api/index.js

import axios from 'axios';

const url='https://covid19.mathdro.id/api'; export const fetchData = async (country) => { let changeableUrl =url; if(country){ changeableUrl = 'https://covid19.mathdro.id/api/countries/country'; } try{ const {data:{confirmed, recovered, deaths, lastUpdate}} = await axios.get(url);

    return {confirmed, recovered, deaths, lastUpdate};
}catch (error){
     console.log(error);

}

} export const fetchDailyData = async ()=> { try{ const {data} = await axios.get(url('https://covid19.mathdro.id/api/daily')); const modifiedData = data.map((dailyData)=> ({ confirmed: dailyData.confirmed.total, deaths: dailyData.deaths.total, date: dailyData.reportDate, })); return modifiedData; }catch (error){}

} export const fetchCountries = async () => {

try{
    const {data: {countries}}=  await axios.get('https://covid19.mathdro.id/api/countries ');

    return countries.map((country) => country.name);

}catch(error){
    console.log(error);

}

};

Got you error, you changed the new URL in changeableUrl but didn't pass that to API for fetching, made changes in code, and attached below. Hope it helped you :)

`export const fetchData = async (country) => { let changeableUrl =url; if(country){ changeableUrl = 'https://covid19.mathdro.id/api/countries/country'; } try{ const {data:{confirmed, recovered, deaths, lastUpdate}} = await axios.get(changeableUrl);

return {confirmed, recovered, deaths, lastUpdate};

}catch (error){ console.log(error);

} }`

Phimanshu07 commented 4 years ago

i am getting same error

{"error":{"message":"Country country not found in JHU database"}}