Admin client (#73)

client/src/Services/mindServices.js

@@ -0,0 +1,37 @@
+import thaliaAPI from "../API/thaliaAPI";
+
+export const getMind = async () => {
+    try {
+        const response = await thaliaAPI.get('/admin/my-mind', {}, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+
+export const editMind = async (mindDetails, rightId) => {
+    try {
+        const response = await thaliaAPI.put(`/admin/my-mind/${rightId}`, mindDetails, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+
+export const createMind = async (mindDetails) => {
+    try {
+        const response = await thaliaAPI.post("/admin/my-mind", mindDetails, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+
+export const getDelete = async (mindId) => {
+    try {
+        const response = await thaliaAPI.delete(`/admin/my-mind/${mindId}`, {}, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}

client/src/components/AddMind/AddMind.jsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { Modal } from "flowbite-react";
+import { toast } from "react-toastify";
+import { createMind } from "../../Services/mindServices";
+
+function AddMind({ setOpenModal, openModal }) {
+  const [formData, setFormData] = useState({
+    name: "",
+    content: "",
+  });
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const handleCreate = async () => {
+    if (!formData.name || !formData.content) {
+      return;
+    }
+    try {
+      const response = await createMind(formData);
+      if (response.success === true) {
+        formData.name = "";
+        formData.content = "";
+        toast.success(response.message);
+        setOpenModal(false);
+      }
+    } catch (error) {
+      console.log("Error occurred", error);
+    }
+  };
+  return (
+    <>
+      <Modal show={openModal} onClose={() => setOpenModal(false)}>
+        <Modal.Header className="bg-gray-800">
+          <h1 className="text-white font-bold">Add New Mind</h1>
+        </Modal.Header>
+        <Modal.Body className="ring-1 bg-background rounded-b-md px-2 py-2">
+          <div className="w-full">
+            <label htmlFor="">
+              <h1 className="text-white py-2">Name of the Mind</h1>
+              <input
+                type="text"
+                className="w-full rounded-md bg-gray-700 text-text"
+                value={formData.name}
+                onChange={handleChange}
+                name="name"
+              />
+            </label>
+          </div>
+          <div className="w-full mt-3">
+            <label htmlFor="">
+              <h1 className="text-text py-2">Provide the Mind Description</h1>
+              <textarea
+                name="content"
+                value={formData.content}
+                onChange={handleChange}
+                id=""
+                rows={8}
+                className="w-full rounded-md bg-gray-700 text-white"
+              ></textarea>
+            </label>
+          </div>
+          <button
+            className="text-primary border-2 px-5 py-1 hover:bg-primary hover:text-black rounded-md float-end"
+            onClick={handleCreate}
+          >
+            Add Mind
+          </button>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+export default AddMind;

client/src/components/EditMind/EditMind.jsx

@@ -0,0 +1,79 @@
+import { Modal } from "flowbite-react";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { editMind } from "../../Services/mindServices";
+
+function EditMind({ setOpenModal, openModal, mindDetails }) {
+  const [formData, setFormData] = useState({
+    name: "",
+    content: "",
+  });
+  useEffect(() => {
+    console.log(mindDetails);
+    if (mindDetails) {
+      setFormData({
+        name: mindDetails?.name || "",
+        content: mindDetails?.content || "",
+      });
+    }
+  }, [mindDetails]);
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+  const handleEdit = async () => {
+    const response = await editMind(formData, mindDetails?._id);
+    if (response.success === true) {
+      toast.success(response.message);
+      formData.name = "";
+      formData.content = "";
+      setOpenModal(false);
+    }
+  };
+  return (
+    <>
+      <Modal show={openModal} onClose={() => setOpenModal(false)}>
+        <Modal.Header className="bg-gray-800">
+          <h1 className="text-white font-bold">Add New Mind</h1>
+        </Modal.Header>
+        <Modal.Body className="ring-1 bg-background rounded-b-md px-2 py-2">
+          <div className="w-full">
+            <label htmlFor="">
+              <h1 className="text-white py-2">Name of the Mind</h1>
+              <input
+                type="text"
+                className="w-full rounded-md bg-gray-700 text-text"
+                value={formData?.name}
+                onChange={handleChange}
+                name="name"
+              />
+            </label>
+          </div>
+          <div className="w-full mt-3">
+            <label htmlFor="">
+              <h1 className="text-text py-2">Provide the Mind Description</h1>
+              <textarea
+                name="content"
+                value={formData?.content}
+                onChange={handleChange}
+                id=""
+                rows={8}
+                className="w-full rounded-md bg-gray-700 text-white"
+              ></textarea>
+            </label>
+          </div>
+          <button
+            className="text-primary border-2 px-5 py-1 hover:bg-primary hover:text-black rounded-md float-end"
+            onClick={handleEdit}
+          >
+            Update
+          </button>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+export default EditMind;

client/src/components/Sidebar/Sidebar.jsx

@@ -3,6 +3,7 @@ import { MdDashboard } from "react-icons/md";
 import { FaUsers } from "react-icons/fa";
 import { TbFileReport } from "react-icons/tb";
 import { IoBody } from "react-icons/io5";
+import { FaBrain } from "react-icons/fa";
 function Sidebar() {
   return (
     <>
@@ -35,6 +36,12 @@ function Sidebar() {
               My Body
             </Link>
           </button>
+          <button className="flex items-center px-4 py-2 rounded-md w-full mt-8 hover:bg-gray-800">
+            <FaBrain className="text-primary" />
+            <Link className="ml-4 font-bold text-gray-500" to={"/admin/mind"}>
+              My Mind
+            </Link>
+          </button>
         </div>
       </div>
     </>

client/src/pages/AdminPages/MyMind/MyMind.jsx

@@ -0,0 +1,141 @@
+import { useEffect } from "react";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import EditMind from "../../../components/EditMind/EditMind";
+import AddMind from "../../../components/AddMind/AddMind";
+import { getDelete } from "../../../Services/mindServices";
+import { getMind } from "../../../Services/mindServices";
+import timeFormat from "../../../utils/timeFormat";
+
+function MyMind() {
+  const [openModal, setOpenModal] = useState(false);
+  const [mindDetails, setmindDetails] = useState([]);
+
+  const [editMind, setEditMind] = useState();
+  const [mindModal, setMindModal] = useState(false);
+
+  const handleModal = () => {
+    setOpenModal(true);
+  };
+  const handleEditModal = (mindId) => {
+    setMindModal(true);
+    const mindToEdit = mindDetails.find((mind) => {
+      return mind?._id === mindId;
+    });
+    console.log(mindToEdit);
+    setEditMind(mindToEdit);
+  };
+  useEffect(() => {
+    const getMindData = async () => {
+      const response = await getMind();
+      if (response.success === true) {
+        console.log(response.contents);
+        setmindDetails(response.contents);
+      }
+    };
+    getMindData();
+  }, [
+    setOpenModal,
+    setMindModal,
+    openModal,
+    mindModal,
+    setmindDetails,
+    setEditMind,
+  ]);
+  const handleDelete = async (mindId) => {
+    const response = await getDelete(mindId);
+    if (response.success === true) {
+      setmindDetails((prevDetails) =>
+        prevDetails.filter((mind) => mind._id !== mindId)
+      );
+      toast.success(response.message);
+    }
+  };
+  return (
+    <>
+      <EditMind
+        setOpenModal={setMindModal}
+        openModal={mindModal}
+        mindDetails={editMind ? editMind : null}
+      />
+      <AddMind setOpenModal={setOpenModal} openModal={openModal} />
+      <div className="h-full bg-background">
+        <div className="col-span-9">
+          {/* Text Components  */}
+          <div className="text-text flex justify-between">
+            <div>
+              <h1 className="text-2xl py-12">Mind Management</h1>
+            </div>
+            <div className="px-8">
+              <button
+                className="text-xl py-12 text-pretty text-primary"
+                onClick={handleModal}
+              >
+                Create
+              </button>
+            </div>
+          </div>
+          {/* Table Component  */}
+          <div>
+            <>
+              <table className="w-full text-sm text-left rtl:text-right rounded">
+                <thead className="text-xs bg-secondary rounded">
+                  <tr>
+                    <th scope="col" className="px-6 py-3 text-primary">
+                      No
+                    </th>
+                    <th scope="col" className="px-6 py-3 text-primary">
+                      Name
+                    </th>
+                    <th scope="col" className="px-6 py-3 text-primary">
+                      Date
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-3 text-primary text-center"
+                    >
+                      Edit or Delete
+                    </th>
+                  </tr>
+                </thead>
+                {mindDetails.map((mind, index) => {
+                  return (
+                    <>
+                      <tbody className="text-text" key={index}>
+                        <tr className="border-b border-gray-500">
+                          <th scope="row" className="px-6 py-4 font-medium">
+                            {index + 1}
+                          </th>
+                          <td className="px-6 py-4">{mind?.name}</td>
+                          <td className="px-6 py-4">
+                            {timeFormat(mind?.createdAt)}
+                          </td>
+                          <td className="px-6 py-4 flex justify-center">
+                            <button
+                              className="border py-1 px-6 rounded hover:bg-green-500"
+                              onClick={() => handleEditModal(mind?._id)}
+                            >
+                              Edit
+                            </button>
+                            <button
+                              className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
+                              onClick={() => handleDelete(mind?._id)}
+                            >
+                              Delete
+                            </button>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </>
+                  );
+                })}
+              </table>
+            </>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default MyMind;

client/src/pages/AdminPages/Rights/Rights.jsx

@@ -63,7 +63,7 @@ function Rights() {
             </div>
             <div className="px-8">
               <button
-                className="text-xl py-12 text-pretty text-primary "
+                className="text-xl py-12 text-pretty text-primary"
                 onClick={handleModal}
               >
                 Create

client/src/routes/AdminRoute.jsx

@@ -7,6 +7,7 @@ const Managment = lazy(() => import("../pages/AdminPages/Managment/Managment"));
 const Rights = lazy(() => import("../pages/AdminPages/Rights/Rights"));
 const Sidebar = lazy(() => import("../components/Sidebar/Sidebar"));
 const MyBody = lazy(() => import("../pages/AdminPages/MyBody/MyBody"));
+const MyMind = lazy(() => import("../pages/AdminPages/MyMind/MyMind"));
 
 export default function AdminRoute() {
   return (
@@ -22,6 +23,7 @@ export default function AdminRoute() {
               <Route path={"/managment"} element={<Managment />} />
               <Route path={"/rights"} element={<Rights />} />
               <Route path={"/body"} element={<MyBody />} />
+              <Route path={"/mind"} element={<MyMind />} />
             </Routes>
           </Suspense>
         </div>