Merge pull request #60 from ethereumba/features/home-issues

Features/home issues
ethereumba · Jul 12, 2020 · c38f766 · c38f766
2 parents 3e3475e + 5994004
commit c38f766
Show file tree

Hide file tree

Showing 19 changed files with 286 additions and 56 deletions.
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
@@ -9,8 +9,10 @@
   "joinMeetup": "Join our Meetup",
   "ourMeetups": "Our meetups",
   "pastEvents": "past events",
+  "upcomingEvents": "UPCOMING EVENTS",
   "viewMore": "view more",
   "communityGrowing": "Our community is growing",
+  "viewMoreEvents": "View more events",
   "allEvents": "View All Events",
   "learn": "LEARN + SHARE + BUILD",
   "about": "Ethereum Buenos Aires is about empowering participants to shape this new world,\n while cementing the Latin American region as a thriving hub of Ethereum blockchain innovation.",

diff --git a/frontend/public/locales/es/translation.json b/frontend/public/locales/es/translation.json
@@ -9,8 +9,10 @@
   "joinMeetup": "Unite al Meetup",
   "ourMeetups": "Meetups",
   "pastEvents": "Eventos Anteriores",
+  "upcomingEvents": "Próximos eventos",
   "viewMore": "ver más",
   "communityGrowing": "Nuestra comunidad crece",
+  "viewMoreEvents": "Ver más eventos",
   "allEvents": "Ver todos los eventos",
   "learn": "APRENDER + COMPARTIR + CONSTRUIR",
   "about": "Ethereum Buenos Aires tiene como fin empoderar a sus participantes para darle forma a este nuevo mundo,\n y potenciar a Latinoamérica como un vibrante hub de inovación global de Ethereum",

diff --git a/frontend/public/locales/pt/translation.json b/frontend/public/locales/pt/translation.json
@@ -9,8 +9,10 @@
   "joinMeetup": "Una-se ao Meetup",
   "ourMeetups": "Nossos Meetups",
   "pastEvents": "Eventos Passados",
+  "upcomingEvents": "Próximos eventos",
   "viewMore": "ver mais",
   "communityGrowing": "A nossa comunidade está crescendo",
+  "viewMoreEvents": "Ver mais eventos",
   "allEvents": "Ver todos os eventos",
   "learn": "APRENDER + COMPARTILHAR + CONSTRUIR",
   "about": "Ethereum Buenos Aires tem por objetivo empoderar os seus participantes para dar forma a este novo mundo,\n enquanto a América Latina é alicerçada como hub de inovação de Blockchain",

diff --git a/frontend/src/components/common/banner/banner.scss b/frontend/src/components/common/banner/banner.scss
@@ -7,6 +7,16 @@
   height: 600px;
   display: flex;
 
+
+  @media (max-width: 760px) {
+    height: 800px;
+  }
+
+  @media (max-width: 480px) {
+    height: 800px;
+
+  }
+
   &.top {
     img {
       object-position: center top;
@@ -23,12 +33,11 @@
   .banner__text {
     position: absolute;
     width: 100%;
-    top: 35%;
+    top: 30%;
     text-align: center;
 
     &.lightTheme {
       top: 28%;
-
       h4 {
         color: $violetCard;
       }
@@ -48,7 +57,9 @@
       }
 
       @media (max-width: 480px) {
-        font-size: 24px;
+        font-size: 22px;
+        margin: 40px 0;
+
       }
     }
   }

diff --git a/frontend/src/components/common/banner/styles.js b/frontend/src/components/common/banner/styles.js
@@ -11,5 +11,7 @@ export const MeetupButton = styled(OrangeButton)`
   display: inline-flex;
   padding: 5px 15px;
 
-  margin-top: 60px;
+  margin: 80px 0 0 0;
 `;
+
+export const Button = styled.div``;
diff --git a/frontend/src/components/common/paragraph/index.js b/frontend/src/components/common/paragraph/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+// i18n
+import { useTranslation } from 'react-i18next';
+
+const Paragraph = () => {
+  // Hooks
+  const { t } = useTranslation();
+
+  return (
+    <div className="social">
+      <div className="community__header">
+        <div className="sub-title">
+          <h1>{t('learn')}</h1>
+        </div>
+
+        <div className="center">
+          <p className="title-2">{t('about')}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Paragraph;
diff --git a/frontend/src/components/common/paragraph/paragraph.scss b/frontend/src/components/common/paragraph/paragraph.scss
@@ -0,0 +1,64 @@
+@import '../../../styles/variables.scss';
+
+.social {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 110px;
+  flex-direction: column;
+
+  .container-social {
+    display: flex;
+    justify-content: center;
+    width: 90%;
+    flex-wrap: wrap;
+    margin-top: 40px;
+
+    .box-social {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 30px;
+    }
+  }
+
+  .img {
+    &.twitter {
+      img {
+        width: 40px;
+      }
+    }
+    &.spotify {
+      img {
+        max-width: 160px;
+      }
+    }
+    img {
+      max-height: 60px;
+      max-width: 120px;
+    }
+  }
+}
+
+.blog-iframe {
+  border:1px solid #EEE; 
+  background:white;
+
+  button {
+    .rightButton {
+      background: $violetCard !important; 
+    }
+  }
+}
+
+.sub-title p {
+  margin: 0;
+  color: rgba(30, 19, 70, 0.73);
+  font-family: 'Comfortaa';
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 2.4px;
+  line-height: 28px;
+  text-align: center;
+  text-transform: uppercase;
+}
diff --git a/frontend/src/components/common/social/Social.js b/frontend/src/components/common/social/Social.js
@@ -70,9 +70,14 @@ const Social = () => {
           );
         })}
       </div>
-      <iframe src="https://ethereumba.substack.com/embed"
-      width="480" height="320" className="blog-iframe" scrolling="no">
-      </iframe>
+      <iframe
+        src="https://ethereumba.substack.com/embed"
+        width="100%"
+        height="320"
+        className="blog-iframe"
+        scrolling="no"
+        title="substack"
+      />
     </div>
   );
 };

diff --git a/frontend/src/components/common/social/social.scss b/frontend/src/components/common/social/social.scss
@@ -43,6 +43,12 @@
 .blog-iframe {
   border:1px solid #EEE; 
   background:white;
+
+  button {
+    .rightButton {
+      background: $violetCard !important; 
+    }
+  }
 }
 
 .sub-title p {

diff --git a/frontend/src/components/common/stats/Stats.js b/frontend/src/components/common/stats/Stats.js
@@ -1,4 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+import API_ROUTES from '../../../lib/api';
+
 // i18n
 import { useTranslation } from 'react-i18next';
 
@@ -7,10 +11,21 @@ import './stats.scss';
 
 const Stats = () => {
   // Hooks
+  const [members, setMembers] = useState(null);
+
   const { t } = useTranslation();
 
+  useEffect(() => {
+    const requestMembers = async () => {
+      const response = await axios.get(API_ROUTES.stats);
+      setMembers(response.data.amount_of_members);
+    };
+
+    requestMembers();
+  }, [setMembers]);
+
   const stats = [
-    { id: 'members', value: '+1600', name: t('members') },
+    { id: 'members', value: `+${members}`, name: t('members') },
     { id: 'meetupsPerMonth', value: 'x1', name: t('preMonth') },
     { id: 'attendeesPerMeetup', value: '+80', name: t('atendees') },
     { id: 'averageRating', value: '4.8', name: t('averageRating') },

diff --git a/frontend/src/components/home/community/Community.js b/frontend/src/components/home/community/Community.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Grid } from '@material-ui/core';
 
 // i18n
@@ -41,16 +41,6 @@ export default () => {
 
   return (
     <div className="community">
-      <div className="community__header">
-        <div className="sub-title">
-          <h1>{t('learn')}</h1>
-        </div>
-
-        <div className="center">
-          <p className="title-2">{t('about')}</p>
-        </div>
-      </div>
-
       <Stats />
 
       <Grid container className="container-community community-text" spacing={0}>

diff --git a/frontend/src/components/home/community/community.scss b/frontend/src/components/home/community/community.scss
@@ -2,6 +2,8 @@
 
 .community {
   box-sizing: border-box;
+
+
   &__header {
     margin-bottom: 110px;
 

diff --git a/frontend/src/components/home/events/Events.js b/frontend/src/components/home/events/Events.js
@@ -10,12 +10,13 @@ import { withRouter } from 'react-router-dom';
 
 import Button from '../../common/button/Button';
 import EventCard from '../../common/eventCard/EventCard';
+import UpcomingEventCard from '../../events/upcomingEventCard/UpcomingEventCard';
 import './events.scss';
 
 // lib
-import { getFormattedDate, getI18nField } from '../../../lib/helpers';
+import { getFormattedDate, getFormattedTime, getI18nField } from '../../../lib/helpers';
 
-const Events = ({ events, history }) => {
+const Events = ({ events, history, upcomingEvents }) => {
   // Hooks
   const { t, i18n } = useTranslation();
 
@@ -33,12 +34,45 @@ const Events = ({ events, history }) => {
   return (
     <div className="background-events">
       <div className="events">
+        <div className="center">
+          <p className="title">{t('ourMeetups')}</p>
+        </div>
+
         <div className="card-events">
-          <div className="center">
-            <p className="title">{t('ourMeetups')}</p>
+          <div className="cards-events">
+            {upcomingEvents && upcomingEvents.length > 0 && (
+              <div className="events__upcoming-home">
+                <div className="events__subtitle">
+                  <h4>{t('upcomingEvents')}</h4>
+                </div>
+                <Grid container className="events__container">
+                  {upcomingEvents.map(event => {
+                    const address = `${event.place_street} ${event.place_number}, ${event.place_city}`;
+                    const eventDate = getFormattedDate(event.date);
+                    const eventTime = getFormattedTime(event.date);
+
+                    return (
+                      <UpcomingEventCard
+                        key={`events-upcoming__${event.date}`}
+                        handleClick={() => handleEventCardClick(event.id)}
+                        id={event.id}
+                        title={getI18nField(event, 'title', i18n.language)}
+                        date={eventDate}
+                        time={eventTime}
+                        address={address}
+                        url={event.meetup_url}
+                      />
+                    );
+                  })}
+                </Grid>
+              </div>
+            )}
           </div>
 
           <div className="cards-events">
+            <div className="events__subtitle">
+              <h4>{t('pastEvents')}</h4>
+            </div>
             <Grid container className="events__container">
               {orderedEventsToDisplay &&
                 orderedEventsToDisplay.map(event => {
@@ -82,6 +116,16 @@ Events.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func,
   }).isRequired,
+  upcomingEvents: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      title_es: PropTypes.string,
+      title_en: PropTypes.string,
+      title_pt: PropTypes.string,
+      date: PropTypes.string,
+      hasPassed: PropTypes.bool,
+    })
+  ).isRequired,
 };
 
 export default withRouter(Events);