events page with future and past events

coderplex-org · vinaypuppal · Oct 17, 2017 · Sep 22, 2017 · Oct 6, 2017 · Oct 12, 2017
commit b368ecab2ea50b2ade7648696b5c6010c921ae39
diff --git a/common/urls.js b/common/urls.js
@@ -1,4 +1,5 @@
-const pastEventsMeetupURL =
-  'https://api.meetup.com/freeCodeCamp-Hyderabad/events?desc=1&photo-host=public&page=100&sig_id=216741149&status=past&sig=1c4bfe2215a979755e5f59989ff43edb0351f687';
+export const pastEventsMeetupURL =
+  'https://api.meetup.com/freeCodeCamp-Hyderabad/events?desc=1&photo-host=public&page=20&sig_id=216741149&status=past&only=id%2Cname%2Ctime%2Cyes_rsvp_count%2Cdescription%2Cvenue%2Cstatus%2Clink&sig=9c90b0db31ddca7bad153c802491c36295eb3170'
 
-export default pastEventsMeetupURL;
+export const futureEventsMeetupURL =
+  'https://api.meetup.com/freeCodeCamp-Hyderabad/events?photo-host=public&page=20&sig_id=216741149&status=upcoming&only=id%2Cname%2Ctime%2Cyes_rsvp_count%2Cdescription%2Cvenue%2Cstatus%2Clink&sig=7ced2a430897569cb38f1e27ac255be8d1aaa525'
diff --git a/components/count-down.js b/components/count-down.js
@@ -1,36 +1,36 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 class Countdown extends Component {
   constructor(props) {
-    super(props);
+    super(props)
 
     this.state = {
       days: 0,
       hours: 0,
       min: 0,
       sec: 0,
-    };
+    }
   }
 
   componentDidMount() {
     // Update every second
     this.interval = setInterval(() => {
-      const date = this.calculateCountdown(this.props.date);
-      if (date) this.setState(date);
-      else this.stop();
-    }, 1000);
+      const date = this.calculateCountdown(this.props.date)
+      if (date) this.setState(date)
+      else this.stop()
+    }, 1000)
   }
 
   componentWillUnmount() {
-    this.stop();
+    this.stop()
   }
 
   calculateCountdown(endDate) {
-    let diff = (Date.parse(new Date(endDate)) - Date.parse(new Date())) / 1000;
+    let diff = (Date.parse(new Date(endDate)) - Date.parse(new Date())) / 1000
 
     // Clear countdown when date is reached
-    if (diff <= 0) return false;
+    if (diff <= 0) return false
 
     const timeLeft = {
       years: 0,
@@ -39,84 +39,74 @@ class Countdown extends Component {
       min: 0,
       sec: 0,
       millisec: 0,
-    };
+    }
 
     // Calculate time difference between now and expected date
     if (diff >= 365.25 * 86400) {
       // 365.25 * 24 * 60 * 60
-      timeLeft.years = Math.floor(diff / (365.25 * 86400));
-      diff -= timeLeft.years * 365.25 * 86400;
+      timeLeft.years = Math.floor(diff / (365.25 * 86400))
+      diff -= timeLeft.years * 365.25 * 86400
     }
     if (diff >= 86400) {
       // 24 * 60 * 60
-      timeLeft.days = Math.floor(diff / 86400);
-      diff -= timeLeft.days * 86400;
+      timeLeft.days = Math.floor(diff / 86400)
+      diff -= timeLeft.days * 86400
     }
     if (diff >= 3600) {
       // 60 * 60
-      timeLeft.hours = Math.floor(diff / 3600);
-      diff -= timeLeft.hours * 3600;
+      timeLeft.hours = Math.floor(diff / 3600)
+      diff -= timeLeft.hours * 3600
     }
     if (diff >= 60) {
-      timeLeft.min = Math.floor(diff / 60);
-      diff -= timeLeft.min * 60;
+      timeLeft.min = Math.floor(diff / 60)
+      diff -= timeLeft.min * 60
     }
-    timeLeft.sec = diff;
+    timeLeft.sec = diff
 
-    return timeLeft;
+    return timeLeft
   }
 
   stop() {
-    clearInterval(this.interval);
+    clearInterval(this.interval)
   }
 
   addLeadingZeros(value) {
-    value = String(value);
+    value = String(value)
     while (value.length < 2) {
-      value = '0' + value;
+      value = '0' + value
     }
-    return value;
+    return value
   }
 
   render() {
-    const countDown = this.state;
+    const countDown = this.state
 
     return (
       <div className="countdown">
         <span className="countdown-col">
           <span className="countdown-col-element">
-            <strong>
-              {this.addLeadingZeros(countDown.days)}
-            </strong>
-            <span>
-              {countDown.days === 1 ? 'Day' : 'Days'}
-            </span>
+            <strong>{this.addLeadingZeros(countDown.days)}</strong>
+            <span>{countDown.days === 1 ? 'Day' : 'Days'}</span>
           </span>
         </span>
 
         <span className="countdown-col">
           <span className="countdown-col-element">
-            <strong>
-              {this.addLeadingZeros(countDown.hours)}
-            </strong>
+            <strong>{this.addLeadingZeros(countDown.hours)}</strong>
             <span>Hours</span>
           </span>
         </span>
 
         <span className="countdown-col">
           <span className="countdown-col-element">
-            <strong>
-              {this.addLeadingZeros(countDown.min)}
-            </strong>
+            <strong>{this.addLeadingZeros(countDown.min)}</strong>
             <span>Min</span>
           </span>
         </span>
 
         <span className="countdown-col">
           <span className="countdown-col-element">
-            <strong>
-              {this.addLeadingZeros(countDown.sec)}
-            </strong>
+            <strong>{this.addLeadingZeros(countDown.sec)}</strong>
             <span>Sec</span>
           </span>
         </span>
@@ -135,16 +125,16 @@ class Countdown extends Component {
           }
         `}</style>
       </div>
-    );
+    )
   }
 }
 
 Countdown.propTypes = {
   date: PropTypes.string.isRequired,
-};
+}
 
 Countdown.defaultProps = {
   date: new Date(),
-};
+}
 
-export default Countdown;
+export default Countdown
diff --git a/components/footer.js b/components/footer.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import FaFacebook from 'react-icons/lib/fa/facebook';
-import FaYoutube from 'react-icons/lib/fa/youtube-play';
-import FaGithub from 'react-icons/lib/fa/github-alt';
-import FaInstagram from 'react-icons/lib/fa/instagram';
+import React from 'react'
+import FaFacebook from 'react-icons/lib/fa/facebook'
+import FaYoutube from 'react-icons/lib/fa/youtube-play'
+import FaGithub from 'react-icons/lib/fa/github-alt'
+import FaInstagram from 'react-icons/lib/fa/instagram'
 
-export default () =>
+export default () => (
   <footer>
     <div className="footer__container">
       <div className="footer__content">
@@ -79,4 +79,5 @@ export default () =>
         color: #314159;
       }
     `}</style>
-  </footer>;
+  </footer>
+)
diff --git a/components/global-styles.js b/components/global-styles.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from 'react'
 
-export default () =>
+export default () => (
   <div>
     <style jsx global>{`
       *,
@@ -14,9 +14,9 @@ export default () =>
         padding: 0;
         margin: 0;
         background: #fafafa;
-        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
-          Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
-          "Helvetica Neue", sans-serif;
+        font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+          Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
+          'Helvetica Neue', sans-serif;
         font-weight: 400;
         color: #444;
         text-rendering: optimizeLegibility;
@@ -43,11 +43,12 @@ export default () =>
         width: 100px;
         height: 100%;
         box-shadow: 0 0 10px #d812c8, 0 0 5px #d812c8;
-        opacity: 1.0;
+        opacity: 1;
         transform: rotate(3deg) translate(0px, -4px);
       }
       .headroom--pinned header {
-        box-shadow: 0 2px 4px rgba(61, 71, 82, .1);
+        box-shadow: 0 2px 4px rgba(61, 71, 82, 0.1);
       }
     `}</style>
-  </div>;
+  </div>
+)
diff --git a/components/head.js b/components/head.js
@@ -1,7 +1,7 @@
-import React from 'react';
-import Head from 'next/head';
+import React from 'react'
+import Head from 'next/head'
 
-export default ({ title }) =>
+export default ({ title }) => (
   <Head>
     <meta charSet="utf-8" />
     <meta
@@ -41,14 +41,13 @@ export default ({ title }) =>
       rel="stylesheet"
       href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
     />
-    <title>
-      {title}
-    </title>
+    <title>{title}</title>
     <meta name="description" content="coderplex" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content={title} />
     <meta property="og:url" content="https://coderplex.org" />
     <meta property="og:image" content="/static/favicons/favicon-32x32.png" />
     <meta property="og:site_name" content="coderplex" />
     <meta property="og:description" content="coderplex" />
-  </Head>;
+  </Head>
+)
diff --git a/components/header.js b/components/header.js
@@ -1,31 +1,31 @@
-import React from 'react';
-import Headroom from 'react-headroom';
-import NProgress from 'nprogress';
-import Router from 'next/router';
-import Link from 'next/link';
-import { Dropdown } from 'semantic-ui-react';
+import React from 'react'
+import Headroom from 'react-headroom'
+import NProgress from 'nprogress'
+import Router from 'next/router'
+import Link from 'next/link'
+import { Dropdown } from 'semantic-ui-react'
 
-import { logout } from '../utils/authenticate';
-import GlobalStyles from './global-styles';
-import Head from './head';
+import { logout } from '../utils/authenticate'
+import GlobalStyles from './global-styles'
+import Head from './head'
 
 Router.onRouteChangeStart = () => {
-  NProgress.start();
-};
+  NProgress.start()
+}
 
 Router.onRouteChangeComplete = () => {
-  NProgress.done();
-};
+  NProgress.done()
+}
 
 Router.onRouteChangeError = () => {
-  NProgress.done();
-};
+  NProgress.done()
+}
 
 export default props => {
   const title =
     props.url.pathname === '/'
       ? 'Home'
-      : props.url.pathname.split('/')[1].toUpperCase();
+      : props.url.pathname.split('/')[1].toUpperCase()
   const navItems = [
     {
       title: 'Home',
@@ -59,7 +59,7 @@ export default props => {
       title: 'Login/Register',
       path: '/login',
     },
-  ].filter(item => (props.username ? item.path !== '/login' : true));
+  ].filter(item => (props.username ? item.path !== '/login' : true))
   return (
     <Headroom>
       <header>
@@ -89,9 +89,9 @@ export default props => {
                       </a>
                     </Link>
                   </li>
-                );
+                )
               })}
-              {props.username &&
+              {props.username && (
                 <li className="nav__linkItem">
                   <img src={props.avatarUrl} alt="avatar_img" />
                   <Dropdown
@@ -109,7 +109,8 @@ export default props => {
                       </Dropdown.Item>
                     </Dropdown.Menu>
                   </Dropdown>
-                </li>}
+                </li>
+              )}
             </ul>
           </nav>
         </div>
@@ -205,5 +206,5 @@ export default props => {
         }
       `}</style>
     </Headroom>
-  );
-};
+  )
+}