Merge pull request #8 from iks3000/async-data

async data
iks3000 · May 23, 2020 · 65676b0 · 65676b0
2 parents 2f6257d + f055a4c
commit 65676b0
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 56 deletions.
diff --git a/src/components/book-list-item/book-list-item.js b/src/components/book-list-item/book-list-item.js
@@ -5,12 +5,12 @@ import './book-list-item.css';
 const BookListItem = ({ book }) => {
   const { title, author, price, coverImage } = book;
   return (
-    <div className="book-list-item bg-light rounded rounded shadow p-3">
+    <div className="book-list-item bg-light rounded shadow p-3">
       <div className="book-cover">
         <img src={coverImage} alt="cover"/>
       </div>
       <div className="book-details">
-        <a href="#" className="book-title">{title}</a>
+        <span className="book-title">{title}</span>
         <div className="book-author">{author}</div>
         <div className="book-price">${price}</div>
         <button className="btn btn-info add-to-cart shadow-none">Add to cart</button>

diff --git a/src/components/book-list/book-list.js b/src/components/book-list/book-list.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import BookListItem from '../book-list-item';
+import Spinner from '../spinner';
 import { connect } from 'react-redux';
 
 import { withBookstoreService } from '../hoc';
@@ -10,17 +11,16 @@ import './book-list.css';
 class BookList extends Component {
 
   componentDidMount() {
-    // 1. receive data
-    const { bookstoreService } = this.props;
-    const data = bookstoreService.getBooks();
-    console.log(data);
-
-    // 2. dispatch action to store
-    this.props.booksLoaded(data);
+    const { bookstoreService, booksLoaded } = this.props;
+    bookstoreService.getBooks()
+      .then((data) => booksLoaded(data));
   }
 
   render() {
-    const { books } = this.props;
+    const { books, loading } = this.props;
+    if (loading) {
+      return <Spinner />
+    }
     return (
       <ul className="book-list d-flex flex-wrap justify-content-start p-0">
         {
@@ -37,10 +37,8 @@ class BookList extends Component {
   }
 };
 
-const mapStateToProps = (state) => {
-  return {
-    books: state.books
-  }
+const mapStateToProps = ({ books, loading }) => {
+  return { books, loading }
 }
 
 const mapDispatchToProps = {

diff --git a/src/components/shop-header/shop-header.css b/src/components/shop-header/shop-header.css
@@ -17,6 +17,14 @@
   padding-right: 1rem;
 }
 
+.shop-header a {
+  transition: all 0.3s;
+}
+
+.shop-header a:hover {
+  text-decoration: none;
+}
+
 .shop-header .shopping-cart .cart-icon {
   font-size: 2.2rem;
   color: cadetblue;

diff --git a/src/components/shop-header/shop-header.js b/src/components/shop-header/shop-header.js
@@ -1,15 +1,19 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
+import { Link } from 'react-router-dom';
 import './shop-header.css';
 
 const ShopHeader = ({ numItem, total }) => {
   return (
     <header className="shop-header row">
-      <a href="#" className="logo text-dark">BookStore</a>
-      <a href="#" className="shopping-cart">
-        <i className="cart-icon fa fa-shopping-cart" />
-        {numItem} item (${total})
-      </a>
+      <Link to="/">
+        <div className="logo text-dark">BookStore</div>
+      </Link>
+      <Link to="/cart">
+        <div className="shopping-cart d-flex align-items-center h-100">
+          <i className="cart-icon fa fa-shopping-cart" />
+          {numItem} item (${total})
+      </div>
+      </Link>
     </header>
   )
 };

diff --git a/src/components/shopping-cart-table/shopping-cart-table.js b/src/components/shopping-cart-table/shopping-cart-table.js
@@ -23,14 +23,14 @@ const ShoppingCartTable = () => {
             <td>2</td>
             <td>$40</td>
             <td>
-              <button className="btn btn-outline-danger btn-sm shadow-none">
-                <i className="fa fa-trash-o" />
+              <button className="btn btn-outline-warning btn-sm shadow-none">
+                <i className="fa fa-minus-circle" />
               </button>
               <button className="btn btn-outline-success btn-sm shadow-none">
                 <i className="fa fa-plus-circle" />
               </button>
-              <button className="btn btn-outline-warning btn-sm shadow-none">
-                <i className="fa fa-minus-circle" />
+              <button className="btn btn-outline-danger btn-sm shadow-none">
+                <i className="fa fa-trash-o" />
               </button>
             </td>
           </tr>

diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -1,14 +1,16 @@
 
 const initialState = {
-  books: []
+  books: [],
+  loading: true
 };
 
 const reducer = (state = initialState, action) => {
 
   switch (action.type) {
     case 'BOOKS_LOADED':
       return {
-        books: action.payload
+        books: action.payload,
+        loading: false
       };
     default:
       return state;

diff --git a/src/services/bookstore-service.js b/src/services/bookstore-service.js
@@ -1,34 +1,41 @@
 export default class BookStoreService {
+
+  data = [
+    {
+      id: 1,
+      title: 'Production-Ready Microservices',
+      author: 'Susan J. Fowler',
+      price: 31.49,
+      coverImage: 'https://images-na.ssl-images-amazon.com/images/I/51oxXEG6TRL._SX379_BO1,204,203,200_.jpg'
+    },
+    {
+      id: 2,
+      title: 'Release It!',
+      author: 'Michael T. Nygard',
+      price: 29.40,
+      coverImage: 'https://images-na.ssl-images-amazon.com/images/I/81c+o9-DetL.jpg'
+    },
+    {
+      id: 3,
+      title: 'The Ultimate Book of Vehicles',
+      author: 'Anne-Sophie Baumann, Didier Balicevic',
+      price: 15.69,
+      coverImage: 'https://images-na.ssl-images-amazon.com/images/I/51JXljxwF5L._SX379_BO1,204,203,200_.jpg'
+    },
+    {
+      id: 4,
+      title: 'The Ultimate Book of Planet Earth',
+      author: 'Anne-Sophie Baumann, Didier Balicevic',
+      price: 18.69,
+      coverImage: 'https://images-na.ssl-images-amazon.com/images/I/51yOh1rE3bL._SX380_BO1,204,203,200_.jpg'
+    }
+  ];
+
   getBooks() {
-    return [
-      {
-        id: 1,
-        title: 'Production-Ready Microservices',
-        author: 'Susan J. Fowler',
-        price: 31.49,
-        coverImage: 'https://images-na.ssl-images-amazon.com/images/I/51oxXEG6TRL._SX379_BO1,204,203,200_.jpg'
-      },
-      {
-        id: 2,
-        title: 'Release It!',
-        author: 'Michael T. Nygard',
-        price: 29.40,
-        coverImage: 'https://images-na.ssl-images-amazon.com/images/I/81c+o9-DetL.jpg'
-      },
-      {
-        id: 3,
-        title: 'The Ultimate Book of Vehicles',
-        author: 'Anne-Sophie Baumann, Didier Balicevic',
-        price: 15.69,
-        coverImage: 'https://images-na.ssl-images-amazon.com/images/I/51JXljxwF5L._SX379_BO1,204,203,200_.jpg'
-      },
-      {
-        id: 4,
-        title: 'The Ultimate Book of Planet Earth',
-        author: 'Anne-Sophie Baumann, Didier Balicevic',
-        price: 18.69,
-        coverImage: 'https://images-na.ssl-images-amazon.com/images/I/51yOh1rE3bL._SX380_BO1,204,203,200_.jpg'
-      }
-    ];
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(this.data)
+      }, 700);
+    })
   }
 };