From 8e09874b4560abfea5a0206db92dfce6d553bcfe Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Wed, 30 Dec 2020 12:00:28 +0100 Subject: [PATCH 1/8] feat: apply dark background on state change --- src/App.js | 37 +++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 55268a5..55d2a28 100644 --- a/src/App.js +++ b/src/App.js @@ -9,10 +9,12 @@ const BooksApp = () => { const [searchResults, setSearchResults] = useState([]) const [books, setBooks] = useState([]) const [shouldUpdate, setShouldUpdate] = useState(true) + const [darkTheme, setDarkTheme] = useState(false) const currentlyReading = books && books.filter((book) => book.shelf === 'currentlyReading') const wantToRead = books && books.filter((book) => book.shelf === 'wantToRead') const read = books && books.filter((book) => book.shelf === 'read') + const darkStyle = { background: '#313131' } useEffect(() => { if (shouldUpdate) { @@ -49,24 +51,27 @@ const BooksApp = () => { } return ( -
- + +
+ + + {/* Pass books down to make it available for any consumer component within the provider */} - {/* Pass books down to make it available for any consumer component within the provider */} -
- -
+
+ ) } From 60796b13af319f5b1544a7af87363ea98d8b9f3d Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Wed, 30 Dec 2020 12:09:54 +0100 Subject: [PATCH 2/8] feat: apply dark theme on state change to BookShelf compoenent --- src/App.js | 3 +-- src/components/BookShelf/BookShelf.js | 9 ++++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 55d2a28..366dc71 100644 --- a/src/App.js +++ b/src/App.js @@ -4,12 +4,11 @@ import Navigation from './components/Navigation/Navigation' import Main from './components/Main/Main' import { StoreProvider } from './Store' import { getAll, update } from './BooksAPI' - const BooksApp = () => { const [searchResults, setSearchResults] = useState([]) const [books, setBooks] = useState([]) const [shouldUpdate, setShouldUpdate] = useState(true) - const [darkTheme, setDarkTheme] = useState(false) + const [darkTheme, setDarkTheme] = useState(true) const currentlyReading = books && books.filter((book) => book.shelf === 'currentlyReading') const wantToRead = books && books.filter((book) => book.shelf === 'wantToRead') diff --git a/src/components/BookShelf/BookShelf.js b/src/components/BookShelf/BookShelf.js index dcc8b49..bdeb5a5 100644 --- a/src/components/BookShelf/BookShelf.js +++ b/src/components/BookShelf/BookShelf.js @@ -1,9 +1,16 @@ +import { useContext } from 'react' +import { StoreContext } from '../../Store' import BookList from '../BookList/BookList' const BookShelf = ({ name, books }) => { + const { darkTheme } = useContext(StoreContext) + + const darkStyle = { color: '#7dad7b' } return (
-

{name && name}

+

+ {name && name} +

From 2282645e21c1ac96ecb17a892d08b38cbaa57ff6 Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Wed, 30 Dec 2020 12:16:00 +0100 Subject: [PATCH 3/8] feat: apply dark theme on state change to BookShelf compoenent --- src/components/BookShelf/BookShelf.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BookShelf/BookShelf.js b/src/components/BookShelf/BookShelf.js index bdeb5a5..888fa00 100644 --- a/src/components/BookShelf/BookShelf.js +++ b/src/components/BookShelf/BookShelf.js @@ -5,7 +5,7 @@ import BookList from '../BookList/BookList' const BookShelf = ({ name, books }) => { const { darkTheme } = useContext(StoreContext) - const darkStyle = { color: '#7dad7b' } + const darkStyle = { color: '#7dad7b', borderBottomColor: 'rgb(97 92 92' } return (

From fb1cac4446e480f0f30fd5f95e95b19133f15111 Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Wed, 30 Dec 2020 12:24:06 +0100 Subject: [PATCH 4/8] feat: apply dark theme on state change to Book compoenent --- src/components/Book/Book.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Book/Book.js b/src/components/Book/Book.js index 10c4510..b17e946 100644 --- a/src/components/Book/Book.js +++ b/src/components/Book/Book.js @@ -5,8 +5,9 @@ import placeholder from '../../assets/book-placeholder.jpeg' const Book = ({ book, search }) => { const { title, authors, shelf, id, imageLinks } = book - - const { books } = useContext(StoreContext) + const { books, darkTheme } = useContext(StoreContext) + const titleDarkStyle = { color: '#7dad7b' } + const authorDarkStyle = { color: '#abb3af' } // if book list coming from search results, check if book is already is in any shelf mybooks const isBook = () => { @@ -34,8 +35,12 @@ const Book = ({ book, search }) => { -
{title}
-
{bookAuthors}
+
+ {title} +
+
+ {bookAuthors} +
) From 9e10c68d60f4a87f7dd8c485e187fa802d4793ee Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Wed, 30 Dec 2020 12:48:55 +0100 Subject: [PATCH 5/8] feat: apply dark theme on state change to Search compoenent --- src/App.css | 1 + src/components/Search/Search.js | 22 +++++++++++++++++----- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/App.css b/src/App.css index b780245..67dac78 100644 --- a/src/App.css +++ b/src/App.css @@ -119,6 +119,7 @@ button:active { .search-books-results { padding: 80px 10px 20px; + height: 100vh; } /* books grid */ diff --git a/src/components/Search/Search.js b/src/components/Search/Search.js index ac23d16..454358c 100644 --- a/src/components/Search/Search.js +++ b/src/components/Search/Search.js @@ -1,16 +1,23 @@ -import { useState, useEffect } from 'react' +import { useState, useEffect, useContext } from 'react' +import { StoreContext } from '../../Store' import { Link } from 'react-router-dom' import BookList from '../BookList/BookList' import { search } from '../../BooksAPI' import { useDebounce } from '../../hooks/useDebounce' const Search = () => { + const { darkTheme } = useContext(StoreContext) + // APi query value (delayed) const [query, setQuery] = useState('') const [searchResults, setSearchResults] = useState([]) const [message, setMessage] = useState('') // Inpute value const [value, setValue] = useState('') + const darkStyleInner = { background: '#bec2be' } + const darkStyleOuter = { background: '#4b514d' } + const msgDarkStyle = { color: '#1fcf17' } + //#4b514d // fetch api useEffect(() => { @@ -26,7 +33,7 @@ const Search = () => { if (query.length && !searchResults.length) { setTimeout(() => { setMessage('Not found! Try another search term!') - }, 800) + }, 1000) } }, [query, searchResults]) @@ -42,21 +49,26 @@ const Search = () => { return (
-
+
Close
- {searchResults.length ? : {message}} + {searchResults.length ? ( + + ) : ( + {message} + )}
) From 1fceb124731b76b0f475629dbaf91784560c05a4 Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Wed, 30 Dec 2020 13:17:44 +0100 Subject: [PATCH 6/8] feat: create and style darkTheme handler --- src/components/Navigation/Navigation.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js index 0b88ef0..ad44b8c 100644 --- a/src/components/Navigation/Navigation.js +++ b/src/components/Navigation/Navigation.js @@ -1,7 +1,20 @@ +import { dark } from '@material-ui/core/styles/createPalette' +import { useContext } from 'react' +import { StoreContext } from '../../Store' + const Navigation = () => { + const { darkTheme, setDarkTheme } = useContext(StoreContext) + const buttonText = darkTheme ? 'Switch to light theme' : 'Switch to dark theme' + + const style = { display: 'flex', justifyContent: 'space-between', padding: '10px 30px' } + const buttonLightStyle = { background: '#313131', color: '#f2f2f2' } + return ( -