diff --git a/src/components/BookList.js b/src/components/BookList.js index 43196a4..7e58719 100644 --- a/src/components/BookList.js +++ b/src/components/BookList.js @@ -1,9 +1,22 @@ import React from 'react'; -import { useSelector } from 'react-redux'; import Books from './Books'; const BookList = () => { - const books = useSelector((state) => state.books); + const books = [ + { + id: 1, + title: 'The pursuits of happiness', + category: 'politics', + author: 'Frank Kaso', + }, + { + id: 2, + title: 'Vampire Diaries', + category: 'Horror', + author: 'Nick KLaus', + }, + ]; + return ( <> {books.map((book) => ( @@ -11,7 +24,6 @@ const BookList = () => { key={book.id} id={book.id} title={book.title} - category={book.category} author={book.author} /> ))} diff --git a/src/components/Books.js b/src/components/Books.js index 32a9cde..a511ff8 100644 --- a/src/components/Books.js +++ b/src/components/Books.js @@ -1,28 +1,19 @@ import React from 'react'; + import PropTypes from 'prop-types'; -import { useDispatch } from 'react-redux'; -import { removeBook } from '../redux/books/books'; import '../assets/book.css'; const Books = (props) => { - const { - id, author, title, category, - } = props; - const dispatch = useDispatch(); - - const deleteHandler = () => { - dispatch(removeBook(id)); - }; - + const { id, author, title } = props; return (
- {category} + Action

{title}

{author}

- +
@@ -45,7 +36,6 @@ Books.propTypes = { id: PropTypes.number.isRequired, title: PropTypes.string.isRequired, author: PropTypes.string.isRequired, - category: PropTypes.string.isRequired, }; export default Books; diff --git a/src/components/Category.js b/src/components/Category.js index 1790654..cf7026a 100644 --- a/src/components/Category.js +++ b/src/components/Category.js @@ -1,17 +1,9 @@ import React from 'react'; -import { useDispatch } from 'react-redux'; -import { checkStatus } from '../redux/categories/categories'; -const Category = () => { - const dispatch = useDispatch(); - const checkStatusHandler = () => { - dispatch(checkStatus()); - }; - return ( -
- -
- ); -}; +const Category = () => ( +
+ +
+); export default Category; diff --git a/src/components/FormList.js b/src/components/FormList.js index 948b755..2bf5161 100644 --- a/src/components/FormList.js +++ b/src/components/FormList.js @@ -1,30 +1,19 @@ import React from 'react'; -import { useDispatch } from 'react-redux'; -import { addBook } from '../redux/books/books'; + import '../assets/Form.css'; const FormList = () => { - const dispatch = useDispatch(); - const registerBook = (e) => { e.preventDefault(); - const { title, author, category } = e.target.elements; - const newBook = { - title: title.value, - author: author.value, - category: category.value, - }; - - dispatch(addBook(newBook)); }; return (

ADD NEW BOOK

- - - + + +
diff --git a/src/index.js b/src/index.js index dbfec86..c6af5e0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,19 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; -import store from './redux/configureStore'; +import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - + , ); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/src/redux/books/books.js b/src/redux/books/books.js index c87a2a8..648eb98 100644 --- a/src/redux/books/books.js +++ b/src/redux/books/books.js @@ -1,4 +1,3 @@ -<<<<<<< HEAD const ADD_BOOK = 'ADD_BOOK'; const REMOVE_BOOK = 'REMOVE_BOOK'; @@ -12,24 +11,6 @@ const books = (state = [], action) => { id: state.length, title: action.payload.title, author: action.payload.author, -======= -import initialData from './initialData'; - -const ADD_BOOK = 'bookstore/src/redux/books/ADD_BOOK'; -const REMOVE_BOOK = 'bookstore/src/redux/categories/REMOVE_BOOK'; - -export const removeBook = (id) => ({ type: REMOVE_BOOK, payload: { id } }); -export const addBook = (book) => ({ type: ADD_BOOK, payload: book }); - -const books = (state = initialData, action) => { - switch (action.type) { - case ADD_BOOK: - return [...state, { - id: Math.floor((Math.random() * 100) + 1), - title: action.payload.title, - author: action.payload.author, - category: action.payload.category, ->>>>>>> react-redux-usage }]; case REMOVE_BOOK: return state.filter((book) => book.id !== action.payload.id); diff --git a/src/redux/books/initialData.js b/src/redux/books/initialData.js deleted file mode 100644 index 3ce47a5..0000000 --- a/src/redux/books/initialData.js +++ /dev/null @@ -1,22 +0,0 @@ -const books = [ - // { - // id: 1, - // title: 'The pursuits of happiness', - // category: 'politics', - // author: 'Frank Kaso', - // }, - // { - // id: 2, - // title: 'Vampire Diaries', - // category: 'Horror', - // author: 'Nick KLaus', - // }, - // { - // id: 3, - // title: 'The originals', - // category: 'Horror', - // author: 'Nick KLaus', - // }, -]; - -export default books;