-- Adds new sources of data https://github.com/andrab/ecuacovid

README.md

@@ -23,14 +23,10 @@ Para desarrolladoras/es:
   REACT_APP_MAPBOX_ACCESS_TOKEN=token
 ```
 
-- Crear dos tablas en Airtable, se pueden crear importando los siguientes CSV de ejemplo:
-  - [Datos de provincias](https://github.com/SerotoninaAbad/covid19-csv-examples/blob/master/province-data.csv)
-  - [Totales diarios](https://github.com/SerotoninaAbad/covid19-csv-examples/blob/master/daily-totals.csv)
-  - Añadir  a `/.env.local` la API key de Airtable y los 2 endpoints para consultar las tablas creadas
+- Agregar urls para datos de provincia y totales en Ecuador:
 ```
-  REACT_APP_AIRTABLE_API_KEY=airtable_key
-  REACT_APP_PROVINCE_STATS_ENDPOINT=airtable_provinces_endpoint
-  REACT_APP_TOTAL_STATS_ENDPOINT=airtable_total_stats_endpoint
+  REACT_APP_PROVINCE_STATS_ENDPOINT=https://raw.githubusercontent.com/andrab/ecuacovid/master/datos_crudos/positivas/por_fecha/provincias_por_dia.csv
+  REACT_APP_TOTAL_STATS_ENDPOINT=https://raw.githubusercontent.com/andrab/ecuacovid/master/datos_crudos/ecuacovid.json
 ```
 
 

package.json

@@ -6,6 +6,7 @@
     "@reach/router": "^1.3.3",
     "chart.js": "^2.9.3",
     "d3": "^5.16.0",
+    "papaparse": "^5.2.0",
     "react": "^16.13.1",
     "react-chartjs-2": "^2.9.0",
     "react-dom": "^16.13.1",

src/components/Ecuador.js

@@ -22,8 +22,7 @@ const Ecuador = ({ t }) => {
     return b.confirmed - a.confirmed;
   });
 
-  const dateInArray = lastDayTotals.date.split('-');
-  const date = `${dateInArray[2]}.${dateInArray[1]}`;
+  const date = lastDayTotals.date;
   var confirmedDiff = lastDayTotals.confirmed - prevDayTotals.confirmed;
   var deathsDiff = lastDayTotals.deaths - prevDayTotals.deaths;
   var possibleDeathsDiff =
@@ -127,17 +126,17 @@ const Ecuador = ({ t }) => {
           <p>{lastDayTotals.negatives}</p>
           <h3>{t('negatives.label')}</h3>
         </StatBlock>
-        <StatBlock>
+        {/* <StatBlock> //TODO: Implement services to look for recoveries
           <span>
             {isPositive(recoveriesDiff) ? '+' : ''}
             {recoveriesDiff}
           </span>
           <p>{lastDayTotals.recoveries}</p>
           <h3>{t('recoveries.label')}</h3>
-        </StatBlock>
+        </StatBlock> */}
       </StatGrid>
 
-      <StatGrid>
+      {/* <StatGrid> //TODO: Implement services to look for tests
         <StatBlock>
           <span>
             {isPositive(testsDiff) ? '+' : ''}
@@ -170,7 +169,7 @@ const Ecuador = ({ t }) => {
           <p>{positiveRatio.toFixed(2)}% </p>
           <h3>{t('rate.label')}</h3>
         </StatBlock>
-      </StatGrid>
+      </StatGrid> */}
 
       <HeaderContainer>
         <h4>{t('confirmedPerRegion.label')}</h4>

src/hooks/statsContext.js

@@ -2,6 +2,8 @@ import React, { useContext } from 'react';
 import LoadingPage from '../components/LoadingPage';
 import ErrorPage from '../components/ErrorPage';
 import useFetch from './useFetch';
+import useCSVParser from './useCSVParser';
+import { parseProvincesFromCSVJSON } from '../utils/parser';
 
 const AIRTABLE_API_KEY = process.env.REACT_APP_AIRTABLE_API_KEY;
 const PROVINCE_STATS_ENDPOINT = process.env.REACT_APP_PROVINCE_STATS_ENDPOINT;
@@ -10,14 +12,13 @@ const TOTAL_STATS_ENDPOINT = process.env.REACT_APP_TOTAL_STATS_ENDPOINT;
 const StatsContext = React.createContext([]);
 
 const StatsProvider = ({ children }) => {
-  const { data, isLoading, isError } = useFetch(
+  const { data, isLoading, isError } = useCSVParser(
     {
       url: PROVINCE_STATS_ENDPOINT,
-      apiKey: AIRTABLE_API_KEY
     },
     { records: [] }
   );
-  const provinces = data.records.map(item => ({ ...item.fields }));
+  const provinces = parseProvincesFromCSVJSON(data)
 
   const {
     data: dailyRecords,
@@ -26,24 +27,29 @@ const StatsProvider = ({ children }) => {
   } = useFetch(
     {
       url: TOTAL_STATS_ENDPOINT,
-      apiKey: AIRTABLE_API_KEY
     },
-    { records: [] }
+    []
   );
-  const dailyTotals = dailyRecords.records.map(item => ({
-    ...item.fields
+
+  const dailyTotals = dailyRecords.map(item => ({
+    deaths: item.total_muertes,
+    confirmed: item.positivas,
+    possibleDeaths: item.muertes_probables,
+    negatives: item.negativas,
+    date: item.created_at
   }));
 
   let lastDayTotals;
   let prevDayTotals;
   let beforeYesterdayTotals;
-  if (dailyTotals.length) {
-    lastDayTotals = { ...dailyTotals[dailyTotals.length - 1] };
-    prevDayTotals = { ...dailyTotals[dailyTotals.length - 2] };
+  const dailyTotalsLength = dailyTotals.length
+  if (dailyTotalsLength > 0) {
+    lastDayTotals = { ...dailyTotals[dailyTotalsLength - 1] };
+    prevDayTotals = { ...dailyTotals[dailyTotalsLength - 2] };
     beforeYesterdayTotals = { ...dailyTotals[dailyTotals.length - 3] };
   } else {
     lastDayTotals = {
-      date: '0000-00-00',
+      date: '0000/00/00',
       tiime: '00:00',
       confirmed: 0,
       deaths: 0,
@@ -55,10 +61,12 @@ const StatsProvider = ({ children }) => {
       hospitalStable: 0,
       reserveState: 0
     };
+    prevDayTotals = lastDayTotals
+    beforeYesterdayTotals = lastDayTotals
   }
 
-  const generalIsLoading = isLoading || dailyIsLoading;
-  const generalIsError = isError || dailyIsError;
+  const generalIsLoading = isLoading;
+  const generalIsError = isError;
 
   if (generalIsError) {
     return <ErrorPage />;

src/hooks/useCSVParser.js

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import { getCSVFile } from '../utils/parser';
+
+export default function useCSVParser({ url }, initialData = null) {
+  const [data, setData] = useState(initialData);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    let didCancel = false;
+    async function fetchData() {
+      setIsLoading(true);
+      setIsError(false);
+
+      try {
+        const data = await getCSVFile(url)
+        setData(data);
+        setIsLoading(false);
+      } catch (err) {
+        if (!didCancel) {
+          setIsError(true);
+          setIsLoading(false);
+        }
+      }
+    }
+    fetchData();
+
+    return () => {
+      didCancel = true;
+    };
+  }, [url]);
+  return {
+    data,
+    isLoading,
+    isError
+  };
+}

src/hooks/useFetch.js

@@ -12,14 +12,9 @@ export default function useFetch({ url, apiKey = null }, initialData = null) {
       setIsError(false);
 
       let options = {};
-      const headers = new Headers();
-      if (apiKey) {
-        headers.set('Authorization', `Bearer ${apiKey}`);
-        options = {
-          method: 'GET',
-          headers
-        };
-      }
+      options = {
+        method: 'GET',
+      };
 
       try {
         const response = await fetch(url, options);

src/utils/parser.js

@@ -0,0 +1,46 @@
+import Papa from 'papaparse'
+
+export const parseProvincesFromCSVJSON = (csvJSON) => {
+  const parsedProvinces = []
+  if(csvJSON && csvJSON.length > 0) {
+    const headers = csvJSON[0];
+    const headersLength = headers.length;
+    const provinces = [...csvJSON];
+    delete provinces[0]
+    provinces.forEach((province, index) => {
+      const provinceItem = {
+        id: index,
+        name: province[0],
+        confirmed: province[headersLength - 1],
+        lat: parseFloat(province[2]),
+        lng: parseFloat(province[3]),
+        status: getStatus(province[headersLength - 1]),
+      }
+      parsedProvinces.push(provinceItem)
+    });
+  }
+
+  return parsedProvinces;
+};
+
+export const getCSVFile = (url) => new Promise( (resolve, reject) => {
+  Papa.parse(url, {
+    download: true,
+    complete: (parsed) => {
+      resolve(parsed.data);
+    },
+    error: (e) => {
+      reject(e);
+    }
+  })
+});
+
+const getStatus = (confirmed) => {
+  if(confirmed > 5000) {
+    return 'alert';
+  } else if(confirmed > 1500) {
+    return 'warning';
+  } else if(confirmed > 500) {
+    return 'caution';
+  }
+};