Integrated Google Calendar on the Events page (#159)

* Integrated Google Calendar in the Events page

* Added react native StyleSheet

* Added padding and sectionSubheader component to Events page

* Added style to the Events page as per the other pages.

* Added Google Calendar in different timezones on Events Page

* Delete package-lock.json

* Moved description to content, replaced var with const, corrected indentation

Co-authored-by: Anna Bauza <[email protected]>

src/Components/Content/index.js

@@ -4,7 +4,7 @@ import Projects from './../Projects';
 import Home from './../Home';
 import AboutUs from './../AboutUs';
 import Contribute from '../Contribute';
-import OurEvents from './../OurEvents';
+import Events from './../Events/index';
 
 function Content({ selected, titles }) {
   if (selected === 0) {
@@ -13,8 +13,8 @@ function Content({ selected, titles }) {
     return <AboutUs />;
   } else if (selected === 3) {
     return <Projects />;
-  } else if(selected === 4) {
-    return <OurEvents />; 
+  } else if(selected === 4){
+    return <Events/>
   }
   if (selected === 5) {
     return <Contribute />;

src/Components/Events/GoogleCalendar/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MainContainer } from '../style';
+
+function GoogleCalendar({timezone}) {
+  return (
+    <MainContainer>
+        <iframe src={`https://calendar.google.com/calendar/u/0/[email protected]${timezone}`}
+          title="Calendar" style={{border: "0", width: "100%", height:"500px", frameborder:"0", scrolling:"no"}}>
+        </iframe>
+    </MainContainer>
+  );
+}
+
+export default GoogleCalendar;

src/Components/Events/index.js

@@ -0,0 +1,82 @@
+import React, {useState} from 'react';
+import SectionSubheader from '../SectionSubheader';
+import GoogleCalendar from './GoogleCalendar';
+import content from '../../content/events_calendar.json';
+import { Box, MainContainer, Content, Description, List } from './style';
+import OurEvents from '../OurEvents/index';
+
+const timezones = [
+  {
+    id: 1,
+    name: "PST",
+    link: "&ctz=America/Los_Angeles"
+  },
+  {
+    id: 2,
+    name: "EST",
+    link: "&ctz=America/New_York"
+  },
+  {
+    id: 3,
+    name: "GMT",
+    link: "&ctz=GMT"
+  },
+  {
+    id: 4,
+    name: "WAT",
+    link: "&ctz=Africa/Lagos"
+  },
+  {
+    id: 5,
+    name: "IST",
+    link: "&ctz=Asia/Colombo"
+  },
+  {
+    id: 6,
+    name: "AEDT",
+    link: "&ctz=Australia/Sydney"
+  }
+]
+
+function Events() {
+  const [timezone, setTimezone] = useState("")
+
+  const handler = (link) => {
+    setTimezone(link)
+  }
+
+  const listTimezones = timezones.map(function(zone){
+    return (
+    <List onClick={() => handler(zone.link) }>
+        {zone.name}
+    </List>
+    )
+  });
+
+  const renderCalendar = () => {
+    return(
+      <Box>
+      <OurEvents />
+        {
+          content.sections.map((section, index) => {
+            return(
+              <Content key={index}>
+                <SectionSubheader title={section.title}/>
+                <Description>{section.content} <br/> {listTimezones}</Description>
+                <GoogleCalendar timezone = {timezone}/>
+              </Content>
+            )
+          })
+        }
+      </Box>
+    )
+  }
+
+  return (  
+    <MainContainer>
+      {renderCalendar()}
+    </MainContainer>
+  );
+}
+
+export default Events;

src/Components/Events/style.js

@@ -0,0 +1,42 @@
+import { View, Text } from 'react-native';
+import { styled } from 'react-native-reflect';
+
+export const MainContainer = styled(View, {
+    width: '80%',
+    alignItems: 'left',
+    paddingLeft: 16,
+    paddingRight: 16,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginTop: 32,
+    marginBottom: 32,
+});
+
+export const Box = styled(View, {
+    flex: 1,
+    flexDirection: 'column',
+    marginTop: -32,
+});
+
+export const Content = styled(View, {
+    flexDirection: 'column',
+    paddingLeft: 16,
+});
+
+export const Description = styled(Text, {
+    flex: 1,
+    marginTop: 26,
+    paddingLeft: 16,
+    fontSize: 18,
+    flexGrow: 1,
+    fontWeight: 200,
+    color: '#103B81',
+    textAlign: 'left',
+});
+
+export const List = styled(Text, {
+    fontWeight: 400,
+    display: 'inline',
+    marginRight: 15,
+    cursor: 'pointer'
+});

src/content/events_calendar.json

@@ -0,0 +1,8 @@
+{
+    "sections": [
+        {
+            "title": "Event Calendar",
+            "content": "We host multiple open sessions to the community where members of the community can discuss concerns about the community, ask questions, discuss projects, etc. These sessions are open to anyone and are usually conducted via Zoom. These are audio-only calls, so no video is required. You can see our calendar in different timezones: "
+        }
+    ]
+}