https://github.com/coderplex/coderplex/pull/11#discussion_r144851886

coderplex-org · vinaypuppal · Oct 17, 2017 · Sep 22, 2017 · Oct 6, 2017 · Oct 12, 2017
commit d05a152057f6db222d7dd26c4500d76e8a4192a8
diff --git a/pages/events.js b/pages/events.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import axios from 'axios';
-import NProgress from 'nprogress';
 import { Card } from 'semantic-ui-react';
 
 import publicPage from '../hocs/public-page';
@@ -9,24 +8,19 @@ import RowEvent from '../components/row-events';
 
 export default publicPage(
   class Events extends React.Component {
-    state = {
-      pastEvents: [],
-      futureEvents: [],
-    };
-
-    async componentDidMount() {
-      NProgress.start();
+    static async getInitialProps() {
       try {
         const requestPastEvents = await axios.get(pastEventsMeetupURL);
-        NProgress.set(0.4);
         const requestFutureEvents = await axios.get(futureEventsMeetupURL);
-        await this.setState({
+        return {
           pastEvents: requestPastEvents.data,
           futureEvents: requestFutureEvents.data,
-        });
-        NProgress.done();
+        };
       } catch (err) {
-        console.log(err);
+        return {
+          pastEvents: 'err',
+          futureEvents: 'err',
+        };
       }
     }
 
@@ -38,12 +32,12 @@ export default publicPage(
             <h2>Because you cannot change the world alone</h2>
           </div>
           <main>
-            {this.state.pastEvents.length !== 0 &&
-            this.state.futureEvents.length !== 0 ? (
+            {this.props.pastEvents !== 'err' &&
+            this.props.futureEvents !== 'err' ? (
               <div>
                 <h4>Upcoming events</h4>
                 <div>
-                  {this.state.futureEvents.map(event => (
+                  {this.props.futureEvents.map(event => (
                     <Card.Group key={event.id}>
                       <RowEvent
                         name={event.name}
@@ -57,7 +51,7 @@ export default publicPage(
                 </div>
                 <h4>Recent events</h4>
                 <div>
-                  {this.state.pastEvents.map(event => (
+                  {this.props.pastEvents.map(event => (
                     <Card.Group key={event.id}>
                       <RowEvent
                         key={event.id}
@@ -72,7 +66,7 @@ export default publicPage(
                 </div>
               </div>
             ) : (
-              <div>Retrieving Events</div>
+              <div>Failed to Retrieve Events</div>
             )}
           </main>
           <style jsx>{`