React Redux

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>
-    <h3>{title}</h3>
-    <p>
-      By
-      {author}
-    </p>
-    <Button name="Remove" />
-  </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;

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);
+
   return (
     <div>
       {books.map((book) => (
-        <Book key={book.id} title={book.title} author={book.author} />
+        <Book key={book.item_id} id={book.item_id} title={book.title} author={book.author} />
       ))}
       <Form />
     </div>

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;

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;

src/index.js

@@ -2,10 +2,14 @@ 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'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
+    <Provider store={store}>
     <App />
+    </Provider>
   </React.StrictMode>,
 );

src/redux/book/bookSlice.js

@@ -1,7 +1,26 @@
-import { createReducer } from '@reduxjs/toolkit';
+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
@@ -10,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,
   });
 };

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",
   });
 };