webappickhasan · Julfikar-Haidar · Apr 5, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",

diff --git a/public/index.html b/public/index.html
@@ -15,6 +15,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +28,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React Redux App</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -39,5 +43,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,56 +1,18 @@
-import React from 'react';
-import logo from './logo.svg';
-import { Counter } from './features/counter/Counter';
-import './App.css';
+import Create from "./components/Create";
+import List from "./components/List";
+
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Counter />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <span>
-          <span>Learn </span>
-          <a
-            className="App-link"
-            href="https://reactjs.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux-toolkit.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux Toolkit
-          </a>
-          ,<span> and </span>
-          <a
-            className="App-link"
-            href="https://react-redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React Redux
-          </a>
-        </span>
-      </header>
+    <div className="container-fluid">
+    <div className="row">
+      <div className="col-sm-6">
+      <List />
+    </div>
+      <div className="col-sm-6">
+      <Create />
+    </div>
+    </div>
     </div>
   );
 }

diff --git a/src/app/store.js b/src/app/store.js
@@ -1,8 +1,8 @@
-import { configureStore } from '@reduxjs/toolkit';
-import counterReducer from '../features/counter/counterSlice';
+import { configureStore } from "@reduxjs/toolkit";
+import crudReucer from "../features/crud/crudSlice";
 
 export const store = configureStore({
-  reducer: {
-    counter: counterReducer,
-  },
+    reducer: {
+        crud: crudReucer,
+    },
 });
diff --git a/src/components/Create.js b/src/components/Create.js
@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import {
+  createData,
+  changeData,
+  fetchPlaceholderList,
+} from "../features/crud/crudSlice";
+import { useDispatch, useSelector } from "react-redux";
+
+const Create = () => {
+  const dispatch = useDispatch();
+  const { editing } = useSelector((state) => state.crud) || {};
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [editMode, setEditMode] = useState(false);
+
+  const handleCreate = async (e) => {
+    e.preventDefault();
+    dispatch(
+      createData({
+        name,
+        email,
+      })
+    );
+    reset();
+  };
+
+  const handleUpdate = (e) => {
+    e.preventDefault();
+
+    dispatch(
+      changeData({
+        id: editing?.id,
+        data: {
+          name: name,
+          email: email,
+        },
+      })
+    );
+    setEditMode(false);
+    reset();
+  };
+
+  const reset = () => {
+    setName("");
+    setEmail("");
+  };
+
+  //  listen for edit mode active
+  useEffect(() => {
+    const { id, name, email } = editing || {};
+    if (id) {
+      setEditMode(true);
+      setName(name);
+      setEmail(email);
+    } else {
+      setEditMode(false);
+      reset();
+    }
+  }, [editing]);
+
+  return (
+    <>
+      <h1 className="text-center">{editMode ? "Update" : "Create"}</h1>
+
+      <form onSubmit={editMode ? handleUpdate : handleCreate}>
+        <div className="form-group">
+          <label htmlFor="exampleInputEmail1">Name</label>
+          <input
+            type="text"
+            className="form-control"
+            value={name}
+            placeholder="Enter a name"
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="exampleInputEmail1">Email</label>
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Enter description"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        </div>
+
+        <button type="submit" className="btn btn-primary">
+          Submit
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default Create;
diff --git a/src/components/List.js b/src/components/List.js
@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { editActive, fetchPlaceholderList, removeData, trushData } from "../features/crud/crudSlice";
+const List = () => {
+  const dispatch = useDispatch();
+  const [post, setpost] = useState([]);
+  const {  isLoading } = useSelector((state) => state.crud);
+
+  useEffect(() => {
+    dispatch(fetchPlaceholderList());
+  }, [dispatch]);
+
+useEffect(() => {
+    const postData = localStorage.getItem("placeholderList");
+    const jsonData = JSON.parse(postData);
+    setpost(jsonData);
+
+},[isLoading])
+
+
+
+const handleEdit = (index) => {
+  dispatch(editActive(index));
+  localStorage.setItem('editIndex', index.id)
+
+};
+
+const handleDelete = (id) => {
+  // need for server side
+  dispatch(removeData(id));
+  // locally reomove data
+  dispatch(trushData(id))
+    const postData = localStorage.getItem("placeholderList");
+    const jsonData = JSON.parse(postData);
+    setpost(jsonData);
+
+
+};
+
+  return (
+    <>
+      <h1 className="text-center">List</h1>
+      <table className="table">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">Name</th>
+            <th scope="col">Email</th>
+            <th scope="col">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {post?.map((item, i) => {
+            return (
+              <tr key={i}>
+                <th scope="row">{i}</th>
+                <td>{item.name}</td>
+                <td>{item.email}</td>
+                <td>
+                  <button
+                   type="button" className="btn btn-sm btn-primary"
+                   onClick={() => handleEdit(item)}
+                   >
+                    Edit
+                  </button>
+                  <button 
+                  type="button" className="btn btn-sm btn-danger"
+                  onClick={() => handleDelete(item.id)}
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      
+    </>
+  );
+};
+
+export default List;