From 86e1667b731db0b40beff616e8b100e13c753632 Mon Sep 17 00:00:00 2001
From: Abdullah <ab4ullahkh@gmail.com>
Date: Mon, 1 Apr 2019 10:59:18 +0300
Subject: [PATCH] Added Post and update by id (edit)

---
 src/App.js                               |  18 +++-
 src/components/Home.js                   |  49 +++++++++-
 src/components/Nav.js                    |   7 ++
 src/components/authForm.js/Post.js       | 110 ++++++++++++++++++++++
 src/components/authForm.js/Put.js        | 112 +++++++++++++++++++++++
 src/components/authForm.js/SignupForm.js |   4 +-
 6 files changed, 291 insertions(+), 9 deletions(-)
 create mode 100644 src/components/authForm.js/Post.js
 create mode 100644 src/components/authForm.js/Put.js

diff --git a/src/App.js b/src/App.js
index 29e0da0..83ada14 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,10 +7,13 @@ import SignupForm from "./components/authForm.js/SignupForm";
 import ChangePasswordForm from "./components/authForm.js/ChangePasswordForm";
 import Home from "./components/Home";
 import Profile from "./components/Profile";
+import Post from "./components/authForm.js/Post";
+import Put from "./components/authForm.js/Put";
 class App extends Component {
   state = {
     user: null,
-    activePage: "home"
+    activePage: "home",
+    productId: undefined
   };
   componentDidMount() {
     // check if we have a token in the local storage
@@ -20,8 +23,11 @@ class App extends Component {
     }
   }
 
-  changeActivePage = activePage => {
-    this.setState({ activePage });
+  changeActivePage = (activePage, productId) => {
+    this.setState({ 
+      activePage: activePage,
+      productId: productId 
+    });
   };
   onSignin = () => {
     this.setState({ user: getUser() });
@@ -43,7 +49,7 @@ class App extends Component {
         />
 
         <div className="container">
-          {activePage === "home" ? <Home /> : ""}
+          {activePage === "home" ? <Home changeActivePage={this.changeActivePage}/> : ""}
           {activePage === "sign-in" ? (
             <SigninForm onSignin={this.onSignin} />
           ) : (
@@ -60,7 +66,11 @@ class App extends Component {
             ""
           )}
           {activePage === "profile" ? <Profile /> : ""}
+          {activePage === "post" ? <Post changeActivePage={this.changeActivePage}/> : ""}
+          {activePage === "put" ? <Put id={this.state.productId} changeActivePage={this.changeActivePage}/> : ""}
+         
         </div>
+
       </div>
     );
   }
diff --git a/src/components/Home.js b/src/components/Home.js
index 299637e..4768ea3 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,5 +1,48 @@
-import React from "react";
+import React, { Component } from "react";
+import apiUrl from "../apiConfig";
 
-const Home = () => <div>HOME</div>;
+class Home extends Component {
+  state = {
+    products: []
+  };
 
-export default Home;
+  componentDidMount() {
+    let url = `${apiUrl}/api/products`;
+
+    console.log(url);
+    fetch(url, {
+      mode: "cors",
+      credentials: "include",
+      method: "GET",
+      headers: {
+        "Content-type": "application/json"
+      }
+    })
+      .then(res => res.json())
+      .then(data => {
+        if (data.status > 299) this.setState({ err: data.message });
+        else {
+          this.setState({ products: data.products });
+        }
+      })
+      .catch(e => console.log(e));
+  }
+
+  render() {
+    return (
+      <div className="pt-5 mt-5">
+        <h1>Home</h1>
+        {this.state.products.map((product, index) => (
+          <ul key={index+' ul'}>
+            <p key={index+' name'}> Name : {product.name}</p> 
+                  
+            <p key={index+' description'}> description: {product.description}</p>
+            <button key={index+' button'} onClick={() => this.props.changeActivePage('put', product.id)}>Edit</button>
+            <hr key={index+' hr'}/>
+          </ul>
+        ))}
+      </div>
+    );
+  }
+}
+export default Home;
\ No newline at end of file
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 4124df2..2933d8d 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -8,9 +8,14 @@ const authenticatedOptions = (changeActivePage, onSignout) => (
     >
       <div className="nav-link">Change Password</div>
     </li>
+    <li className="nav-item" onClick={() => changeActivePage("post")}>
+      <div className="nav-link">Add post</div>
+    </li>
+   
     <li className="nav-item" onClick={() => onSignout()}>
       <div className="nav-link">Sign Out</div>
     </li>
+  
   </React.Fragment>
 );
 
@@ -22,6 +27,7 @@ const unauthenticatedOptions = changeActivePage => (
     <li className="nav-item" onClick={() => changeActivePage("sign-up")}>
       <div className="nav-link">Sign Up</div>
     </li>
+   
   </React.Fragment>
 );
 
@@ -30,6 +36,7 @@ const alwaysOptions = changeActivePage => (
     <li className="nav-item" onClick={() => changeActivePage("home")}>
       <div className="nav-link">Home</div>
     </li>
+   
   </React.Fragment>
 );
 
diff --git a/src/components/authForm.js/Post.js b/src/components/authForm.js/Post.js
new file mode 100644
index 0000000..b65236f
--- /dev/null
+++ b/src/components/authForm.js/Post.js
@@ -0,0 +1,110 @@
+import React, { Component } from "react";
+
+import apiUrl from "../../apiConfig";
+
+class Post extends Component {
+    state = {
+        formData: {
+            name: '',
+            description: '',
+            image: '',
+            owner_id:'',
+            close_bid:''
+
+          }
+        }
+
+ handleProductRequest = product => {
+    let url = `${apiUrl}/api/products`;
+
+    fetch(url, {
+      mode: "cors",
+      credentials: "include",
+      method: "POST",
+      headers: {
+        "Content-type": "application/json"
+      },
+      body: JSON.stringify({ product: product })
+    })
+      .then(res => res.json())
+      .then(data => {
+        if (data.status > 299) 
+          this.setState({ err: data.message});
+          this.props.changeActivePage('home')
+      })
+      .catch(e => console.log(e));
+  };
+
+
+  handleSubmit = e => {
+    e.preventDefault();
+    console.log(this.state.formData)
+    this.handleProductRequest(this.state.formData);
+     
+    
+    
+ 
+  };
+
+
+  handleChange = ({ currentTarget }) => {
+    const formData = { ...this.state.formData };
+    formData[currentTarget.name] = currentTarget.value;
+    this.setState({ formData });
+  };
+
+  render() {
+    return (
+      <div className="pt-5 mt-5">
+        <h1>Product</h1>
+        
+        <form onSubmit={this.handleSubmit}>
+          <div className="form-group">
+            <label>Name </label>
+            <input
+              name="name"
+              className="form-control"
+              onChange={this.handleChange}
+            />
+            <label>description</label>
+            <input
+              name="description"
+              className="form-control"
+              onChange={this.handleChange}
+            />
+
+            <label>image</label>
+            <input
+              name="image"
+              className="form-control"
+              onChange={this.handleChange}
+            />
+
+
+           <label>owner_id</label>
+            <input
+              name="owner_id"
+              className="form-control"
+              onChange={this.handleChange}
+              type="number"
+            />
+
+            <label>close_bid</label>
+            <input
+              name="close_bid"
+              className="form-control"
+              onChange={this.handleChange}
+              type="number"
+            />
+          </div>
+
+          <button type="submit" className="btn btn-primary">
+            submit
+          </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default Post;
\ No newline at end of file
diff --git a/src/components/authForm.js/Put.js b/src/components/authForm.js/Put.js
new file mode 100644
index 0000000..467b7b7
--- /dev/null
+++ b/src/components/authForm.js/Put.js
@@ -0,0 +1,112 @@
+import React, { Component } from "react";
+
+import apiUrl from "../../apiConfig";
+
+class Put extends Component {
+    state = {
+        formData: {
+            name: '',
+            description: '',
+            image: '',
+            owner_id:'',
+            close_bid:''
+
+          }
+        }
+
+
+        handleProductRequest = product => {
+            let url = `${apiUrl}/api/product/${this.props.id}`;
+        
+            fetch(url, {
+              mode: "cors",
+              credentials: "include",
+              method: "PUT",
+              headers: {
+                "Content-type": "application/json"
+              },
+              body: JSON.stringify({ product: product })
+            })
+              .then(res => res.json())
+              .then(data => {
+                if (data.status > 299) 
+                  this.setState({ err: data.message});
+                  this.props.changeActivePage('home')
+              })
+              .catch(e => console.log(e));
+          };
+        
+        
+          handleSubmit = e => {
+            e.preventDefault();
+            console.log(this.state.formData)
+            this.handleProductRequest(this.state.formData);
+             
+            
+            
+         
+          };
+        
+        
+          handleChange = ({ currentTarget }) => {
+            const formData = { ...this.state.formData };
+            formData[currentTarget.name] = currentTarget.value;
+            this.setState({ formData });
+          };
+        
+          render() {
+            return (
+              <div className="pt-5 mt-5">
+                <h1>Update</h1>
+                
+                <form onSubmit={this.handleSubmit}>
+                  <div className="form-group">
+        
+                    <label>Name </label>
+                    <input
+                      name="name"
+                      className="form-control"
+                      onChange={this.handleChange}
+                    />
+                    <label>description</label>
+                    <input
+                      name="description"
+                      className="form-control"
+                      onChange={this.handleChange}
+                    />
+        
+                    <label>image</label>
+                    <input
+                      name="image"
+                      className="form-control"
+                      onChange={this.handleChange}
+                    />
+        
+        
+                   <label>owner_id</label>
+                    <input
+                      name="owner_id"
+                      className="form-control"
+                      onChange={this.handleChange}
+                      type="number"
+                    />
+        
+                    <label>close_bid</label>
+                    <input
+                      name="close_bid"
+                      className="form-control"
+                      onChange={this.handleChange}
+                      type="number"
+                    />
+                  </div>
+        
+                  <button type="submit" className="btn btn-primary">
+                    submit
+                  </button>
+                </form>
+              </div>
+            );
+          }
+        }
+        
+        export default Put;
\ No newline at end of file
diff --git a/src/components/authForm.js/SignupForm.js b/src/components/authForm.js/SignupForm.js
index 2309712..8f2a4c7 100644
--- a/src/components/authForm.js/SignupForm.js
+++ b/src/components/authForm.js/SignupForm.js
@@ -25,9 +25,9 @@ class SignupForm extends Component {
     })
       .then(res => res.json())
       .then(data => {
-        if (data.status > 200 ) this.setState({ err: data.message });
+        if (data.status > 299) 
+          this.setState({ err: data.message});
         else {
-          console.log(data)
           setUser(data);
           this.props.onSignin();
         }