first commit

vinodh99 · Nov 16, 2018 · 2c59889 · 2c59889
1 parent 937a702
commit 2c59889
Show file tree

Hide file tree

Showing 15 changed files with 148 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-scripts": "2.1.1"
+    "react-scripts": "2.1.1",
+    "whatwg-fetch": "^3.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/css/bootstrap.min.css b/public/css/bootstrap.min.css
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="utf-8">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css">
+    <script src="%PUBLIC_URL%/js/jquery-3.3.1.min.js"></script>
+    <script src="%PUBLIC_URL%/js/tether.min.js"></script>
+    <script src="css/%PUBLIC_URL%/js/bootstrap.min.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <!--

diff --git a/public/js/bootstrap.min.js b/public/js/bootstrap.min.js
diff --git a/public/js/jquery-3.3.1.min.js b/public/js/jquery-3.3.1.min.js
diff --git a/public/js/tether.min.js b/public/js/tether.min.js
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.css → src/App/App.css b/src/App.css → src/App/App.css
@@ -9,7 +9,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 10vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -30,3 +30,9 @@
     transform: rotate(360deg);
   }
 }
+
+.App-main{
+    padding-top: 35px;
+    padding-left: 8rem;
+    padding-bottom: 5rem;
+}
diff --git a/src/App/App.js b/src/App/App.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import Product from '../product/product';
+
+import HttpService from '../services/http-service';
+
+const http = new HttpService();
+class App extends Component {
+
+    constructor(props){
+        super(props);  
+
+        this.state = {products:[]};
+        //Bind funictions
+        this.loadData = this.loadData.bind(this);//the loaddata is bound to here thus referring to this scope rather than refering it to global scope
+        this.productList = this.productList.bind(this);
+
+        this.loadData(); //this is where the function is passed which is inside the loaddata variable.
+
+    }
+    //loadData=loaddata.bind(loaddata); bind can also be defined this way but if defined this way, loaddata is not reusable for another new object if we create one
+
+    loadData = () => {
+        var self = this;
+        http.getProducts().then(data =>{
+            self.setState({products:data})
+            // we are inside of a promise here and 
+            // "then" here is screwing up our "this" hence a reference is created
+            // before the promise is loaded. self is referring to the component
+            // here. But if self is not used and this is placed along with the 
+            // setState then this referes to the promise and no longer to the
+            // component because it is asynchronous.
+            // everytime setState is called, it will render that component again and
+            // all the components inside of it but not outside of it
+        },err => {
+
+        });
+    }
+
+    productList = () => {
+        const list = this.state.products.map((product) =>
+            <div className = "col-sm-4" key={product._id}>
+            <Product title={product.title} price ={product.price} imgURL={product.imgURL}/> 
+            </div>
+        );
+        return (list);
+    }
+
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+            <h2>welcome suckers, find your best deals</h2>
+        </div>
+        <div className="container App-main">        
+        <div className="row">
+            {this.productList()}
+         </div>     
+
+         </div>
+       </div>
+    );
+  }
+}
+
+export default App;
+
diff --git a/src/App.test.js → src/App/App.test.js b/src/App.test.js → src/App/App.test.js
diff --git a/src/logo.svg → src/App/logo.svg b/src/logo.svg → src/App/logo.svg
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './App/App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

diff --git a/src/product/product.css b/src/product/product.css
@@ -0,0 +1,7 @@
+.Product {
+    width:20rem;
+}
+
+.Product img {
+    max-height:15rem;
+}
diff --git a/src/product/product.js b/src/product/product.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react'//we are grabbing one specific thing 'component' from react,hence curly braces
+import './product.css';
+
+class Product extends Component{
+    render(){
+        return (
+        <div  className = "card">
+            <img className = "card-img-top" src = {this.props.imgURL}alt="Product"></img>
+            {/* curly braces is a special syntax to insert javascript */}
+            <div className="card-block">
+                <h4 className="card-title">{this.props.title}</h4>
+                <p className="card-text">Price: ${this.props.price}</p>
+                <a href="#" className="btn btn-primary">Add to wishlist</a>
+
+            </div>
+        </div>
+        );
+    }
+}
+
+export default Product; 
diff --git a/src/services/http-service.js b/src/services/http-service.js
@@ -0,0 +1,21 @@
+import 'whatwg-fetch';
+
+class HttpService {
+    getProducts = () =>{
+        //1
+        var promise = new Promise((resolve,reject) => {
+//        2
+            fetch('http://localhost:3002/product')
+            .then(res => {
+//                4
+                resolve(res.json());
+             //josn takes the response and converts to json 
+            })
+        });
+//        3
+        return promise;
+        //then is chained to whatever fetch is returning
+    }
+}
+
+export default HttpService;//ES6 format of module.export