From 4c3cc3f79658ca323cb4fdf8a052e98b2927e4ad Mon Sep 17 00:00:00 2001 From: Lacra Date: Thu, 30 Jan 2020 22:00:08 +0100 Subject: [PATCH 01/39] pacage-lock by bogdan with npm install --- package-lock.json | 41 ++++++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 91581f4c35..e8f9796953 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5387,7 +5387,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5405,11 +5406,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5422,15 +5425,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5533,7 +5539,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5543,6 +5550,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5555,17 +5563,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5582,6 +5593,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5654,7 +5666,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5664,6 +5677,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5739,7 +5753,8 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5769,6 +5784,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5786,6 +5802,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5824,11 +5841,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.2", - "bundled": true + "bundled": true, + "optional": true } } }, From c6cb4458a26d3d74939093ea746f582f62fe88cb Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 2 Feb 2020 11:58:16 +0100 Subject: [PATCH 02/39] Add Template file and dilitet main contact --- src/App.js | 151 +----------------------------- src/AppTemplate.js | 224 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 226 insertions(+), 149 deletions(-) create mode 100644 src/AppTemplate.js diff --git a/src/App.js b/src/App.js index 785820d5df..07459e566b 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './App.css' class BooksApp extends React.Component { state = { + /** * TODO: Instead of using this state variable to keep track of which page * we're on, use the URL in the browser's address bar. This will ensure that @@ -43,155 +44,7 @@ class BooksApp extends React.Component {

MyReads

-
-
-

Currently Reading

-
-
    -
  1. -
    -
    -
    -
    - -
    -
    -
    To Kill a Mockingbird
    -
    Harper Lee
    -
    -
    2. -
  2. -
    -
    -
    -
    - -
    -
    -
    Ender's Game
    -
    Orson Scott Card
    -
    -
    3. -
-
-
-
-

Want to Read

-
-
    -
  1. -
    -
    -
    -
    - -
    -
    -
    1776
    -
    David McCullough
    -
    -
    2. -
  2. -
    -
    -
    -
    - -
    -
    -
    Harry Potter and the Sorcerer's Stone
    -
    J.K. Rowling
    -
    -
    3. -
-
-
-
-

Read

-
-
    -
  1. -
    -
    -
    -
    - -
    -
    -
    The Hobbit
    -
    J.R.R. Tolkien
    -
    -
    2. -
  2. -
    -
    -
    -
    - -
    -
    -
    Oh, the Places You'll Go!
    -
    Seuss
    -
    -
    3. -
  3. -
    -
    -
    -
    - -
    -
    -
    The Adventures of Tom Sawyer
    -
    Mark Twain
    -
    -
    4. -
-
-
-
+ Lacra books
diff --git a/src/AppTemplate.js b/src/AppTemplate.js new file mode 100644 index 0000000000..887e00b529 --- /dev/null +++ b/src/AppTemplate.js @@ -0,0 +1,224 @@ +import React from 'react' +// import * as BooksAPI from './BooksAPI' +import './App.css' + +class BooksApp extends React.Component { + state = { + /** + * TODO: Instead of using this state variable to keep track of which page + * we're on, use the URL in the browser's address bar. This will ensure that + * users can use the browser's back and forward buttons to navigate between + * pages, as well as provide a good URL they can bookmark and share. + */ + showSearchPage: false + } + + render() { + return ( +
+ {this.state.showSearchPage ? ( +
+
+ +
+ {/* + NOTES: The search from BooksAPI is limited to a particular set of search terms. + You can find these search terms here: + https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md + + However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if + you don't find a specific author or title. Every search is limited by search terms. + */} + + +
+
+
+
    +
    +
    + ) : ( +
    +
    +

    MyReads

    +
    +
    +
    +
    +

    Currently Reading

    +
    +
      +
    1. +
      +
      +
      +
      + +
      +
      +
      To Kill a Mockingbird
      +
      Harper Lee
      +
      +
      2. +
    2. +
      +
      +
      +
      + +
      +
      +
      To Kill a Mockingbird
      +
      Harper Lee
      +
      +
      3. +
    3. +
      +
      +
      +
      + +
      +
      +
      Ender's Game
      +
      Orson Scott Card
      +
      +
      4. +
    +
    +
    +
    +

    Want to Read

    +
    +
      +
    1. +
      +
      +
      +
      + +
      +
      +
      1776
      +
      David McCullough
      +
      +
      2. +
    2. +
      +
      +
      +
      + +
      +
      +
      Harry Potter and the Sorcerer's Stone
      +
      J.K. Rowling
      +
      +
      3. +
    +
    +
    +
    +

    Read

    +
    +
      +
    1. +
      +
      +
      +
      + +
      +
      +
      The Hobbit
      +
      J.R.R. Tolkien
      +
      +
      2. +
    2. +
      +
      +
      +
      + +
      +
      +
      Oh, the Places You'll Go!
      +
      Seuss
      +
      +
      3. +
    3. +
      +
      +
      +
      + +
      +
      +
      The Adventures of Tom Sawyer
      +
      Mark Twain
      +
      +
      4. +
    +
    +
    +
    +
    +
    + +
    +
    + )} +
    + ) + } +} + +export default BooksApp From 03b9629cbd2831bf251761ddb103d1b053d0921f Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 2 Feb 2020 12:14:36 +0100 Subject: [PATCH 03/39] add diMount component to see the list books --- src/App.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 07459e566b..be24cb117e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,20 +1,33 @@ import React from 'react' -// import * as BooksAPI from './BooksAPI' +import * as BooksAPI from './BooksAPI' import './App.css' class BooksApp extends React.Component { state = { + /** * TODO: Instead of using this state variable to keep track of which page * we're on, use the URL in the browser's address bar. This will ensure that * users can use the browser's back and forward buttons to navigate between * pages, as well as provide a good URL they can bookmark and share. */ - showSearchPage: false + showSearchPage: false, + books:[] + } + componentDidMount(){ + BooksAPI.getAll () + .then((books)=>{ + this.setState(() =>({ + books + }) + ) + }) } render() { + console.log("My message") + console.log (this.state.books) return (
    {this.state.showSearchPage ? ( From 6cc7490cd66dfd55c17effe23c477d506e3694ea Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 2 Feb 2020 20:20:11 +0100 Subject: [PATCH 04/39] group books --- src/App.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/App.js b/src/App.js index be24cb117e..e1bded9124 100644 --- a/src/App.js +++ b/src/App.js @@ -24,10 +24,24 @@ class BooksApp extends React.Component { ) }) } + groupBy(objeectArray , property) { + return objeectArray.reduce(function (acc, obj) { + var key = obj[property]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + },{}); + } render() { console.log("My message") console.log (this.state.books) + + const groupeBooks = this.groupBy (this.state.books, 'shelf'); + console.log (groupeBooks); + return (
    {this.state.showSearchPage ? ( From 40ffae421a8ad53e2917e6af079d05a5a2febe23 Mon Sep 17 00:00:00 2001 From: Lacra Date: Mon, 3 Feb 2020 12:36:05 +0100 Subject: [PATCH 05/39] add bookshelf file --- src/App.js | 15 ++++++++++++--- src/BookShelf.js | 18 ++++++++++++++++++ 2 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 src/BookShelf.js diff --git a/src/App.js b/src/App.js index e1bded9124..4a3b759f75 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React from 'react' import * as BooksAPI from './BooksAPI' import './App.css' +import BookSelf from './BookShelf' class BooksApp extends React.Component { state = { @@ -39,8 +40,15 @@ class BooksApp extends React.Component { console.log("My message") console.log (this.state.books) - const groupeBooks = this.groupBy (this.state.books, 'shelf'); - console.log (groupeBooks); + const groupedBooks = this.groupBy (this.state.books, 'shelf'); + console.log (groupedBooks); + + const shelves = Object.keys(groupedBooks).map(key => { + + return ( + + ) + }); return (
    @@ -69,7 +77,8 @@ class BooksApp extends React.Component {

    MyReads

    -
    +
    {shelves }
    +
    Lacra books
    diff --git a/src/BookShelf.js b/src/BookShelf.js new file mode 100644 index 0000000000..b2a81b22bb --- /dev/null +++ b/src/BookShelf.js @@ -0,0 +1,18 @@ +import React from 'react' + +class BookShelf extends React.Component{ + render() { + const { shelfKey } = this.props; + console.log ( 'my shelf =>' + shelfKey) + return( +
    +

    {shelfKey }

    + +
    + ) + + } + +} + +export default BookShelf \ No newline at end of file From 4b28d946c98991e1614c2f3c309a80b63dac7e73 Mon Sep 17 00:00:00 2001 From: Lacra Date: Mon, 3 Feb 2020 20:39:48 +0100 Subject: [PATCH 06/39] moddifaiy the shelfs names --- src/App.js | 17 +++++++++++++++-- src/BookShelf.js | 4 ++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 4a3b759f75..3782e872c1 100644 --- a/src/App.js +++ b/src/App.js @@ -36,6 +36,13 @@ class BooksApp extends React.Component { },{}); } + shelfNames = { + 'currentlyReading' :'Currently Reading', + 'wantToRead' :'Want To Read', + 'read' : 'Read' + } + +//
    {shelves }
    render() { console.log("My message") console.log (this.state.books) @@ -46,10 +53,16 @@ class BooksApp extends React.Component { const shelves = Object.keys(groupedBooks).map(key => { return ( - + + + + ) }); - + + return (
    {this.state.showSearchPage ? ( diff --git a/src/BookShelf.js b/src/BookShelf.js index b2a81b22bb..7d64ae653c 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -2,11 +2,11 @@ import React from 'react' class BookShelf extends React.Component{ render() { - const { shelfKey } = this.props; + const { shelfKey, shelfNames } = this.props; console.log ( 'my shelf =>' + shelfKey) return(
    -

    {shelfKey }

    +

    {shelfNames }

    ) From bc5db7cc7b4765404576d3a35f4bc0445faee789 Mon Sep 17 00:00:00 2001 From: Lacra Date: Mon, 3 Feb 2020 20:46:18 +0100 Subject: [PATCH 07/39] change the wai that the dhelsfs look --- src/App.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 3782e872c1..34924ce985 100644 --- a/src/App.js +++ b/src/App.js @@ -90,10 +90,9 @@ class BooksApp extends React.Component {

    MyReads

    -
    {shelves }
    - Lacra books + {shelves}
    From 4a5804c8e558acd7c720f3d6552a8441a7c26c1a Mon Sep 17 00:00:00 2001 From: Bogdan Date: Tue, 4 Feb 2020 20:27:42 +0100 Subject: [PATCH 08/39] rename --- src/App.js | 4 ++-- src/{BookShelf.js => Shelfs.js} | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename src/{BookShelf.js => Shelfs.js} (82%) diff --git a/src/App.js b/src/App.js index 34924ce985..5a800b79e9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import React from 'react' import * as BooksAPI from './BooksAPI' import './App.css' -import BookSelf from './BookShelf' +import Shelfs from './Shelfs' class BooksApp extends React.Component { state = { @@ -53,7 +53,7 @@ class BooksApp extends React.Component { const shelves = Object.keys(groupedBooks).map(key => { return ( - diff --git a/src/BookShelf.js b/src/Shelfs.js similarity index 82% rename from src/BookShelf.js rename to src/Shelfs.js index 7d64ae653c..8dc799a6d8 100644 --- a/src/BookShelf.js +++ b/src/Shelfs.js @@ -1,6 +1,6 @@ import React from 'react' -class BookShelf extends React.Component{ +class Shelfs extends React.Component{ render() { const { shelfKey, shelfNames } = this.props; console.log ( 'my shelf =>' + shelfKey) @@ -15,4 +15,4 @@ class BookShelf extends React.Component{ } -export default BookShelf \ No newline at end of file +export default Shelfs \ No newline at end of file From 2a1fdbc37fa7c8ad514550b9e18b84b4d0993690 Mon Sep 17 00:00:00 2001 From: Bogdan Date: Tue, 4 Feb 2020 20:50:07 +0100 Subject: [PATCH 09/39] wired up the ShelfBooks class --- src/ShelfBooks.js | 13 +++++++++++++ src/Shelfs.js | 16 +++++++++++----- 2 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 src/ShelfBooks.js diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js new file mode 100644 index 0000000000..7065feb5b4 --- /dev/null +++ b/src/ShelfBooks.js @@ -0,0 +1,13 @@ +import React from 'react' + +class ShelfBooks extends React.Component{ + render () { + + + return ( +
    place holder
    + ) + } + +} +export default ShelfBooks \ No newline at end of file diff --git a/src/Shelfs.js b/src/Shelfs.js index 8dc799a6d8..101882ac8f 100644 --- a/src/Shelfs.js +++ b/src/Shelfs.js @@ -1,12 +1,18 @@ import React from 'react' +import ShelfBooks from './ShelfBooks' -class Shelfs extends React.Component{ +class Shelfs extends React.Component { render() { const { shelfKey, shelfNames } = this.props; - console.log ( 'my shelf =>' + shelfKey) - return( -
    -

    {shelfNames }

    + console.log('my shelf =>' + shelfKey) + return ( +
    +

    {shelfNames}

    +
    + +
    ) From 13d618f98110db74655ca90d46f69acee8fd28b6 Mon Sep 17 00:00:00 2001 From: Bogdan Date: Tue, 4 Feb 2020 21:04:56 +0100 Subject: [PATCH 10/39] we have books in shelf but sometime a specific shelf has no books --- src/App.js | 3 +++ src/Shelfs.js | 5 +++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 5a800b79e9..b3a57edb9a 100644 --- a/src/App.js +++ b/src/App.js @@ -48,6 +48,7 @@ class BooksApp extends React.Component { console.log (this.state.books) const groupedBooks = this.groupBy (this.state.books, 'shelf'); + console.log("goobed books") console.log (groupedBooks); const shelves = Object.keys(groupedBooks).map(key => { @@ -55,6 +56,8 @@ class BooksApp extends React.Component { return ( diff --git a/src/Shelfs.js b/src/Shelfs.js index 101882ac8f..4d465053d4 100644 --- a/src/Shelfs.js +++ b/src/Shelfs.js @@ -3,8 +3,9 @@ import ShelfBooks from './ShelfBooks' class Shelfs extends React.Component { render() { - const { shelfKey, shelfNames } = this.props; - console.log('my shelf =>' + shelfKey) + const { shelfKey, shelfNames, bookList, allBooks } = this.props; + console.log("my shelf") + console.log(bookList) return (

    {shelfNames}

    From 1a34a2df3ce741e14185a370a15814740e41932e Mon Sep 17 00:00:00 2001 From: Bogdan Date: Tue, 4 Feb 2020 21:15:46 +0100 Subject: [PATCH 11/39] fixed no shelf bug --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index b3a57edb9a..17dfc96720 100644 --- a/src/App.js +++ b/src/App.js @@ -56,7 +56,7 @@ class BooksApp extends React.Component { return ( From fbfffc43b909dfccc7028c137065404759290d1d Mon Sep 17 00:00:00 2001 From: Lacra Date: Wed, 5 Feb 2020 21:39:02 +0100 Subject: [PATCH 12/39] we have a bookList bug --- src/App.js | 98 +++++++++++++++++++++++------------------------ src/SfelfBooks.js | 13 +++++++ src/Sfelfs.js | 26 +++++++++++++ src/ShelfBooks.js | 7 +++- 4 files changed, 93 insertions(+), 51 deletions(-) create mode 100644 src/SfelfBooks.js create mode 100644 src/Sfelfs.js diff --git a/src/App.js b/src/App.js index 17dfc96720..7c20ee5758 100644 --- a/src/App.js +++ b/src/App.js @@ -14,58 +14,58 @@ class BooksApp extends React.Component { * pages, as well as provide a good URL they can bookmark and share. */ showSearchPage: false, - books:[] + books: [] } - componentDidMount(){ - BooksAPI.getAll () - .then((books)=>{ - this.setState(() =>({ - books + componentDidMount() { + BooksAPI.getAll() + .then((books) => { + this.setState(() => ({ + books + }) + ) }) - ) - }) } - groupBy(objeectArray , property) { - return objeectArray.reduce(function (acc, obj) { - var key = obj[property]; - if (!acc[key]) { - acc[key] = []; - } - acc[key].push(obj); - return acc; - },{}); - } - - shelfNames = { - 'currentlyReading' :'Currently Reading', - 'wantToRead' :'Want To Read', - 'read' : 'Read' - } - -//
    {shelves }
    + groupBy(objeectArray, property) { + return objeectArray.reduce(function (acc, obj) { + var key = obj[property]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); + } + + shelfNames = { + 'currentlyReading': 'Currently Reading', + 'wantToRead': 'Want To Read', + 'read': 'Read' + } + + //
    {shelves }
    render() { console.log("My message") - console.log (this.state.books) + console.log(this.state.books) - const groupedBooks = this.groupBy (this.state.books, 'shelf'); + const groupedBooks = this.groupBy(this.state.books, 'shelf'); console.log("goobed books") - console.log (groupedBooks); + console.log(groupedBooks); const shelves = Object.keys(groupedBooks).map(key => { - + return ( - - - + + ) }); - - + + return (
    {this.state.showSearchPage ? ( @@ -81,7 +81,7 @@ class BooksApp extends React.Component { However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if you don't find a specific author or title. Every search is limited by search terms. */} - +
    @@ -90,18 +90,18 @@ class BooksApp extends React.Component {
    ) : ( -
    -
    -

    MyReads

    +
    +
    +

    MyReads

    +
    +
    + {shelves} +
    +
    +
    -
    - {shelves} -
    -
    -
    -
    - )} + )}
    ) } diff --git a/src/SfelfBooks.js b/src/SfelfBooks.js new file mode 100644 index 0000000000..7065feb5b4 --- /dev/null +++ b/src/SfelfBooks.js @@ -0,0 +1,13 @@ +import React from 'react' + +class ShelfBooks extends React.Component{ + render () { + + + return ( +
    place holder
    + ) + } + +} +export default ShelfBooks \ No newline at end of file diff --git a/src/Sfelfs.js b/src/Sfelfs.js new file mode 100644 index 0000000000..1500f5061e --- /dev/null +++ b/src/Sfelfs.js @@ -0,0 +1,26 @@ +import React from 'react' +import ShelfBooks from './ShelfBooks' + +class Shelfs extends React.Component { + render() { + const { shelfKey, shelfNames, bookList, allBooks } = this.props; + console.log("my shelf") + console.log(bookList) + return ( +
    +

    {shelfNames}

    +
    + +
    + +
    + ) + + } + +} + +export default Shelfs \ No newline at end of file diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js index 7065feb5b4..224291b46b 100644 --- a/src/ShelfBooks.js +++ b/src/ShelfBooks.js @@ -1,7 +1,10 @@ import React from 'react' -class ShelfBooks extends React.Component{ - render () { +class ShelfBooks extends React.Component { + render() { + const { bookList, allBooks } = this.props; + console.log('my shelf book marker') + console.log(bookList) return ( From 3a77c4b9ff7d546a32da7d5c6bd85c48235ccd8e Mon Sep 17 00:00:00 2001 From: Lacra Date: Wed, 5 Feb 2020 21:57:49 +0100 Subject: [PATCH 13/39] removed duplicated items --- src/SfelfBooks.js | 13 ------------- src/Sfelfs.js | 26 -------------------------- src/ShelfBooks.js | 16 ---------------- src/Shelfs.js | 25 ------------------------- 4 files changed, 80 deletions(-) delete mode 100644 src/SfelfBooks.js delete mode 100644 src/Sfelfs.js delete mode 100644 src/ShelfBooks.js delete mode 100644 src/Shelfs.js diff --git a/src/SfelfBooks.js b/src/SfelfBooks.js deleted file mode 100644 index 7065feb5b4..0000000000 --- a/src/SfelfBooks.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' - -class ShelfBooks extends React.Component{ - render () { - - - return ( -
    place holder
    - ) - } - -} -export default ShelfBooks \ No newline at end of file diff --git a/src/Sfelfs.js b/src/Sfelfs.js deleted file mode 100644 index 1500f5061e..0000000000 --- a/src/Sfelfs.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import ShelfBooks from './ShelfBooks' - -class Shelfs extends React.Component { - render() { - const { shelfKey, shelfNames, bookList, allBooks } = this.props; - console.log("my shelf") - console.log(bookList) - return ( -
    -

    {shelfNames}

    -
    - -
    - -
    - ) - - } - -} - -export default Shelfs \ No newline at end of file diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js deleted file mode 100644 index 224291b46b..0000000000 --- a/src/ShelfBooks.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' - -class ShelfBooks extends React.Component { - render() { - const { bookList, allBooks } = this.props; - console.log('my shelf book marker') - console.log(bookList) - - - return ( -
    place holder
    - ) - } - -} -export default ShelfBooks \ No newline at end of file diff --git a/src/Shelfs.js b/src/Shelfs.js deleted file mode 100644 index 4d465053d4..0000000000 --- a/src/Shelfs.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import ShelfBooks from './ShelfBooks' - -class Shelfs extends React.Component { - render() { - const { shelfKey, shelfNames, bookList, allBooks } = this.props; - console.log("my shelf") - console.log(bookList) - return ( -
    -

    {shelfNames}

    -
    - -
    - -
    - ) - - } - -} - -export default Shelfs \ No newline at end of file From 78edc3b9e6b19df78d8d002397fe75ed16793525 Mon Sep 17 00:00:00 2001 From: Lacra Date: Wed, 5 Feb 2020 22:01:42 +0100 Subject: [PATCH 14/39] fixed the bookList major bug --- src/ShelfBooks.js | 16 ++++++++++++++++ src/Shelfs.js | 26 ++++++++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 src/ShelfBooks.js create mode 100644 src/Shelfs.js diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js new file mode 100644 index 0000000000..224291b46b --- /dev/null +++ b/src/ShelfBooks.js @@ -0,0 +1,16 @@ +import React from 'react' + +class ShelfBooks extends React.Component { + render() { + const { bookList, allBooks } = this.props; + console.log('my shelf book marker') + console.log(bookList) + + + return ( +
    place holder
    + ) + } + +} +export default ShelfBooks \ No newline at end of file diff --git a/src/Shelfs.js b/src/Shelfs.js new file mode 100644 index 0000000000..1500f5061e --- /dev/null +++ b/src/Shelfs.js @@ -0,0 +1,26 @@ +import React from 'react' +import ShelfBooks from './ShelfBooks' + +class Shelfs extends React.Component { + render() { + const { shelfKey, shelfNames, bookList, allBooks } = this.props; + console.log("my shelf") + console.log(bookList) + return ( +
    +

    {shelfNames}

    +
    + +
    + +
    + ) + + } + +} + +export default Shelfs \ No newline at end of file From c7513359e52ca10e87e492fef54267004f1cef0b Mon Sep 17 00:00:00 2001 From: Lacra Date: Wed, 5 Feb 2020 22:22:02 +0100 Subject: [PATCH 15/39] build the shelfBooks html page using the data --- src/ShelfBooks.js | 6 ++++-- src/Shelfs.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js index 224291b46b..c0873a2d12 100644 --- a/src/ShelfBooks.js +++ b/src/ShelfBooks.js @@ -6,9 +6,11 @@ class ShelfBooks extends React.Component { console.log('my shelf book marker') console.log(bookList) - return ( -
    place holder
    +
      + bookList +
    + ) } diff --git a/src/Shelfs.js b/src/Shelfs.js index 1500f5061e..669741cfae 100644 --- a/src/Shelfs.js +++ b/src/Shelfs.js @@ -9,7 +9,7 @@ class Shelfs extends React.Component { return (

    {shelfNames}

    -
    +
    Date: Fri, 7 Feb 2020 19:18:28 +0100 Subject: [PATCH 16/39] Wire up BookItem --- src/BookItem.js | 20 ++++++++++++++++++++ src/ShelfBooks.js | 13 +++++++++++-- 2 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 src/BookItem.js diff --git a/src/BookItem.js b/src/BookItem.js new file mode 100644 index 0000000000..ced7b94212 --- /dev/null +++ b/src/BookItem.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react' + + +class BookItem extends React.Component { + + + render() { + + + + return ( + +
    + Hello from book item +
    + ) + } +} + +export default BookItem diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js index c0873a2d12..446a5df5b0 100644 --- a/src/ShelfBooks.js +++ b/src/ShelfBooks.js @@ -1,16 +1,25 @@ import React from 'react' +import BookItem from './BookItem' + class ShelfBooks extends React.Component { render() { const { bookList, allBooks } = this.props; console.log('my shelf book marker') console.log(bookList) + let bookItem = bookList.map( key=>{ + return( + + ) + }) + + return (
      - bookList + {bookItem}
    - + ) } From 2f39ae94ee67ae8063292b7837358eae9944febb Mon Sep 17 00:00:00 2001 From: Lacra Date: Fri, 7 Feb 2020 19:36:35 +0100 Subject: [PATCH 17/39] step 7 data read in child class --- src/BookItem.js | 5 +++-- src/ShelfBooks.js | 9 +++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/BookItem.js b/src/BookItem.js index ced7b94212..f5e3ac47cd 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -5,8 +5,9 @@ class BookItem extends React.Component { render() { - - + let { key, book } = this.props + console.log('lacra Books') + console.log(book) return ( diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js index 446a5df5b0..c8afaff2ce 100644 --- a/src/ShelfBooks.js +++ b/src/ShelfBooks.js @@ -7,9 +7,14 @@ class ShelfBooks extends React.Component { const { bookList, allBooks } = this.props; console.log('my shelf book marker') console.log(bookList) - let bookItem = bookList.map( key=>{ + let bookItem = bookList.map( book => { + console.log("create book ") + console.log(book) + return( - + ) }) From 4bceb4428e471f68ec29aef36d4d1d48230830ad Mon Sep 17 00:00:00 2001 From: Lacra Date: Fri, 7 Feb 2020 20:05:11 +0100 Subject: [PATCH 18/39] final step,drow the component content --- src/BookItem.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/BookItem.js b/src/BookItem.js index f5e3ac47cd..6a87932005 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -10,10 +10,14 @@ class BookItem extends React.Component { console.log(book) return ( - -
    - Hello from book item +
  1. +
    +
    +
    +
    +
    {book.title}
    +
    2. ) } } From 998939b6c94f21ad9d319eec4d2d107a5693f072 Mon Sep 17 00:00:00 2001 From: Lacra Date: Sat, 8 Feb 2020 16:21:04 +0100 Subject: [PATCH 19/39] install rbrowserRouter --- package-lock.json | 165 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/index.js | 7 +- 3 files changed, 172 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index e8f9796953..bf107c882b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5987,6 +5987,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -6194,6 +6199,34 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6209,6 +6242,14 @@ "resolved": "http://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==" }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "home-or-tmp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", @@ -8354,6 +8395,31 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } + } + }, "mini-css-extract-plugin": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz", @@ -11241,6 +11307,85 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.0.tgz", "integrity": "sha512-akMy/BQT5m1J3iJIHkSb4qycq2wzllWsmmolaaFVnb+LPV9cIJ/nTud40ZsiiT0H3P+/wXIdbjx2fzF61OaeOQ==" }, + "react-is": { + "version": "16.12.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", + "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" + }, + "react-router": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", + "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } + } + }, + "react-router-dom": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz", + "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.1.2", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } + } + }, "react-scripts": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.1.tgz", @@ -11899,6 +12044,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -13361,6 +13511,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -13876,6 +14036,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 579d515885..77240f5fb2 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "prop-types": "^15.6.2", "react": "^16.6.3", "react-dom": "^16.6.3", + "react-router-dom": "^5.1.2", "react-scripts": "2.1.1" }, "scripts": { diff --git a/src/index.js b/src/index.js index fde0d67bd1..c5ccbb40a5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,11 @@ import React from 'react' import ReactDOM from 'react-dom' +import { BrowserRouter } from 'react-router-dom' import App from './App' import './index.css' -ReactDOM.render(, document.getElementById('root')) +ReactDOM.render( + + + + , document.getElementById('root')) From 992e0bdab9625968a4b209631f9ace83769e6ffe Mon Sep 17 00:00:00 2001 From: Lacra Date: Sat, 8 Feb 2020 16:50:42 +0100 Subject: [PATCH 20/39] serach apears in the address bar --- src/App.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 7c20ee5758..07a189566d 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React from 'react' import * as BooksAPI from './BooksAPI' import './App.css' import Shelfs from './Shelfs' +import { Link } from 'react-router-dom' class BooksApp extends React.Component { state = { @@ -97,8 +98,14 @@ class BooksApp extends React.Component {
    {shelves}
    +
    - + + +
    )} From 490f9359882842967aba1554ef3f99f9eb64238d Mon Sep 17 00:00:00 2001 From: Lacra Date: Sat, 8 Feb 2020 20:50:15 +0100 Subject: [PATCH 21/39] implemented rout based navigation --- src/App.js | 52 ++++++++++++++++++++++++++++------------------------ 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 07a189566d..c91281d485 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import * as BooksAPI from './BooksAPI' import './App.css' import Shelfs from './Shelfs' import { Link } from 'react-router-dom' +import { Route } from 'react-router-dom' class BooksApp extends React.Component { state = { @@ -69,19 +70,38 @@ class BooksApp extends React.Component { return (
    - {this.state.showSearchPage ? ( + ( +
    +
    +

    MyReads

    +
    +
    + {shelves} +
    + +
    + + + +
    +
    + )} /> + (
    {/* - NOTES: The search from BooksAPI is limited to a particular set of search terms. - You can find these search terms here: - https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md + NOTES: The search from BooksAPI is limited to a particular set of search terms. + You can find these search terms here: + https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md - However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if - you don't find a specific author or title. Every search is limited by search terms. - */} + However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if + you don't find a specific author or title. Every search is limited by search terms. + */}
    @@ -90,25 +110,9 @@ class BooksApp extends React.Component {
      - ) : ( -
      -
      -

      MyReads

      -
      -
      - {shelves} -
      -
      + )} /> - - -
      -
      - )}
      ) } From 74c7da37e7e55707295ec26828017fe215643085 Mon Sep 17 00:00:00 2001 From: Lacra Date: Sat, 8 Feb 2020 21:02:30 +0100 Subject: [PATCH 22/39] added buton book shelf changer --- src/BookItem.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/BookItem.js b/src/BookItem.js index 6a87932005..14324dd914 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -14,6 +14,15 @@ class BookItem extends React.Component {
      +
      + +
      {book.title}
      From 83a129a8fcd3111c085826d999397a44b51d365c Mon Sep 17 00:00:00 2001 From: Lacra Date: Sat, 8 Feb 2020 21:29:03 +0100 Subject: [PATCH 23/39] wired up function changeSelf --- src/App.js | 4 ++++ src/BookItem.js | 4 ++-- src/ShelfBooks.js | 6 ++++-- src/Shelfs.js | 3 ++- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index c91281d485..9da3053972 100644 --- a/src/App.js +++ b/src/App.js @@ -43,6 +43,9 @@ class BooksApp extends React.Component { 'wantToRead': 'Want To Read', 'read': 'Read' } + changeSelf = (book, shelId) => { + console.log('shelf change : ' + book.title + " / " + shelId) + } //
      {shelves }
      render() { @@ -60,6 +63,7 @@ class BooksApp extends React.Component { shelfNames={this.shelfNames[key]} bookList={groupedBooks[key]} allBooks={this.state.books} + changeSelf = {this.changeSelf} /> diff --git a/src/BookItem.js b/src/BookItem.js index 14324dd914..53faf2c5dc 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -5,7 +5,7 @@ class BookItem extends React.Component { render() { - let { key, book } = this.props + let { key, book ,changeSelf} = this.props console.log('lacra Books') console.log(book) @@ -15,7 +15,7 @@ class BookItem extends React.Component {
      - { changeSelf(book,e.target.value)}} > diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js index c8afaff2ce..158be82e42 100644 --- a/src/ShelfBooks.js +++ b/src/ShelfBooks.js @@ -4,7 +4,7 @@ import BookItem from './BookItem' class ShelfBooks extends React.Component { render() { - const { bookList, allBooks } = this.props; + const { bookList, allBooks,changeSelf } = this.props; console.log('my shelf book marker') console.log(bookList) let bookItem = bookList.map( book => { @@ -14,7 +14,9 @@ class ShelfBooks extends React.Component { return( + book={book} + changeSelf={changeSelf} + /> ) }) diff --git a/src/Shelfs.js b/src/Shelfs.js index 669741cfae..b96043f036 100644 --- a/src/Shelfs.js +++ b/src/Shelfs.js @@ -3,7 +3,7 @@ import ShelfBooks from './ShelfBooks' class Shelfs extends React.Component { render() { - const { shelfKey, shelfNames, bookList, allBooks } = this.props; + const { shelfKey, shelfNames, bookList, allBooks, changeSelf } = this.props; console.log("my shelf") console.log(bookList) return ( @@ -12,6 +12,7 @@ class Shelfs extends React.Component {
      From 624c4dd2054081ab3794abd94001a320a56fbf1b Mon Sep 17 00:00:00 2001 From: Lacra Date: Sat, 8 Feb 2020 22:01:55 +0100 Subject: [PATCH 24/39] change shelf works for my books --- src/App.js | 21 +++++++++++++++++++-- src/BookItem.js | 4 ++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 9da3053972..14ce249bfa 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './App.css' import Shelfs from './Shelfs' import { Link } from 'react-router-dom' import { Route } from 'react-router-dom' +import BookItem from './BookItem' class BooksApp extends React.Component { state = { @@ -43,8 +44,24 @@ class BooksApp extends React.Component { 'wantToRead': 'Want To Read', 'read': 'Read' } - changeSelf = (book, shelId) => { - console.log('shelf change : ' + book.title + " / " + shelId) + changeSelf = (book, shelfId) => { + let {books} = this.state; + console.log('shelf change : ' + book.title + " / " + shelfId) + + let newBooks= books.map(oldBook =>{ + if (oldBook.id === book.id) { + oldBook.shelf = shelfId; + } + return oldBook + }) + console.log("new books") + console.log(newBooks) + + BooksAPI.update(book,shelfId).then((bookResponse) =>{ + this.setState({ + books:newBooks + }) + }) } //
      {shelves }
      diff --git a/src/BookItem.js b/src/BookItem.js index 53faf2c5dc..c5a04fbe73 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -5,7 +5,7 @@ class BookItem extends React.Component { render() { - let { key, book ,changeSelf} = this.props + let { key, book ,changeSelf, shelfKey} = this.props console.log('lacra Books') console.log(book) @@ -15,7 +15,7 @@ class BookItem extends React.Component {
      - { changeSelf(book,e.target.value)}} value = {book.shelf}> From 4e0c2fc58f882dc7a8687ddcab82f51a55acc89d Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 9 Feb 2020 10:04:24 +0100 Subject: [PATCH 25/39] useles selfkey --- src/ShelfBooks.js | 3 ++- src/Shelfs.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js index 158be82e42..fa9b555edb 100644 --- a/src/ShelfBooks.js +++ b/src/ShelfBooks.js @@ -4,7 +4,7 @@ import BookItem from './BookItem' class ShelfBooks extends React.Component { render() { - const { bookList, allBooks,changeSelf } = this.props; + const { bookList, allBooks,changeSelf, shelfKey } = this.props; console.log('my shelf book marker') console.log(bookList) let bookItem = bookList.map( book => { @@ -16,6 +16,7 @@ class ShelfBooks extends React.Component { key={book.id} book={book} changeSelf={changeSelf} + shelfKey={shelfKey} /> ) }) diff --git a/src/Shelfs.js b/src/Shelfs.js index b96043f036..f5bc6309e2 100644 --- a/src/Shelfs.js +++ b/src/Shelfs.js @@ -13,6 +13,7 @@ class Shelfs extends React.Component {
      From 009f90cb25cd4efe08d7262c8a1bb89d8594f827 Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 9 Feb 2020 10:13:50 +0100 Subject: [PATCH 26/39] removed logs --- src/App.js | 7 ------- src/BookItem.js | 2 -- src/ShelfBooks.js | 4 ---- src/Shelfs.js | 2 -- 4 files changed, 15 deletions(-) diff --git a/src/App.js b/src/App.js index 14ce249bfa..2b2f89d8e3 100644 --- a/src/App.js +++ b/src/App.js @@ -46,7 +46,6 @@ class BooksApp extends React.Component { } changeSelf = (book, shelfId) => { let {books} = this.state; - console.log('shelf change : ' + book.title + " / " + shelfId) let newBooks= books.map(oldBook =>{ if (oldBook.id === book.id) { @@ -54,8 +53,6 @@ class BooksApp extends React.Component { } return oldBook }) - console.log("new books") - console.log(newBooks) BooksAPI.update(book,shelfId).then((bookResponse) =>{ this.setState({ @@ -66,12 +63,8 @@ class BooksApp extends React.Component { //
      {shelves }
      render() { - console.log("My message") - console.log(this.state.books) const groupedBooks = this.groupBy(this.state.books, 'shelf'); - console.log("goobed books") - console.log(groupedBooks); const shelves = Object.keys(groupedBooks).map(key => { diff --git a/src/BookItem.js b/src/BookItem.js index c5a04fbe73..d71c661df5 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -6,8 +6,6 @@ class BookItem extends React.Component { render() { let { key, book ,changeSelf, shelfKey} = this.props - console.log('lacra Books') - console.log(book) return (
    1. diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js index fa9b555edb..e1d92e822c 100644 --- a/src/ShelfBooks.js +++ b/src/ShelfBooks.js @@ -5,11 +5,7 @@ import BookItem from './BookItem' class ShelfBooks extends React.Component { render() { const { bookList, allBooks,changeSelf, shelfKey } = this.props; - console.log('my shelf book marker') - console.log(bookList) let bookItem = bookList.map( book => { - console.log("create book ") - console.log(book) return(

      {shelfNames}

      From 9ddf3c3cf7801d819411c682e09ae1e355457afe Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 9 Feb 2020 10:18:28 +0100 Subject: [PATCH 27/39] fixed key related woring" --- src/BookItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BookItem.js b/src/BookItem.js index d71c661df5..b4496176dc 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -5,7 +5,7 @@ class BookItem extends React.Component { render() { - let { key, book ,changeSelf, shelfKey} = this.props + let { book ,changeSelf} = this.props return (
    2. From 4158019e0498c57a136d5f72b067001a2f06972e Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 9 Feb 2020 10:29:39 +0100 Subject: [PATCH 28/39] fixed all key related workings --- src/App.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 2b2f89d8e3..af4cf8734a 100644 --- a/src/App.js +++ b/src/App.js @@ -45,18 +45,18 @@ class BooksApp extends React.Component { 'read': 'Read' } changeSelf = (book, shelfId) => { - let {books} = this.state; + let { books } = this.state; - let newBooks= books.map(oldBook =>{ + let newBooks = books.map(oldBook => { if (oldBook.id === book.id) { oldBook.shelf = shelfId; } return oldBook }) - BooksAPI.update(book,shelfId).then((bookResponse) =>{ + BooksAPI.update(book, shelfId).then((bookResponse) => { this.setState({ - books:newBooks + books: newBooks }) }) } @@ -69,11 +69,13 @@ class BooksApp extends React.Component { const shelves = Object.keys(groupedBooks).map(key => { return ( - From 63b9b5b863f9bc9157483aaf4dfe74606eece281 Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 9 Feb 2020 10:33:03 +0100 Subject: [PATCH 29/39] cleared all console wornings --- src/App.js | 1 - src/BookItem.js | 2 +- src/ShelfBooks.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index af4cf8734a..e2a1099a94 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,6 @@ import './App.css' import Shelfs from './Shelfs' import { Link } from 'react-router-dom' import { Route } from 'react-router-dom' -import BookItem from './BookItem' class BooksApp extends React.Component { state = { diff --git a/src/BookItem.js b/src/BookItem.js index b4496176dc..9f8c167281 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' -class BookItem extends React.Component { +class BookItem extends Component { render() { diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js index e1d92e822c..f5768b2e1e 100644 --- a/src/ShelfBooks.js +++ b/src/ShelfBooks.js @@ -4,7 +4,7 @@ import BookItem from './BookItem' class ShelfBooks extends React.Component { render() { - const { bookList, allBooks,changeSelf, shelfKey } = this.props; + const { bookList,changeSelf, shelfKey } = this.props; let bookItem = bookList.map( book => { return( From 9f95e2c71d0f9c630f9250b3fb645428c74c8f0f Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 9 Feb 2020 10:49:25 +0100 Subject: [PATCH 30/39] created SearchMain class --- src/App.js | 22 ++-------------------- src/SearchMain.js | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 20 deletions(-) create mode 100644 src/SearchMain.js diff --git a/src/App.js b/src/App.js index e2a1099a94..3d37e29b29 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './App.css' import Shelfs from './Shelfs' import { Link } from 'react-router-dom' import { Route } from 'react-router-dom' +import SearchMain from './SearchMain' class BooksApp extends React.Component { state = { @@ -105,26 +106,7 @@ class BooksApp extends React.Component {
      3. )} /> ( -
      -
      - -
      - {/* - NOTES: The search from BooksAPI is limited to a particular set of search terms. - You can find these search terms here: - https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md - - However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if - you don't find a specific author or title. Every search is limited by search terms. - */} - - -
      -
      -
      -
        -
        -
        + )} /> diff --git a/src/SearchMain.js b/src/SearchMain.js new file mode 100644 index 0000000000..ae52625eca --- /dev/null +++ b/src/SearchMain.js @@ -0,0 +1,33 @@ +import React, { Component } from 'react' + +class SearchMain extends Component { + + render() { + + return ( +
        +
        + +
        + {/* + NOTES: The search from BooksAPI is limited to a particular set of search terms. + You can find these search terms here: + https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md + + However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if + you don't find a specific author or title. Every search is limited by search terms. + */} + + +
        +
        +
        +
          +
          +
          + ) + } + +} + +export default SearchMain \ No newline at end of file From ad20c39f1fbb84efc40add2f0d4d74ce6ce6382c Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 9 Feb 2020 11:35:56 +0100 Subject: [PATCH 31/39] we have books from the server --- package-lock.json | 21 +++++++++++++++++++++ package.json | 1 + src/SearchMain.js | 28 +++++++++++++++++++++++++++- 3 files changed, 49 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index bf107c882b..6e4fcb508a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11197,6 +11197,27 @@ "whatwg-fetch": "3.0.0" } }, + "react-debounce-input": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-debounce-input/-/react-debounce-input-3.2.2.tgz", + "integrity": "sha512-RIBu68Cq/gImKz/2h1cE042REDqyqj3D+7SJ3lnnIpJX0ht9D9PfH7KAnL+SgDz6hvKa9pZS2CnAxlkrLmnQlg==", + "requires": { + "lodash.debounce": "^4", + "prop-types": "^15.7.2" + }, + "dependencies": { + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + } + } + }, "react-dev-utils": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-6.1.1.tgz", diff --git a/package.json b/package.json index 77240f5fb2..bfac9392b2 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "prop-types": "^15.6.2", "react": "^16.6.3", + "react-debounce-input": "^3.2.2", "react-dom": "^16.6.3", "react-router-dom": "^5.1.2", "react-scripts": "2.1.1" diff --git a/src/SearchMain.js b/src/SearchMain.js index ae52625eca..54fddce6c8 100644 --- a/src/SearchMain.js +++ b/src/SearchMain.js @@ -1,7 +1,33 @@ import React, { Component } from 'react' +import { DebounceInput } from 'react-debounce-input' +import * as BooksAPI from './BooksAPI' + class SearchMain extends Component { + state = { + books: [], + badTerms: [] + } + + runSearch(event) { + console.log(event.target.value) + + let query = event.target.value + + BooksAPI.search(query).then((books) => { + if (books && books.length >0) { + let foundBooks = books.filter((book) => (book.imageLinks && book.imageLinks.thumbnail)) + this.setState({books: foundBooks, badTerms: []}) + console.log(foundBooks) + } + + }) + + + + } + render() { return ( @@ -17,7 +43,7 @@ class SearchMain extends Component { However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if you don't find a specific author or title. Every search is limited by search terms. */} - + this.runSearch(evt)} />
          From 2f554c996faba89def6567bf290885709a2ca539 Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 9 Feb 2020 12:34:13 +0100 Subject: [PATCH 32/39] serach wors --- src/App.js | 4 +++- src/SearchMain.js | 14 ++++++++++---- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 3d37e29b29..050ed2b665 100644 --- a/src/App.js +++ b/src/App.js @@ -106,7 +106,9 @@ class BooksApp extends React.Component {
          )} /> ( - + )} /> diff --git a/src/SearchMain.js b/src/SearchMain.js index 54fddce6c8..35cdec0b6e 100644 --- a/src/SearchMain.js +++ b/src/SearchMain.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import { DebounceInput } from 'react-debounce-input' import * as BooksAPI from './BooksAPI' +import ShelfBooks from './ShelfBooks' class SearchMain extends Component { @@ -16,19 +17,20 @@ class SearchMain extends Component { let query = event.target.value BooksAPI.search(query).then((books) => { - if (books && books.length >0) { + if (books && books.length > 0) { let foundBooks = books.filter((book) => (book.imageLinks && book.imageLinks.thumbnail)) - this.setState({books: foundBooks, badTerms: []}) + this.setState({ books: foundBooks, badTerms: [] }) console.log(foundBooks) } - + }) - + } render() { + let { changeShelf } = this.props return (
          @@ -48,6 +50,10 @@ class SearchMain extends Component {
          +
            From 1ac29383ce56d4d6111ba8bd3dfdd3d786612487 Mon Sep 17 00:00:00 2001 From: Bogdan Date: Sun, 9 Feb 2020 12:44:51 +0100 Subject: [PATCH 33/39] computed badTerms variable --- src/SearchMain.js | 49 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/src/SearchMain.js b/src/SearchMain.js index 35cdec0b6e..ee7ffbedfd 100644 --- a/src/SearchMain.js +++ b/src/SearchMain.js @@ -11,19 +11,54 @@ class SearchMain extends Component { badTerms: [] } + querryIsValid = false; + allTerms = ['Android', 'Art', 'Artificial Intelligence', 'Astronomy', 'Austen', 'Baseball', 'Basketball', + 'Bhagat', 'Biography', 'Brief', 'Business', 'Camus', 'Cervantes', 'Christie', 'Classics', 'Comics', 'Cook', + 'Cricket', 'Cycling', 'Desai', 'Design', 'Development', 'Digital Marketing', 'Drama', 'Drawing', 'Dumas', + 'Education', 'Everything', 'Fantasy', 'Film', 'Finance', 'First', 'Fitness', 'Football', 'Future', 'Games', + 'Gandhi', 'Homer', 'Horror', 'Hugo', 'Ibsen', 'Journey', 'Kafka', 'King', 'Lahiri', 'Larsson', 'Learn', + 'Literary Fiction', 'Make', 'Manage', 'Marquez', 'Money', 'Mystery', 'Negotiate', 'Painting', 'Philosophy', + 'Photography', 'Poetry', 'Production', 'Programming', 'React', 'Redux', 'River', 'Robotics', 'Rowling', + 'Satire', 'Science Fiction', 'Shakespeare', 'Singh', 'Swimming', 'Tale', 'Thrun', 'Time', 'Tolstoy', 'Travel', + 'Ultimate', 'Virtual Reality', 'Web Development', 'iOS']; + validator = this.allTerms.join(',').toLowerCase(); + + getBadTerms(query) { + let tokens = query.split(" "); + let terms = []; + tokens.forEach(element => { + + if (!this.validator.includes(element.toLowerCase())) { + terms.push(element) + } + }); + return terms; + } + runSearch(event) { console.log(event.target.value) let query = event.target.value - BooksAPI.search(query).then((books) => { - if (books && books.length > 0) { - let foundBooks = books.filter((book) => (book.imageLinks && book.imageLinks.thumbnail)) - this.setState({ books: foundBooks, badTerms: [] }) - console.log(foundBooks) - } + let badTerms = this.getBadTerms(query); + + + if (badTerms.length < 1) { + BooksAPI.search(query).then((books) => { + if (books && books.length > 0) { + let foundBooks = books.filter((book) => (book.imageLinks && book.imageLinks.thumbnail)) + this.setState({ books: foundBooks, badTerms: [] }) + console.log(foundBooks) + } + + }) + } else { + this.setState({ + books: [], + badTerms: badTerms + }) + } - }) From 5a2c30678ac7d7f089b41c660d4fa5ed10492783 Mon Sep 17 00:00:00 2001 From: Lacra Date: Sun, 9 Feb 2020 12:59:53 +0100 Subject: [PATCH 34/39] cleared search on empty query --- src/SearchMain.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/SearchMain.js b/src/SearchMain.js index ee7ffbedfd..de0d18d905 100644 --- a/src/SearchMain.js +++ b/src/SearchMain.js @@ -39,6 +39,11 @@ class SearchMain extends Component { console.log(event.target.value) let query = event.target.value + query = query.trim() + if (query === '') { + this.setState({ books: [] }) + return + } let badTerms = this.getBadTerms(query); @@ -85,10 +90,14 @@ class SearchMain extends Component {
            - + {(this.state.badTerms.length < 1) + ? + :
            Bad Thearm
            + } +
              From 0c4423e9fa4be4c4916771d07509395d026415b5 Mon Sep 17 00:00:00 2001 From: Bogdan Date: Sun, 9 Feb 2020 13:31:53 +0100 Subject: [PATCH 35/39] fixed bug change shalf is not a fuction --- src/App.js | 6 +++--- src/BookItem.js | 2 +- src/SearchMain.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 050ed2b665..a3ab41fa5c 100644 --- a/src/App.js +++ b/src/App.js @@ -105,9 +105,9 @@ class BooksApp extends React.Component {
              )} /> - ( - ( + )} /> diff --git a/src/BookItem.js b/src/BookItem.js index 9f8c167281..d0a7893387 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -5,7 +5,7 @@ class BookItem extends Component { render() { - let { book ,changeSelf} = this.props + let { book , changeSelf} = this.props return (
            1. diff --git a/src/SearchMain.js b/src/SearchMain.js index de0d18d905..2924ee71f2 100644 --- a/src/SearchMain.js +++ b/src/SearchMain.js @@ -70,7 +70,7 @@ class SearchMain extends Component { } render() { - let { changeShelf } = this.props + const { addBookToShelf} = this.props return (
              @@ -93,7 +93,7 @@ class SearchMain extends Component { {(this.state.badTerms.length < 1) ? :
              Bad Thearm
              } From 84b577c92885de0f7a31af46e89f021f4543aff0 Mon Sep 17 00:00:00 2001 From: Bogdan Date: Sun, 9 Feb 2020 13:51:12 +0100 Subject: [PATCH 36/39] we have all booksa in search page --- src/App.js | 1 + src/BookItem.js | 4 +++- src/SearchMain.js | 5 ++--- src/ShelfBooks.js | 3 ++- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index a3ab41fa5c..05825ca0ce 100644 --- a/src/App.js +++ b/src/App.js @@ -108,6 +108,7 @@ class BooksApp extends React.Component { ( )} /> diff --git a/src/BookItem.js b/src/BookItem.js index d0a7893387..88674b11cb 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -5,7 +5,9 @@ class BookItem extends Component { render() { - let { book , changeSelf} = this.props + let { book , changeSelf, allBooks} = this.props + console.log("all books") + console.log(allBooks) return (
            2. diff --git a/src/SearchMain.js b/src/SearchMain.js index 2924ee71f2..079c22f21a 100644 --- a/src/SearchMain.js +++ b/src/SearchMain.js @@ -36,7 +36,6 @@ class SearchMain extends Component { } runSearch(event) { - console.log(event.target.value) let query = event.target.value query = query.trim() @@ -53,7 +52,6 @@ class SearchMain extends Component { if (books && books.length > 0) { let foundBooks = books.filter((book) => (book.imageLinks && book.imageLinks.thumbnail)) this.setState({ books: foundBooks, badTerms: [] }) - console.log(foundBooks) } }) @@ -70,7 +68,7 @@ class SearchMain extends Component { } render() { - const { addBookToShelf} = this.props + const { addBookToShelf, allBooks} = this.props return (
              @@ -94,6 +92,7 @@ class SearchMain extends Component { ? :
              Bad Thearm
              } diff --git a/src/ShelfBooks.js b/src/ShelfBooks.js index f5768b2e1e..a08dd86916 100644 --- a/src/ShelfBooks.js +++ b/src/ShelfBooks.js @@ -4,7 +4,7 @@ import BookItem from './BookItem' class ShelfBooks extends React.Component { render() { - const { bookList,changeSelf, shelfKey } = this.props; + const { bookList,changeSelf, shelfKey, allBooks } = this.props; let bookItem = bookList.map( book => { return( @@ -13,6 +13,7 @@ class ShelfBooks extends React.Component { book={book} changeSelf={changeSelf} shelfKey={shelfKey} + allBooks = {allBooks} /> ) }) From 1a8ff644f7f7cf0092e9fc1e4e505d601092786b Mon Sep 17 00:00:00 2001 From: Bogdan Date: Sun, 9 Feb 2020 14:11:01 +0100 Subject: [PATCH 37/39] change shelf works for serarch. added getBookShelf function --- src/BookItem.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/BookItem.js b/src/BookItem.js index 88674b11cb..9f30582187 100644 --- a/src/BookItem.js +++ b/src/BookItem.js @@ -3,19 +3,35 @@ import React, { Component } from 'react' class BookItem extends Component { + getBookShelf(foundBook, allBooks){ + let myBook + if (allBooks) { + myBook = allBooks.find(item => { + return item.id === foundBook.id + }) + } + + let isOwened = ((myBook !== undefined) ? true : false) + + let shelfValue = isOwened ? myBook.shelf : "none" + + return shelfValue + + } render() { let { book , changeSelf, allBooks} = this.props console.log("all books") console.log(allBooks) + return (
            3. - { changeSelf(book,e.target.value)}} value = {this.getBookShelf(book,allBooks)}> From 89a49e3ed3166ac739419d8d376851da1cbaccad Mon Sep 17 00:00:00 2001 From: Bogdan Date: Sun, 9 Feb 2020 14:19:14 +0100 Subject: [PATCH 38/39] fixed back navigation --- src/SearchMain.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/SearchMain.js b/src/SearchMain.js index 079c22f21a..84fdbe794b 100644 --- a/src/SearchMain.js +++ b/src/SearchMain.js @@ -3,6 +3,8 @@ import { DebounceInput } from 'react-debounce-input' import * as BooksAPI from './BooksAPI' import ShelfBooks from './ShelfBooks' +import { Link } from 'react-router-dom' + class SearchMain extends Component { @@ -68,12 +70,15 @@ class SearchMain extends Component { } render() { - const { addBookToShelf, allBooks} = this.props + const { addBookToShelf, allBooks } = this.props return (
              - + + {/* */} + Close +
              {/* NOTES: The search from BooksAPI is limited to a particular set of search terms. @@ -92,7 +97,7 @@ class SearchMain extends Component { ? :
              Bad Thearm
              } From 9b5db2d2f81cb3aad116846a1400d146fda0e297 Mon Sep 17 00:00:00 2001 From: Bogdan Date: Sun, 9 Feb 2020 22:07:43 +0100 Subject: [PATCH 39/39] fixed refresh bug on book select from search --- .gitignore | 1 + src/App.js | 38 +++++++++++++++++++++++++++----------- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/.gitignore b/.gitignore index fd4f2b066b..f1321553eb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules .DS_Store +.vscode/ diff --git a/src/App.js b/src/App.js index 05825ca0ce..598e4a341a 100644 --- a/src/App.js +++ b/src/App.js @@ -44,21 +44,37 @@ class BooksApp extends React.Component { 'wantToRead': 'Want To Read', 'read': 'Read' } - changeSelf = (book, shelfId) => { - let { books } = this.state; - let newBooks = books.map(oldBook => { - if (oldBook.id === book.id) { - oldBook.shelf = shelfId; + addNewBook = (book, shelf) => { + BooksAPI.update(book, shelf) + .then((bookResponse) => { + book.shelf = shelf + let newBooks = this.state.books.concat([book]) + this.setState({ + books: newBooks + }) + }) + } + + changeSelf = (bookItem, shelfId) => { + let { books } = this.state; + let isNewBook = true; + let newBooks = books.map(book => { + if (book.id === bookItem.id) { + book.shelf = shelfId; + isNewBook = false; //is not a new book wee found it on the shelfs } - return oldBook + return book; }) - - BooksAPI.update(book, shelfId).then((bookResponse) => { - this.setState({ - books: newBooks + if (isNewBook) { + this.addNewBook(bookItem, shelfId) + } else { + BooksAPI.update(bookItem, shelfId).then((bookResponse) => { + this.setState({ + books: newBooks + }) }) - }) + } } //
              {shelves }