CapTable

package.json

@@ -15,8 +15,8 @@
     "i18next-browser-languagedetector": "^4.0.2",
     "i18next-xhr-backend": "^3.2.2",
     "lodash": "^4.17.15",
-    "moment": "^2.24.0",
-    "node-sass": "^4.13.1",
+    "moment": "^2.26.0",
+    "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-chartjs-2": "^2.9.0",
     "react-document-meta": "^3.0.0-beta.2",

public/index.html

@@ -52,7 +52,7 @@
       rel="stylesheet"
     />
     <script async src="https://cdn.ampproject.org/v0.js"></script>
-    
+
     <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
 
     <!-- Hotjar Tracking Code for covidzero.com.br -->
@@ -84,8 +84,9 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-
-    <!-- <link rel="stylesheet" type="text/css" href="https://d2smc9x58xj6ns.cloudfront.net/neoron.css"></link>
-    <script src="https://d2smc9x58xj6ns.cloudfront.net/neoron.js" id="Neoron"></script> -->
+
+    <div id="neoron"></div>
+    <link rel="stylesheet" type="text/css" href="https://d2smc9x58xj6ns.cloudfront.net/neoron.css"></link>
+    <script src="https://d2smc9x58xj6ns.cloudfront.net/neoron.js" id="Neoron"></script>
   </body>
 </html>

public/locales/en/translation.json

@@ -13,7 +13,7 @@
     "donations":"Apoie ONGs"
   },
   "header": {
-    "map": "Brasil em tempo real",
+    "map": "Brasil",
     "cities": "Estados e Cidades",
     "area": "Sua área",
     "help": "Ajuda",

public/locales/pt/translation.json

@@ -13,7 +13,7 @@
     "donations":"Apoie ONGs"
   },
   "header": {
-    "map": "Brasil em tempo real",
+    "map": "Brasil",
     "cities": "Estados e Cidades",
     "area": "Sua área",
     "help": "Ajuda",

src/Router.js

@@ -5,13 +5,21 @@ import Cities from "./pages/Cities";
 import Area from "./pages/Area";
 import Help from "./pages/Help";
 import News from "./pages/News";
+import UiKit from "./pages/UiKit";
 import News1 from "./pages/News/News1";
 import News2 from "./pages/News/News2";
 import News3 from "./pages/News/News3";
 import News4 from "./pages/News/News4";
 import News5 from "./pages/News/News5";
 import News6 from "./pages/News/News6";
-import UiKit from "./pages/UiKit";
+import News7 from "./pages/News/News7";
+import News8 from "./pages/News/News8";
+import News9 from "./pages/News/News9";
+import News10 from "./pages/News/News10";
+import News11 from "./pages/News/News11";
+import News12 from "./pages/News/News12";
+import News13 from "./pages/News/News13";
+import News14 from "./pages/News/News14";
 
 import Donations       from "./pages/Donations";
 import Details         from "./pages/Donations/details";
@@ -28,18 +36,19 @@ export default function Routes() {
   return (
     <Switch>
       <Route path="/" exact component={Brazil} />
-      <Route path="/cities" exact component={Cities} />
+      {/* <Route path="/cities" exact component={Cities} />*/}
       <Route path="/area" exact component={Area} />
       {/* <Route path="/help" exact component={Help} /> */}
       <Route path="/news" exact component={News} />
 
       <Route path="/donations"           exact component={Donations} />
-      <Route path="/donations/details/:capitation/:id"   exact component={Details} />       
+
+      <Route path="/donations/details/:capitation/:id"   exact component={Details} />
       <Route path="/donations/checkout/captable/:id"     exact component={CheckoutCartaoCaptable} />
       <Route path="/donations/boleto/:id"                exact component={checkoutBoleto} />
       <Route path="/donations/confirmed/captable/:id"    exact component={confirmedCaptable} />
-      
-      
+
+
       <Route path="/donations/checkout/preme/:id"     exact component={CheckoutCartaoPreme} />
       <Route path="/donations/confirmed/preme/stores/:storeId/orders/:orderNumber"  exact component={confirmedPreme} />
       <Route path="/donations/boleto/preme/stores/:storeId/orders/:orderNumber"     exact component={checkoutBoletoPreme} />
@@ -49,10 +58,18 @@ export default function Routes() {
       {/* News section /> */}
       <Route path="/news/Universidade_de_Oxford_recruta_para_testes_de_vacina_criada_para_erradicar_o_COVID-19" exact component={News1} />
       <Route path="/news/Diretor-Geral_da_OMS_apela_ao_G20_para_combater_unir_e_inflamar_o_COVID-19" exact component={News2} />
-      <Route path="/news/Por_trás_do_relatório_que_pôs_os_EUA_e_o_Reino_Unido_em_ação_contra_o_vírus_COVID-19" exact component={News3} />
+      <Route path="/news/por_tras_do_relatorio_que_pos_os_EUA_e_o_Reino_Unido_em_acao_contra_o_virus_COVID-19" exact component={News3} />
       <Route path="/news/projeto_de_ventilador_recebe_sinal_verde_do_governo_do_Reino_Unido_para_avançar_a_proxima_etapa_dos_testes" exact component={News4} />
       <Route path="/news/medidas_basicas_de_protecao_contra_o_novo_coronavirus" exact component={News5} />
       <Route path="/news/Revelando_a_origem_e_transmissao_do_COVID-19" exact component={News6} />
+      <Route path="/news/o-mercado-brasileiro-e-as-mudanças-no-consumo" exact component={News7} />
+      <Route path="/news/as-mudancas-nas-relacoes-de-consumo-durante-a-pandemia" exact component={News8} />
+      <Route path="/news/qual-o-impacto-da-crise-do-coronavirus-na-midia" exact component={News9} />
+      <Route path="/news/como-manter-a-eficacia-da-midia-durante-a-pandemia" exact component={News10} />
+      <Route path="/news/seja-criativo-para-anunciar-durante-o-isolamento-social" exact component={News11} />
+      <Route path="/news/o_inicio_da_pandemia_e_o_isolamento_social_no_brasil" exact component={News12} />
+      <Route path="/news/o_impacto_da_COVID-19_nas_relacoes_de_trabalho" exact component={News13} />
+      <Route path="/news/saude_mental_em_tempos_de_pandemia" exact component={News14} />
 
       <Route path="/" component={() => <h1>Desculpe, um erro ocorreu. Estaremos verificando o que aconteceu.</h1>} />
     </Switch>

src/assets/scss/_base.scss

@@ -65,14 +65,14 @@ a {
   width: 35%;
 }
 
- 
+
 @include respond-to(tablet) {
   .main-logo {
     width: 20%;
     padding-right: 80px;
   }
 }
- 
+
 .mdc-layout-grid {
   width: 100%;
 }
@@ -93,19 +93,22 @@ circle{
     animation: zoominoutsinglefeatured 3s infinite ;
 }
 
-.gm-style div a, .gm-style div a div, .gm-style-cc {
+
+.gm-style div a, .gm-style div a div, .gm-style-cc, .gmnoprint {
   display: none;
 }
 
-._hj-f5b2a1eb-9b07_feedback_minimized_label{
-  zoom: 70%;
+.hIOJIb {
+  background-color: #FFF !important;
 }
 
-// neoron chatbot
-.rsc-float-button {
-  display: none !important;
+#neoron button {
+  cursor: pointer;
 }
 
+._hj-f5b2a1eb-9b07_feedback_minimized_label{
+  zoom: 70%;
+}
 
 @media only screen and (max-width: 600px) {
   .rsc-float-button {
@@ -158,4 +161,18 @@ circle{
       font-weight: bold !important;
     }
   }
-}
+}
+
+#ribon {
+  width: 5rem;
+}
+
+.aboutOpenSource {
+  color: #a4a4a4;
+  font-size: 12px;
+
+  a {
+    color: #a4a4a4;
+    text-decoration: underline;
+  }
+}

src/assets/scss/_variables.scss

@@ -15,7 +15,7 @@ $gray-40: #828282;
 $gray-50: #918e8c;
 $gray-60: #3a3a3a;
 $gray-70: #282832;
-$gray-80: #16171c;
+$gray-80: #000000;
 $black: #000;
 
 $magenta: #fe008c;

src/components/Charts/CasesAndDeaths/index.js

@@ -0,0 +1,176 @@
+import React, { useEffect, useState } from 'react';
+import { Style } from '../styles';
+import moment from 'moment';
+
+import last30DaysService from '../../../services/last30Days';
+
+import {Line} from 'react-chartjs-2';
+import Chart from 'chart.js';
+
+const CasesAndDeaths = (props) => {
+    const [responseAPI, setResponseAPI] = useState([]);
+
+    const [lastDayCasesAndDeaths, setLastDayCasesAndDeaths] = useState(null);
+    const [lastDayFormatedCasesAndDeaths, setLastDayFormatedCasesAndDeaths] = useState(null);
+
+    const [labelsCasesAndDeaths, setLabelsCasesAndDeaths] = useState([]);
+    const [valuesDeaths, setValuesDeaths] = useState([]);
+    const [valuesCases, setValuesCases] = useState([]);
+
+    const [graphicCasesAndDeaths, setGraphicCasesAndDeaths] = useState(null);
+
+    useEffect(() => {
+        getLastDay();
+    }, []);
+
+    useEffect(() => {
+
+        if(!lastDayCasesAndDeaths || !lastDayFormatedCasesAndDeaths){
+            return
+        }
+
+        const maxDays = 20;
+
+        const daysYMD = [];
+        const daysMD = [];
+
+        for(let index = 0; index <= maxDays; index++){
+            //pega o "i" dia antes do último retornado pela api 
+            let day = moment(lastDayCasesAndDeaths).subtract(index, 'days');
+            //coloca no array o dia no formato da api y-m-d
+            daysYMD.push(moment(day).format('YYYY-MM-DD'));
+            //coloca no array o dia no formato dd/m
+            daysMD.push(moment(day._d).format('l').split('/').reverse().slice(1).join('/'));
+        }
+
+        const newValuesDeath = daysYMD.map(day => {
+            let totalDeaths = responseAPI.reduce((currentTotal, item) => {
+                if(item.date == day){
+                    return currentTotal + item.totalDeaths
+                }
+                return currentTotal
+            }, 0);
+            return totalDeaths;
+        });
+
+        const newValuesCases = daysYMD.map(day => {
+          let totalCases = responseAPI.reduce((currentTotal, item) => {
+              if(item.date == day){
+                  return currentTotal + item.totalCases
+              }
+              return currentTotal
+          }, 0);
+
+          return totalCases;
+      });
+
+        setLabelsCasesAndDeaths(daysMD);
+        setValuesDeaths(newValuesDeath);
+        setValuesCases(newValuesCases);
+
+    }, [lastDayCasesAndDeaths, lastDayFormatedCasesAndDeaths]);
+
+    useEffect(() => {
+        if(!labelsCasesAndDeaths.length > 0 || !valuesDeaths.length > 0 || !valuesCases.length > 0){
+            return
+        }
+
+        setGraphicCasesAndDeaths(
+            {
+              labels: labelsCasesAndDeaths.reverse(),
+              datasets: [
+                {
+                  fill: false,
+                  lineTension: 0.1,
+                  backgroundColor: '#BDBDBD',
+                  borderColor: '#BDBDBD',
+                  borderCapStyle: 'round',
+                  borderJoinStyle: 'miter',
+                  pointBorderColor: '#BDBDBD',
+                  pointBackgroundColor: '#BDBDBD',
+                  borderWidth: 4,
+                  pointBorderWidth: 2,
+                  pointHoverRadius: 5,
+                  pointRadius: 0,
+                  pointHitRadius: 10,
+                  data: valuesDeaths.reverse(),
+                },
+                {
+                  fill: false,
+                  lineTension: 0.1,
+                  backgroundColor: '#EF5350',
+                  borderColor: '#EF5350',
+                  borderCapStyle: 'round',
+                  borderJoinStyle: 'miter',
+                  pointBorderColor: '#EF5350',
+                  pointBackgroundColor: '#EF5350',
+                  borderWidth: 4,
+                  pointBorderWidth: 2,
+                  pointHoverRadius: 5,
+                  pointRadius: 0,
+                  pointHitRadius: 10,
+                  data: valuesCases.reverse(),
+                }
+              ]
+            }
+        );
+    }, [labelsCasesAndDeaths, valuesDeaths, valuesCases]);
+
+    async function getLastDay(){
+      const response = await last30DaysService.get().then(response => {
+        return response.data;
+      });
+
+      setResponseAPI(response);
+
+      const lastDay = response[0];
+
+      const lastDayFormated = moment(lastDay.date).format('l').split('/').reverse().slice(1).join('/');
+
+      setLastDayCasesAndDeaths(lastDay.date);
+      setLastDayFormatedCasesAndDeaths(lastDayFormated);
+    };
+
+
+    return(
+        <Style.CardBoxStyle>
+            <Style.Title>{props.title}</Style.Title>
+            <Style.CardBoxStatsDefault>
+                {graphicCasesAndDeaths && <Line
+                    data={graphicCasesAndDeaths}
+                    height={130}
+                    options={{
+                        legend:{
+                            display: false,
+                        },
+                        scales: {
+                            xAxes: [{
+                                gridLines: {
+                                    display:false
+                                },
+                                ticks:{
+                                    fontFamily: 'Ubuntu',
+                                    fontColor: '#BDBDBD',
+                                    fontSize: 7
+                                },
+                            }],
+                            yAxes: [{
+                                gridLines: {
+                                    display:false
+                                },
+                                ticks:{
+                                    display: false
+                                }, 
+                            }],
+                        },
+
+                    }}
+                />}
+
+            </Style.CardBoxStatsDefault>
+        </Style.CardBoxStyle>
+    );
+
+}
+
+export default CasesAndDeaths;