Add actions

package.json

@@ -4,11 +4,13 @@
   "private": true,
   "homepage": "https://geekyhacks.github.io/BookStore_React/",
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/App.jsx

@@ -1,45 +1,40 @@
-import React from 'react';
 import { Routes, Route, Link } from 'react-router-dom';
-import MainContainer from './components/Books';
 import Contact from './components/Contact';
-import Categories from './components/Categories';
 import Footer from './components/Footer';
 import './styles/Css/App.css';
-import accountPic from './assets/images/account-circle.svg';
+import accountPic from './assets/account-circle.svg';
+import BooksContainer from './redux/books/BooksContainer';
+import CatContainer from './redux/categories/CatContainer';
 
 function App() {
   return (
-    <div className="fullWebsite">
-      <div className="App">
-        <nav className="navBar">
+    <div className="App">
+      <nav className="navBar">
+        <Link className="bookstoreTitle" to="/BookStore_React/">
+          Geeky Book Store
+        </Link>
+        <div className="navLinks">
+          <Link className="link" to="/BookStore_React/books">
+            Books
+          </Link>
+          <Link className="link" to="/BookStore_React/categories">
+            Categories
+          </Link>
+          <Link className="link" to="/BookStore_React/contact">
+            Contact
+          </Link>
           <Link className="bookstoreTitle" to="/BookStore_React/">
-            Geeky Book Store
+            <img className="accountPic" src={accountPic} alt="" />
           </Link>
-          <div className="navLinks">
-            <Link className="link" to="/BookStore_React/books">
-              Books
-            </Link>
-            <Link className="link" to="/BookStore_React/categories">
-              Categories
-            </Link>
-            <Link className="link" to="/BookStore_React/contact">
-              Contact
-            </Link>
-            <Link className="bookstoreTitle" to="/BookStore_React/">
-              <img className="accountPic" src={accountPic} alt="" />
-            </Link>
-          </div>
-        </nav>
-
-        <Routes>
-          {/* <Route index element={<Home />} /> */}
-          <Route path="/BookStore_React/" element={<MainContainer />} />
-          <Route path="/BookStore_React/books" element={<MainContainer />} />
-          <Route path="/BookStore_React/contact" element={<Contact />} />
-          <Route path="/BookStore_React/categories" element={<Categories />} />
-          <Route path="/BookStore_React/*" element={<div className="notFound"> Page not found!! </div>} />
-        </Routes>
-      </div>
+        </div>
+      </nav>
+      <Routes className="Routes">
+        <Route path="/BookStore_React/" element={<BooksContainer />} />
+        <Route path="/BookStore_React/books" element={<BooksContainer />} />
+        <Route path="/BookStore_React/contact" element={<Contact />} />
+        <Route path="/BookStore_React/*" element={<div className="notFound"> Page not found!! </div>} />
+        <Route path="/BookStore_React/categories" element={<CatContainer />} />
+      </Routes>
       <Footer />
     </div>
   );

src/components/Books.jsx → src/components/BooksSection.jsx

@@ -1,7 +1,7 @@
 import BooksContainer from './Books/BooksContainer';
-import AddBook from './Books/AddBook';
+import AddBook from './AddBook';
 
-const Books = () => {
+const BooksSection = () => {
   const result = (
     <div className="Books">
       <BooksContainer />
@@ -12,4 +12,4 @@ const Books = () => {
   return result;
 };
 
-export default Books;
+export default BooksSection;

src/components/Footer.jsx

@@ -1,13 +1,11 @@
 const Footer = () => {
   const result = (
-    <div>
-      <footer>
-        <h3 className="copyRights">
-          Copy rights reserved to
-          <a href="https://github.com/GeekyHacks"> GeekyHacks</a>
-        </h3>
-      </footer>
-    </div>
+    <footer>
+      <h3 className="copyRights">
+        Copy rights reserved to
+        <a href="https://github.com/GeekyHacks"> GeekyHacks</a>
+      </h3>
+    </footer>
   );
 
   return result;

src/index.js

@@ -1,18 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
+import { store } from './redux/store';
+import { Provider } from 'react-redux';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <Provider store={store}>
+        <App />
+      </Provider>
     </BrowserRouter>
-  </React.StrictMode>,
+  </React.StrictMode>
 );
-
-// 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