Fetched data from json and rendered in list

README.md

@@ -22,16 +22,15 @@ Compiles SASS into `public/css/main.css`.
 Edit the `public/data.json` file in accordance with the following format.
 ```javascript
   {
-    'name': 'Name of the company',
-    'location': {
-      'city': 'City',
-      'country': 'Country'
+    "name": "Name of the company",
+    "location": {
+      "city": "City",
+      "country": "Country"
     },
-    'openings': [
+    "openings": [
       {
-        'role': 'Name of the role',
-        'applyLink': 'Link to apply for the role' // Could be a :mailto
+        "role": "Name of the role",
+        "applyLink": "Link to apply for the role (could be a :mailto link)" 
       }
     ]
   }
-`

public/data.json

@@ -0,0 +1,36 @@
+[
+	{
+	  "name": "Razorpay",
+	  "location": {
+	    "city": "Bangalore",
+	    "country": "India"
+	  },
+	  "openings": [
+	    {
+	      "role": "Design Intern - Summer 2017",
+	      "applyLink": "http://www.google.com" 
+	    },
+	    {
+	      "role": "Backend Intern - Winter 2016",
+	      "applyLink": "http://www.google.com" 
+	    },
+	    {
+	      "role": "Front End Intern - Summer 2017",
+	      "applyLink": "http://www.google.com" 
+	    }
+	  ]
+	},
+	{
+	  "name": "Flipkart",
+	  "location": {
+	    "city": "Bangalore",
+	    "country": "India"
+	  },
+	  "openings": [
+	    {
+	      "role": "Marketing Intern - Summer 2017",
+	      "applyLink": "http://www.google.com" 
+	    }
+	  ]
+	}
+]

src/Components/App.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import logo from '../logo.svg';
-
 // Components
 import CompanyList from './CompanyList';
 
+// We need to pull all the data here
+
 class App extends Component {
   render() {
     return (

src/Components/Company.js

@@ -1,19 +1,27 @@
 import React, { Component, PropTypes } from 'react';
 
+import Openings from './Openings';
+import CompanyInfo from './CompanyInfo';
+
 class Company extends Component {
-    static propTypes = {
-      className: PropTypes.string,
-    };
+  static propTypes = {
+    className: PropTypes.string,
+    data: PropTypes.object
+  };
 
-    constructor(props) {
-      super(props);
-    }
+  constructor(props) {
+    super(props);
+  }
 
-    render() {
-      return (
-				<h1>This is a company</h1>          
-      );
-    }
+  render() {
+    var {name, location} = this.props.data;
+    return (
+      <div className="company">
+        <CompanyInfo name={name} location={location}/>
+        <Openings data={this.props.data.openings}/>
+      </div>
+    );
+  }
 }
 
 export default Company;

src/Components/CompanyInfo.js

@@ -3,6 +3,8 @@ import React, { Component, PropTypes } from 'react';
 class CompanyInfo extends Component {
   static propTypes = {
     className: PropTypes.string,
+    name: PropTypes.string,
+    location: PropTypes.object
   };
 
   constructor(props) {
@@ -11,7 +13,10 @@ class CompanyInfo extends Component {
 
   render() {
     return (
-      <h1>This is the company info right here</h1>  
+      <div className="companyInfo">
+        <span className="companyName">{this.props.name}</span>
+        <span className="companyLocation">{this.props.location.city}, {this.props.location.country}</span>
+      </div>
     );
   }
 }

src/Components/CompanyList.js

@@ -1,17 +1,48 @@
 import React, { Component, PropTypes } from 'react';
 
+// Components
+import Company from './Company';
+
 class CompanyList extends Component {
   static propTypes = {
     className: PropTypes.string,
   };
 
   constructor(props) {
     super(props);
+    this.state = {
+      data: null
+    };
+  }
+
+  componentDidMount() {
+    this.fetchCompanyData();    
+  }
+
+  fetchCompanyData(){
+    var url = './data.json';
+    fetch(url)
+      .then( response => response.json() )
+      .then( jsonData => {
+        this.setState({
+          data: jsonData
+        });
+      })
+      .catch( error => console.log('JSON Fetch error : ' + error) );
   }
 
   render() {
+    var {data} = this.state;
     return (
-			<h1>I am the company list</h1>        
+    	<div className="companyList">
+        {
+          data && data.map( (company, i) => {
+            return(
+              <Company key={i} data={company} />
+            );
+          }) 
+        }
+    	</div>
     );
   }
 }

src/Components/Opening.js

@@ -3,6 +3,7 @@ import React, { Component, PropTypes } from 'react';
 class Opening extends Component {
   static propTypes = {
     className: PropTypes.string,
+    data: PropTypes.object
   };
 
   constructor(props) {
@@ -11,7 +12,7 @@ class Opening extends Component {
 
   render() {
     return (
-    	<h1>Opening</h1> 
+      <li className="opening">{this.props.data.role}</li>
     );
   }
 }

src/Components/Openings.js

@@ -0,0 +1,30 @@
+import React, { Component, PropTypes } from 'react';
+
+import Opening from './Opening';
+
+class Openings extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    data: PropTypes.array
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+    	<ul className="openings">
+	       {
+	       	this.props.data.map( (opening, i) => {
+	       		return(
+	       			<Opening key={i} data={opening}/>
+	     			);
+	       	})
+	       } 
+    	</ul>
+    );
+  }
+}
+
+export default Openings;

src/Styles/Components/_App.scss

@@ -1 +1,9 @@
 // Delcare App wide styles here
+* {
+	box-sizing: border-box;
+}
+
+html, body {
+	font-size: 62.5%;
+	font-family: 'Roboto', 'sans-serif';
+}

src/Styles/Components/_Company.scss

@@ -0,0 +1,10 @@
+.company {
+	color: $color-main-text;
+}
+
+.company:first-child {
+	& .companyInfo {
+		border-top: none;
+	}
+}
+

src/Styles/Components/_CompanyInfo.scss

@@ -0,0 +1,18 @@
+.companyInfo {
+	padding: 30px 25px 30px 25px;
+	border-top: 1px solid $color-main-border;
+	border-bottom: 1px solid $color-main-border;
+}
+
+.companyName {
+	font-size: 2rem;
+	letter-spacing: 0.15rem;
+	display: block;
+}
+
+.companyLocation {
+	margin-top: 0.5rem;
+	font-size: 1.6rem;
+	letter-spacing: 0.12rem;
+	display: block;
+}

src/Styles/Components/_CompanyList.scss

@@ -0,0 +1,8 @@
+.companyList {
+	background-color: $color-main;
+	border-radius: 2px;
+	border: 1px solid $color-main-border;
+	width: 750px;
+	margin: 50px auto 0px auto;
+	font-size: 4.8rem;
+}

src/Styles/Components/_Opening.scss

@@ -0,0 +1,11 @@
+.opening {
+	padding: 25px;
+	font-size: 1.8rem;
+	font-family: 'Roboto', 'sans-serif';
+	background-color: $color-opening-base;
+	border-bottom: 1px solid $color-main-border;
+}
+
+.opening:last-child {
+	border-bottom: none;
+}

src/Styles/Components/_Openings.scss

@@ -0,0 +1,3 @@
+.openings {
+
+}

src/Styles/_variables.scss

@@ -0,0 +1,5 @@
+$color-main: #FAFAFB;
+$color-button-primary: #52A1ED;
+$color-main-text: #515357;
+$color-opening-base: #FFFFFF;
+$color-main-border: #B9BCC6;

src/Styles/main.scss

@@ -4,11 +4,12 @@
 
 @import "compass";
 @import "compass/reset";
+@import "variables";
 @import "Components/App";
 @import "Components/CompanyList";
 @import "Components/Company";
 @import "Components/CompanyInfo";
-@import "Components/CompanyOpenings";
+@import "Components/Openings";
 @import "Components/Opening";
 @import "Components/OpeningInfo";
 @import "Components/ButtonPrimary";