Add create and remove book using redux

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}

package.json

@@ -13,7 +13,10 @@
     "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",
+    "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -4,20 +4,18 @@ 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;
+`;
 
-  return (
-    <WholePage>
-      <Header />
-      <Routes>
-        <Route path="/" element={<Books />} />
-        <Route path="/categories" element={<Categories />} />
-      </Routes>
-    </WholePage>
-  );
-}
+const App = () => (
+  <WholePage>
+    <Header />
+    <Routes>
+      <Route path="/" element={<Books />} />
+      <Route path="/categories" element={<Categories />} />
+    </Routes>
+  </WholePage>
+);
 
 export default App;

src/components/Book.js

@@ -1,91 +1,102 @@
 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 = ({ data }) => {
-  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;
-    list-style: none;
-    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 { genre, title, author } = data;
+const Book = ({
+  id,
+  title,
+  author,
+  genre,
+}) => {
+  const dispatch = useDispatch();
+
+  const removeBookFromStore = (e) => {
+    e.preventDefault();
+    dispatch(removeBook(id));
+  };
 
   return (
-    <DataContainer>
+    <DataContainer id={id}>
       <div>
         <Data>
           <Genre>{genre}</Genre>
@@ -94,28 +105,28 @@ const Book = ({ data }) => {
         </Data>
         <Actions className="action-list">
           <Action>Comment</Action>
-          <Action>Remove</Action>
+          <Action onClick={removeBookFromStore}>Remove</Action>
           <Action>Edit</Action>
         </Actions>
       </div>
       <div>
-        <p>64%</p>
+        <p>Percent</p>
         <p>Completed</p>
       </div>
       <div>
         <CurrentChapter>Current Chapter</CurrentChapter>
-        <Chapter>Chapter 17</Chapter>
+        <Chapter>Chapter [Number]</Chapter>
         <UpdateButton>Update progress</UpdateButton>
       </div>
     </DataContainer>
   );
 };
 
 Book.propTypes = {
-  data: PropTypes.instanceOf(Object).isRequired,
-  genre: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   author: PropTypes.string.isRequired,
+  genre: PropTypes.string.isRequired,
 };
 
 export default Book;