final last moment changes..XD

Author: mann27

package-lock.json

@@ -10,8 +10,10 @@
     "react-bootstrap": "^1.0.0-beta.14",
     "react-dom": "^16.10.2",
     "react-particles-js": "^2.7.0",
+    "react-rater": "^5.1.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
+    "react-star-ratings": "^2.3.0",
     "web3": "^1.0.0-beta.55",
     "web3-eth": "^1.2.1"
   },

package.json

@@ -2,9 +2,14 @@ import React, { Component } from "react";
 import { Button } from "react-bootstrap";
 import books from "../BooksPage/books.json";
 
+import axios from "axios";
+
 import Navbar from "../Navbar";
 import Review from "./Review";
 
+import Rater from "react-rater";
+import "react-rater/lib/react-rater.css";
+
 export default class BookDetails extends Component {
   constructor(props) {
     super(props);
@@ -16,12 +21,28 @@ export default class BookDetails extends Component {
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChangeBuy = this.handleChangeBuy.bind(this);
+    this.handleRatingChange = this.handleRatingChange.bind(this);
 
-    this.state = { review_list: [], value: "", item: books[reqId - 1] };
+    this.state = {
+      review_list: [],
+      value: "",
+      value2: "",
+      item: books[reqId - 1],
+      rating: 0
+    };
 
     //console.log(this.state.value);
   }
 
+  handleRatingChange() {
+    this.setState({ rating: this.state.rating });
+
+    console.log(this.state.rating);
+
+    axios.get(`http://localhost:5000/rate/${this.reqId}/${this.state.rating}`);
+  }
+
   handleChange(event) {
     this.setState({ value: event.target.value });
   }
@@ -33,6 +54,19 @@ export default class BookDetails extends Component {
     this.setState({ review_list: this.state.review_list });
   }
 
+  handleChangeBuy(event) {
+    this.setState({ value2: event.target.value });
+    //console.log(this.state.value2);
+  }
+
+  handleSubmitBuy(event) {
+    event.preventDefault();
+
+    axios.get(
+      `http://localhost:5000/addbook/${this.reqId}/${this.state.value2}`
+    );
+  }
+
   render() {
     const reviews = this.state.review_list.map(rev => {
       return <Review data={rev} />;
@@ -60,14 +94,37 @@ export default class BookDetails extends Component {
                 <h2>- {this.state.item.author}</h2>
               </div>
               <center style={{ marginTop: "12em" }}>
-                <Button size="lg" className="outline-dark">
-                  Buy for {this.state.item.price}
-                </Button>
+                <form onSubmit={this.handleOnBuy}>
+                  <label style={{ paddingRight: "5px" }}>
+                    Enter your private key :
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="enter your key"
+                    value2={this.state.value2}
+                    onChange={this.handleChangeBuy}
+                  ></input>
+
+                  <Button type="Submit" size="lg" className="outline-dark">
+                    Buy for {this.state.item.price}
+                  </Button>
+                </form>
               </center>
             </div>
           </div>
           <div className="review-add-container">
             <h2>Book Review</h2>
+            <div>
+              <h4>Provide star rating</h4>
+              <Rater
+                total={10}
+                name="rating"
+                rating={this.state.rating}
+                interactive={true}
+                value={this.state.rating}
+                onChange={this.handleRatingChange}
+              ></Rater>
+            </div>
             <div>
               <form onSubmit={this.handleSubmit}>
                 <label>Add you review here..</label>

src/components/BookDetails/index.js

@@ -13,7 +13,8 @@ export default class AddBook extends Component {
       account: "",
       booknameValue: "",
       bookpriceValue: 0,
-      bookcoverValue: ""
+      bookcoverValue: "",
+      authoraddr: ""
     };
   }
 
@@ -29,19 +30,21 @@ export default class AddBook extends Component {
       account,
       booknameValue,
       bookpriceValue,
-      bookcoverValue
+      bookcoverValue,
+      authoraddr
     } = this.state;
     const book = {
       account,
       booknameValue,
       bookpriceValue,
-      bookcoverValue
+      bookcoverValue,
+      authoraddr
     };
 
     console.log(book);
 
     axios.get(
-      `http://localhost:5000/${book.bookpriceValue}/${book.booknameValue}/${book.bookcoverValue}`
+      `http://localhost:5000/createbook/${book.authoraddr}/${book.bookpriceValue}/${book.booknameValue}/${book.bookcoverValue}`
     );
 
     //snail adding to db here
@@ -50,7 +53,8 @@ export default class AddBook extends Component {
       bookpublisherValue: "",
       booknameValue: "",
       bookpriceValue: 0,
-      bookcoverValue: ""
+      bookcoverValue: "",
+      authoraddr: ""
     });
   };
 
@@ -96,6 +100,16 @@ export default class AddBook extends Component {
                   onChange={this.onChange}
                 />
               </Form.Group>
+              <Form.Group>
+                <Form.Label>Author Address</Form.Label>
+                <Form.Control
+                  type="text"
+                  name="authoraddr"
+                  placeholder="add the address of the author"
+                  value={this.state.authoraddr}
+                  onChange={this.onChange}
+                />
+              </Form.Group>
               <Button variant="dark" type="submit">
                 Submit
               </Button>

src/components/BooksPage/AddBook/index.js

@@ -10,7 +10,7 @@ export default class BookListItem extends Component {
           <div className="row">
             <div className="col-md-8">
               <p style={{ fontWeight: "bold" }}>{this.props.item.title}</p>
-              <p>copies sold : 24</p>
+              <p>copies sold : {this.props.item.nBuys}</p>
             </div>
             <div className="col-md-4">
               <Button

src/components/BooksPage/BookListItem/index.js

@@ -19,7 +19,7 @@ export default class HomePage extends Component {
       >
         <div className="home-title">
           <center style={{ marginTop: "20%" }}>
-            <h1>HeadOut Book Store</h1>
+            <h1>HackOut Book Store</h1>
             <h2>
               <a href="/books">Go to Store</a>
             </h2>

src/components/HomePage/index.js

@@ -34,7 +34,7 @@ export default class Navbar1 extends Component {
               <Nav.Link href="/books">Store</Nav.Link>
             </Nav>
             <Nav>
-              <Nav.Link>{this.state.account}</Nav.Link>
+              <Nav.Link href="/user">{this.state.account}</Nav.Link>
             </Nav>
           </Navbar.Collapse>
         </Navbar>

src/components/Navbar/index.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+
+export default class UserBookItem extends Component {
+  render() {
+    return (
+      <tr>
+        <td>{this.props.item.bookid}</td>
+        <td>{this.props.item.title}</td>
+        <td>{this.props.item.rating}</td>
+        <td>{this.props.item.price}</td>
+      </tr>
+    );
+  }
+}

src/components/UserBookList/UserBookItem/index.js

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+
+import Navbar from "../Navbar";
+import axios from "axios";
+import UserBookItem from "./UserBookItem";
+
+import { Table } from "react-bootstrap";
+
+export default class UserBookList extends Component {
+  render() {
+    var bookItem = [];
+    axios.get("http://localhost:5000/getuserbooks").then(response => {
+      bookItem = response.data.map(item => {
+        return <UserBookItem item={item} />;
+      });
+    });
+
+    return (
+      <div>
+        <div className="nav-bar">
+          <Navbar />
+        </div>
+
+        <div className="main-content container" style={{ paddingTop: "40px" }}>
+          <h1>List of Books user has bought</h1>
+          <Table striped bordered hover>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Book Name</th>
+                <th>Author</th>
+                <th>Rating</th>
+                <th>Price</th>
+              </tr>
+            </thead>
+            <tbody>{bookItem}</tbody>
+          </Table>
+        </div>
+      </div>
+    );
+  }
+}

src/components/UserBookList/index.js

@@ -6,6 +6,7 @@ import Page404 from "../components/Page404";
 import BookDetails from "../components/BookDetails";
 import AddBook from "../components/BooksPage/AddBook";
 import HomePage from "../components/HomePage";
+import UserBookList from "../components/UserBookList";
 
 const IndexRoutes = () => {
   return (
@@ -14,6 +15,7 @@ const IndexRoutes = () => {
       <Route path="/books" component={BooksPage} />
       <Route path="/book/:id" component={BookDetails} />
       <Route path="/add" component={AddBook} />
+      <Route path="/user" component={UserBookList} />
       <Route component={Page404} />
     </Switch>
   );