Admin client dev (#56)

client/src/Services/bodyServices.js

@@ -0,0 +1,38 @@
+import thaliaAPI from "../API/thaliaAPI";
+
+export const getTopics = async () => {
+    try {
+        const response = await thaliaAPI.get("/admin/my-body", { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+
+export const addTopic = async (formData) => {
+    try {
+        const response = await thaliaAPI.post("/admin/my-body", formData, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+
+export const deleteBody = async (bodyId) => {
+    try {
+        const response = await thaliaAPI.delete(`/admin/my-body/${bodyId}`, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+
+export const editBody = async (formData, bodyId) => {
+    try {
+        const response = await thaliaAPI.put(`/admin/my-body/${bodyId}`, formData);
+        return response.data;
+    } catch (error) {
+        console.log("error=>", error)
+        return error;
+    }
+}

client/src/Services/rightServices.js

@@ -10,8 +10,6 @@ export const createRight = async (rightDetails) => {
 }
 export const editRight = async (rightDetails, rightId) => {
     try {
-        console.log("details", rightDetails)
-        console.log("right id", rightId)
         const response = await thaliaAPI.put(`/admin/rights/${rightId}`, rightDetails, { withCredentials: true });
         return response.data;
     } catch (error) {

client/src/components/AddBody/AddBody.jsx

@@ -1,10 +1,13 @@
 import { useState } from "react";
 import { Modal } from "flowbite-react";
+import { addTopic } from "../../Services/bodyServices";
+import { toast } from "react-toastify";
 
+// eslint-disable-next-line react/prop-types
 function AddBody({ openModal, setOpenModal }) {
   const [formData, setFormData] = useState({
-    body_name: "",
-    body_desc: "",
+    name: "",
+    content: "",
   });
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -13,6 +16,18 @@ function AddBody({ openModal, setOpenModal }) {
       [name]: value,
     });
   };
+  const handleAdd = () => {
+    const addNew = async () => {
+      const response = await addTopic(formData);
+      if (response.success === true) {
+        formData.name = "";
+        formData.content = "";
+        setOpenModal(false);
+        toast.success(response.message);
+      }
+    };
+    addNew();
+  };
   return (
     <>
       <Modal show={openModal} onClose={() => setOpenModal(false)}>
@@ -26,26 +41,29 @@ function AddBody({ openModal, setOpenModal }) {
               <input
                 type="text"
                 className="w-full rounded-md bg-gray-700 text-text"
-                value={formData.body_name}
+                value={formData.name}
                 onChange={handleChange}
-                name="body_name"
+                name="name"
               />
             </label>
           </div>
           <div className="w-full mt-3">
             <label htmlFor="">
               <h1 className="text-text py-2">Provide the Topic Description</h1>
               <textarea
-                name="body_desc"
-                value={formData.body_desc}
+                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-2 py-2 rounded-md float-end">
+          <button
+            className="text-primary border-2 px-2 py-2 rounded-md float-end"
+            onClick={handleAdd}
+          >
             Add Topic
           </button>
         </Modal.Body>

client/src/components/EditBody/EditBody.jsx

@@ -1,26 +1,40 @@
-import { useState, useEffect } from "react";
 import { Modal } from "flowbite-react";
+import { useState, useEffect } from "react";
+import { toast } from "react-toastify";
+import { editBody } from "../../Services/bodyServices";
 
-function EditBody({ bodyDetails, openModal, setOpenModal }) {
+// eslint-disable-next-line react/prop-types
+function EditBody({ setOpenModal, openModal, bodyDetails }) {
   const [formData, setFormData] = useState({
-    body_name: "",
-    body_desc: "",
+    name: "",
+    content: "",
   });
   useEffect(() => {
     if (bodyDetails) {
-      // eslint-disable-next-line react/prop-types
-      formData.body_name = bodyDetails?.name;
-      // eslint-disable-next-line react/prop-types
-      formData.body_desc = bodyDetails?.description;
+      setFormData({
+        name: bodyDetails?.name || "",
+        content: bodyDetails?.content || "",
+      });
     }
-  }, [formData, bodyDetails]);
+  }, [bodyDetails]);
   const handleChange = (e) => {
     const { name, value } = e.target;
     setFormData({
       ...formData,
       [name]: value,
     });
   };
+
+  const handleEdit = async () => {
+    const response = await editBody(formData, bodyDetails?._id);
+    if (response.success === true) {
+      toast.success(response.message);
+      formData.name = "";
+      formData.content = "";
+      setOpenModal(false);
+    }
+  };
+
   return (
     <>
       <Modal show={openModal} onClose={() => setOpenModal(false)}>
@@ -34,25 +48,28 @@ function EditBody({ bodyDetails, openModal, setOpenModal }) {
               <input
                 type="text"
                 className="w-full rounded-md bg-gray-700 text-text"
-                value={formData?.body_name}
+                value={formData?.name}
                 onChange={handleChange}
-                name="right_name"
+                name="name"
               />
             </label>
           </div>
           <div className="w-full mt-3">
             <label htmlFor="">
               <h1 className="text-text py-2">Topic Description</h1>
               <textarea
-                name="right_desc"
-                value={formData?.body_desc}
+                name="content"
+                value={formData?.content}
                 onChange={handleChange}
                 rows={8}
                 className="w-full rounded-md bg-gray-700 text-white"
               ></textarea>
             </label>
           </div>
-          <button className="text-primary border-2 px-2 py-2 rounded-md float-end">
+          <button
+            className="text-primary border-2 px-2 py-2 rounded-md float-end"
+            onClick={handleEdit}
+          >
             Update
           </button>
         </Modal.Body>

client/src/pages/AdminPages/Managment/Managment.jsx

@@ -5,7 +5,6 @@ function Managment() {
   const [openModal, setOpenModal] = useState(false);
   const [reportObject, setReportObject] = useState();
   const handleModal = () => {
-    console.log("Handle Modal Called");
     setOpenModal(true);
   };
   return (
@@ -19,7 +18,6 @@ function Managment() {
         <div className="col-span-9">
           <div className="text-text">
             <h1 className="text-2xl py-12">User Managment</h1>
-
             <div>
               <table className="w-full text-sm text-left rtl:text-right rounded">
                 <thead className="text-xs bg-secondary rounded">
@@ -41,28 +39,7 @@ function Managment() {
                     </th>
                   </tr>
                 </thead>
-                <tbody>
-                  <tr className="border-b">
-                    <th scope="row" className="px-6 py-4 font-medium">
-                      Amarnath as
-                    </th>
-                    <td className="px-6 py-4">Silver</td>
-                    <td className="px-6 py-4">Laptop</td>
-                    <td className="px-6 py-4">
-                      <button
-                        className="border border-gray-600 bg-gray-700 py-1 px-6 rounded"
-                        onClick={handleModal}
-                      >
-                        View
-                      </button>
-                    </td>
-                    <td className="px-6 py-4">
-                      <button className="border py-1 px-6 rounded hover:bg-red-700">
-                        Block
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
+
                 <tbody>
                   <tr className="border-b">
                     <th scope="row" className="px-6 py-4 font-medium">

client/src/pages/AdminPages/MyBody/MyBody.jsx

@@ -1,20 +1,59 @@
-import { useState } from "react";
-import EditRight from "../../../components/EditRight/EditRight";
+import { useEffect, useState } from "react";
+import EditBody from "../../../components/EditBody/EditBody";
 import AddBody from "../../../components/AddBody/AddBody";
+import { getTopics } from "../../../Services/bodyServices";
+import { deleteBody } from "../../../Services/bodyServices";
+import timeFormat from "../../../utils/timeFormat";
+import { toast } from "react-toastify";
 
 function MyBody() {
   const [openModal, setOpenModal] = useState(false);
-  // eslint-disable-next-line no-unused-vars
-  const [rightDetails, setRightDetails] = useState();
+  const [bodyDeatails, setBodyDetails] = useState([]);
+
+  const [editBody, setEditBody] = useState();
+  const [editModal, setEditModal] = useState(false);
+
   const handleModal = () => {
     setOpenModal(true);
   };
+  const handleEditModal = (bodyId) => {
+    setEditModal(true);
+    const bodyToEdit = bodyDeatails.find((body) => {
+      return body?._id === bodyId;
+    });
+    setEditBody(bodyToEdit);
+  };
+  useEffect(() => {
+    const getData = async () => {
+      const response = await getTopics();
+      if (response.success === true) {
+        setBodyDetails(response.contents);
+      }
+    };
+    getData();
+  }, [
+    openModal,
+    setOpenModal,
+    setBodyDetails,
+    setEditModal,
+    editModal,
+    setEditBody,
+  ]);
+  const handleDelete = async (bodyId) => {
+    const response = await deleteBody(bodyId);
+    if (response.success === true) {
+      setBodyDetails((prevDetails) =>
+        prevDetails.filter((body) => body?._id !== bodyId)
+      );
+      toast.success(response.message);
+    }
+  };
   return (
     <>
-      <EditRight
-        setOpenModal={setOpenModal}
-        openModal={openModal}
-        rightDetails={rightDetails}
+      <EditBody
+        setOpenModal={setEditModal}
+        openModal={editModal}
+        bodyDetails={editBody ? editBody : null}
       />
       <AddBody setOpenModal={setOpenModal} openModal={openModal} />
       <div className=" h-screen bg-background">
@@ -55,26 +94,37 @@ function MyBody() {
                   </th>
                 </tr>
               </thead>
-              <tbody className="text-text">
-                <tr className="border-b border-gray-500">
-                  <th scope="row" className="px-6 py-4 font-medium">
-                    1
-                  </th>
-                  <td className="px-6 py-4">Dealing with Period Cramps</td>
-                  <td className="px-6 py-4">18-03-2003</td>
-                  <td className="px-6 py-4 flex justify-center">
-                    <button
-                      className="border py-1 px-6 rounded hover:bg-green-500"
-                      onClick={handleModal}
-                    >
-                      Edit
-                    </button>
-                    <button className="border py-1 px-6 rounded ml-2 hover:bg-red-700">
-                      Delete
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
+              {bodyDeatails.map((data, 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">{data?.name}</td>
+                        <td className="px-6 py-4">
+                          {timeFormat(data.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(data?._id)}
+                          >
+                            Edit
+                          </button>
+                          <button
+                            className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
+                            onClick={() => handleDelete(data?._id)}
+                          >
+                            Delete
+                          </button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </>
+                );
+              })}
             </table>
           </div>
         </div>

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

@@ -24,7 +24,6 @@ function Rights() {
     setEditRight(rightToEdit);
   };
   useEffect(() => {
-    console.log("Runnning..");
     const getRights = async () => {
       const response = await getRight();
       setRightDetails(response.rights);