bookstore component now has books displayed!

Author: jchallenger1

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

client/src/App.tsx

@@ -3,14 +3,18 @@ import './App.css';
 import { Route, Switch, Redirect } from 'react-router-dom';
 
 // components
-import { Input, List, NavBar } from './components';
+import { Input, List, NavBar, Book, BookStore } from './components';
 
 // pages
 // import { Store, Orders, Cart } from './pages';
 
+let data = {"isbn":"9781781100264","title":"Harry Potter and the Deathly Hallows (Harry Potter, #7)","year":2015,"genre":"Fiction","page_count":784,"price":10.99,"commission":0.01,"url":"http://books.google.com/books/content?id=gCtazG4ZXlQC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api","quantity":34,"is_purchasable":null,"publisher_id":10000,"publisher_name":"Pottermore Publishing","author_name":"J.K. Rowling"}
+
 function App() {
   return (
+    
     <Fragment>
+      <BookStore></BookStore>
       {/* <div className="container">
         <Input />
         <List />

client/src/components/Book/Book.tsx

@@ -1,4 +1,3 @@
-import { request } from 'http';
 import React, { useEffect, useState } from 'react';
 
 interface BookProp {
@@ -12,12 +11,6 @@ interface BookData {
     price: number
 }
 
-// defined outside to supress react-hooks/exhaustive-deps
-async function requestBookData(isbn:string, setData:React.Dispatch<React.SetStateAction<BookData | undefined>>) {
-    
-
-}
-
 export const Book = (props:BookProp) => {
 
     const [bookData, setBookData] = useState<undefined | BookData>(undefined);

client/src/components/Book/BookStore.tsx

@@ -1,16 +1,56 @@
-import {useState} from "react";
-
+import {useEffect, useState} from "react";
+import lodash from "lodash"
+import {Book} from "./Book"
 const booksPerPage = 20;
+const booksPerRow = 4;
+
+interface BookType {
+    isbn: string
+}
+
+const arraysEqual = (arr1:BookType[][], arr2:BookType[][]) => {
+    return lodash.isEmpty(lodash.differenceWith(
+        lodash.flatten(arr1),
+        lodash.flatten(arr2),
+        lodash.isEqual
+    ));
+}
 
 export const BookStore = () => {
 
-    const [page, setPage] = useState(1);
+    const [page, setPage] = useState(0);
+    const [books, setBooks] = useState<BookType[][]>([[{"isbn":""}]]);
 
-    //const refreshPage() = async e => {
+    const getPage = async () => {
+        const response = await fetch(`http://localhost:5000/books?offset=${page*booksPerPage}&limit=${(page+1)*booksPerPage}`);
+        const jsonData = await response.json();
+        const bookChunks:BookType[][] = lodash.chunk(jsonData["rows"], booksPerRow);
+        if (!arraysEqual(books, bookChunks)) {
+            console.log("set books to bookchunks");
+            setBooks(bookChunks);
+        }
+            
+        
+    };
 
-    //}
+    useEffect(() => {
+        getPage();
+    }, [books]);
 
     return (
-        <div></div>
+        <div className="container-fluid">
+            <div className="container">
+                {books.map(bookrow => {
+                    return <div className="row">
+                            {bookrow.map(book => {
+                                return <div className="col">
+                                        <Book ISBN={book.isbn}></Book>
+                                    </div>
+                            })}
+                    </div>
+                })}
+            </div>
+            <div></div> {/* TODO footer */}
+        </div>
     )
 };

client/src/components/index.tsx

@@ -2,4 +2,5 @@
 export * from './SampleInput/Input';
 export * from './SampleList/List';
 export * from './Navigation/NavBar';
-export * from './Book/Book';
+export * from './Book/Book';
+export * from './Book/BookStore';