coderplex-org · vinaypuppal · Oct 17, 2017 · Sep 22, 2017 · Oct 6, 2017 · Oct 12, 2017
diff --git a/.gitignore b/.gitignore
@@ -116,4 +116,4 @@ $RECYCLE.BIN/
 
 # Others
 data/
-.next/
+.next/
diff --git a/components/count-down.js b/components/count-down.js
@@ -85,38 +85,28 @@ class Countdown extends Component {
       <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>

diff --git a/components/footer.js b/components/footer.js
@@ -4,7 +4,7 @@ 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';
 
-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';
 
-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
@@ -91,7 +91,7 @@ export default props => {
                   </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>

diff --git a/components/icon.js b/components/icon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default () =>
+export default () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <path
       fill="#6B4841"
@@ -45,4 +45,5 @@ export default () =>
         height: 200px;
       }
     `}</style>
-  </svg>;
+  </svg>
+);
diff --git a/components/row-events.js b/components/row-events.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Card, Icon } from 'semantic-ui-react';
+import moment from 'moment';
+
+const RowEvent = props => {
+  return (
+    <Card fluid raised targer="_blank" href={props.link}>
+      <Card.Content>
+        <Card.Header>{props.name}</Card.Header>
+        <div className="card_venue">
+          <Card.Meta>
+            {props.venue === undefined ? 'Online' : props.venue.name}
+          </Card.Meta>
+        </div>
+      </Card.Content>
+      <Card.Content extra>
+        <span className="card_icons">
+          <Icon name="clock" />
+          {moment(props.time).format("h:mm A, ddd MMM Do 'YY")}
+        </span>
+        <span className="card_icons">
+          <Icon name="users" />
+          {`${props.yesCount} attended`}
+        </span>
+        <Icon name="log out" />
+        {props.venue === undefined ? 'Free session' : 'Free entry'}
+      </Card.Content>
+      <style jsx>{`
+        .card_venue {
+          margin-top: 15px;
+        }
+        .card_icons {
+          margin-right: 15px;
+        }
+      `}</style>
+    </Card>
+  );
+};
+
+export default RowEvent;
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "xo",
-    "lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
+    "lint":
+      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
     "precommit": "lint-staged",
     "analyze": "cross-env ANALYZE=1 next build",
     "dev": "cross-env NODE_ENV=development nodemon server.js -w server.js",
@@ -33,9 +34,6 @@
       "git add"
     ]
   },
-  "engines": {
-    "node": "8.1.4"
-  },
   "keywords": [],
   "author": "Vinay Puppal <[email protected]> (https://www.vinaypuppal.com/)",
   "license": "MIT",
@@ -49,6 +47,7 @@
     "feathers-rest": "^1.8.0",
     "isomorphic-unfetch": "^2.0.0",
     "js-cookie": "^2.1.4",
+    "moment": "^2.19.1",
     "next": "2.4.7",
     "nprogress": "^0.2.0",
     "preact": "^8.2.1",
@@ -60,6 +59,7 @@
     "react-ga": "^2.2.0",
     "react-headroom": "^2.1.6",
     "react-icons": "^2.2.5",
+    "react-textgradient": "0.0.2",
     "semantic-ui-react": "^0.71.3"
   },
   "devDependencies": {
@@ -71,7 +71,7 @@
     "husky": "^0.14.3",
     "lint-staged": "^4.0.2",
     "nodemon": "^1.11.0",
-    "prettier": "^1.5.3",
+    "prettier": "^1.7.0",
     "webpack-bundle-analyzer": "^2.8.3",
     "xo": "^0.18.2"
   }

diff --git a/pages/events.js b/pages/events.js
@@ -1,24 +1,109 @@
 import React from 'react';
+import axios from 'axios';
+import { Card } from 'semantic-ui-react';
 
-import Icon from '../components/icon';
 import publicPage from '../hocs/public-page';
+import {
+  futureEventsMeetupURL,
+  pastEventsMeetupURL,
+  reverseProxyCORS,
+} from '../utils/urls';
+import RowEvent from '../components/row-events';
 
-export default publicPage(() =>
-  <div>
-    <main>
-      <Icon />
-      <h3>Under Construction, Coming Soon!...</h3>
-    </main>
-    <style jsx>{`
-      main {
-        min-height: calc(100vh - 70px);
-        background: #f4f7fb;
-        color: #314159;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
+export default publicPage(
+  class Events extends React.Component {
+    static async getInitialProps() {
+      try {
+        const requestPastEvents = await axios.get(
+          `${reverseProxyCORS}${pastEventsMeetupURL}`,
+        );
+        const requestFutureEvents = await axios.get(
+          `${reverseProxyCORS}${futureEventsMeetupURL}`,
+        );
+        return {
+          pastEvents: requestPastEvents.data,
+          futureEvents: requestFutureEvents.data,
+        };
+      } catch (err) {
+        return {
+          pastEvents: 'err',
+          futureEvents: 'err',
+        };
       }
-    `}</style>
-  </div>,
+    }
+
+    render() {
+      return (
+        <div>
+          <div className="top_banner_root">
+            <h1 className="top_banner_headline">Events</h1>
+            <h2>Because you cannot change the world alone</h2>
+          </div>
+          <main>
+            {this.props.pastEvents !== 'err' &&
+            this.props.futureEvents !== 'err' ? (
+              <div>
+                <h4>Upcoming events</h4>
+                <div>
+                  {this.props.futureEvents.map(event => (
+                    <Card.Group key={event.id}>
+                      <RowEvent
+                        name={event.name}
+                        yesCount={event.yes_rsvp_count}
+                        time={event.time}
+                        venue={event.venue}
+                        link={event.link}
+                      />
+                    </Card.Group>
+                  ))}
+                </div>
+                <h4>Recent events</h4>
+                <div>
+                  {this.props.pastEvents.map(event => (
+                    <Card.Group key={event.id}>
+                      <RowEvent
+                        key={event.id}
+                        name={event.name}
+                        yesCount={event.yes_rsvp_count}
+                        time={event.time}
+                        venue={event.venue}
+                        link={event.link}
+                      />
+                    </Card.Group>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div>Failed to Retrieve Events</div>
+            )}
+          </main>
+          <style jsx>{`
+            main {
+              background-color: #ffffff;
+              padding-top: 30px;
+              padding-bottom: 30px;
+              padding-left: 30px;
+              padding-right: 30px;
+              min-height: calc(100vh - 70px);
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              flex-direction: column;
+            }
+            .top_banner_root {
+              background-color: #f4f7fb;
+              min-height: 200px;
+              text-align: center;
+            }
+            .top_banner_headline {
+              padding-top: 20px;
+              font-size: 4em;
+              color: #df1cb5;
+              font-weight: 900;
+            }
+          `}</style>
+        </div>
+      );
+    }
+  },
 );
-Original file line number
+Diff line change
@@ Expand Up / @@ -116,4 +116,4 @@ $RECYCLE.BIN/ @@
     # Others
     data/
-    .next/
+    .next/