From 9a59dc0163708412179d58c5e909ec9e08bb178a Mon Sep 17 00:00:00 2001 From: David Vergaray Date: Tue, 22 Feb 2022 12:10:09 -0300 Subject: [PATCH 1/8] Update configureStore.js and redux/books.js --- .vscode/settings.json | 3 +++ package-lock.json | 28 ++++++++++++++++++++++++++++ package.json | 2 ++ src/redux/books/books.js | 32 ++++++++++++++++---------------- src/redux/configureStore.js | 15 +++++++++++++++ 5 files changed, 64 insertions(+), 16 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..ed94f44 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "git.ignoreLimitWarning": true +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d97d9cc..1f62f95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,8 @@ "react-redux": "^7.2.6", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", + "redux": "^4.1.2", + "redux-logger": "^3.0.6", "styled-components": "^5.3.3", "web-vitals": "^2.1.4" }, @@ -6259,6 +6261,11 @@ "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=" }, + "node_modules/deep-diff": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz", + "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=" + }, "node_modules/deep-equal": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", @@ -15146,6 +15153,14 @@ "@babel/runtime": "^7.9.2" } }, + "node_modules/redux-logger": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz", + "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=", + "dependencies": { + "deep-diff": "^0.3.5" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -23076,6 +23091,11 @@ "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=" }, + "deep-diff": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz", + "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=" + }, "deep-equal": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", @@ -29400,6 +29420,14 @@ "@babel/runtime": "^7.9.2" } }, + "redux-logger": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz", + "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=", + "requires": { + "deep-diff": "^0.3.5" + } + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", diff --git a/package.json b/package.json index c60bd6f..9c1e30d 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "react-redux": "^7.2.6", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", + "redux": "^4.1.2", + "redux-logger": "^3.0.6", "styled-components": "^5.3.3", "web-vitals": "^2.1.4" }, diff --git a/src/redux/books/books.js b/src/redux/books/books.js index 4409062..cd8f31e 100644 --- a/src/redux/books/books.js +++ b/src/redux/books/books.js @@ -1,28 +1,28 @@ -const UPDATE = 'bookstore/books/UPDATE'; -const REMOVE = 'bookstore/books/REMOVE'; +const ADD_BOOK = 'bookStore/books/ADD_BOOK'; +const REMOVE_BOOK = 'bookStore/books/REMOVE_BOOK'; -const reducer = (state = {}, action = {}) => { - switch (action.type) { - case UPDATE: - return action.book; - - case REMOVE: - return action.book; +const initialState = []; +const reducer = (state = initialState, action) => { + switch (action.type) { + case ADD_BOOK: + return [...state, action.payload]; + case REMOVE_BOOK: + return state.filter((book) => book.id !== action.id); default: return state; } }; -const removeBook = (bookChange) => ({ - type: REMOVE, - book: bookChange, +const removeBook = (id) => ({ + type: REMOVE_BOOK, + id, }); -const updateBook = (bookChange) => ({ - type: UPDATE, - book: bookChange, +const addBook = (payload) => ({ + type: ADD_BOOK, + payload, }); export default reducer; -export { removeBook, updateBook }; +export { removeBook, addBook }; diff --git a/src/redux/configureStore.js b/src/redux/configureStore.js index e69de29..84ce61d 100644 --- a/src/redux/configureStore.js +++ b/src/redux/configureStore.js @@ -0,0 +1,15 @@ +import { createStore, combineReducers, applyMiddleware } from 'redux'; +import logger from 'redux-logger'; +import booksReducer from './books/books'; + +const reducer = combineReducers({ + booksReducer, + // additional reducers could be added here +}); + +const store = createStore( + reducer, + applyMiddleware(logger), +); + +export default store; From d53c94b24dcde48397a4b58cbb1ba90908748883 Mon Sep 17 00:00:00 2001 From: David Vergaray Date: Tue, 22 Feb 2022 13:08:45 -0300 Subject: [PATCH 2/8] Complete redux add --- src/{ => assets}/images/user.png | Bin src/components/Book.js | 16 ++++++-------- src/components/BookForm.js | 29 +++++++++++++++++++++---- src/components/Books.js | 35 ++++++++++++++++++++++--------- src/components/Header.js | 19 ++++------------- src/redux/configureStore.js | 1 - 6 files changed, 60 insertions(+), 40 deletions(-) rename src/{ => assets}/images/user.png (100%) diff --git a/src/images/user.png b/src/assets/images/user.png similarity index 100% rename from src/images/user.png rename to src/assets/images/user.png diff --git a/src/components/Book.js b/src/components/Book.js index 7365216..63ed658 100644 --- a/src/components/Book.js +++ b/src/components/Book.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; import './Book.css'; -const Book = ({ data }) => { +const Book = ({ id, title, author }) => { const DataContainer = styled.div` display: grid; grid-template-columns: 40% 30% 30%; @@ -44,7 +44,6 @@ const Book = ({ data }) => { const Actions = styled.div` display: flex; - list-style: none; margin: 1rem 0 0 0; padding: 0; `; @@ -82,13 +81,11 @@ const Book = ({ data }) => { border: none; `; - const { genre, title, author } = data; - return ( - +
- {genre} + Genre {title} {author} @@ -99,12 +96,12 @@ const Book = ({ data }) => {
-

64%

+

Percent

Completed

Current Chapter - Chapter 17 + Chapter [Number] Update progress
@@ -112,8 +109,7 @@ const Book = ({ data }) => { }; Book.propTypes = { - data: PropTypes.instanceOf(Object).isRequired, - genre: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, title: PropTypes.string.isRequired, author: PropTypes.string.isRequired, }; diff --git a/src/components/BookForm.js b/src/components/BookForm.js index 3e43ea8..49aa963 100644 --- a/src/components/BookForm.js +++ b/src/components/BookForm.js @@ -1,6 +1,11 @@ import styled from 'styled-components'; +import { useDispatch } from 'react-redux'; +import { useState } from 'react'; +import { addBook } from '../redux/books/books'; const BookForm = () => { + const dispatch = useDispatch(); + const FormContainer = styled.div` border-top: 1px solid #e8e8e8; `; @@ -12,13 +17,29 @@ const BookForm = () => { color: #888; `; + const [title, setTitle] = useState(''); + const [id, setId] = useState(1); + + const submitBookToStore = (e) => { + e.preventDefault(); + + const newBook = { + id, + title, + author: 'Robert', + }; + + dispatch(addBook(newBook)); + setId(id + 1); + }; + return ( ADD NEW BOOK -
- - setTitle(e.target.value)} value={title} placeholder="Book title" /> +
diff --git a/src/components/Books.js b/src/components/Books.js index ec2990f..d983c30 100644 --- a/src/components/Books.js +++ b/src/components/Books.js @@ -1,23 +1,23 @@ +// import { Provider } from 'react-redux'; import styled from 'styled-components'; +import { Provider } from 'react-redux'; import Book from './Book'; import BookForm from './BookForm'; +import store from '../redux/configureStore'; const booksData = [ { id: 1, - genre: 'Action', title: 'Rambo', author: 'Popeye', }, { id: 2, - genre: 'Fantasy', title: 'Quack', author: 'Mack', }, { id: 3, - genre: 'History', title: 'The Jump', author: 'Siluet', }, @@ -26,19 +26,34 @@ const booksData = [ const Books = () => { const Background = styled.div` background-color: lightblue; - padding-left: 5vw; - padding-right: 5vw; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 1rem 5vw; min-height: 100vh; `; - const bookList = booksData.map((book) => ()); + // const bookList = booksData.map((book) => ( + // + // )); return ( - {bookList} - + { + booksData.map((book) => ( + + )) + } + + + ); }; diff --git a/src/components/Header.js b/src/components/Header.js index 3d29775..a5bcffb 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,20 +1,18 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import uIcon from '../images/user.png'; +import uIcon from '../assets/images/user.png'; const Header = () => { const OuterHeader = styled.header` width: 100%; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 1rem 0; border-bottom: 1px solid #e8e8e8; background-color: white; `; const InnerHeader = styled.nav` display: flex; - margin-left: 5vw; - margin-right: 5vw; + margin: 0 5vw; justify-content: space-between; `; @@ -25,10 +23,6 @@ const Header = () => { margin: 0.375rem 2.938rem 0.125rem 0; font-size: 1.875rem; font-weight: bold; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; color: #0290ff; `; @@ -38,13 +32,8 @@ const Header = () => { `; const linkBtn = { - paddingLeft: '0.5rem', - paddingRight: '0.5rem', + padding: '0 0.5rem', fontSize: '0.82rem', - fontWeight: 'normal', - fontStretch: 'normal', - fontStyle: 'normal', - lineHeight: 'normal', textDecoration: 'none', color: '#121212', }; diff --git a/src/redux/configureStore.js b/src/redux/configureStore.js index 84ce61d..84d42db 100644 --- a/src/redux/configureStore.js +++ b/src/redux/configureStore.js @@ -4,7 +4,6 @@ import booksReducer from './books/books'; const reducer = combineReducers({ booksReducer, - // additional reducers could be added here }); const store = createStore( From 627042c22e4c78ab46e8338dd13b8abd3a614fc9 Mon Sep 17 00:00:00 2001 From: David Vergaray Date: Tue, 22 Feb 2022 13:26:42 -0300 Subject: [PATCH 3/8] Add books display --- src/components/Books.js | 55 ++++++++++------------------------------- src/index.js | 6 ++++- 2 files changed, 18 insertions(+), 43 deletions(-) diff --git a/src/components/Books.js b/src/components/Books.js index d983c30..26d8e4e 100644 --- a/src/components/Books.js +++ b/src/components/Books.js @@ -1,59 +1,30 @@ -// import { Provider } from 'react-redux'; import styled from 'styled-components'; -import { Provider } from 'react-redux'; +import { useSelector } from 'react-redux'; import Book from './Book'; import BookForm from './BookForm'; -import store from '../redux/configureStore'; - -const booksData = [ - { - id: 1, - title: 'Rambo', - author: 'Popeye', - }, - { - id: 2, - title: 'Quack', - author: 'Mack', - }, - { - id: 3, - title: 'The Jump', - author: 'Siluet', - }, -]; const Books = () => { + const bookStore = useSelector((state) => state.booksReducer); + const Background = styled.div` background-color: lightblue; padding: 1rem 5vw; min-height: 100vh; `; - // const bookList = booksData.map((book) => ( - // - // )); + const bookList = bookStore.map((book) => ( + + )); return ( - { - booksData.map((book) => ( - - )) - } - - - + {bookList} + ); }; diff --git a/src/index.js b/src/index.js index bc954af..9aa417f 100644 --- a/src/index.js +++ b/src/index.js @@ -2,12 +2,16 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import { BrowserRouter as Router } from 'react-router-dom'; +import { Provider } from 'react-redux'; +import store from './redux/configureStore'; import App from './App'; ReactDOM.render( - + + + , document.getElementById('root'), From a293c7004556ecde65130493934c70b8cf0fe22e Mon Sep 17 00:00:00 2001 From: David Vergaray Date: Tue, 22 Feb 2022 13:40:25 -0300 Subject: [PATCH 4/8] Fix id repetition --- package-lock.json | 1 + package.json | 1 + src/components/Book.js | 13 +++++++++++-- src/components/BookForm.js | 6 ++---- 4 files changed, 15 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1f62f95..3fcb0b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "redux": "^4.1.2", "redux-logger": "^3.0.6", "styled-components": "^5.3.3", + "uuid": "^8.3.2", "web-vitals": "^2.1.4" }, "devDependencies": { diff --git a/package.json b/package.json index 9c1e30d..686e20b 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "redux": "^4.1.2", "redux-logger": "^3.0.6", "styled-components": "^5.3.3", + "uuid": "^8.3.2", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/components/Book.js b/src/components/Book.js index 63ed658..6172090 100644 --- a/src/components/Book.js +++ b/src/components/Book.js @@ -1,8 +1,12 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; +import { useDispatch } from 'react-redux'; import './Book.css'; +import { removeBook } from '../redux/books/books'; const Book = ({ id, title, author }) => { + const dispatch = useDispatch(); + const DataContainer = styled.div` display: grid; grid-template-columns: 40% 30% 30%; @@ -81,6 +85,11 @@ const Book = ({ id, title, author }) => { border: none; `; + const removeBookFromStore = (e) => { + e.preventDefault(); + dispatch(removeBook(id)); + }; + return (
@@ -91,7 +100,7 @@ const Book = ({ id, title, author }) => { Comment - Remove + Remove Edit
@@ -109,7 +118,7 @@ const Book = ({ id, title, author }) => { }; Book.propTypes = { - id: PropTypes.number.isRequired, + id: PropTypes.string.isRequired, title: PropTypes.string.isRequired, author: PropTypes.string.isRequired, }; diff --git a/src/components/BookForm.js b/src/components/BookForm.js index 49aa963..b05dcc6 100644 --- a/src/components/BookForm.js +++ b/src/components/BookForm.js @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { useDispatch } from 'react-redux'; +import { v4 as generateID } from 'uuid'; import { useState } from 'react'; import { addBook } from '../redux/books/books'; @@ -18,19 +19,16 @@ const BookForm = () => { `; const [title, setTitle] = useState(''); - const [id, setId] = useState(1); + const id = generateID(); const submitBookToStore = (e) => { e.preventDefault(); - const newBook = { id, title, author: 'Robert', }; - dispatch(addBook(newBook)); - setId(id + 1); }; return ( From f432ac29c5cba904978b6d64604185969f8529d9 Mon Sep 17 00:00:00 2001 From: David Vergaray Date: Tue, 22 Feb 2022 13:47:52 -0300 Subject: [PATCH 5/8] Move styled components out of component --- src/App.js | 8 +-- src/components/Book.js | 140 ++++++++++++++++++------------------- src/components/BookForm.js | 23 +++--- src/components/Books.js | 13 ++-- src/components/Header.js | 76 ++++++++++---------- 5 files changed, 130 insertions(+), 130 deletions(-) diff --git a/src/App.js b/src/App.js index f54097a..8aeee74 100644 --- a/src/App.js +++ b/src/App.js @@ -4,11 +4,11 @@ import Header from './components/Header'; import Books from './components/Books'; import Categories from './components/Categories'; -function App() { - const WholePage = styled.div` - min-height: 100vh; - `; +const WholePage = styled.div` + min-height: 100vh; +`; +function App() { return (
diff --git a/src/components/Book.js b/src/components/Book.js index 6172090..26a6c3d 100644 --- a/src/components/Book.js +++ b/src/components/Book.js @@ -4,86 +4,86 @@ import { useDispatch } from 'react-redux'; import './Book.css'; import { removeBook } from '../redux/books/books'; -const Book = ({ id, title, author }) => { - const dispatch = useDispatch(); +const DataContainer = styled.div` + display: grid; + grid-template-columns: 40% 30% 30%; + padding: 1.5rem; + margin: 0.3rem 0rem; + background-color: white; + border-radius: 4px; + border: 1px solid #e8e8e8; +`; - const DataContainer = styled.div` - display: grid; - grid-template-columns: 40% 30% 30%; - padding: 1.5rem; - margin: 0.3rem 0rem; - background-color: white; - border-radius: 4px; - border: 1px solid #e8e8e8; - `; +const Data = styled.div` + display: flex; + flex-direction: column; + align-content: flex-start; +`; - const Data = styled.div` - display: flex; - flex-direction: column; - align-content: flex-start; - `; +const Genre = styled.p` + opacity: 0.5; + font-size: 0.875rem; + font-weight: bold; + margin: 0 0 0.4rem 0; + color: #121212; +`; - const Genre = styled.p` - opacity: 0.5; - font-size: 0.875rem; - font-weight: bold; - margin: 0 0 0.4rem 0; - color: #121212; - `; +const Title = styled.h3` + font-size: 1.375rem; + font-weight: bold; + letter-spacing: -0.2px; + margin: 0rem; + color: #121212; +`; - const Title = styled.h3` - font-size: 1.375rem; - font-weight: bold; - letter-spacing: -0.2px; - margin: 0rem; - color: #121212; - `; +const Author = styled.p` + font-size: 0.875rem; + font-weight: 300; + margin: 0rem; + color: #4386bf; +`; - const Author = styled.p` - font-size: 0.875rem; - font-weight: 300; - margin: 0rem; - color: #4386bf; - `; +const Actions = styled.div` + display: flex; + margin: 1rem 0 0 0; + padding: 0; +`; - const Actions = styled.div` - display: flex; - margin: 1rem 0 0 0; - padding: 0; - `; +const Action = styled.button` + padding-right: 0.7rem; + background-color: transparent; + cursor: pointer; + border: none; + color: #4386bf; +`; - const Action = styled.button` - padding-right: 0.7rem; - background-color: transparent; - cursor: pointer; - border: none; - color: #4386bf; - `; +const CurrentChapter = styled.p` + opacity: 0.5; + font-size: 0.813rem; + font-weight: 300; + letter-spacing: -0.4px; + margin: 0 0 1rem 0; +`; - const CurrentChapter = styled.p` - opacity: 0.5; - font-size: 0.813rem; - font-weight: 300; - letter-spacing: -0.4px; - margin: 0 0 1rem 0; - `; +const Chapter = styled.p` + font-size: 1rem; + font-weight: 300; + margin: 0 0 1rem 0; +`; - const Chapter = styled.p` - font-size: 1rem; - font-weight: 300; - margin: 0 0 1rem 0; - `; +const UpdateButton = styled.button` + font-size: 0.813rem; + font-weight: 300; + letter-spacing: 0.5px; + color: white; + background-color: #0290ff; + padding: 0.438rem 1.188rem 0.5rem 1.375rem; + border-radius: 3px; + border: none; +`; - const UpdateButton = styled.button` - font-size: 0.813rem; - font-weight: 300; - letter-spacing: 0.5px; - color: white; - background-color: #0290ff; - padding: 0.438rem 1.188rem 0.5rem 1.375rem; - border-radius: 3px; - border: none; - `; +const Book = ({ id, title, author }) => { + const dispatch = useDispatch(); const removeBookFromStore = (e) => { e.preventDefault(); diff --git a/src/components/BookForm.js b/src/components/BookForm.js index b05dcc6..cbea9e9 100644 --- a/src/components/BookForm.js +++ b/src/components/BookForm.js @@ -4,19 +4,19 @@ import { v4 as generateID } from 'uuid'; import { useState } from 'react'; import { addBook } from '../redux/books/books'; -const BookForm = () => { - const dispatch = useDispatch(); +const FormContainer = styled.div` + border-top: 1px solid #e8e8e8; +`; - const FormContainer = styled.div` - border-top: 1px solid #e8e8e8; - `; +const AddBook = styled.h2` + font-size: 1.25rem; + font-weight: bold; + letter-spacing: -0.18px; + color: #888; +`; - const AddBook = styled.h2` - font-size: 1.25rem; - font-weight: bold; - letter-spacing: -0.18px; - color: #888; - `; +const BookForm = () => { + const dispatch = useDispatch(); const [title, setTitle] = useState(''); const id = generateID(); @@ -29,6 +29,7 @@ const BookForm = () => { author: 'Robert', }; dispatch(addBook(newBook)); + setTitle(''); }; return ( diff --git a/src/components/Books.js b/src/components/Books.js index 26d8e4e..b6c2c7b 100644 --- a/src/components/Books.js +++ b/src/components/Books.js @@ -3,15 +3,14 @@ import { useSelector } from 'react-redux'; import Book from './Book'; import BookForm from './BookForm'; +const Background = styled.div` +padding: 1rem 5vw; +min-height: 100vh; +`; + const Books = () => { const bookStore = useSelector((state) => state.booksReducer); - const Background = styled.div` - background-color: lightblue; - padding: 1rem 5vw; - min-height: 100vh; - `; - const bookList = bookStore.map((book) => ( { return ( {bookList} - + {BookForm()} ); }; diff --git a/src/components/Header.js b/src/components/Header.js index a5bcffb..f6af13a 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -2,51 +2,51 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import uIcon from '../assets/images/user.png'; -const Header = () => { - const OuterHeader = styled.header` - width: 100%; - padding: 1rem 0; - border-bottom: 1px solid #e8e8e8; - background-color: white; - `; +const OuterHeader = styled.header` + width: 100%; + padding: 1rem 0; + border-bottom: 1px solid #e8e8e8; + background-color: white; +`; - const InnerHeader = styled.nav` - display: flex; - margin: 0 5vw; - justify-content: space-between; - `; +const InnerHeader = styled.nav` + display: flex; + margin: 0 5vw; + justify-content: space-between; +`; - const Title = styled.h1` - display: flex; - width: 15rem; - height: 2.313rem; - margin: 0.375rem 2.938rem 0.125rem 0; - font-size: 1.875rem; - font-weight: bold; - color: #0290ff; - `; +const Title = styled.h1` + display: flex; + width: 15rem; + height: 2.313rem; + margin: 0.375rem 2.938rem 0.125rem 0; + font-size: 1.875rem; + font-weight: bold; + color: #0290ff; +`; - const LinksContainer = styled.div` - display: flex; - align-items: center; - `; +const LinksContainer = styled.div` + display: flex; + align-items: center; +`; - const linkBtn = { - padding: '0 0.5rem', - fontSize: '0.82rem', - textDecoration: 'none', - color: '#121212', - }; +const linkBtn = { + padding: '0 0.5rem', + fontSize: '0.82rem', + textDecoration: 'none', + color: '#121212', +}; - const PageTop = styled.div` - display: flex; - `; +const PageTop = styled.div` + display: flex; +`; - const userIco = { - height: '2.8rem', - width: '2.8rem', - }; +const userIco = { + height: '2.8rem', + width: '2.8rem', +}; +const Header = () => { const UserIcon = () => user-logo; return ( From 5e4920db38063fbd91c63eb1f947cc46d409b833 Mon Sep 17 00:00:00 2001 From: David Vergaray Date: Tue, 22 Feb 2022 13:55:31 -0300 Subject: [PATCH 6/8] Create BookList component --- src/components/BookList.js | 23 +++++++++++++++++++++++ src/components/Books.js | 32 +++++++++----------------------- 2 files changed, 32 insertions(+), 23 deletions(-) create mode 100644 src/components/BookList.js diff --git a/src/components/BookList.js b/src/components/BookList.js new file mode 100644 index 0000000..3b91aab --- /dev/null +++ b/src/components/BookList.js @@ -0,0 +1,23 @@ +import { useSelector } from 'react-redux'; +import Book from './Book'; + +const BookList = () => { + const bookStore = useSelector((state) => state.booksReducer); + + return ( +
+ { + bookStore.map((book) => ( + + )) + } +
+ ); +}; + +export default BookList; diff --git a/src/components/Books.js b/src/components/Books.js index b6c2c7b..835ed19 100644 --- a/src/components/Books.js +++ b/src/components/Books.js @@ -1,31 +1,17 @@ import styled from 'styled-components'; -import { useSelector } from 'react-redux'; -import Book from './Book'; import BookForm from './BookForm'; +import BookList from './BookList'; const Background = styled.div` -padding: 1rem 5vw; -min-height: 100vh; + padding: 1rem 5vw; + min-height: 100vh; `; -const Books = () => { - const bookStore = useSelector((state) => state.booksReducer); - - const bookList = bookStore.map((book) => ( - - )); - - return ( - - {bookList} - {BookForm()} - - ); -}; +const Books = () => ( + + + + +); export default Books; From 7f1e10f762f28f592413651f99fc67734e18c62e Mon Sep 17 00:00:00 2001 From: David Vergaray Date: Tue, 22 Feb 2022 13:57:15 -0300 Subject: [PATCH 7/8] Change App function component to ES6 --- src/App.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 8aeee74..241b367 100644 --- a/src/App.js +++ b/src/App.js @@ -8,16 +8,14 @@ const WholePage = styled.div` min-height: 100vh; `; -function App() { - return ( - -
- - } /> - } /> - - - ); -} +const App = () => ( + +
+ + } /> + } /> + + +); export default App; From a5ff644e328cc6d20ab27e243baf6f44f6be22e4 Mon Sep 17 00:00:00 2001 From: David Vergaray Date: Tue, 22 Feb 2022 16:00:07 -0300 Subject: [PATCH 8/8] Add genre catalog --- src/components/Book.js | 10 ++++++++-- src/components/BookForm.js | 27 ++++++++++++++++++++++++--- src/components/BookList.js | 1 + 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/components/Book.js b/src/components/Book.js index 26a6c3d..def1498 100644 --- a/src/components/Book.js +++ b/src/components/Book.js @@ -82,7 +82,12 @@ const UpdateButton = styled.button` border: none; `; -const Book = ({ id, title, author }) => { +const Book = ({ + id, + title, + author, + genre, +}) => { const dispatch = useDispatch(); const removeBookFromStore = (e) => { @@ -94,7 +99,7 @@ const Book = ({ id, title, author }) => {
- Genre + {genre} {title} {author} @@ -121,6 +126,7 @@ Book.propTypes = { id: PropTypes.string.isRequired, title: PropTypes.string.isRequired, author: PropTypes.string.isRequired, + genre: PropTypes.string.isRequired, }; export default Book; diff --git a/src/components/BookForm.js b/src/components/BookForm.js index cbea9e9..4827ae3 100644 --- a/src/components/BookForm.js +++ b/src/components/BookForm.js @@ -15,10 +15,23 @@ const AddBook = styled.h2` color: #888; `; +const genres = [ + 'Action', + 'History', + 'Drama', + 'Adventure', + 'Fantasy', + 'Horror', + 'Mystery', + 'Comic', +]; + const BookForm = () => { const dispatch = useDispatch(); const [title, setTitle] = useState(''); + const [author, setAuthor] = useState(''); + const [genre, setGenre] = useState(''); const id = generateID(); const submitBookToStore = (e) => { @@ -26,10 +39,12 @@ const BookForm = () => { const newBook = { id, title, - author: 'Robert', + author, + genre, }; dispatch(addBook(newBook)); setTitle(''); + setAuthor(''); }; return ( @@ -37,8 +52,14 @@ const BookForm = () => { ADD NEW BOOK
setTitle(e.target.value)} value={title} placeholder="Book title" /> - setAuthor(e.target.value)} value={author} placeholder="Book author" /> +
diff --git a/src/components/BookList.js b/src/components/BookList.js index 3b91aab..0bf966f 100644 --- a/src/components/BookList.js +++ b/src/components/BookList.js @@ -11,6 +11,7 @@ const BookList = () => {