From 8ee36c393afb2da33775cb82fc3b86fb81ae69eb Mon Sep 17 00:00:00 2001 From: Diana Date: Sun, 16 Feb 2020 15:06:27 -0500 Subject: [PATCH] feat: Route and link the shelfs and search --- package-lock.json | 160 +++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + public/nopreview.png | Bin 0 -> 5496 bytes src/App.js | 30 ++++++-- src/Shelfs.js | 33 +++++++++ src/index.js | 6 +- src/showBooks.js | 15 ++-- 7 files changed, 226 insertions(+), 19 deletions(-) create mode 100644 public/nopreview.png create mode 100644 src/Shelfs.js diff --git a/package-lock.json b/package-lock.json index aef13e6..d32a5e6 100755 --- a/package-lock.json +++ b/package-lock.json @@ -6023,6 +6023,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -6230,6 +6235,34 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6245,6 +6278,14 @@ "resolved": "http://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==" }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "home-or-tmp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", @@ -8399,6 +8440,31 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } + } + }, "mini-css-extract-plugin": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz", @@ -11291,6 +11357,80 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" }, + "react-router": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", + "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } + } + }, + "react-router-dom": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz", + "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.1.2", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } + } + }, "react-scripts": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.1.tgz", @@ -12432,6 +12572,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -13894,6 +14039,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -14388,6 +14543,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 787c58f..09a546c 100755 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-router-dom": "^5.1.2", "react-scripts": "2.1.1" }, "scripts": { diff --git a/public/nopreview.png b/public/nopreview.png new file mode 100644 index 0000000000000000000000000000000000000000..451223a0164726f3e8b7c94679307a27c1ad961a GIT binary patch literal 5496 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 { + const [currentlyReading, setCurrentlyReading] = useState([]) const [wantToRead, setWantToRead] = useState([]) const [read, setRead] = useState([]) + const [booksOnShelf, setBooksOnShelf] = useState([]) useEffect(() => { // Update the document title using the browser API BooksAPI.getAll().then((books) => { + setBooksOnShelf(books) setCurrentlyReading( filterToShelf(books, 'currentlyReading') ) @@ -67,17 +73,27 @@ const BooksApp = () => { //remove from old shelf tidyShelf(oldShelf, shelfs[oldShelf]) }) - } return (
- - - + ( +
+ +
+ + + +
+
+ )}/> + ( { + moveBook(event, book) + history.push('/') + }}/>)}/>
- ) } diff --git a/src/Shelfs.js b/src/Shelfs.js new file mode 100644 index 0000000..a0dee04 --- /dev/null +++ b/src/Shelfs.js @@ -0,0 +1,33 @@ +import React from 'react' +import ShowBooks from './ShowBooks.js' + +const Shelfs = (props) => { + + const {currentlyReading, wantToRead, read, moveBook} = props + + return ( +
+
+

MyReads

+
+
+
+
+

Currently Reading

+ +
+
+

Want to Read

+ +
+
+

Read

+ +
+
+
+
+ ) +} + +export default Shelfs diff --git a/src/index.js b/src/index.js index fde0d67..c0579ad 100755 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,10 @@ import React from 'react' import ReactDOM from 'react-dom' +import { BrowserRouter } from 'react-router-dom' import App from './App' import './index.css' -ReactDOM.render(, document.getElementById('root')) +ReactDOM.render( + , + document.getElementById('root') +) diff --git a/src/showBooks.js b/src/showBooks.js index bf7830b..eb057a5 100644 --- a/src/showBooks.js +++ b/src/showBooks.js @@ -2,11 +2,9 @@ import React from 'react' const ShowBooks = (props) => { - const {books, shelfTitle, moveBook} = props + const {books, moveBook} = props return ( -
-

{shelfTitle}

    { @@ -14,9 +12,9 @@ const ShowBooks = (props) => {
  1. -
    +
    - moveBook(event, book)}> @@ -26,18 +24,13 @@ const ShowBooks = (props) => {
    {book.title}
    -
    {book.authors.join(', ')}
    +
    {'authors' in book && book.authors.join(', ')}
    2. )) }
- - -
- - ) }