diff --git a/package.json b/package.json index 579d515885..a6bc5ef4d7 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "prop-types": "^15.6.2", "react": "^16.6.3", "react-dom": "^16.6.3", - "react-scripts": "2.1.1" + "react-scripts": "2.1.1", + "react-router-dom": "^4.1.1" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.js b/src/App.js index 785820d5df..ec1e327401 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,9 @@ import React from 'react' // import * as BooksAPI from './BooksAPI' import './App.css' +import { Route, Link } from 'react-router-dom' +import BookSearch from './BookSearch' +import BookList from './BookList' class BooksApp extends React.Component { state = { @@ -16,191 +19,10 @@ class BooksApp extends React.Component { render() { return (
- {this.state.showSearchPage ? ( -
-
- -
- {/* - NOTES: The search from BooksAPI is limited to a particular set of search terms. - You can find these search terms here: - https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md - - However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if - you don't find a specific author or title. Every search is limited by search terms. - */} - - -
-
-
-
    -
    -
    - ) : ( -
    -
    -

    MyReads

    -
    -
    -
    -
    -

    Currently Reading

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

    Want to Read

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

    Read

    -
    -
      -
    1. -
      -
      -
      -
      - -
      -
      -
      The Hobbit
      -
      J.R.R. Tolkien
      -
      -
      2. -
    2. -
      -
      -
      -
      - -
      -
      -
      Oh, the Places You'll Go!
      -
      Seuss
      -
      -
      3. -
    3. -
      -
      -
      -
      - -
      -
      -
      The Adventures of Tom Sawyer
      -
      Mark Twain
      -
      -
      4. -
    -
    -
    -
    -
    -
    - -
    -
    - )} + +
    - ) - } + )} } export default BooksApp diff --git a/src/BookList.js b/src/BookList.js new file mode 100644 index 0000000000..653739a465 --- /dev/null +++ b/src/BookList.js @@ -0,0 +1,175 @@ +import React from 'react' +import './App.css' +import * as BooksAPI from './BooksAPI' +import { Link } from 'react-router-dom' + +class BookList extends from React.Component { + state = {} + + render() { + return ( +
    +
    +
    +

    MyReads

    +
    +
    +
    +
    +

    Currently Reading

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

    Want to Read

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

    Read

    +
    +
      +
    1. +
      +
      +
      +
      + +
      +
      +
      The Hobbit
      +
      J.R.R. Tolkien
      +
      +
      2. +
    2. +
      +
      +
      +
      + +
      +
      +
      Oh, the Places You'll Go!
      +
      Seuss
      +
      +
      3. +
    3. +
      +
      +
      +
      + +
      +
      +
      The Adventures of Tom Sawyer
      +
      Mark Twain
      +
      +
      4. +
    +
    +
    +
    +
    +
    + +
    +
    + ) + } +} + +export default BookList diff --git a/src/BookSearch.js b/src/BookSearch.js new file mode 100644 index 0000000000..5e9f1aae8a --- /dev/null +++ b/src/BookSearch.js @@ -0,0 +1,37 @@ +import React from 'react' +import './App.css' +import * as BooksAPI from './BooksAPI' +import { Link } from 'react-router-dom' + +class BookSearch extends React.Component { + state={} + 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. + */} + + +
    +
    +
    +
      +
      +
      + ) + ) + } + +} + +export default BookSearch diff --git a/src/index.js b/src/index.js index fde0d67bd1..bd5a41a6db 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,11 @@ import React from 'react' import ReactDOM from 'react-dom' import App from './App' -import './index.css' +import './index.css +import { BrowserRouter } from 'react-router-dom' -ReactDOM.render(, document.getElementById('root')) +ReactDOM.render( + + , + + document.getElementById('root'))