Redux setup

package.json

@@ -9,8 +9,10 @@
     "prop-types": "^15.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-redux": "^7.2.8",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "redux": "^4.1.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -44,7 +44,7 @@ nav {
   height: 30rem;
 }
 
-.add_book {
+.add_book form {
   display: flex;
   gap: 1rem;
   margin-top: 3rem;

src/components/AddBook.js

@@ -1,11 +1,63 @@
-import React from 'react';
-
-const AddBook = () => (
-  <div className="add_book">
-    <input className="author" placeholder="Author name" />
-    <input className="title" placeholder="Book title" />
-    <button className="add_button" type="button">ADD BOOK</button>
-  </div>
-);
+// import React from 'react';
+
+// const AddBook = () => (
+//   <div className="add_book">
+//     <input className="author" placeholder="Author name" />
+//     <input className="title" placeholder="Book title" />
+//     <button className="add_button" type="button">ADD BOOK</button>
+//   </div>
+// );
+
+// export default AddBook;
+
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { addBook } from '../redux/books/books';
+import bookStore from '../redux/configureStore';
+
+const AddBook = () => {
+  const [form, setForm] = useState({
+    title: '',
+    author: '',
+  });
+
+  const titleChange = (e) => {
+    setForm({
+      ...form,
+      title: e.target.value,
+    });
+  };
+
+  const authorChange = (e) => {
+    setForm({
+      ...form,
+      author: e.target.value,
+    });
+  };
+
+  const dispatch = useDispatch();
+
+  const submitBook = (e) => {
+    e.preventDefault();
+    const theBook = {
+      id: bookStore.getState().books.length,
+      author: form.author,
+      title: form.title,
+    };
+    dispatch(addBook(theBook));
+    form.author = '';
+    form.title = '';
+  };
+
+  return (
+    <div className="add_book">
+      <form onSubmit={(e) => submitBook(e)}>
+        <input className="author" placeholder="Author name" value={form.author} onChange={(e) => authorChange(e)} required />
+        <input className="title" placeholder="Book title" value={form.title} onChange={(e) => titleChange(e)} required />
+        <button className="add_button" type="submit">ADD BOOK</button>
+      </form>
+    </div>
+  );
+};
 
 export default AddBook;

src/components/Book.js

@@ -1,16 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { removeBook } from '../redux/books/books';
 
 const Book = (props) => {
-  const { title, author } = props;
+  const { title, author, id } = props;
+  const dispatch = useDispatch();
+  const remove = (bookToBeRemoved) => {
+    dispatch(removeBook({ id: bookToBeRemoved }));
+  };
+
   return (
     <div className="book">
-      <h1 className="book_title">{title}</h1>
       <h1 className="book_author">{author}</h1>
-      <button className="remove_button" type="button">Remove</button>
+      <h1 className="book_title">{title}</h1>
+      <button className="remove_button" type="button" id={id} onClick={(e) => remove(e.target.id)}>Remove</button>
     </div>
   );
 };
 
-Book.propTypes = { title: PropTypes.string.isRequired, author: PropTypes.string.isRequired };
+Book.propTypes = {
+  title: PropTypes.string.isRequired,
+  author: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+};
 export default Book;

src/components/Books.js

@@ -1,17 +1,17 @@
-import React from 'react';
+import { useSelector } from 'react-redux';
 import Book from './Book';
 import AddBook from './AddBook';
 
-const BookToBeDesplayed = {
-  title: 'Book1',
-  author: 'Author1',
-};
-
 const Books = () => {
-  const { title, author } = BookToBeDesplayed;
+  const bookState = useSelector((state) => state.books);
+
   return (
     <div className="books_container">
-      <Book title={title} author={author} />
+      {bookState.map((books) => (
+        <div key={books.id}>
+          <Book author={books.author} title={books.title} id={books.id} />
+        </div>
+      ))}
       <AddBook />
     </div>
   );

src/index.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import bookStore from './redux/configureStore';
 import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={bookStore}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root'),
 );

src/redux/books/books.js

@@ -0,0 +1,30 @@
+const ADD_BOOK = 'bookstore/books/ADD_BOOK';
+const REMOVE_BOOK = 'bookstore/books/REMOVE_BOOK';
+const initialState = [];
+
+export const addBook = (book) => ({
+  type: ADD_BOOK,
+  payload: book,
+});
+
+export const removeBook = (id) => ({
+  type: REMOVE_BOOK,
+  payload: id,
+});
+
+const bookReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ADD_BOOK: return [
+      ...state,
+      {
+        id: state.length + 1,
+        title: action.payload.title,
+        author: action.payload.author,
+      },
+    ];
+    case REMOVE_BOOK: return state.filter((book) => (book.id !== action.payload.id));
+    default: return state;
+  }
+};
+
+export default bookReducer;

src/redux/catagories/catagories.js

@@ -0,0 +1,16 @@
+const CHECK_STATUS = 'bookstore/categories/CHECK_STATUS';
+const initialState = [];
+
+export const checkStatus = (id) => ({
+  type: CHECK_STATUS,
+  payload: id,
+});
+
+const checkStatusReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case CHECK_STATUS: return 'UNDER CONSTRUCTION';
+    default: return state;
+  }
+};
+
+export default checkStatusReducer;

src/redux/configureStore.js

@@ -0,0 +1,12 @@
+import { combineReducers, createStore } from 'redux';
+import checkStatusReducer from './catagories/catagories';
+import bookReducer from './books/books';
+
+const rootReducer = combineReducers({
+  books: bookReducer,
+  status: checkStatusReducer,
+});
+
+const bookStore = createStore(rootReducer);
+
+export default bookStore;