From 013af0b730ae30aa1429832581ab633f6fa2d31d Mon Sep 17 00:00:00 2001 From: Thales Moreira Carvalho Date: Tue, 5 Dec 2017 17:14:26 -0200 Subject: [PATCH 01/41] Update search method description Update search method description removing maxResults infos --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index afb0f1d831..ce4ea2eb85 100644 --- a/README.md +++ b/README.md @@ -71,12 +71,11 @@ update(book, shelf) Method Signature: ```js -search(query, maxResults) +search(query) ``` * query: `` -* maxResults: `` Due to the nature of the backend server, search results are capped at 20, even if this is set higher. -* Returns a Promise which resolves to a JSON object containing a collection of book objects. +* Returns a Promise which resolves to a JSON object containing a collection of a maximum of 20 book objects. * These books do not know which shelf they are on. They are raw results only. You'll need to make sure that books have the correct state while on the search page. ## Important From 158225c24f05d132911053480e7b003b4b218833 Mon Sep 17 00:00:00 2001 From: Thales Moreira Carvalho Date: Tue, 5 Dec 2017 17:15:43 -0200 Subject: [PATCH 02/41] Update search method Update search method removing maxResults argument. --- src/BooksAPI.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BooksAPI.js b/src/BooksAPI.js index 1235dbad8e..99b00b788e 100644 --- a/src/BooksAPI.js +++ b/src/BooksAPI.js @@ -32,13 +32,13 @@ export const update = (book, shelf) => body: JSON.stringify({ shelf }) }).then(res => res.json()) -export const search = (query, maxResults) => +export const search = (query) => fetch(`${api}/search`, { method: 'POST', headers: { ...headers, 'Content-Type': 'application/json' }, - body: JSON.stringify({ query, maxResults }) + body: JSON.stringify({ query }) }).then(res => res.json()) .then(data => data.books) From 45c8f3d470663d9273d02b9871f0fabd97413762 Mon Sep 17 00:00:00 2001 From: Thales Moreira Carvalho Date: Tue, 24 Apr 2018 17:23:01 -0300 Subject: [PATCH 03/41] Update versions --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index be5083ad17..57c242e3cb 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { "dependencies": { - "prop-types": "^15.5.8", - "react": "^15.5.4", - "react-dom": "^15.5.4" + "prop-types": "^15.6.1", + "react": "^16.3.2", + "react-dom": "^16.3.2" }, "devDependencies": { - "react-scripts": "0.9.5" + "react-scripts": "1.1.4" }, "scripts": { "start": "react-scripts start", From 456b9c8a47e96e3b728964aa0aab183a59c2943c Mon Sep 17 00:00:00 2001 From: Veronika Benkeser Date: Wed, 6 Jun 2018 16:37:06 -0700 Subject: [PATCH 04/41] Changed the value of the move option. --- src/App.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 3387cd458a..f952765d13 100644 --- a/src/App.js +++ b/src/App.js @@ -54,7 +54,7 @@ class BooksApp extends React.Component {
- + @@ -97,7 +97,7 @@ class BooksApp extends React.Component {
- + @@ -140,7 +140,7 @@ class BooksApp extends React.Component {
- + @@ -176,7 +176,7 @@ class BooksApp extends React.Component {
- - - - - - -
-
-
To Kill a Mockingbird
-
Harper Lee
-
- -
  • -
    -
    -
    -
    - -
    -
    -
    Ender's Game
    -
    Orson Scott Card
    -
    -
  • - -
    - -
    -

    Want to Read

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

    Read

    -
    -
      -
    1. -
      -
      -
      -
      - -
      -
      -
      The Hobbit
      -
      J.R.R. Tolkien
      -
      -
    2. -
    3. -
      -
      -
      -
      - -
      -
      -
      Oh, the Places You'll Go!
      -
      Seuss
      -
      -
    4. -
    5. -
      -
      -
      -
      - -
      -
      -
      The Adventures of Tom Sawyer
      -
      Mark Twain
      -
      -
    6. -
    -
    -
    - - + { + + }
    diff --git a/src/BookShelf.js b/src/BookShelf.js index f74cd31ded..87dede0205 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -1,6 +1,6 @@ -import React, {Component } from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import Section from './Section'; +// import Section from './Section'; class BookShelf extends Component { state = { @@ -9,9 +9,192 @@ class BookShelf extends Component { read: [] }; - render(){ - return( -
    + render() { + return ( +
    +
    +

    MyReads

    +
    +
    +
    +
    +

    Currently Reading

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

    Want to Read

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

    Read

    +
    +
      +
    1. +
      +
      +
      +
      + +
      +
      +
      The Hobbit
      +
      J.R.R. Tolkien
      +
      +
    2. +
    3. +
      +
      +
      +
      + +
      +
      +
      Oh, the Places You'll Go!
      +
      Seuss
      +
      +
    4. +
    5. +
      +
      +
      +
      + +
      +
      +
      The Adventures of Tom Sawyer
      +
      Mark Twain
      +
      +
    6. +
    +
    +
    +
    +
    +
    ) } } From abeb3316e3feeb090bb0b50838130439263ed9c4 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 14 Sep 2019 11:54:24 -0700 Subject: [PATCH 18/41] Refactor BookShelf Component to extract code to Section component --- src/BookShelf.js | 182 +------------------------------------------- src/Section.js | 191 ++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 186 insertions(+), 187 deletions(-) diff --git a/src/BookShelf.js b/src/BookShelf.js index 87dede0205..04c3a46c17 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -// import Section from './Section'; +import Section from "./Section"; class BookShelf extends Component { state = { @@ -16,183 +16,9 @@ class BookShelf extends Component {

    MyReads

    -
    -
    -

    Currently Reading

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

    Want to Read

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

    Read

    -
    -
      -
    1. -
      -
      -
      -
      - -
      -
      -
      The Hobbit
      -
      J.R.R. Tolkien
      -
      -
    2. -
    3. -
      -
      -
      -
      - -
      -
      -
      Oh, the Places You'll Go!
      -
      Seuss
      -
      -
    4. -
    5. -
      -
      -
      -
      - -
      -
      -
      The Adventures of Tom Sawyer
      -
      Mark Twain
      -
      -
    6. -
    -
    -
    -
    + { +
    + }
    ) diff --git a/src/Section.js b/src/Section.js index 0b22860902..833c14f9f6 100644 --- a/src/Section.js +++ b/src/Section.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import BookList from "./BookList"; +// import BookList from "./BookList"; class Section extends Component { state = { @@ -9,16 +9,189 @@ class Section extends Component { render() { return ( -
    -

    {this.props.section}

    - -
    +
    +
    +

    Currently Reading

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

    Want to Read

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

    Read

    +
    +
      +
    1. +
      +
      +
      +
      + +
      +
      +
      The Hobbit
      +
      J.R.R. Tolkien
      +
      +
    2. +
    3. +
      +
      +
      +
      + +
      +
      +
      Oh, the Places You'll Go!
      +
      Seuss
      +
      +
    4. +
    5. +
      +
      +
      +
      + +
      +
      +
      The Adventures of Tom Sawyer
      +
      Mark Twain
      +
      +
    6. +
    +
    +
    +
    ) } } - -Section.prototype = { - section: PropTypes.text.isRequired -}; +// +// Section.prototype = { +// section: PropTypes.text.isRequired +// }; export default Section; \ No newline at end of file From f62428ef20819728b80bbaa5095f4950328f67f8 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 14 Sep 2019 12:23:09 -0700 Subject: [PATCH 19/41] Refactor BookShelf, Section and BookList Components to reduce repetetion and keey the code DRY --- src/BookList.js | 203 ++++++++++++++++++++++++++++++++++++++++++++--- src/BookShelf.js | 9 ++- src/Section.js | 193 +++----------------------------------------- 3 files changed, 206 insertions(+), 199 deletions(-) diff --git a/src/BookList.js b/src/BookList.js index 6d44595593..743660d23e 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -1,25 +1,202 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import BookListItem from "./BookListItem"; class BookList extends Component { render() { + console.log(this.props) return ( -
      - { - this.props.books.map(book => - ( - - ) - ) - } -
    +
    +
    +

    {this.props.section}

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

    {this.props.section}

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

    {this.props.section}

    +
    +
      +
    1. +
      +
      +
      +
      + +
      +
      +
      The Hobbit
      +
      J.R.R. Tolkien
      +
      +
    2. +
    3. +
      +
      +
      +
      + +
      +
      +
      Oh, the Places You'll Go!
      +
      Seuss
      +
      +
    4. +
    5. +
      +
      +
      +
      + +
      +
      +
      The Adventures of Tom Sawyer
      +
      Mark Twain
      +
      +
    6. +
    +
    +
    +
    ) } } -Section.prototype = { - books: PropTypes.array.isRequired +BookList.propTypes = { + selections: PropTypes.array.isRequired }; -export default BookList; \ No newline at end of file +export default BookList; + + +// { +// this.props.books.map(book => +// ( +// +// ) +// ) +// } \ No newline at end of file diff --git a/src/BookShelf.js b/src/BookShelf.js index 04c3a46c17..6b913500fc 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -4,12 +4,11 @@ import Section from "./Section"; class BookShelf extends Component { state = { - currentlyReading: [], - wantToRead: [], - read: [] + sections: ['Currently Reading', 'Want To Read', 'Read'] }; render() { + console.log(this.state.sections); return (
    @@ -17,7 +16,9 @@ class BookShelf extends Component {
    { -
    + this.state.sections.map((section, index) => ( +
    + )) }
    diff --git a/src/Section.js b/src/Section.js index 833c14f9f6..5000069323 100644 --- a/src/Section.js +++ b/src/Section.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -// import BookList from "./BookList"; +import BookList from "./BookList"; class Section extends Component { state = { @@ -8,190 +8,19 @@ class Section extends Component { }; render() { + console.log(this.props.section); + return ( -
    -
    -

    Currently Reading

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

    Want to Read

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

    Read

    -
    -
      -
    1. -
      -
      -
      -
      - -
      -
      -
      The Hobbit
      -
      J.R.R. Tolkien
      -
      -
    2. -
    3. -
      -
      -
      -
      - -
      -
      -
      Oh, the Places You'll Go!
      -
      Seuss
      -
      -
    4. -
    5. -
      -
      -
      -
      - -
      -
      -
      The Adventures of Tom Sawyer
      -
      Mark Twain
      -
      -
    6. -
    -
    -
    -
    +
    + +
    ) } } -// -// Section.prototype = { -// section: PropTypes.text.isRequired -// }; + + +Section.propTypes = { + section: PropTypes.string.isRequired +}; export default Section; \ No newline at end of file From 93cb8e00f9b4abd2601a5a401ac32d2fbe84e1aa Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 14 Sep 2019 13:20:29 -0700 Subject: [PATCH 20/41] Add SectionSelector to extract the repeated select element to a seperate component --- src/BookList.js | 57 ++++++------------------------------------ src/SectionSelector.js | 21 ++++++++++++++++ 2 files changed, 29 insertions(+), 49 deletions(-) create mode 100644 src/SectionSelector.js diff --git a/src/BookList.js b/src/BookList.js index 743660d23e..f69207e7c5 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import SectionSelector from './SectionSelector'; class BookList extends Component { render() { @@ -19,13 +20,7 @@ class BookList extends Component { backgroundImage: 'url("http://books.google.com/books/content?id=PGR2AwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73-GnPVEyb7MOCxDzOYF1PTQRuf6nCss9LMNOSWBpxBrz8Pm2_mFtWMMg_Y1dx92HT7cUoQBeSWjs3oEztBVhUeDFQX6-tWlWz1-feexS0mlJPjotcwFqAg6hBYDXuK_bkyHD-y&source=gbs_api")' }}>
    - +
    To Kill a Mockingbird
    @@ -41,13 +36,7 @@ class BookList extends Component { backgroundImage: 'url("http://books.google.com/books/content?id=yDtCuFHXbAYC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72RRiTR6U5OUg3IY_LpHTL2NztVWAuZYNFE8dUuC0VlYabeyegLzpAnDPeWxE6RHi0C2ehrR9Gv20LH2dtjpbcUcs8YnH5VCCAH0Y2ICaKOTvrZTCObQbsfp4UbDqQyGISCZfGN&source=gbs_api")' }}>
    - +
    Ender's Game
    @@ -70,13 +59,7 @@ class BookList extends Component { backgroundImage: 'url("http://books.google.com/books/content?id=uu1mC6zWNTwC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73pGHfBNSsJG9Y8kRBpmLUft9O4BfItHioHolWNKOdLavw-SLcXADy3CPAfJ0_qMb18RmCa7Ds1cTdpM3dxAGJs8zfCfm8c6ggBIjzKT7XR5FIB53HHOhnsT7a0Cc-PpneWq9zX&source=gbs_api")' }}>
    - +
    1776
    @@ -92,13 +75,7 @@ class BookList extends Component { backgroundImage: 'url("http://books.google.com/books/content?id=wrOQLV6xB-wC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72G3gA5A-Ka8XjOZGDFLAoUeMQBqZ9y-LCspZ2dzJTugcOcJ4C7FP0tDA8s1h9f480ISXuvYhA_ZpdvRArUL-mZyD4WW7CHyEqHYq9D3kGnrZCNiqxSRhry8TiFDCMWP61ujflB&source=gbs_api")' }}>
    - +
    Harry Potter and the Sorcerer's Stone
    @@ -121,13 +98,7 @@ class BookList extends Component { backgroundImage: 'url("http://books.google.com/books/content?id=pD6arNyKyi8C&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE70Rw0CCwNZh0SsYpQTkMbvz23npqWeUoJvVbi_gXla2m2ie_ReMWPl0xoU8Quy9fk0Zhb3szmwe8cTe4k7DAbfQ45FEzr9T7Lk0XhVpEPBvwUAztOBJ6Y0QPZylo4VbB7K5iRSk&source=gbs_api")' }}>
    - +
    The Hobbit
    @@ -143,13 +114,7 @@ class BookList extends Component { backgroundImage: 'url("http://books.google.com/books/content?id=1q_xAwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE712CA0cBYP8VKbEcIVEuFJRdX1k30rjLM29Y-dw_qU1urEZ2cQ42La3Jkw6KmzMmXIoLTr50SWTpw6VOGq1leINsnTdLc_S5a5sn9Hao2t5YT7Ax1RqtQDiPNHIyXP46Rrw3aL8&source=gbs_api")' }}>
    - +
    Oh, the Places You'll Go!
    @@ -165,13 +130,7 @@ class BookList extends Component { backgroundImage: 'url("http://books.google.com/books/content?id=32haAAAAMAAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72yckZ5f5bDFVIf7BGPbjA0KYYtlQ__nWB-hI_YZmZ-fScYwFy4O_fWOcPwf-pgv3pPQNJP_sT5J_xOUciD8WaKmevh1rUR-1jk7g1aCD_KeJaOpjVu0cm_11BBIUXdxbFkVMdi&source=gbs_api")' }}>
    - +
    The Adventures of Tom Sawyer
    diff --git a/src/SectionSelector.js b/src/SectionSelector.js new file mode 100644 index 0000000000..cd5e374eed --- /dev/null +++ b/src/SectionSelector.js @@ -0,0 +1,21 @@ +import React, {Component} from 'react' + +class SectionSelector extends Component{ + state = { + changedSelection: '' + }; + + render() { + return( + + ) + } +} + +export default SectionSelector; \ No newline at end of file From 93553693e7f87be91d198ee16a8a1608eb4aeb11 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 14 Sep 2019 14:07:56 -0700 Subject: [PATCH 21/41] Refactor BookList, BookListItem, BookShelf and Section Components to DRY code --- src/BookList.js | 135 +++----------------------------------------- src/BookListItem.js | 21 ++++++- src/BookShelf.js | 58 ++++++++++++++++++- src/Section.js | 12 +++- 4 files changed, 90 insertions(+), 136 deletions(-) diff --git a/src/BookList.js b/src/BookList.js index f69207e7c5..193574f4b8 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import SectionSelector from './SectionSelector'; +import BookListItem from "./BookListItem"; class BookList extends Component { render() { @@ -11,132 +12,11 @@ class BookList extends Component {

    {this.props.section}

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

    {this.props.section}

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

    {this.props.section}

    -
    -
      -
    1. -
      -
      -
      -
      - -
      -
      -
      The Hobbit
      -
      J.R.R. Tolkien
      -
      -
    2. -
    3. -
      -
      -
      -
      - -
      -
      -
      Oh, the Places You'll Go!
      -
      Seuss
      -
      -
    4. -
    5. -
      -
      -
      -
      - -
      -
      -
      The Adventures of Tom Sawyer
      -
      Mark Twain
      -
      -
    6. + { + this.props.books.map((book, index) => ( + + )) + }
    @@ -146,7 +26,8 @@ class BookList extends Component { } BookList.propTypes = { - selections: PropTypes.array.isRequired + books: PropTypes.array.isRequired, + section: PropTypes.string.isRequired }; export default BookList; diff --git a/src/BookListItem.js b/src/BookListItem.js index f293bf66ae..a6eb607955 100644 --- a/src/BookListItem.js +++ b/src/BookListItem.js @@ -1,16 +1,31 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import SectionSelector from "./SectionSelector"; class BookListItem extends Component { - render() { return ( -
  • {this.props.book.name}
  • +
  • +
    +
    +
    +
    + +
    +
    +
    {this.props.book.title}
    +
    {this.props.book.author}
    +
    +
  • ) } } -BookListItem.prototype = { +BookListItem.propTypes = { book: PropTypes.object.isRequired }; diff --git a/src/BookShelf.js b/src/BookShelf.js index 6b913500fc..ec9220a57c 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -1,10 +1,62 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import Section from "./Section"; class BookShelf extends Component { state = { - sections: ['Currently Reading', 'Want To Read', 'Read'] + sectionDetails: [ + { + name: 'Currently Reading', + books:[ + { + title: 'To Kill a Mockingbird', + author: 'Harper Lee', + coverUrl: 'http://books.google.com/books/content?id=PGR2AwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73-GnPVEyb7MOCxDzOYF1PTQRuf6nCss9LMNOSWBpxBrz8Pm2_mFtWMMg_Y1dx92HT7cUoQBeSWjs3oEztBVhUeDFQX6-tWlWz1-feexS0mlJPjotcwFqAg6hBYDXuK_bkyHD-y&source=gbs_api' + }, + { + title: 'Ender\'s Game', + author: 'Orson Scott Card', + coverUrl: 'http://books.google.com/books/content?id=yDtCuFHXbAYC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72RRiTR6U5OUg3IY_LpHTL2NztVWAuZYNFE8dUuC0VlYabeyegLzpAnDPeWxE6RHi0C2ehrR9Gv20LH2dtjpbcUcs8YnH5VCCAH0Y2ICaKOTvrZTCObQbsfp4UbDqQyGISCZfGN&source=gbs_api' + }, + + ] + }, + { + name: 'Want To Read', + books: [ + { + title: '1776', + author: 'David McCullough', + coverUrl: 'http://books.google.com/books/content?id=uu1mC6zWNTwC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73pGHfBNSsJG9Y8kRBpmLUft9O4BfItHioHolWNKOdLavw-SLcXADy3CPAfJ0_qMb18RmCa7Ds1cTdpM3dxAGJs8zfCfm8c6ggBIjzKT7XR5FIB53HHOhnsT7a0Cc-PpneWq9zX&source=gbs_api' + } + , + { + title: 'Harry Potter and the Sorcerer\'s Stone', + author: 'J.K. Rowling', + coverUrl: 'http://books.google.com/books/content?id=wrOQLV6xB-wC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72G3gA5A-Ka8XjOZGDFLAoUeMQBqZ9y-LCspZ2dzJTugcOcJ4C7FP0tDA8s1h9f480ISXuvYhA_ZpdvRArUL-mZyD4WW7CHyEqHYq9D3kGnrZCNiqxSRhry8TiFDCMWP61ujflB&source=gbs_api' + } + ] + }, + { + name: 'Read', + books: [ + { + title: 'The Hobbit', + author: 'J.R.R. Tolkien', + coverUrl: 'http://books.google.com/books/content?id=pD6arNyKyi8C&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE70Rw0CCwNZh0SsYpQTkMbvz23npqWeUoJvVbi_gXla2m2ie_ReMWPl0xoU8Quy9fk0Zhb3szmwe8cTe4k7DAbfQ45FEzr9T7Lk0XhVpEPBvwUAztOBJ6Y0QPZylo4VbB7K5iRSk&source=gbs_api' + }, + { + title: 'Oh, the Places You\'ll Go!', + author: 'Seuss', + coverUrl: 'http://books.google.com/books/content?id=1q_xAwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE712CA0cBYP8VKbEcIVEuFJRdX1k30rjLM29Y-dw_qU1urEZ2cQ42La3Jkw6KmzMmXIoLTr50SWTpw6VOGq1leINsnTdLc_S5a5sn9Hao2t5YT7Ax1RqtQDiPNHIyXP46Rrw3aL8&source=gbs_api' + }, + { + title: 'The Adventures of Tom Sawyer', + author: 'Mark Twain', + coverUrl: 'http://books.google.com/books/content?id=32haAAAAMAAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72yckZ5f5bDFVIf7BGPbjA0KYYtlQ__nWB-hI_YZmZ-fScYwFy4O_fWOcPwf-pgv3pPQNJP_sT5J_xOUciD8WaKmevh1rUR-1jk7g1aCD_KeJaOpjVu0cm_11BBIUXdxbFkVMdi&source=gbs_api' + } + ] + } + ] }; render() { @@ -16,7 +68,7 @@ class BookShelf extends Component {
    { - this.state.sections.map((section, index) => ( + this.state.sectionDetails.map((section, index) => (
    )) } diff --git a/src/Section.js b/src/Section.js index 5000069323..c684659297 100644 --- a/src/Section.js +++ b/src/Section.js @@ -12,7 +12,7 @@ class Section extends Component { return (
    - +
    ) } @@ -20,7 +20,13 @@ class Section extends Component { Section.propTypes = { - section: PropTypes.string.isRequired + section: PropTypes.object.isRequired }; -export default Section; \ No newline at end of file +export default Section; + + +// Algorithm: +// Filter the books depending on which section is being displayed +// What do I need in order to do that? I need a way to track which is the self +// From 4a4f73c7c30fe8ebf72359a7dfd1eca29e76cdde Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 14 Sep 2019 14:24:57 -0700 Subject: [PATCH 22/41] Renaming Selector Component and clean up Search, SearchBar and SearchResults components --- src/App.js | 30 ++++++++++--------------- src/BookList.js | 2 +- src/BookListItem.js | 4 ++-- src/Search.js | 2 +- src/SearchBar.js | 11 ++++++++- src/SearchResults.js | 2 +- src/{SectionSelector.js => Selector.js} | 15 ++++++++++--- 7 files changed, 39 insertions(+), 27 deletions(-) rename src/{SectionSelector.js => Selector.js} (51%) diff --git a/src/App.js b/src/App.js index 54dad8ff6b..6bb8b9a948 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,9 @@ import React from 'react' // import * as BooksAPI from './BooksAPI' import './App.css'; import BookShelf from "./BookShelf"; +import Search from './Search'; +import SearchResults from "./SearchResults"; +import SearchBar from "./SearchBar"; class BooksApp extends React.Component { state = { @@ -12,30 +15,21 @@ class BooksApp extends React.Component { * 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. - */} - - +
    +
    +
    + + +
    +
    +
    -
    -
    -
      ) : ( diff --git a/src/BookList.js b/src/BookList.js index 193574f4b8..8473b2f166 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import SectionSelector from './SectionSelector'; +import Selector from './Selector'; import BookListItem from "./BookListItem"; class BookList extends Component { diff --git a/src/BookListItem.js b/src/BookListItem.js index a6eb607955..645524177d 100644 --- a/src/BookListItem.js +++ b/src/BookListItem.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import SectionSelector from "./SectionSelector"; +import Selector from "./Selector"; class BookListItem extends Component { render() { @@ -14,7 +14,7 @@ class BookListItem extends Component { backgroundImage: `url(${this.props.book.coverUrl})` }}>
      - +
      {this.props.book.title}
      diff --git a/src/Search.js b/src/Search.js index 630e12a35f..f18b1d6292 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react' +import React, { Component } from 'react' import SearchBar from "./SearchBar"; import SearchResults from "./SearchResults"; diff --git a/src/SearchBar.js b/src/SearchBar.js index ea56132904..b70e8b677d 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -3,7 +3,16 @@ import React, { Component } from 'react' class SearchBar 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. + */} +
      ) diff --git a/src/SearchResults.js b/src/SearchResults.js index ac058b6bf2..085d849549 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -6,7 +6,7 @@ class SearchResults extends Component { render(){ return(
      - +
        ) } diff --git a/src/SectionSelector.js b/src/Selector.js similarity index 51% rename from src/SectionSelector.js rename to src/Selector.js index cd5e374eed..9db711c43b 100644 --- a/src/SectionSelector.js +++ b/src/Selector.js @@ -1,10 +1,11 @@ import React, {Component} from 'react' -class SectionSelector extends Component{ +class Selector extends Component{ state = { - changedSelection: '' + newSelection: '' }; + render() { return( + - - - + + + ) @@ -36,7 +36,7 @@ class Selector extends Component{ Selector.propTypes={ currentSection: PropTypes.string.isRequired, - onSelectorClick: PropTypes.func.isRequired + onSelectorClick: PropTypes.func } export default Selector; From 3fb19ca0881a2c9932ec0b273311c5d1682873d4 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 28 Sep 2019 15:39:18 -0700 Subject: [PATCH 25/41] Add React Router to allow navigation from Bookshelf and Search --- package.json | 1 + src/App.js | 43 +++--------------- src/BookShelf.js | 9 +++- src/Search.js | 17 +++++-- yarn.lock | 113 ++++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 141 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index 579d515885..9b3eaf7915 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.1", "react-scripts": "2.1.1" }, "scripts": { diff --git a/src/App.js b/src/App.js index 6bb8b9a948..b06a97dec3 100644 --- a/src/App.js +++ b/src/App.js @@ -3,46 +3,17 @@ import React from 'react' import './App.css'; import BookShelf from "./BookShelf"; import Search from './Search'; -import SearchResults from "./SearchResults"; -import SearchBar from "./SearchBar"; +import { BrowserRouter, Route, Switch } from "react-router-dom"; 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 ? ( -
        -
        -
        - - -
        -
        - -
        -
        -
        - ) : ( -
        - { - - } -
        - -
        -
        - )} -
        + + + + + + ) } } diff --git a/src/BookShelf.js b/src/BookShelf.js index bb8615a1b5..81b0d5ead4 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -102,9 +102,13 @@ class BookShelf extends Component { this.updateBookShelfState(updatedNewSection) }; + handleAddBook = () => { + this.props.history.push('/search') + } + render() { return ( -
        +

        MyReads

        @@ -119,6 +123,9 @@ class BookShelf extends Component { )) }
        +
        + +
        ) } diff --git a/src/Search.js b/src/Search.js index f18b1d6292..75a19c143e 100644 --- a/src/Search.js +++ b/src/Search.js @@ -4,11 +4,20 @@ import SearchResults from "./SearchResults"; class Search extends Component { + handleOnClick = () => { + this.props.history.push('/') + }; + render() { - return( -
        - - + return ( +
        +
        + + +
        +
        + +
        ) } diff --git a/yarn.lock b/yarn.lock index 0c375841a0..da0cd70ba8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -905,6 +905,13 @@ dependencies: regenerator-runtime "^0.12.0" +"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0": + version "7.6.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.2.tgz#c3d6e41b304ef10dcf13777a33e7694ec4a9a6dd" + integrity sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/template@^7.1.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0": version "7.6.0" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6" @@ -4273,6 +4280,11 @@ growly@^1.3.0: resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE= +gud@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" + integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== + gzip-size@5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.0.0.tgz#a55ecd99222f4c48fd8c01c625ce3b349d0a0e80" @@ -4449,6 +4461,18 @@ hex-color-regex@^1.1.0: resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== +history@^4.9.0: + version "4.10.1" + resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" + integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew== + dependencies: + "@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" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -4463,6 +4487,13 @@ hoek@4.x.x: resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb" integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA== +hoist-non-react-statics@^3.1.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" + integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA== + dependencies: + react-is "^16.7.0" + home-or-tmp@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8" @@ -5172,6 +5203,11 @@ is-wsl@^1.1.0: resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d" integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0= +isarray@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" + integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8= + isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" @@ -6014,7 +6050,7 @@ loglevel@^1.4.1: resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.4.tgz#f408f4f006db8354d0577dcf6d33485b3cb90d56" integrity sha512-p0b6mOGKcGa+7nnmKbpzR6qloPbrgLcnio++E+14Vo/XffOGwZtRpUhr8dTH/x2oCMmEoIU0Zwm3ZauhvYD17g== -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -6259,6 +6295,15 @@ mimic-fn@^2.0.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== +mini-create-react-context@^0.3.0: + version "0.3.2" + resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189" + integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw== + dependencies: + "@babel/runtime" "^7.4.0" + gud "^1.0.0" + tiny-warning "^1.0.2" + mini-css-extract-plugin@0.4.3: version "0.4.3" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz#98d60fcc5d228c3e36a9bd15a1d6816d6580beb8" @@ -7052,6 +7097,13 @@ path-to-regexp@0.1.7: resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w= +path-to-regexp@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d" + integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30= + dependencies: + isarray "0.0.1" + path-type@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441" @@ -8088,11 +8140,45 @@ react-error-overlay@^5.1.0: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d" integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q== +react-is@^16.6.0, react-is@^16.7.0: + version "16.10.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.1.tgz#0612786bf19df406502d935494f0450b40b8294f" + integrity sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw== + react-is@^16.8.1: version "16.9.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb" integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw== +react-router-dom@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.1.tgz#53caa089c291f64c1d597a52827b978b54d7c25d" + integrity sha512-r8R8H0Vt2ISqpk02rR6VZBLk+JZdR6pZV+h9K1y0ISh3/G4GGByNevYBS69x6czcOcWVRcZmXjwY8l9UBCKV+w== + dependencies: + "@babel/runtime" "^7.1.2" + history "^4.9.0" + loose-envify "^1.3.1" + prop-types "^15.6.2" + react-router "5.1.1" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + +react-router@5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.1.tgz#9d65f54795f938c0c5b69eaeef58728134ce7c7c" + integrity sha512-ozTXqxKZsn4GfZqpG5rVFHSSxlNuDoMNxgyjM+mFJVhqlnPwwkRsAPkDm1PcNjBdYxMzqAhtz48HkQB6fSYaAQ== + dependencies: + "@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" + react-scripts@2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-2.1.1.tgz#c2959a756b0b61d3090adece0d7aedd324dff8a5" @@ -8258,6 +8344,11 @@ regenerator-runtime@^0.12.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg== +regenerator-runtime@^0.13.2: + version "0.13.3" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5" + integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw== + regenerator-transform@^0.14.0: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb" @@ -8470,6 +8561,11 @@ resolve-from@^3.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" integrity sha1-six699nWiBvItuZTM17rywoYh0g= +resolve-pathname@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" + integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== + resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -9368,6 +9464,16 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= +tiny-invariant@^1.0.2: + version "1.0.6" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73" + integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA== + +tiny-warning@^1.0.0, tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tmp@^0.0.33: version "0.0.33" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" @@ -9736,6 +9842,11 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +value-equal@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" + integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== + vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" From cfd203b7c6a5abef428b723bf89e9fc9cf2735b9 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sun, 6 Oct 2019 16:45:35 -0700 Subject: [PATCH 26/41] Add call to BooksAPI --- src/App.js | 1 - src/BookList.js | 12 +------- src/Search.js | 4 --- src/SearchBar.js | 70 ++++++++++++++++++++++++++++++++++++-------- src/SearchResults.js | 24 ++++++++++----- 5 files changed, 76 insertions(+), 35 deletions(-) diff --git a/src/App.js b/src/App.js index b06a97dec3..2c1aacec69 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,4 @@ import React from 'react' -// import * as BooksAPI from './BooksAPI' import './App.css'; import BookShelf from "./BookShelf"; import Search from './Search'; diff --git a/src/BookList.js b/src/BookList.js index a6078d73ea..f15cb00817 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import Selector from './Selector'; import BookListItem from "./BookListItem"; class BookList extends Component { @@ -42,13 +41,4 @@ BookList.propTypes = { onSectionChange: PropTypes.func }; -export default BookList; - - -// { -// this.props.books.map(book => -// ( -// -// ) -// ) -// } \ No newline at end of file +export default BookList; \ No newline at end of file diff --git a/src/Search.js b/src/Search.js index 75a19c143e..b14d9b9907 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,6 +1,5 @@ import React, { Component } from 'react' import SearchBar from "./SearchBar"; -import SearchResults from "./SearchResults"; class Search extends Component { @@ -15,9 +14,6 @@ class Search extends Component {
        -
        - -
        ) } diff --git a/src/SearchBar.js b/src/SearchBar.js index b70e8b677d..1ad44990df 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -1,23 +1,69 @@ import React, { Component } from 'react' +import * as BooksAPI from './BooksAPI' +import SearchResults from "./SearchResults"; class SearchBar 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 + state = { + query: '', + results: [] + }; + + handleOnChange = (event) => { + console.log("enter data", event.target.value) + const searchParams = event.target.value; + this.setState({ + query: searchParams + } + // , + // () => { + // this.searchBooks() + // } + ); + + console.log("Changing params here", this.state.query); + }; + + // searchBooks = () => { + // if (this.state.query !== '') { + // BooksAPI.search(this.state.query) + // .then(response => { + // console.log("this is what i got from BooksApi", response); + // this.setState({ + // results: response + // }) + // }) + // .catch(error => console.log(error)); + // console.log("What is the state here?", typeof(this.state.results), this.state.results) + // } + // }; - 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. - */} - + componentDidMount() { + if (this.state.query !== '') { + BooksAPI.search(this.state.query) + .then(response => { + console.log("this is what i got from BooksApi", response); + this.setState({ + results: response + }) + }) + .catch(error => console.log(error)); + console.log("What is the state here?", typeof(this.state.results), this.state.results) + } + } + + render() { + return ( +
        + +
        ) } } - export default SearchBar; \ No newline at end of file diff --git a/src/SearchResults.js b/src/SearchResults.js index 085d849549..6fdff06435 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -1,15 +1,25 @@ import React, { Component } from 'react' -import BookList from "./BookList"; +import PropTypes from "prop-types"; class SearchResults extends Component { - render(){ - return( -
        -
          -
          + render() { + console.log("Wat is this?", typeof (this.props.books), this.props.books); + const { books } = this.props; + console.log("SearchResults", books) + return ( +
            + "show this" +
          1. one
          2. +
          3. one
          4. +
          5. {books}
          6. +
          ) } } -export default SearchResults; \ No newline at end of file +export default SearchResults; + +// SearchResults.propTypes = { +// results: PropTypes.array, +// }; From 39e5a4fd9c49c9af97939ef842cf1d4d703dd3d1 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 12 Oct 2019 11:06:45 -0700 Subject: [PATCH 27/41] wip --- src/BookShelf.js | 4 ++-- src/SearchBar.js | 40 ++++++++++++++++++++-------------------- src/SearchResults.js | 2 +- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/BookShelf.js b/src/BookShelf.js index 81b0d5ead4..f136903454 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -90,7 +90,7 @@ class BookShelf extends Component { this.setState(() => { Object.assign(prevState, newState, {}) }) - } + }; handleSectionChange = (newSection, currentSection, bookToUpdate) => { const previousSectionBooks = this.findSection(currentSection); @@ -104,7 +104,7 @@ class BookShelf extends Component { handleAddBook = () => { this.props.history.push('/search') - } + }; render() { return ( diff --git a/src/SearchBar.js b/src/SearchBar.js index 1ad44990df..5c6e1d5863 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -13,31 +13,16 @@ class SearchBar extends Component { const searchParams = event.target.value; this.setState({ query: searchParams + }, + () => { + this.searchBooks() } - // , - // () => { - // this.searchBooks() - // } ); console.log("Changing params here", this.state.query); }; - // searchBooks = () => { - // if (this.state.query !== '') { - // BooksAPI.search(this.state.query) - // .then(response => { - // console.log("this is what i got from BooksApi", response); - // this.setState({ - // results: response - // }) - // }) - // .catch(error => console.log(error)); - // console.log("What is the state here?", typeof(this.state.results), this.state.results) - // } - // }; - - componentDidMount() { + searchBooks = () => { if (this.state.query !== '') { BooksAPI.search(this.state.query) .then(response => { @@ -49,7 +34,22 @@ class SearchBar extends Component { .catch(error => console.log(error)); console.log("What is the state here?", typeof(this.state.results), this.state.results) } - } + }; + + // componentDidMount() { + // if (this.state.query !== '') { + // BooksAPI.search(this.state.query) + // .then(response => { + // console.log("this is what i got from BooksApi", response); + // this.setState({ + // query: this.state.query, + // results: response + // }) + // }) + // .catch(error => console.log(error)); + // console.log("What is the state here?", typeof(this.state.results), this.state.results) + // } + // } render() { return ( diff --git a/src/SearchResults.js b/src/SearchResults.js index 6fdff06435..916a8ec909 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -12,7 +12,7 @@ class SearchResults extends Component { "show this"
        1. one
        2. one
        3. -
        4. {books}
        5. +
        6. {books.map(book => (book))}
        7. ) } From 0b00e6f648aa7cdbf44cbe3e01fd6b28ab30e539 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 12 Oct 2019 12:41:26 -0700 Subject: [PATCH 28/41] Allows users to search books --- src/BookList.js | 15 +++++++------ src/BookListItem.js | 20 +++++++++++++++-- src/BookShelf.js | 14 ++++++------ src/Search.js | 19 ++++++++++++++++- src/SearchBar.js | 51 ++++++++++++-------------------------------- src/SearchResults.js | 20 ++++++++--------- 6 files changed, 74 insertions(+), 65 deletions(-) diff --git a/src/BookList.js b/src/BookList.js index f15cb00817..044f29f9be 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -19,13 +19,14 @@ class BookList extends Component {
            { this.props.books.map((book, index) => ( - - )) + + ) + ) }
          diff --git a/src/BookListItem.js b/src/BookListItem.js index 4981bedcc7..594a251615 100644 --- a/src/BookListItem.js +++ b/src/BookListItem.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Selector from "./Selector"; + class BookListItem extends Component { propagateSectionChange = (updatedSection) => { @@ -9,7 +10,22 @@ class BookListItem extends Component { this.props.onPropagateSectionChange(updatedSection, this.props.book) }; + loadCoverImage = () => { + const {book} = this.props; + if(book.imageLinks === undefined) { + return '' + } + + if(book.imageLinks.thumbnail === undefined) { + return book.imageLinks + } else { + return book.imageLinks.thumbnail + } + }; + render() { + let coverImage = this.loadCoverImage(); + return (
        8. @@ -17,8 +33,8 @@ class BookListItem extends Component {
          + backgroundImage: `url(${coverImage})` + }}/>
          { this.props.history.push('/') }; + handleOnSearch = (response) => { + console.log('Did I get raise to Search component?', response); + this.setState({ + results: response + }) + } + render() { return (
          - + +
          + +
          +
          ) diff --git a/src/SearchBar.js b/src/SearchBar.js index 5c6e1d5863..9b8d265e58 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -1,56 +1,36 @@ import React, { Component } from 'react' import * as BooksAPI from './BooksAPI' +import PropTypes from "prop-types"; import SearchResults from "./SearchResults"; class SearchBar extends Component { state = { - query: '', - results: [] + query: '' }; handleOnChange = (event) => { console.log("enter data", event.target.value) const searchParams = event.target.value; this.setState({ - query: searchParams - }, + query: searchParams + }, () => { - this.searchBooks() - } + this.searchBooks(searchParams) + } ); console.log("Changing params here", this.state.query); }; - searchBooks = () => { - if (this.state.query !== '') { - BooksAPI.search(this.state.query) - .then(response => { - console.log("this is what i got from BooksApi", response); - this.setState({ - results: response - }) - }) - .catch(error => console.log(error)); - console.log("What is the state here?", typeof(this.state.results), this.state.results) - } + searchBooks = searchParams => { + BooksAPI.search(searchParams) + .then(response => { + console.log("this is what i got from BooksApi", response); + this.props.onSearch(response) + }) + .catch(error => console.log(error)); }; - // componentDidMount() { - // if (this.state.query !== '') { - // BooksAPI.search(this.state.query) - // .then(response => { - // console.log("this is what i got from BooksApi", response); - // this.setState({ - // query: this.state.query, - // results: response - // }) - // }) - // .catch(error => console.log(error)); - // console.log("What is the state here?", typeof(this.state.results), this.state.results) - // } - // } - render() { return (
          @@ -59,10 +39,7 @@ class SearchBar extends Component { onChange={this.handleOnChange} placeholder="Search by title or author" /> - - -
          - ) +
          ) } } diff --git a/src/SearchResults.js b/src/SearchResults.js index 916a8ec909..01e27b67a5 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -1,25 +1,23 @@ import React, { Component } from 'react' import PropTypes from "prop-types"; +import BookList from "./BookList"; class SearchResults extends Component { - render() { - console.log("Wat is this?", typeof (this.props.books), this.props.books); const { books } = this.props; console.log("SearchResults", books) + return ( -
            - "show this" -
          1. one
          2. -
          3. one
          4. -
          5. {books.map(book => (book))}
          6. -
          + ) } } export default SearchResults; -// SearchResults.propTypes = { -// results: PropTypes.array, -// }; +SearchResults.propTypes = { + books: PropTypes.array +}; From b69ef99fa7962ffc3d7ff646a71bb17c20f76bf4 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 12 Oct 2019 14:24:56 -0700 Subject: [PATCH 29/41] Fix search bar results to handle undefined value --- src/Search.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/Search.js b/src/Search.js index a508e639f2..325e485377 100644 --- a/src/Search.js +++ b/src/Search.js @@ -12,11 +12,12 @@ class Search extends Component { }; handleOnSearch = (response) => { - console.log('Did I get raise to Search component?', response); - this.setState({ - results: response - }) - } + if(response !== undefined) { + this.setState({ + results: response + }) + } + }; render() { return ( From fbce2fda1d53ebe6e610c718e2ea449cce246c1d Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 12 Oct 2019 22:05:43 -0700 Subject: [PATCH 30/41] Fix errors that were recieved from BooksAPI during book search --- src/BookList.js | 33 ++++++++++++++++----------------- src/Search.js | 17 ++++++++++------- src/SearchBar.js | 8 +++++--- 3 files changed, 31 insertions(+), 27 deletions(-) diff --git a/src/BookList.js b/src/BookList.js index 044f29f9be..05d913b277 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -11,25 +11,24 @@ class BookList extends Component { render() { console.log(this.props); + const { books, section } = this.props; return ( -
          -
          -

          {this.props.section}

          -
          -
            - { - this.props.books.map((book, index) => ( - - ) +
            +

            {this.props.section}

            +
            +
              + { + books.map((book, index) => ( + ) - } -
            -
            + ) + } +
          ) diff --git a/src/Search.js b/src/Search.js index 325e485377..6d33816ce6 100644 --- a/src/Search.js +++ b/src/Search.js @@ -12,19 +12,22 @@ class Search extends Component { }; handleOnSearch = (response) => { - if(response !== undefined) { - this.setState({ - results: response - }) - } + this.setState({ + results: response + }) + }; render() { return (
          - - + +
          diff --git a/src/SearchBar.js b/src/SearchBar.js index 9b8d265e58..40e2beef30 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -1,7 +1,5 @@ import React, { Component } from 'react' import * as BooksAPI from './BooksAPI' -import PropTypes from "prop-types"; -import SearchResults from "./SearchResults"; class SearchBar extends Component { state = { @@ -26,7 +24,11 @@ class SearchBar extends Component { BooksAPI.search(searchParams) .then(response => { console.log("this is what i got from BooksApi", response); - this.props.onSearch(response) + if(response.error === "empty query"){ + return response.items + } else { + this.props.onSearch(response) + } }) .catch(error => console.log(error)); }; From d392110d8bf3af047b2d847f9f3a05ce3cbb9767 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sun, 13 Oct 2019 20:21:37 -0700 Subject: [PATCH 31/41] Fix main page --- src/BookList.js | 13 ++++---- src/BookListItem.js | 36 +++++++++++++++++----- src/BookShelf.js | 71 ++++++++++++++++---------------------------- src/Search.js | 3 +- src/SearchBar.js | 2 +- src/SearchResults.js | 2 +- src/Section.js | 7 +++-- src/Selector.js | 38 +++++++++++++++--------- 8 files changed, 93 insertions(+), 79 deletions(-) diff --git a/src/BookList.js b/src/BookList.js index 05d913b277..bc8fa7a044 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -11,17 +11,18 @@ class BookList extends Component { render() { console.log(this.props); - const { books, section } = this.props; + const { bookIds, section } = this.props; + return (
          -

          {this.props.section}

          +

          {section}

            { - books.map((book, index) => ( + bookIds.map((bookId) => ( @@ -36,7 +37,7 @@ class BookList extends Component { } BookList.propTypes = { - books: PropTypes.array.isRequired, + books: PropTypes.array, section: PropTypes.string.isRequired, onSectionChange: PropTypes.func }; diff --git a/src/BookListItem.js b/src/BookListItem.js index 594a251615..c85a380dc7 100644 --- a/src/BookListItem.js +++ b/src/BookListItem.js @@ -1,9 +1,13 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Selector from "./Selector"; +import * as BooksAPI from './BooksAPI'; class BookListItem extends Component { + state = { + book: {}, + } propagateSectionChange = (updatedSection) => { console.log("Inside BookListItem", updatedSection, this.props.book) @@ -11,21 +15,38 @@ class BookListItem extends Component { }; loadCoverImage = () => { - const {book} = this.props; - if(book.imageLinks === undefined) { + const { book } = this.state; + if (book.imageLinks === undefined) { return '' } - if(book.imageLinks.thumbnail === undefined) { + if (book.imageLinks.thumbnail === undefined) { return book.imageLinks } else { return book.imageLinks.thumbnail } }; + fetchCurrentBook = () => { + const bookId = this.props.bookId; + BooksAPI.get(bookId) + .then(response => + this.setState({ + book: response, + }) + ) + } + + componentDidMount() { + this.fetchCurrentBook(); + } + render() { let coverImage = this.loadCoverImage(); + const { section, bookId } = this.props; + const { book } = this.state; + console.log("Inside BookListItem", section, bookId) return (
          1. @@ -37,13 +58,14 @@ class BookListItem extends Component { }}/>
            -
            {this.props.book.title}
            -
            {this.props.book.author}
            +
            {book.title}
            +
            {book.author}
        9. ) @@ -51,7 +73,7 @@ class BookListItem extends Component { } BookListItem.propTypes = { - book: PropTypes.object.isRequired, + bookId: PropTypes.string.isRequired, section: PropTypes.string.isRequired, onPropagateSectionChange: PropTypes.func }; diff --git a/src/BookShelf.js b/src/BookShelf.js index 5bded516c7..8db8d3bb0f 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -5,69 +5,43 @@ class BookShelf extends Component { state = { sectionDetails: [ { - name: 'Currently Reading', - books: [ - { - title: 'To Kill a Mockingbird', - author: 'Harper Lee', - imageLinks: 'http://books.google.com/books/content?id=PGR2AwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73-GnPVEyb7MOCxDzOYF1PTQRuf6nCss9LMNOSWBpxBrz8Pm2_mFtWMMg_Y1dx92HT7cUoQBeSWjs3oEztBVhUeDFQX6-tWlWz1-feexS0mlJPjotcwFqAg6hBYDXuK_bkyHD-y&source=gbs_api' - }, - { - title: 'Ender\'s Game', - author: 'Orson Scott Card', - imageLinks: 'http://books.google.com/books/content?id=yDtCuFHXbAYC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72RRiTR6U5OUg3IY_LpHTL2NztVWAuZYNFE8dUuC0VlYabeyegLzpAnDPeWxE6RHi0C2ehrR9Gv20LH2dtjpbcUcs8YnH5VCCAH0Y2ICaKOTvrZTCObQbsfp4UbDqQyGISCZfGN&source=gbs_api' - }, - + name: "Currently Reading", + key: 'currentlyReading', + bookIds: [ + "nggnmAEACAAJ", "sJf1vQAACAAJ" ] }, { name: 'Want To Read', - books: [ - { - title: '1776', - author: 'David McCullough', - imageLinks: 'http://books.google.com/books/content?id=uu1mC6zWNTwC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73pGHfBNSsJG9Y8kRBpmLUft9O4BfItHioHolWNKOdLavw-SLcXADy3CPAfJ0_qMb18RmCa7Ds1cTdpM3dxAGJs8zfCfm8c6ggBIjzKT7XR5FIB53HHOhnsT7a0Cc-PpneWq9zX&source=gbs_api' - } - , - { - title: 'Harry Potter and the Sorcerer\'s Stone', - author: 'J.K. Rowling', - imageLinks: 'http://books.google.com/books/content?id=wrOQLV6xB-wC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72G3gA5A-Ka8XjOZGDFLAoUeMQBqZ9y-LCspZ2dzJTugcOcJ4C7FP0tDA8s1h9f480ISXuvYhA_ZpdvRArUL-mZyD4WW7CHyEqHYq9D3kGnrZCNiqxSRhry8TiFDCMWP61ujflB&source=gbs_api' - } + key: 'wantToRead', + bookIds: [ + "jAUODAAAQBAJ", "IOejDAAAQBAJ", + "1wy49i-gQjIC", "qIjQjgEACAAJ", + "qXXHAgAAQBAJ", "PFIfAQAAIAAJ" ] }, { name: 'Read', - books: [ - { - title: 'The Hobbit', - author: 'J.R.R. Tolkien', - imageLinks: 'http://books.google.com/books/content?id=pD6arNyKyi8C&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE70Rw0CCwNZh0SsYpQTkMbvz23npqWeUoJvVbi_gXla2m2ie_ReMWPl0xoU8Quy9fk0Zhb3szmwe8cTe4k7DAbfQ45FEzr9T7Lk0XhVpEPBvwUAztOBJ6Y0QPZylo4VbB7K5iRSk&source=gbs_api' - }, - { - title: 'Oh, the Places You\'ll Go!', - author: 'Seuss', - imageLinks: 'http://books.google.com/books/content?id=1q_xAwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE712CA0cBYP8VKbEcIVEuFJRdX1k30rjLM29Y-dw_qU1urEZ2cQ42La3Jkw6KmzMmXIoLTr50SWTpw6VOGq1leINsnTdLc_S5a5sn9Hao2t5YT7Ax1RqtQDiPNHIyXP46Rrw3aL8&source=gbs_api' - }, - { - title: 'The Adventures of Tom Sawyer', - author: 'Mark Twain', - imageLinks: 'http://books.google.com/books/content?id=32haAAAAMAAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72yckZ5f5bDFVIf7BGPbjA0KYYtlQ__nWB-hI_YZmZ-fScYwFy4O_fWOcPwf-pgv3pPQNJP_sT5J_xOUciD8WaKmevh1rUR-1jk7g1aCD_KeJaOpjVu0cm_11BBIUXdxbFkVMdi&source=gbs_api' - } + key: 'read', + bookIds: [ + "evuwdDLfAyYC", "74XNzF_al3MC", + "5bgEyjAtLhEC", "Du_mTZwlWRUC" ] } ] }; findSection = (searchSection) => { + console.log("What am I searching here?", searchSection) return this.state.sectionDetails.find(section => ( section.name === searchSection )) }; removeBookFromSection = (section, bookToRemove) => { - const books = section.books.filter(book => ( - book.title !== bookToRemove.title + console.log("Inside removeBook", bookToRemove, section); + const books = section.books.filter(book => ( + book.title !== bookToRemove.title )); return { @@ -77,7 +51,8 @@ class BookShelf extends Component { }; addBookToSection = (section, bookToAdd) => { - const books = section.books.concat(bookToAdd); + console.log("Inside addBookToSection", section, bookToAdd) + const books = section.books.concat(bookToAdd); return { ...section, @@ -86,19 +61,25 @@ class BookShelf extends Component { }; updateBookShelfState = (newState) => { - const prevState = this.findSection(newState.name) + const prevState = this.findSection(newState.name); this.setState(() => { Object.assign(prevState, newState, {}) }) }; handleSectionChange = (newSection, currentSection, bookToUpdate) => { + console.log('not here tough') + console.log("Inside BookShelf", newSection, currentSection, bookToUpdate); + const previousSectionBooks = this.findSection(currentSection); + console.log("Previous section books", previousSectionBooks) const updatedPreviousSection = this.removeBookFromSection(previousSectionBooks, bookToUpdate) this.updateBookShelfState(updatedPreviousSection); + console.log("New section ----> ", newSection); const updateNewSection = this.findSection(newSection); const updatedNewSection = this.addBookToSection(updateNewSection, bookToUpdate) + console.log("What is the value of updateNewSection", updatedNewSection) this.updateBookShelfState(updatedNewSection) }; diff --git a/src/Search.js b/src/Search.js index 6d33816ce6..4bf9436fd0 100644 --- a/src/Search.js +++ b/src/Search.js @@ -5,7 +5,7 @@ import SearchResults from "./SearchResults"; class Search extends Component { state = { results: [] - } + }; handleOnClick = () => { this.props.history.push('/') @@ -15,7 +15,6 @@ class Search extends Component { this.setState({ results: response }) - }; render() { diff --git a/src/SearchBar.js b/src/SearchBar.js index 40e2beef30..ef8e75f7e6 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -6,7 +6,7 @@ class SearchBar extends Component { query: '' }; - handleOnChange = (event) => { + handleOnChange = event => { console.log("enter data", event.target.value) const searchParams = event.target.value; this.setState({ diff --git a/src/SearchResults.js b/src/SearchResults.js index 01e27b67a5..1e26e0f422 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -9,7 +9,7 @@ class SearchResults extends Component { return ( ) diff --git a/src/Section.js b/src/Section.js index ec5fa416d0..894e327da1 100644 --- a/src/Section.js +++ b/src/Section.js @@ -8,14 +8,15 @@ class Section extends Component { console.log("Inside Section", updatedSection, currentSection, book); this.props.onSectionChange(updatedSection, currentSection, book); }; + render() { console.log(this.props.section); - + const { section } = this.props; return (
          diff --git a/src/Selector.js b/src/Selector.js index 2d2e418344..c09899449d 100644 --- a/src/Selector.js +++ b/src/Selector.js @@ -1,42 +1,52 @@ -import React, {Component} from 'react' +import React, { Component } from 'react' import PropTypes from 'prop-types'; +import * as BooksAPI from './BooksAPI' -class Selector extends Component{ +class Selector extends Component { state = { newSelection: '' }; - updateSelection = (value) => { - this.setState({ - newSelection: value - }); + updateSelection = (section) => { + const { book } = this.props; + console.log('here', book.id, section); + BooksAPI.update(book, section) + .then(response => { + console.log('here too?', response); + this.setState({ + newSelection: section + }, + () => this.props.onSelectorClick(response) + ) + } + ).catch(error => console.log(error)) }; handleSelection = (event) => { event.preventDefault(); const selectionValue = event.target.value; - if(this.props.currentSelection !== selectionValue ){ + if (this.props.currentSelection !== selectionValue) { this.updateSelection(selectionValue) - this.props.onSelectorClick(selectionValue) } }; render() { - return( + return ( ) } } -Selector.propTypes={ +Selector.propTypes = { currentSection: PropTypes.string.isRequired, - onSelectorClick: PropTypes.func + onSelectorClick: PropTypes.func, + book: PropTypes.object.isRequired } export default Selector; From 22333f60fba1ef0d55ae0bf5f3791bcc9a618687 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sun, 27 Oct 2019 15:16:53 -0700 Subject: [PATCH 32/41] Fix books main page. Show books shelf as defualt in selector --- package.json | 3 +- src/BookList.js | 14 ++-- src/BookListItem.js | 29 ++----- src/BookShelf.js | 135 ++++++++++++++++++-------------- src/SearchResults.js | 9 ++- src/Section.js | 4 +- src/Selector.js | 39 +++------- yarn.lock | 178 ++++++++++++++++++++++++++++++++++++++++++- 8 files changed, 282 insertions(+), 129 deletions(-) diff --git a/package.json b/package.json index 9b3eaf7915..0531b3870b 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "react": "^16.6.3", "react-dom": "^16.6.3", "react-router-dom": "^5.1.1", - "react-scripts": "2.1.1" + "react-scripts": "2.1.1", + "react-select": "^3.0.8" }, "scripts": { "start": "react-scripts start", diff --git a/src/BookList.js b/src/BookList.js index bc8fa7a044..d86ca822fe 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -10,8 +10,8 @@ class BookList extends Component { }; render() { - console.log(this.props); - const { bookIds, section } = this.props; + console.log("Props for BookList", this.props); + const { books, section } = this.props; return (
          @@ -19,11 +19,11 @@ class BookList extends Component {
            { - bookIds.map((bookId) => ( + books.map((book) => ( ) @@ -38,7 +38,7 @@ class BookList extends Component { BookList.propTypes = { books: PropTypes.array, - section: PropTypes.string.isRequired, + section: PropTypes.string, onSectionChange: PropTypes.func }; diff --git a/src/BookListItem.js b/src/BookListItem.js index c85a380dc7..e02d3e3b22 100644 --- a/src/BookListItem.js +++ b/src/BookListItem.js @@ -1,13 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Selector from "./Selector"; -import * as BooksAPI from './BooksAPI'; - class BookListItem extends Component { - state = { - book: {}, - } propagateSectionChange = (updatedSection) => { console.log("Inside BookListItem", updatedSection, this.props.book) @@ -15,7 +10,7 @@ class BookListItem extends Component { }; loadCoverImage = () => { - const { book } = this.state; + const { book } = this.props; if (book.imageLinks === undefined) { return '' } @@ -27,26 +22,11 @@ class BookListItem extends Component { } }; - fetchCurrentBook = () => { - const bookId = this.props.bookId; - BooksAPI.get(bookId) - .then(response => - this.setState({ - book: response, - }) - ) - } - - componentDidMount() { - this.fetchCurrentBook(); - } - render() { let coverImage = this.loadCoverImage(); - const { section, bookId } = this.props; - const { book } = this.state; + const { section, book } = this.props; - console.log("Inside BookListItem", section, bookId) + console.log("Inside BookListItem", section, book) return (
          1. @@ -60,6 +40,7 @@ class BookListItem extends Component {
            @@ -73,7 +54,7 @@ class BookListItem extends Component { } BookListItem.propTypes = { - bookId: PropTypes.string.isRequired, + book: PropTypes.object.isRequired, section: PropTypes.string.isRequired, onPropagateSectionChange: PropTypes.func }; diff --git a/src/BookShelf.js b/src/BookShelf.js index 8db8d3bb0f..971209cea7 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -1,93 +1,110 @@ import React, { Component } from 'react'; import Section from "./Section"; +import * as BooksAPI from './BooksAPI'; class BookShelf extends Component { state = { - sectionDetails: [ - { - name: "Currently Reading", - key: 'currentlyReading', - bookIds: [ - "nggnmAEACAAJ", "sJf1vQAACAAJ" - ] - }, + sections: [ { name: 'Want To Read', key: 'wantToRead', - bookIds: [ - "jAUODAAAQBAJ", "IOejDAAAQBAJ", - "1wy49i-gQjIC", "qIjQjgEACAAJ", - "qXXHAgAAQBAJ", "PFIfAQAAIAAJ" - ] + books: [] }, + { name: 'Read', key: 'read', - bookIds: [ - "evuwdDLfAyYC", "74XNzF_al3MC", - "5bgEyjAtLhEC", "Du_mTZwlWRUC" - ] + books: [] + }, + { + name: 'Currently Reading', + key: 'currentlyReading', + books: [] } ] }; - findSection = (searchSection) => { - console.log("What am I searching here?", searchSection) - return this.state.sectionDetails.find(section => ( - section.name === searchSection - )) + updateBookShelfState = (newState) => { + this.setState({ + sections: newState + }) + }; - removeBookFromSection = (section, bookToRemove) => { - console.log("Inside removeBook", bookToRemove, section); - const books = section.books.filter(book => ( - book.title !== bookToRemove.title - )); + buildSection = (response) => { + let sectionBooks = []; - return { - ...section, - books - } - }; + let readSection = { + name: 'Read', + key: 'read', + books: [] + }; - addBookToSection = (section, bookToAdd) => { - console.log("Inside addBookToSection", section, bookToAdd) - const books = section.books.concat(bookToAdd); + let currentlyReading = { + name: 'Currently Reading', + key: 'currentlyReading', + books: [] + }; - return { - ...section, - books - } - }; + let wantToRead = { + name: 'Want To Read', + key: 'wantToRead', + books: [] + }; - updateBookShelfState = (newState) => { - const prevState = this.findSection(newState.name); - this.setState(() => { - Object.assign(prevState, newState, {}) - }) - }; + currentlyReading['books'] = this.filterBooksForSection(response, 'currentlyReading'); + sectionBooks.push(currentlyReading); - handleSectionChange = (newSection, currentSection, bookToUpdate) => { - console.log('not here tough') - console.log("Inside BookShelf", newSection, currentSection, bookToUpdate); + wantToRead['books'] = this.filterBooksForSection(response, 'wantToRead'); + sectionBooks.push(wantToRead); - const previousSectionBooks = this.findSection(currentSection); - console.log("Previous section books", previousSectionBooks) - const updatedPreviousSection = this.removeBookFromSection(previousSectionBooks, bookToUpdate) - this.updateBookShelfState(updatedPreviousSection); + readSection['books'] = this.filterBooksForSection(response, 'read') + sectionBooks.push(readSection); + + return sectionBooks + }; - console.log("New section ----> ", newSection); - const updateNewSection = this.findSection(newSection); - const updatedNewSection = this.addBookToSection(updateNewSection, bookToUpdate) - console.log("What is the value of updateNewSection", updatedNewSection) - this.updateBookShelfState(updatedNewSection) + filterBooksForSection = (response, key) => { + return response.filter((book) => + book.shelf === key + ); }; handleAddBook = () => { this.props.history.push('/search') }; + componentDidMount() { + BooksAPI.getAll() + .then(resp => { + return this.buildSection(resp) + }) + .then(result => { + console.log("Result:", result) + return this.updateBookShelfState(result) + } + ) + } + + updateSelection = (newSection, book) => { + BooksAPI.update(book, newSection) + .then(response => { + this.updateBookShelfState(response) + } + ); + + this.props.history.push('/') + }; + + handleSectionChange = (newSection, oldSection, book) => { + this.updateSelection(newSection, book) + }; + + render() { + const { sections } = this.state; + console.log("Rendering...."); + return (
            @@ -95,7 +112,7 @@ class BookShelf extends Component {
            { - this.state.sectionDetails.map((section, index) => ( + sections.map((section, index) => (
            ) } @@ -19,5 +19,6 @@ class SearchResults extends Component { export default SearchResults; SearchResults.propTypes = { - books: PropTypes.array + books: PropTypes.array, + onSectionChange: PropTypes.func }; diff --git a/src/Section.js b/src/Section.js index 894e327da1..cdbe34d2bb 100644 --- a/src/Section.js +++ b/src/Section.js @@ -5,17 +5,15 @@ import BookList from "./BookList"; class Section extends Component { handleSectionChangePropogation = (updatedSection, currentSection, book) => { - console.log("Inside Section", updatedSection, currentSection, book); this.props.onSectionChange(updatedSection, currentSection, book); }; render() { - console.log(this.props.section); const { section } = this.props; return (
            diff --git a/src/Selector.js b/src/Selector.js index c09899449d..b20b4749e5 100644 --- a/src/Selector.js +++ b/src/Selector.js @@ -1,38 +1,25 @@ import React, { Component } from 'react' import PropTypes from 'prop-types'; -import * as BooksAPI from './BooksAPI' class Selector extends Component { - state = { - newSelection: '' - }; - updateSelection = (section) => { - const { book } = this.props; - console.log('here', book.id, section); - BooksAPI.update(book, section) - .then(response => { - console.log('here too?', response); - this.setState({ - newSelection: section - }, - () => this.props.onSelectorClick(response) - ) - } - ).catch(error => console.log(error)) - }; + state = { + value: 'currentlyReading' + } - handleSelection = (event) => { + handleSelectionChangeEvent = (event) => { event.preventDefault(); const selectionValue = event.target.value; - if (this.props.currentSelection !== selectionValue) { - this.updateSelection(selectionValue) + if (this.props.currentSection !== selectionValue) { + this.setState({value: selectionValue}) + this.props.onSelectorClick(selectionValue) } }; + render() { return ( - @@ -45,12 +32,8 @@ class Selector extends Component { Selector.propTypes = { currentSection: PropTypes.string.isRequired, + currentSectionKey: PropTypes.string.isRequired, onSelectorClick: PropTypes.func, book: PropTypes.object.isRequired } -export default Selector; - -//Algorithm: -// Props will send currentSelector. -//Match currentSelector to new selector. -// if selector is changed raise the newSelection state up tp the parent to inform that the selection has been updated. +export default Selector; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index da0cd70ba8..c70576ad8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -912,6 +912,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5": + version "7.6.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f" + integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/template@^7.1.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0": version "7.6.0" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6" @@ -950,6 +957,83 @@ resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw== +"@emotion/cache@^10.0.17", "@emotion/cache@^10.0.9": + version "10.0.19" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.19.tgz#d258d94d9c707dcadaf1558def968b86bb87ad71" + integrity sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ== + dependencies: + "@emotion/sheet" "0.9.3" + "@emotion/stylis" "0.8.4" + "@emotion/utils" "0.11.2" + "@emotion/weak-memoize" "0.2.4" + +"@emotion/core@^10.0.9": + version "10.0.22" + resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177" + integrity sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA== + dependencies: + "@babel/runtime" "^7.5.5" + "@emotion/cache" "^10.0.17" + "@emotion/css" "^10.0.22" + "@emotion/serialize" "^0.11.12" + "@emotion/sheet" "0.9.3" + "@emotion/utils" "0.11.2" + +"@emotion/css@^10.0.22", "@emotion/css@^10.0.9": + version "10.0.22" + resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.22.tgz#37b1abb6826759fe8ac0af0ac0034d27de6d1793" + integrity sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA== + dependencies: + "@emotion/serialize" "^0.11.12" + "@emotion/utils" "0.11.2" + babel-plugin-emotion "^10.0.22" + +"@emotion/hash@0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f" + integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw== + +"@emotion/memoize@0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78" + integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow== + +"@emotion/serialize@^0.11.12": + version "0.11.13" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.13.tgz#49b93e8e6f7dba70bbf0ecd697bb4e03f45d8cde" + integrity sha512-Tw+z6oIFCXeznoH25TozFoOUJ9BIyKBgZ9Gif3ej9aqPeP/Dzct8WIXSsz08xxyt1RPlKokvJ3fzMDq0UjL3RQ== + dependencies: + "@emotion/hash" "0.7.3" + "@emotion/memoize" "0.7.3" + "@emotion/unitless" "0.7.4" + "@emotion/utils" "0.11.2" + csstype "^2.5.7" + +"@emotion/sheet@0.9.3": + version "0.9.3" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a" + integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A== + +"@emotion/stylis@0.8.4": + version "0.8.4" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c" + integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ== + +"@emotion/unitless@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677" + integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ== + +"@emotion/utils@0.11.2": + version "0.11.2" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183" + integrity sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA== + +"@emotion/weak-memoize@0.2.4": + version "0.2.4" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc" + integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA== + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -1645,6 +1729,22 @@ babel-plugin-dynamic-import-node@^2.3.0: dependencies: object.assign "^4.1.0" +babel-plugin-emotion@^10.0.22: + version "10.0.22" + resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.22.tgz#7860b39f96dcc1b79e326987ce29d4fcfff96f52" + integrity sha512-e3Yo9+GD6ovrcZlt2Unjgfyy0gfdz0+8httltToWL+biFMhLPPT1PJlc0GHy9i+vtPSrTBNY2hawfPJnuG2L3g== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@emotion/hash" "0.7.3" + "@emotion/memoize" "0.7.3" + "@emotion/serialize" "^0.11.12" + babel-plugin-macros "^2.0.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + escape-string-regexp "^1.0.5" + find-root "^1.1.0" + source-map "^0.5.7" + babel-plugin-istanbul@^4.1.6: version "4.1.6" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45" @@ -1668,11 +1768,25 @@ babel-plugin-macros@2.4.2: cosmiconfig "^5.0.5" resolve "^1.8.1" +babel-plugin-macros@^2.0.0: + version "2.6.1" + resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181" + integrity sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ== + dependencies: + "@babel/runtime" "^7.4.2" + cosmiconfig "^5.2.0" + resolve "^1.10.0" + babel-plugin-named-asset-import@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.2.3.tgz#b40ed50a848e7bb0a2a7e34d990d1f9d46fe9b38" integrity sha512-9mx2Z9M4EGbutvXxoLV7aUBCY6ps3sqLFl094FeA2tFQzQffIh0XSsmwwQRxiSfpg3rnb5x/o46qRLxS/OzFTg== +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= + babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -2530,7 +2644,7 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== -convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.1: +convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1: version "1.6.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20" integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A== @@ -2587,7 +2701,7 @@ core-util-is@1.0.2, core-util-is@~1.0.0: resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= -cosmiconfig@^5.0.0, cosmiconfig@^5.0.5, cosmiconfig@^5.0.6: +cosmiconfig@^5.0.0, cosmiconfig@^5.0.5, cosmiconfig@^5.0.6, cosmiconfig@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a" integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA== @@ -2858,6 +2972,11 @@ cssstyle@^1.0.0, cssstyle@^1.2.2: dependencies: cssom "0.3.x" +csstype@^2.5.7: + version "2.6.7" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" + integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ== + cyclist@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" @@ -3126,6 +3245,13 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-helpers@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" + integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== + dependencies: + "@babel/runtime" "^7.1.2" + dom-serializer@0: version "0.2.1" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.1.tgz#13650c850daffea35d8b626a4cfc4d3a17643fdb" @@ -3924,6 +4050,11 @@ find-cache-dir@^2.0.0: make-dir "^2.0.0" pkg-dir "^3.0.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@3.0.0, find-up@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73" @@ -6168,6 +6299,11 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" +memoize-one@^5.0.0: + version "5.1.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" + integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== + memory-fs@^0.4.0, memory-fs@~0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -7914,7 +8050,7 @@ prompts@^0.1.9: kleur "^2.0.1" sisteransi "^0.1.1" -prop-types@^15.6.2: +prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8140,6 +8276,13 @@ react-error-overlay@^5.1.0: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d" integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q== +react-input-autosize@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2" + integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw== + dependencies: + prop-types "^15.5.8" + react-is@^16.6.0, react-is@^16.7.0: version "16.10.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.1.tgz#0612786bf19df406502d935494f0450b40b8294f" @@ -8150,6 +8293,11 @@ react-is@^16.8.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb" integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw== +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react-router-dom@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.1.tgz#53caa089c291f64c1d597a52827b978b54d7c25d" @@ -8234,6 +8382,30 @@ react-scripts@2.1.1: optionalDependencies: fsevents "1.2.4" +react-select@^3.0.8: + version "3.0.8" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.0.8.tgz#06ff764e29db843bcec439ef13e196865242e0c1" + integrity sha512-v9LpOhckLlRmXN5A6/mGGEft4FMrfaBFTGAnuPHcUgVId7Je42kTq9y0Z+Ye5z8/j0XDT3zUqza8gaRaI1PZIg== + dependencies: + "@babel/runtime" "^7.4.4" + "@emotion/cache" "^10.0.9" + "@emotion/core" "^10.0.9" + "@emotion/css" "^10.0.9" + memoize-one "^5.0.0" + prop-types "^15.6.0" + react-input-autosize "^2.2.2" + react-transition-group "^2.2.1" + +react-transition-group@^2.2.1: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" + integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== + dependencies: + dom-helpers "^3.4.0" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-lifecycles-compat "^3.0.4" + react@^16.6.3: version "16.9.0" resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa" From ec0a0b660d84100acbd450f15d1236158a0e2584 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sun, 27 Oct 2019 19:11:46 -0700 Subject: [PATCH 33/41] Refactor main page to allow user to move books from one shelf to another --- src/BookShelf.js | 25 ++++--------------------- 1 file changed, 4 insertions(+), 21 deletions(-) diff --git a/src/BookShelf.js b/src/BookShelf.js index 971209cea7..7e27b92960 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -4,31 +4,15 @@ import * as BooksAPI from './BooksAPI'; class BookShelf extends Component { state = { - sections: [ - { - name: 'Want To Read', - key: 'wantToRead', - books: [] - }, - - { - name: 'Read', - key: 'read', - books: [] - }, - { - name: 'Currently Reading', - key: 'currentlyReading', - books: [] - } - ] + sections: [] }; updateBookShelfState = (newState) => { + const { sections } = this.state; + this.setState({ - sections: newState + sections: Object.assign(sections, newState, {}) }) - }; buildSection = (response) => { @@ -103,7 +87,6 @@ class BookShelf extends Component { render() { const { sections } = this.state; - console.log("Rendering...."); return (
            From f0890b2afe20830a2deae9f7818de13a87de39bb Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Mon, 28 Oct 2019 20:10:30 -0700 Subject: [PATCH 34/41] Fix search open and close links --- package.json | 2 +- src/App.css | 4 ++-- src/App.js | 25 +++++++++++++++++++++++-- src/BookList.js | 3 ++- src/BookShelf.js | 29 ++++++++++++++++++++++------- src/Search.js | 17 ++++++++++------- src/SearchResults.js | 6 ++++++ src/Section.js | 12 +++++------- yarn.lock | 18 +++++++++--------- 9 files changed, 80 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 0531b3870b..b41d968e30 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "prop-types": "^15.6.2", "react": "^16.6.3", "react-dom": "^16.6.3", - "react-router-dom": "^5.1.1", + "react-router-dom": "^5.1.2", "react-scripts": "2.1.1", "react-select": "^3.0.8" }, diff --git a/src/App.css b/src/App.css index 28960adf8f..bd1e781ea0 100644 --- a/src/App.css +++ b/src/App.css @@ -53,7 +53,7 @@ body, .app { bottom: 25px; } -.open-search button { +.open-search a { display: block; width: 50px; height: 50px; @@ -68,7 +68,7 @@ body, .app { outline: 0; } -.open-search button:hover { +.open-search a:hover { background-color: rgb(0, 102, 0); } diff --git a/src/App.js b/src/App.js index 2c1aacec69..4eec297baf 100644 --- a/src/App.js +++ b/src/App.js @@ -5,12 +5,33 @@ import Search from './Search'; import { BrowserRouter, Route, Switch } from "react-router-dom"; class BooksApp extends React.Component { + state = { + sectionChange: false, + updatedSectionDetails: { + updatedSection: '', + currentSection: '', + book: {} + } + } + + onSectionChange = (updatedSection, currentSection, book) => { + console.log("Inside App", updatedSection, currentSection, book); + this.setState({ + sectionChange: !this.state.sectionChange, + updatedSectionDetails: { + updatedSection: updatedSection, + currentSection: currentSection, + book: book + } + }, () => console.log('state', this.state) ) + } + render() { return ( - - + }/> + }/> ) diff --git a/src/BookList.js b/src/BookList.js index d86ca822fe..5d5ff633a7 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -6,7 +6,8 @@ class BookList extends Component { handleOnPropagateSectionChange = (updatedSection, book) => { console.log("Inside BookList", updatedSection, book) - this.props.onSectionChange(updatedSection, this.props.section, book); + const currentSection = this.props.section || 'None'; + this.props.onSectionChange(updatedSection, currentSection, book); }; render() { diff --git a/src/BookShelf.js b/src/BookShelf.js index 7e27b92960..f255020c90 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import Section from "./Section"; import * as BooksAPI from './BooksAPI'; +import PropTypes from "prop-types"; +import {Link} from 'react-router-dom'; class BookShelf extends Component { state = { @@ -55,16 +57,19 @@ class BookShelf extends Component { }; handleAddBook = () => { + console.log(this.props.history) this.props.history.push('/search') }; componentDidMount() { + console.log(this.props.updateSection); + this.updateBookShelfState(this.updateSection) + BooksAPI.getAll() .then(resp => { return this.buildSection(resp) }) .then(result => { - console.log("Result:", result) return this.updateBookShelfState(result) } ) @@ -73,21 +78,29 @@ class BookShelf extends Component { updateSelection = (newSection, book) => { BooksAPI.update(book, newSection) .then(response => { - this.updateBookShelfState(response) + return this.updateBookShelfState(response) } ); - - this.props.history.push('/') }; handleSectionChange = (newSection, oldSection, book) => { this.updateSelection(newSection, book) }; + updateSearchedBook = () => { + if(this.props.shelfChange === true) { + console.log("Updating shelf", this.props.updatedSectionDetails['updatedSection'], + this.props.updatedSectionDetails['book']) + + this.updateSelection( + this.props.updatedSectionDetails['updatedSection'], + this.props.updatedSectionDetails['book'] + ) + } + } render() { const { sections } = this.state; - return (
            @@ -105,12 +118,14 @@ class BookShelf extends Component { }
            - + Add a book
            ) } } - +BookShelf.propTypes = { + updateSection: PropTypes.object +}; export default BookShelf; diff --git a/src/Search.js b/src/Search.js index 4bf9436fd0..7da211a81c 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,37 +1,40 @@ import React, { Component } from 'react' import SearchBar from "./SearchBar"; import SearchResults from "./SearchResults"; +import { Link } from 'react-router-dom'; class Search extends Component { state = { results: [] }; - handleOnClick = () => { - this.props.history.push('/') - }; - handleOnSearch = (response) => { this.setState({ results: response }) }; + onSectionChange = (updatedSection, currentSection, book) => { + console.log('Inside Search'); + this.props.onSectionChange(updatedSection, currentSection, book); + }; + render() { return (
            - +
            diff --git a/src/SearchResults.js b/src/SearchResults.js index 038c6da884..7df58d46b6 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -4,6 +4,11 @@ import BookList from "./BookList"; class SearchResults extends Component { + handleSectionChangePropogation = (updatedSection, currentSection, book) => { + console.log("Inside SearchResults") + this.props.onSectionChange(updatedSection, currentSection, book); + }; + render() { const { books } = this.props; @@ -11,6 +16,7 @@ class SearchResults extends Component { ) } diff --git a/src/Section.js b/src/Section.js index cdbe34d2bb..cf5f119f59 100644 --- a/src/Section.js +++ b/src/Section.js @@ -11,13 +11,11 @@ class Section extends Component { render() { const { section } = this.props; return ( -
            - -
            + ) } } diff --git a/yarn.lock b/yarn.lock index c70576ad8d..930349abd7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8298,23 +8298,23 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-router-dom@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.1.tgz#53caa089c291f64c1d597a52827b978b54d7c25d" - integrity sha512-r8R8H0Vt2ISqpk02rR6VZBLk+JZdR6pZV+h9K1y0ISh3/G4GGByNevYBS69x6czcOcWVRcZmXjwY8l9UBCKV+w== +react-router-dom@^5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18" + integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew== dependencies: "@babel/runtime" "^7.1.2" history "^4.9.0" loose-envify "^1.3.1" prop-types "^15.6.2" - react-router "5.1.1" + react-router "5.1.2" tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-router@5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.1.tgz#9d65f54795f938c0c5b69eaeef58728134ce7c7c" - integrity sha512-ozTXqxKZsn4GfZqpG5rVFHSSxlNuDoMNxgyjM+mFJVhqlnPwwkRsAPkDm1PcNjBdYxMzqAhtz48HkQB6fSYaAQ== +react-router@5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418" + integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A== dependencies: "@babel/runtime" "^7.1.2" history "^4.9.0" From bce4cac84ab2baf90e4c2f9cd7cf9e68a61af053 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Mon, 28 Oct 2019 22:12:43 -0700 Subject: [PATCH 35/41] Fix bug to move the book from one shelf to another --- src/App.js | 42 +++++++++++++++++++++++------------------- src/BookListItem.js | 2 +- src/BookShelf.js | 33 +++++---------------------------- src/SearchBar.js | 2 -- 4 files changed, 29 insertions(+), 50 deletions(-) diff --git a/src/App.js b/src/App.js index 4eec297baf..0cdd612d4b 100644 --- a/src/App.js +++ b/src/App.js @@ -3,35 +3,39 @@ import './App.css'; import BookShelf from "./BookShelf"; import Search from './Search'; import { BrowserRouter, Route, Switch } from "react-router-dom"; +import * as BooksAPI from "./BooksAPI"; class BooksApp extends React.Component { state = { - sectionChange: false, - updatedSectionDetails: { - updatedSection: '', - currentSection: '', - book: {} - } - } + section: [] + }; - onSectionChange = (updatedSection, currentSection, book) => { - console.log("Inside App", updatedSection, currentSection, book); + updateAppState = (newState) => { + console.log("Inside App", newState); this.setState({ - sectionChange: !this.state.sectionChange, - updatedSectionDetails: { - updatedSection: updatedSection, - currentSection: currentSection, - book: book - } - }, () => console.log('state', this.state) ) - } + section: newState + }, () => console.log('state', this.state)) + }; + + updateSelection = (newSection, book) => { + BooksAPI.update(book, newSection) + .then(response => { + console.log("This is updates response", response) + return this.updateAppState(response) + } + ); + }; + + handleSectionChange = (newSection, oldSection, book) => { + this.updateSelection(newSection, book) + }; render() { return ( - }/> - }/> + }/> + }/> ) diff --git a/src/BookListItem.js b/src/BookListItem.js index e02d3e3b22..bc5ac3c929 100644 --- a/src/BookListItem.js +++ b/src/BookListItem.js @@ -26,7 +26,7 @@ class BookListItem extends Component { let coverImage = this.loadCoverImage(); const { section, book } = this.props; - console.log("Inside BookListItem", section, book) + console.log("Inside BookListItem", section, book.shelf) return (
          2. diff --git a/src/BookShelf.js b/src/BookShelf.js index f255020c90..7e12961cbc 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import Section from "./Section"; import * as BooksAPI from './BooksAPI'; -import PropTypes from "prop-types"; import {Link} from 'react-router-dom'; class BookShelf extends Component { @@ -62,9 +61,6 @@ class BookShelf extends Component { }; componentDidMount() { - console.log(this.props.updateSection); - this.updateBookShelfState(this.updateSection) - BooksAPI.getAll() .then(resp => { return this.buildSection(resp) @@ -75,30 +71,11 @@ class BookShelf extends Component { ) } - updateSelection = (newSection, book) => { - BooksAPI.update(book, newSection) - .then(response => { - return this.updateBookShelfState(response) - } - ); - }; handleSectionChange = (newSection, oldSection, book) => { - this.updateSelection(newSection, book) + this.props.onSectionChange(newSection, oldSection, book) }; - updateSearchedBook = () => { - if(this.props.shelfChange === true) { - console.log("Updating shelf", this.props.updatedSectionDetails['updatedSection'], - this.props.updatedSectionDetails['book']) - - this.updateSelection( - this.props.updatedSectionDetails['updatedSection'], - this.props.updatedSectionDetails['book'] - ) - } - } - render() { const { sections } = this.state; return ( @@ -124,8 +101,8 @@ class BookShelf extends Component { ) } } - -BookShelf.propTypes = { - updateSection: PropTypes.object -}; +// +// BookShelf.propTypes = { +// updateSection: PropTypes.object +// }; export default BookShelf; diff --git a/src/SearchBar.js b/src/SearchBar.js index ef8e75f7e6..144566e61f 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -16,8 +16,6 @@ class SearchBar extends Component { this.searchBooks(searchParams) } ); - - console.log("Changing params here", this.state.query); }; searchBooks = searchParams => { From 081e281953aa9102644309bd57b123432a6a2d9e Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 2 Nov 2019 13:28:57 -0700 Subject: [PATCH 36/41] Fix Search Section to display the correct shelf a book belongs to. * Cleanup BookShelf section --- src/App.js | 77 ++++++++++++++++++++++++++++++++-------- src/BookList.js | 3 -- src/BookListItem.js | 11 +++--- src/BookShelf.js | 86 ++++++--------------------------------------- src/Search.js | 37 +++++++++++++++++-- src/Section.js | 6 ---- src/Selector.js | 6 ++-- 7 files changed, 117 insertions(+), 109 deletions(-) diff --git a/src/App.js b/src/App.js index 0cdd612d4b..1726954df1 100644 --- a/src/App.js +++ b/src/App.js @@ -7,35 +7,82 @@ import * as BooksAPI from "./BooksAPI"; class BooksApp extends React.Component { state = { - section: [] - }; - - updateAppState = (newState) => { - console.log("Inside App", newState); - this.setState({ - section: newState - }, () => console.log('state', this.state)) + sections: [] }; updateSelection = (newSection, book) => { BooksAPI.update(book, newSection) - .then(response => { - console.log("This is updates response", response) - return this.updateAppState(response) - } - ); + .then(response => this.updateAppState(response)) + .then(() => this.loadBooks()); }; handleSectionChange = (newSection, oldSection, book) => { this.updateSelection(newSection, book) }; + updateAppState = (newState) => { + const { sections } = this.state; + + this.setState({ + sections: Object.assign(sections, newState, {}) + }) + }; + + buildSection = (response) => { + let sectionBooks = []; + + let readSection = { + name: 'Read', + key: 'read', + books: [] + }; + + let currentlyReading = { + name: 'Currently Reading', + key: 'currentlyReading', + books: [] + }; + + let wantToRead = { + name: 'Want To Read', + key: 'wantToRead', + books: [] + }; + + currentlyReading['books'] = this.filterBooksForSection(response, 'currentlyReading'); + sectionBooks.push(currentlyReading); + + wantToRead['books'] = this.filterBooksForSection(response, 'wantToRead'); + sectionBooks.push(wantToRead); + + readSection['books'] = this.filterBooksForSection(response, 'read') + sectionBooks.push(readSection); + + return sectionBooks + }; + + filterBooksForSection = (response, key) => { + return response.filter(book => book.shelf === key); + }; + + loadBooks = () => { + BooksAPI.getAll() + .then(resp => this.buildSection(resp)) + .then(result => this.updateAppState(result)) + }; + + componentDidMount() { + this.loadBooks(); + } + render() { return ( - }/> - }/> + }/> + }/> ) diff --git a/src/BookList.js b/src/BookList.js index 5d5ff633a7..0cbf38f28b 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -3,15 +3,12 @@ import PropTypes from 'prop-types'; import BookListItem from "./BookListItem"; class BookList extends Component { - handleOnPropagateSectionChange = (updatedSection, book) => { - console.log("Inside BookList", updatedSection, book) const currentSection = this.props.section || 'None'; this.props.onSectionChange(updatedSection, currentSection, book); }; render() { - console.log("Props for BookList", this.props); const { books, section } = this.props; return ( diff --git a/src/BookListItem.js b/src/BookListItem.js index bc5ac3c929..ef93edeed9 100644 --- a/src/BookListItem.js +++ b/src/BookListItem.js @@ -5,7 +5,6 @@ import Selector from "./Selector"; class BookListItem extends Component { propagateSectionChange = (updatedSection) => { - console.log("Inside BookListItem", updatedSection, this.props.book) this.props.onPropagateSectionChange(updatedSection, this.props.book) }; @@ -25,8 +24,6 @@ class BookListItem extends Component { render() { let coverImage = this.loadCoverImage(); const { section, book } = this.props; - - console.log("Inside BookListItem", section, book.shelf) return (
          3. @@ -46,7 +43,13 @@ class BookListItem extends Component {
          4. {book.title}
            -
            {book.author}
            +
            + { + book.authors.map((author, index) => +
            {author}
            + ) + } +
          5. ) diff --git a/src/BookShelf.js b/src/BookShelf.js index 7e12961cbc..d86875db53 100644 --- a/src/BookShelf.js +++ b/src/BookShelf.js @@ -1,91 +1,25 @@ import React, { Component } from 'react'; import Section from "./Section"; -import * as BooksAPI from './BooksAPI'; +import PropTypes from 'prop-types'; import {Link} from 'react-router-dom'; class BookShelf extends Component { - state = { - sections: [] - }; - - updateBookShelfState = (newState) => { - const { sections } = this.state; - - this.setState({ - sections: Object.assign(sections, newState, {}) - }) - }; - - buildSection = (response) => { - let sectionBooks = []; - - let readSection = { - name: 'Read', - key: 'read', - books: [] - }; - - let currentlyReading = { - name: 'Currently Reading', - key: 'currentlyReading', - books: [] - }; - - let wantToRead = { - name: 'Want To Read', - key: 'wantToRead', - books: [] - }; - - currentlyReading['books'] = this.filterBooksForSection(response, 'currentlyReading'); - sectionBooks.push(currentlyReading); - - wantToRead['books'] = this.filterBooksForSection(response, 'wantToRead'); - sectionBooks.push(wantToRead); - - readSection['books'] = this.filterBooksForSection(response, 'read') - sectionBooks.push(readSection); - - return sectionBooks - }; - - filterBooksForSection = (response, key) => { - return response.filter((book) => - book.shelf === key - ); - }; - - handleAddBook = () => { - console.log(this.props.history) - this.props.history.push('/search') - }; - - componentDidMount() { - BooksAPI.getAll() - .then(resp => { - return this.buildSection(resp) - }) - .then(result => { - return this.updateBookShelfState(result) - } - ) - } - - handleSectionChange = (newSection, oldSection, book) => { this.props.onSectionChange(newSection, oldSection, book) }; render() { - const { sections } = this.state; + const { bookshelf } = this.props; + return (

            MyReads

            +
            { - sections.map((section, index) => ( + bookshelf.map((section, index) => (
            +
            Add a book
            @@ -101,8 +36,9 @@ class BookShelf extends Component { ) } } -// -// BookShelf.propTypes = { -// updateSection: PropTypes.object -// }; + +BookShelf.propTypes = { + sections: PropTypes.object +}; + export default BookShelf; diff --git a/src/Search.js b/src/Search.js index 7da211a81c..7dbeece90c 100644 --- a/src/Search.js +++ b/src/Search.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import SearchBar from "./SearchBar"; import SearchResults from "./SearchResults"; import { Link } from 'react-router-dom'; +import PropTypes from "prop-types"; class Search extends Component { state = { @@ -9,16 +10,40 @@ class Search extends Component { }; handleOnSearch = (response) => { + const newState = this.addShelfPropertyToResults(response) + this.updateResults(newState) + }; + + updateResults = (newState) => { this.setState({ - results: response + results: newState }) - }; + } onSectionChange = (updatedSection, currentSection, book) => { - console.log('Inside Search'); this.props.onSectionChange(updatedSection, currentSection, book); }; + findBookById = (bookId) => { + const { bookshelf } = this.props; + let book = {}; + bookshelf.some(section => { + book = section.books.find(book => + book.id === bookId + ); + return book + }); + return book + }; + + addShelfPropertyToResults = (response) => { + return response.map(book => { + let newBook = this.findBookById(book.id) + book = Object.assign(book, newBook, {}) + return book + }) + }; + render() { return (
            @@ -42,4 +67,10 @@ class Search extends Component { } } +Search.propTypes = { + bookshelf: PropTypes.array, + onSectionChange: PropTypes.func +}; + + export default Search; \ No newline at end of file diff --git a/src/Section.js b/src/Section.js index cf5f119f59..43ede44a3c 100644 --- a/src/Section.js +++ b/src/Section.js @@ -27,9 +27,3 @@ Section.propTypes = { }; export default Section; - - -// Algorithm: -// Filter the books depending on which section is being displayed -// What do I need in order to do that? I need a way to track which is the self -// diff --git a/src/Selector.js b/src/Selector.js index b20b4749e5..43dd704c88 100644 --- a/src/Selector.js +++ b/src/Selector.js @@ -2,7 +2,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types'; class Selector extends Component { - state = { value: 'currentlyReading' } @@ -10,8 +9,9 @@ class Selector extends Component { handleSelectionChangeEvent = (event) => { event.preventDefault(); const selectionValue = event.target.value; + if (this.props.currentSection !== selectionValue) { - this.setState({value: selectionValue}) + this.setState({ value: selectionValue }) this.props.onSelectorClick(selectionValue) } }; @@ -32,7 +32,7 @@ class Selector extends Component { Selector.propTypes = { currentSection: PropTypes.string.isRequired, - currentSectionKey: PropTypes.string.isRequired, + currentSectionKey: PropTypes.string, onSelectorClick: PropTypes.func, book: PropTypes.object.isRequired } From 32ff87adf3bba1e564f9cac855803822ae51a9c5 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 2 Nov 2019 13:48:35 -0700 Subject: [PATCH 37/41] Code cleanup for Search components and fix bugs --- src/BookList.js | 4 +++- src/BookListItem.js | 1 + src/Search.js | 6 ++---- src/SearchBar.js | 13 +++---------- src/SearchResults.js | 2 -- 5 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/BookList.js b/src/BookList.js index 0cbf38f28b..0d272b5e54 100644 --- a/src/BookList.js +++ b/src/BookList.js @@ -13,7 +13,9 @@ class BookList extends Component { return (
            -

            {section}

            + { + section !== '' &&

            {section}

            + }
              { diff --git a/src/BookListItem.js b/src/BookListItem.js index ef93edeed9..8746810b20 100644 --- a/src/BookListItem.js +++ b/src/BookListItem.js @@ -45,6 +45,7 @@ class BookListItem extends Component {
              {book.title}
              { + book.authors && book.authors.map((author, index) =>
              {author}
              ) diff --git a/src/Search.js b/src/Search.js index 7dbeece90c..1d11128e16 100644 --- a/src/Search.js +++ b/src/Search.js @@ -15,10 +15,8 @@ class Search extends Component { }; updateResults = (newState) => { - this.setState({ - results: newState - }) - } + this.setState({ results: newState }) + }; onSectionChange = (updatedSection, currentSection, book) => { this.props.onSectionChange(updatedSection, currentSection, book); diff --git a/src/SearchBar.js b/src/SearchBar.js index 144566e61f..bd766307c9 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -7,22 +7,15 @@ class SearchBar extends Component { }; handleOnChange = event => { - console.log("enter data", event.target.value) const searchParams = event.target.value; - this.setState({ - query: searchParams - }, - () => { - this.searchBooks(searchParams) - } - ); + this.setState({ query: searchParams }); + this.searchBooks(searchParams) }; searchBooks = searchParams => { BooksAPI.search(searchParams) .then(response => { - console.log("this is what i got from BooksApi", response); - if(response.error === "empty query"){ + if (response.error === "empty query") { return response.items } else { this.props.onSearch(response) diff --git a/src/SearchResults.js b/src/SearchResults.js index 7df58d46b6..b7a0609720 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -3,9 +3,7 @@ import PropTypes from "prop-types"; import BookList from "./BookList"; class SearchResults extends Component { - handleSectionChangePropogation = (updatedSection, currentSection, book) => { - console.log("Inside SearchResults") this.props.onSectionChange(updatedSection, currentSection, book); }; From 876131d189472704a192603725708a7a0331fe6e Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 2 Nov 2019 14:56:34 -0700 Subject: [PATCH 38/41] Allow user to see no search results when the the text in SearchBar is deleted. --- src/Search.js | 7 ++++++- src/SearchBar.js | 6 +++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/Search.js b/src/Search.js index 1d11128e16..5ecdaa2bb9 100644 --- a/src/Search.js +++ b/src/Search.js @@ -10,7 +10,12 @@ class Search extends Component { }; handleOnSearch = (response) => { - const newState = this.addShelfPropertyToResults(response) + let newState = []; + + if(response !== undefined){ + newState = this.addShelfPropertyToResults(response) + } + this.updateResults(newState) }; diff --git a/src/SearchBar.js b/src/SearchBar.js index bd766307c9..6cc537e116 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -15,13 +15,13 @@ class SearchBar extends Component { searchBooks = searchParams => { BooksAPI.search(searchParams) .then(response => { - if (response.error === "empty query") { - return response.items + if (response && response.error === "empty query") { + this.props.onSearch(response.items) } else { this.props.onSearch(response) } }) - .catch(error => console.log(error)); + .catch(error => console.log(error)) }; render() { From 3a22d8a5acaced45e182a0f537998f892d335367 Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sat, 2 Nov 2019 15:10:01 -0700 Subject: [PATCH 39/41] Update Readme file --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index ce4ea2eb85..ce0a2af29e 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,16 @@ # MyReads Project +## Description +A small react application to simulate a users bookshelf and add or remove books. + +## Installation +Steps to get this app working on local. +1. Clone the repo using `git clone ` +2. Install prohect dependencies using `npm install` +3. Run server locally using `npm start` +4. Navigate to `http://localhost:3000` and see the app running. + +---- This is the starter template for the final assessment project for Udacity's React Fundamentals course. The goal of this template is to save you time by providing a static example of the CSS and HTML markup that may be used, but without any of the React code that is needed to complete the project. If you choose to start with this template, your job will be to add interactivity to the app by refactoring the static code in this template. Of course, you are free to start this project from scratch if you wish! Just be sure to use [Create React App](https://github.com/facebookincubator/create-react-app) to bootstrap the project. From 86c39e58bdb579b375900ca0ac1d3559828569dd Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sun, 3 Nov 2019 14:14:59 -0800 Subject: [PATCH 40/41] Update code to clear search page when user removes text from search bar. Updates to stop Searc results from clearing everytime user adds a book on the shelf. --- src/App.js | 4 ++++ src/BookListItem.js | 1 - src/Search.js | 1 - src/SearchBar.js | 3 +++ src/Selector.js | 9 +++++---- 5 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 1726954df1..001a8224ae 100644 --- a/src/App.js +++ b/src/App.js @@ -75,6 +75,10 @@ class BooksApp extends React.Component { this.loadBooks(); } + shouldComponentUpdate(nextProps, nextState, nextContext) { + return this.state.sections !== nextState.sections + } + render() { return ( diff --git a/src/BookListItem.js b/src/BookListItem.js index 8746810b20..2d6634b764 100644 --- a/src/BookListItem.js +++ b/src/BookListItem.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import Selector from "./Selector"; class BookListItem extends Component { - propagateSectionChange = (updatedSection) => { this.props.onPropagateSectionChange(updatedSection, this.props.book) }; diff --git a/src/Search.js b/src/Search.js index 5ecdaa2bb9..8ba0f229be 100644 --- a/src/Search.js +++ b/src/Search.js @@ -75,5 +75,4 @@ Search.propTypes = { onSectionChange: PropTypes.func }; - export default Search; \ No newline at end of file diff --git a/src/SearchBar.js b/src/SearchBar.js index 6cc537e116..d6cc80895b 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -8,6 +8,9 @@ class SearchBar extends Component { handleOnChange = event => { const searchParams = event.target.value; + if (searchParams === ''){ + return this.props.onSearch([]) + } this.setState({ query: searchParams }); this.searchBooks(searchParams) }; diff --git a/src/Selector.js b/src/Selector.js index 43dd704c88..d2e057c675 100644 --- a/src/Selector.js +++ b/src/Selector.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; class Selector extends Component { state = { - value: 'currentlyReading' - } + value: 'none' + }; handleSelectionChangeEvent = (event) => { event.preventDefault(); @@ -19,7 +19,7 @@ class Selector extends Component { render() { return ( - @@ -35,5 +35,6 @@ Selector.propTypes = { currentSectionKey: PropTypes.string, onSelectorClick: PropTypes.func, book: PropTypes.object.isRequired -} +}; + export default Selector; \ No newline at end of file From bb45af3258f6011364eb2e7dfabefd6f0537969e Mon Sep 17 00:00:00 2001 From: Soumya Veer Date: Sun, 3 Nov 2019 15:38:42 -0800 Subject: [PATCH 41/41] Code cleanup --- src/App.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/App.js b/src/App.js index 001a8224ae..1726954df1 100644 --- a/src/App.js +++ b/src/App.js @@ -75,10 +75,6 @@ class BooksApp extends React.Component { this.loadBooks(); } - shouldComponentUpdate(nextProps, nextState, nextContext) { - return this.state.sections !== nextState.sections - } - render() { return (