fetching data from a remote api

Author: smerth

api/index.js

@@ -1,9 +1,10 @@
 import express from 'express';
+import data from '../src/testData';
 
 const router = express.Router();
 
-router.get('/', (req, res) => {
-    res.send({data: []});
+router.get('/contests', (req, res) => {
+  res.send({contests: data.contests});
 });
 
 export default router;

package.json

@@ -22,6 +22,7 @@
   },
   "homepage": "...",
   "dependencies": {
+    "axios": "^0.16.2",
     "ejs": "^2.5.6",
     "express": "^4.15.3",
     "json-loader": "^0.5.4",

src/components/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import data from '../testData';
+import axios from 'axios';
 import Header from './Header';
 import ContestPreview from './ContestPreview';
 
@@ -9,9 +9,17 @@ class App extends React.Component {
     contests: []
   };
   componentDidMount() {
-    this.setState({
-      contests: data.contests
-    });
+    // Make Ajax call and load data response onto the state
+    axios.get('/api/contests')
+      .then(response => {
+        // console.log(response.data.contests);
+        this.setState({
+          contests: response.data.contests
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   }
   componentWillUnmount () {
   }