From e2fd66b98949185be145026b2dab65dfdabd8534 Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 27 Jul 2023 08:40:34 +0000
Subject: [PATCH 1/7] Add initial state of books

---
 src/redux/book/bookSlice.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/redux/book/bookSlice.js b/src/redux/book/bookSlice.js
index 536cbac..cae964a 100644
--- a/src/redux/book/bookSlice.js
+++ b/src/redux/book/bookSlice.js
@@ -1,7 +1,26 @@
 import { createReducer } from '@reduxjs/toolkit';
 
 const initialState = {
-  books: [],
+  books: [
+    {
+      "item_id": "item1",
+      "title": "The Great Gatsby",
+      "author": "John Smith",
+      "category": "Fiction"
+    },
+    {
+      "item_id": "item2",
+      "title": "Anna Karenina",
+      "author": "Leo Tolstoy",
+      "category": "Fiction"
+    },
+    {
+      "item_id": "item3",
+      "title": "The Selfish Gene",
+      "author": "Richard Dawkins",
+      "category": "Nonfiction"
+    }
+  ],
 };
 
 // Reducers

From d3c65644befe8ade56ebb3aeabf1eb192e9fef4d Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 27 Jul 2023 09:05:28 +0000
Subject: [PATCH 2/7] Add store to App

---
 src/index.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/index.js b/src/index.js
index dac4ede..e4fa2d3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import store from "./redux/store";
+// import { Provider } from "react-redux";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+      <App />
+    {/* <Provider store={store}>
+    </Provider> */}
+  </React.StrictMode>
 );

From b5342840dfa4fe3bcb491b7cfd1b6264de5b1b66 Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 27 Jul 2023 09:16:54 +0000
Subject: [PATCH 3/7] Fix redux error

---
 src/index.js                        |  5 +++++
 src/redux/category/categorySlice.js | 13 +++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index dac4ede..22a5cea 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,10 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { Provider } from 'react-redux';
+import store from './redux/store';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <Provider store={store}>
+
     <App />
+    </Provider>
   </React.StrictMode>,
 );
diff --git a/src/redux/category/categorySlice.js b/src/redux/category/categorySlice.js
index e1c2339..885ab82 100644
--- a/src/redux/category/categorySlice.js
+++ b/src/redux/category/categorySlice.js
@@ -1,19 +1,20 @@
-import { createReducer } from '@reduxjs/toolkit';
+import { createReducer } from "@reduxjs/toolkit";
 
 const initialState = {
   categories: [],
-  status: '',
+  status: "",
 };
 
 // Reducers
-export const categoriesReducer = createReducer({
-  initialState,
-  checkstatus: (state) => ({ ...state, status: 'Under Construction' }),
+export const categoriesReducer = createReducer(initialState, {
+  checkstatus: (state) => {
+    return { ...state, status: "Under Construction" };
+  },
 });
 
 // actions
 export const CheckStatus = (dispatch) => {
   dispatch({
-    type: 'checkstatus',
+    type: "checkstatus",
   });
 };

From 76152a8259d1ef8ca422769fe4f40fb71285dd0f Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 27 Jul 2023 09:31:20 +0000
Subject: [PATCH 4/7] Display books from store

---
 src/components/Book.js   |  4 ++--
 src/components/Books.js  | 15 +++++++--------
 src/components/Button.js | 12 ++++++++----
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/Book.js b/src/components/Book.js
index 794c432..dda7ece 100644
--- a/src/components/Book.js
+++ b/src/components/Book.js
@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 import Button from './Button';
 
 const Book = ({ title, author }) => (
-  <div>
+  <div className='border-b-4'>
     <h3>{title}</h3>
     <p>
       By
       {author}
     </p>
-    <Button name="Remove" />
+    <button className='px-3 py-1 bg-red-400'>Remove</button>
   </div>
 );
 
diff --git a/src/components/Books.js b/src/components/Books.js
index b89f1d2..fecc0a5 100644
--- a/src/components/Books.js
+++ b/src/components/Books.js
@@ -1,16 +1,15 @@
-import React from 'react';
-import Book from './Book';
-import Form from './Form';
+import React from "react";
+import Book from "./Book";
+import Form from "./Form";
+import { useSelector } from "react-redux";
 
 const Books = () => {
-  const books = [
-    { id: 1, title: 'Book 1', author: 'Author 1' },
-    { id: 2, title: 'Book 2', author: 'Author 2' },
-  ];
+  const {books} = useSelector((state) => state.book);
+  console.log(books);
   return (
     <div>
       {books.map((book) => (
-        <Book key={book.id} title={book.title} author={book.author} />
+        <Book key={book.item_id} title={book.title} author={book.author} />
       ))}
       <Form />
     </div>
diff --git a/src/components/Button.js b/src/components/Button.js
index 75ca972..2ad6daf 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,14 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-const Button = ({ name }) => <button type="button">{name}</button>;
+const Button = ({ name }) => (
+  <button type="button">
+    {name}
+  </button>
+);
 
 Button.propTypes = {
   name: PropTypes.string,
 };
 
 Button.defaultProps = {
-  name: 'Button',
+  name: "Button",
 };
 
 export default Button;

From b1cc6f5b19772c95f3efef7d010a431efb5a86b9 Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 27 Jul 2023 09:50:26 +0000
Subject: [PATCH 5/7] use Dispacth to remove book from redux store

---
 src/components/Book.js      | 41 +++++++++++++++++++++++-------------
 src/components/Books.js     |  4 ++--
 src/redux/book/bookSlice.js | 42 +++++++++++++++++++------------------
 3 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/src/components/Book.js b/src/components/Book.js
index dda7ece..3593547 100644
--- a/src/components/Book.js
+++ b/src/components/Book.js
@@ -1,27 +1,38 @@
 /* eslint-disable no-unused-vars */
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from './Button';
+import React from "react";
+import PropTypes from "prop-types";
+import { useDispatch } from "react-redux";
+import { RemoveBook } from "../redux/book/bookSlice";
 
-const Book = ({ title, author }) => (
-  <div className='border-b-4'>
-    <h3>{title}</h3>
-    <p>
-      By
-      {author}
-    </p>
-    <button className='px-3 py-1 bg-red-400'>Remove</button>
-  </div>
-);
+const Book = ({ id, title, author }) => {
+  const dispatch = useDispatch();
+
+  const handleRemove = (id) => {
+    dispatch(RemoveBook(id));
+    
+  };
+
+  return (
+    <div className="border-b-4">
+      <h3>{title}</h3>
+      <p>
+        By
+        {author}
+      </p>
+      <button className="px-3 py-1 bg-red-400" onClick={()=>handleRemove(id)}> Remove Book </button>
+    </div>
+  );
+};
 
 Book.propTypes = {
   title: PropTypes.string,
   author: PropTypes.string,
+  id: PropTypes.string,
 };
 
 Book.defaultProps = {
-  title: 'Book title',
-  author: 'Unknown Author',
+  title: "Book title",
+  author: "Unknown Author",
 };
 
 export default Book;
diff --git a/src/components/Books.js b/src/components/Books.js
index fecc0a5..59aabac 100644
--- a/src/components/Books.js
+++ b/src/components/Books.js
@@ -5,11 +5,11 @@ import { useSelector } from "react-redux";
 
 const Books = () => {
   const {books} = useSelector((state) => state.book);
-  console.log(books);
+ 
   return (
     <div>
       {books.map((book) => (
-        <Book key={book.item_id} title={book.title} author={book.author} />
+        <Book key={book.item_id} id={book.item_id} title={book.title} author={book.author} />
       ))}
       <Form />
     </div>
diff --git a/src/redux/book/bookSlice.js b/src/redux/book/bookSlice.js
index cae964a..9b0e1c6 100644
--- a/src/redux/book/bookSlice.js
+++ b/src/redux/book/bookSlice.js
@@ -1,25 +1,25 @@
-import { createReducer } from '@reduxjs/toolkit';
+import { createReducer } from "@reduxjs/toolkit";
 
 const initialState = {
   books: [
     {
-      "item_id": "item1",
-      "title": "The Great Gatsby",
-      "author": "John Smith",
-      "category": "Fiction"
+      item_id: "item1",
+      title: "The Great Gatsby",
+      author: "John Smith",
+      category: "Fiction",
     },
     {
-      "item_id": "item2",
-      "title": "Anna Karenina",
-      "author": "Leo Tolstoy",
-      "category": "Fiction"
+      item_id: "item2",
+      title: "Anna Karenina",
+      author: "Leo Tolstoy",
+      category: "Fiction",
     },
     {
-      "item_id": "item3",
-      "title": "The Selfish Gene",
-      "author": "Richard Dawkins",
-      "category": "Nonfiction"
-    }
+      item_id: "item3",
+      title: "The Selfish Gene",
+      author: "Richard Dawkins",
+      category: "Nonfiction",
+    },
   ],
 };
 
@@ -29,21 +29,23 @@ export const bookReducer = createReducer(initialState, {
     state.books.push(action.payload);
   },
   remove: (state, action) => {
-    const { id } = action.payload;
-    const newState = state.books.filter((i) => i.id !== id);
+    const id = action.payload;
+    const newState = state.books.filter((i) => i.item_id !== id);
     state.books = newState;
   },
 });
 
 // Actions
-export const AddBook = (dispatch) => {
+export const AddBook = (book) => (dispatch) => {
   dispatch({
-    type: 'add',
+    type: "add",
+    payload: book,
   });
 };
 
-export const RemoveBook = (dispatch) => {
+export const RemoveBook = (id) => (dispatch) => {
   dispatch({
-    type: 'remove',
+    type: "remove",
+    payload: id,
   });
 };

From 5cbe4ba06148074946508d216e9e1445c0834704 Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 27 Jul 2023 10:22:33 +0000
Subject: [PATCH 6/7] Added a book with redux

---
 src/components/Form.js | 64 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index ecb8265..8208f45 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -1,13 +1,55 @@
-import React from 'react';
-import Button from './Button';
-
-const Form = () => (
-  <form>
-    <h3>ADD NEW BOOK</h3>
-    <input type="text" placeholder="Book title" />
-    <input type="text" placeholder="Author" />
-    <Button name="Submit" />
-  </form>
-);
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { toast } from "react-toastify";
+import { AddBook } from "../redux/book/bookSlice";
+
+const Form = () => {
+  const { books } = useSelector((state) => state.book);
+  const dispatch = useDispatch();
+  const [author, setAuthor] = useState("");
+  const [title, setTitle] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (title.trim() === "" || author.trim() === "") {
+      toast.error("All fileds must be completed");
+      return null;
+    }
+
+    dispatch(
+      AddBook({
+        item_id: `item${books.length + 1}`,
+        author: author,
+        title: title,
+      })
+
+    );
+    setAuthor('')
+    setTitle('')
+  };
+
+  return (
+    <form className="flex flex-col gap-2" onSubmit={handleSubmit}>
+      <h3>ADD NEW BOOK</h3>
+      <input
+        type="text"
+        placeholder="Book title"
+        className="border outline-none border-blue-300"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+      <input
+        type="text"
+        placeholder="Author"
+        className="border outline-none border-blue-300"
+        value={author}
+        onChange={(e) => setAuthor(e.target.value)}
+      />
+      <button className="px-3 py-1 bg-blue-700 text-white mx-4 rounded-md">
+        Add book
+      </button>
+    </form>
+  );
+};
 
 export default Form;

From 89abbfac2f4aa529ecde419d6b7078301b821e5d Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 27 Jul 2023 10:44:06 +0000
Subject: [PATCH 7/7] Fix linter

---
 src/components/Book.js              | 17 ++++++++--------
 src/components/Books.js             | 12 ++++++------
 src/components/Button.js            |  6 +++---
 src/components/Form.js              | 30 +++++++++++++++--------------
 src/index.js                        |  6 +++---
 src/redux/book/bookSlice.js         | 30 ++++++++++++++---------------
 src/redux/category/categorySlice.js | 10 ++++------
 7 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/src/components/Book.js b/src/components/Book.js
index 3593547..09a9b68 100644
--- a/src/components/Book.js
+++ b/src/components/Book.js
@@ -1,15 +1,14 @@
 /* eslint-disable no-unused-vars */
-import React from "react";
-import PropTypes from "prop-types";
-import { useDispatch } from "react-redux";
-import { RemoveBook } from "../redux/book/bookSlice";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { RemoveBook } from '../redux/book/bookSlice';
 
 const Book = ({ id, title, author }) => {
   const dispatch = useDispatch();
 
   const handleRemove = (id) => {
     dispatch(RemoveBook(id));
-    
   };
 
   return (
@@ -19,7 +18,7 @@ const Book = ({ id, title, author }) => {
         By
         {author}
       </p>
-      <button className="px-3 py-1 bg-red-400" onClick={()=>handleRemove(id)}> Remove Book </button>
+      <button type="button" className="px-3 py-1 bg-red-400" onClick={() => handleRemove(id)}> Remove Book </button>
     </div>
   );
 };
@@ -27,12 +26,12 @@ const Book = ({ id, title, author }) => {
 Book.propTypes = {
   title: PropTypes.string,
   author: PropTypes.string,
-  id: PropTypes.string,
+  id: PropTypes.string.isRequired,
 };
 
 Book.defaultProps = {
-  title: "Book title",
-  author: "Unknown Author",
+  title: 'Book title',
+  author: 'Unknown Author',
 };
 
 export default Book;
diff --git a/src/components/Books.js b/src/components/Books.js
index 59aabac..4d22019 100644
--- a/src/components/Books.js
+++ b/src/components/Books.js
@@ -1,11 +1,11 @@
-import React from "react";
-import Book from "./Book";
-import Form from "./Form";
-import { useSelector } from "react-redux";
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Book from './Book';
+import Form from './Form';
 
 const Books = () => {
-  const {books} = useSelector((state) => state.book);
- 
+  const { books } = useSelector((state) => state.book);
+
   return (
     <div>
       {books.map((book) => (
diff --git a/src/components/Button.js b/src/components/Button.js
index 2ad6daf..b53ff13 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,5 +1,5 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const Button = ({ name }) => (
   <button type="button">
@@ -12,7 +12,7 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
-  name: "Button",
+  name: 'Button',
 };
 
 export default Button;
diff --git a/src/components/Form.js b/src/components/Form.js
index 8208f45..c8a25e7 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -1,31 +1,33 @@
-import React, { useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { toast } from "react-toastify";
-import { AddBook } from "../redux/book/bookSlice";
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { toast } from 'react-toastify';
+import { AddBook } from '../redux/book/bookSlice';
 
 const Form = () => {
   const { books } = useSelector((state) => state.book);
   const dispatch = useDispatch();
-  const [author, setAuthor] = useState("");
-  const [title, setTitle] = useState("");
+  const [author, setAuthor] = useState('');
+  const [title, setTitle] = useState('');
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (title.trim() === "" || author.trim() === "") {
-      toast.error("All fileds must be completed");
+    if (title.trim() === '' || author.trim() === '') {
+      toast.error('All fileds must be completed');
       return null;
     }
 
     dispatch(
       AddBook({
         item_id: `item${books.length + 1}`,
-        author: author,
-        title: title,
-      })
+        author,
+        title,
+      }),
 
     );
-    setAuthor('')
-    setTitle('')
+    setAuthor('');
+    setTitle('');
+
+    return null;
   };
 
   return (
@@ -45,7 +47,7 @@ const Form = () => {
         value={author}
         onChange={(e) => setAuthor(e.target.value)}
       />
-      <button className="px-3 py-1 bg-blue-700 text-white mx-4 rounded-md">
+      <button type="submit" className="px-3 py-1 bg-blue-700 text-white mx-4 rounded-md">
         Add book
       </button>
     </form>
diff --git a/src/index.js b/src/index.js
index c2ff1c9..11867ce 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
 import { Provider } from 'react-redux';
+import App from './App';
 import store from './redux/store';
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <Provider store={store}>
-    <App />
+      <App />
     </Provider>
   </React.StrictMode>,
 );
diff --git a/src/redux/book/bookSlice.js b/src/redux/book/bookSlice.js
index 9b0e1c6..acf2d5b 100644
--- a/src/redux/book/bookSlice.js
+++ b/src/redux/book/bookSlice.js
@@ -1,24 +1,24 @@
-import { createReducer } from "@reduxjs/toolkit";
+import { createReducer } from '@reduxjs/toolkit';
 
 const initialState = {
   books: [
     {
-      item_id: "item1",
-      title: "The Great Gatsby",
-      author: "John Smith",
-      category: "Fiction",
+      item_id: 'item1',
+      title: 'The Great Gatsby',
+      author: 'John Smith',
+      category: 'Fiction',
     },
     {
-      item_id: "item2",
-      title: "Anna Karenina",
-      author: "Leo Tolstoy",
-      category: "Fiction",
+      item_id: 'item2',
+      title: 'Anna Karenina',
+      author: 'Leo Tolstoy',
+      category: 'Fiction',
     },
     {
-      item_id: "item3",
-      title: "The Selfish Gene",
-      author: "Richard Dawkins",
-      category: "Nonfiction",
+      item_id: 'item3',
+      title: 'The Selfish Gene',
+      author: 'Richard Dawkins',
+      category: 'Nonfiction',
     },
   ],
 };
@@ -38,14 +38,14 @@ export const bookReducer = createReducer(initialState, {
 // Actions
 export const AddBook = (book) => (dispatch) => {
   dispatch({
-    type: "add",
+    type: 'add',
     payload: book,
   });
 };
 
 export const RemoveBook = (id) => (dispatch) => {
   dispatch({
-    type: "remove",
+    type: 'remove',
     payload: id,
   });
 };
diff --git a/src/redux/category/categorySlice.js b/src/redux/category/categorySlice.js
index 885ab82..5e33250 100644
--- a/src/redux/category/categorySlice.js
+++ b/src/redux/category/categorySlice.js
@@ -1,20 +1,18 @@
-import { createReducer } from "@reduxjs/toolkit";
+import { createReducer } from '@reduxjs/toolkit';
 
 const initialState = {
   categories: [],
-  status: "",
+  status: '',
 };
 
 // Reducers
 export const categoriesReducer = createReducer(initialState, {
-  checkstatus: (state) => {
-    return { ...state, status: "Under Construction" };
-  },
+  checkstatus: (state) => ({ ...state, status: 'Under Construction' }),
 });
 
 // actions
 export const CheckStatus = (dispatch) => {
   dispatch({
-    type: "checkstatus",
+    type: 'checkstatus',
   });
 };