🍀 Fix Update Broadcast Modal Description Population and Refactor form…

… for Styling Consistency (#1061) * Fix Update Broadcast Modal Description Population and Styling Consistency * Revert "Fix Update Broadcast Modal Description Population and Styling Consistency" This reverts commit bb06edc. * Fixed Update Broadcast Modal * updated edit broadcast
HITK-TECH-Community · Jun 25, 2024 · 223ed8a · 223ed8a
1 parent 77297ce
commit 223ed8a
Show file tree

Hide file tree

Showing 4 changed files with 519 additions and 136 deletions.
diff --git a/frontend/src/pages/Admin/Admin.jsx b/frontend/src/pages/Admin/Admin.jsx
@@ -258,7 +258,7 @@ export const Admin = (props) => {
           ) : tab === 15 ? (
             <ResetPassword />
           ) : tab === 16 ? (
-            <ManageBroadcasts />
+            <ManageBroadcasts theme={props.theme}/>
           ) : tab === 18 ? (
             <QandA setQId={setQId} setTab={setTab} tab={tab} />
           ) : tab === 19 ? (

diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx
@@ -10,7 +10,7 @@ import Loader from "../../../../../components/util/Loader";
 import { Button4 } from "../../../../../components/util/Button";
 import { customBoardcast } from "../../../../../service/Broadcast.jsx";
 
-export function ManageBroadcasts() {
+export function ManageBroadcasts(props) {
   const [array, setArray] = useState([]);
   const [index, setIndex] = useState(0);
   const [visible, setVisible] = useState(false);
@@ -86,13 +86,15 @@ export function ManageBroadcasts() {
     setArray(result);
     setLoaded(true);
   }
+  const { theme } = props;
   return (
     <div>
       <Edit
         visible={visible}
         setVisible={setVisible}
         handleChange={handleChange}
         data={array[index]}
+        theme={theme}
       />
       <div id={style["hero"]}>
         <div className={style["motive"]}>

diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx
@@ -1,83 +1,166 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import style from "./edit.module.scss";
-import { TextField } from "@material-ui/core";
-import CloseIcon from "@material-ui/icons/Close";
+import { Button2 } from "../../../../../components/util/Button/index";
+import SunEditor from "suneditor-react";
+import "suneditor/dist/css/suneditor.min.css";
+import { SimpleToast } from "../../../../../components/util/Toast";
+import { UpdateBoardCast } from "../../../../../service/Broadcast.jsx";
 
 export function Edit(props) {
-  const [a, seta] = useState();
-  function scrolls() {
-    let b = window.scrollY;
-    seta(b);
-  }
-  useEffect(() => {
-    window.addEventListener("scroll", scrolls);
-  }, []);
+  const [toast, setToast] = useState({
+    toastStatus: false,
+    toastType: "",
+    toastMessage: "",
+  });
 
+  const handleCloseToast = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setToast({ ...toast, toastStatus: false });
+    props.setVisible(false);
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    props.handleChange({ target: { name, value } });
+  };
+
+  const handleContentChange = (content) => {
+    props.handleChange({ target: { name: 'content', value: content } });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { data } = props;
+    const newData = {
+      id: data._id,
+      content:data.content,
+      link: data.link,
+      expiresOn: data.expiresOn,
+      imageUrl: data.imageUrl,
+      tags: data.tags,
+      isApproved: data.isApproved,
+      title: data.title,
+    };
+
+   try {
+      await UpdateBoardCast(newData,setToast, toast);
+      setToast({
+        toastStatus: true,
+        toastType: "success",
+        toastMessage: "Broadcast updated successfully!",
+      });
+    } catch (error) {
+      console.error("Error updating broadcast:", error);
+      setToast({
+        toastStatus: true,
+        toastType: "error",
+        toastMessage: "Failed to update broadcast. Please try again.",
+      });
+    }
+  };
+
+  const { visible, data} = props;
   let dark = props.theme;
-  return props.visible ? (
-    <div className={style["popup"]} style={{ top: a }}>
-      <div className={dark ? style["div-dark"] : style["div"]}>
-        <h1 className={style["heading"]}>
-          Edit modal
-          <CloseIcon
-            style={{ float: "right", cursor: "pointer" }}
-            onClick={() => props.setVisible(false)}
-          />
-        </h1>
-        <form>
-          <div className={style["form"]}>
-            <h5>Title:</h5>
-            <TextField
-              type="text"
-              name="title"
-              placeholder="Title"
-              multiline
-              value={props.data.title}
-              className={style["input"]}
-              InputProps={{
-                className: `${dark ? style["input-dark"] : ""}`,
-              }}
-              onChange={props.handleChange}
-            />
+
+  return visible ? (
+    <div className={style["popup"]}>
+      <div  className={
+            dark
+              ? `${style["card"]} ${style["card-dark"]} `
+              : `${style["card"]} ${style["card-light"]}`
+          }>
+        <form className={style["editor"]} onSubmit={handleSubmit}>
+          <div className={style["motive"]}>
+            <h1 className={
+              dark
+                ? `${style["header-text"]} ${style["header-text-dark"]} `
+                : `${style["header-text"]} ${style["header-text-light"]}`
+            }>Edit Broadcast</h1>
+            <div className={
+                  dark 
+                    ? `${style.dash} ${style["dash-dark"]}` 
+                    : `${style.dash} ${style["dash-light"]}`
+            } />
           </div>
-          <div className={style.form}>
-            <h5>Description:</h5>
-            <TextField
-              type="text"
-              name="desc"
-              multiline
-              placeholder="Description"
-              value={props.data.desc}
-              className={style["input"]}
-              InputProps={{
-                className: `${dark ? style["input-dark"] : ""}`,
-              }}
-              onChange={props.handleChange}
-            />
+          <div>
+            <div className={
+                  dark
+                    ? `${style["input"]} ${style["input-dark"]} `
+                    : `${style["input"]} ${style["input-light"]}`
+                }>
+              <input
+                type="text"
+                name="title"
+                // className={style["form-control-input"]}
+                placeholder="Title"
+                value={data.title}
+                onChange={handleInputChange}
+              />
+              <i className="fas fa-pencil-alt" />
+            </div>
+          </div>
+          <div>
+            <div className={
+                  dark
+                    ? `${style["input"]} ${style["input-dark"]} `
+                    : `${style["input"]} ${style["input-light"]}`
+                }>
+              <SunEditor
+                name="content"
+                placeholder="Description"
+                setContents={data.content}
+                onChange={handleContentChange} 
+                height="100px"
+                className={style["edit"]}
+                onSetContents={(content) =>
+                  handleInputChange({ target: { name: "content", value: content } })
+                }
+              />
+            </div>
           </div>
-          <div className={style.form}>
-            <h5>Link:</h5>
-            <TextField
-              type="text"
-              name="link"
-              placeholder="Link"
-              className={style["input"]}
-              InputProps={{
-                className: `${dark ? style["input-dark"] : ""}`,
-              }}
-              onChange={props.handleChange}
-              value={props.data.link}
-              multiline
+          <div>
+            <div className={
+                  dark
+                    ? `${style["input"]} ${style["input-dark"]} `
+                    : `${style["input"]} ${style["input-light"]}`
+                }>
+              <input
+                type="text"
+                name="link"
+                placeholder="Resource Link"
+                value={data.link}
+                onChange={handleInputChange}
+              />
+              <i className="fas fa-link" />
+            </div>
+          </div>
+          <div className={style["submit-btn"]}>
+            <Button2
+              className={style["submit-btn-text"]}
+              label="Update"
+              type="submit"
+            />
+            <Button2
+              className={style["submit-btn-text"]}
+              label="Cancel"
+              type="button"
+              onClick={() => props.setVisible(false)}
             />
           </div>
-          <button
-            className={style["btns1"]}
-            onClick={() => props.setVisible(false)}
-          >
-            Edit
-          </button>
         </form>
       </div>
+      {toast.toastStatus && (
+        <div className={style["toast-overlay"]}>
+          <SimpleToast
+            open={toast.toastStatus}
+            message={toast.toastMessage}
+            handleCloseToast={handleCloseToast}
+            severity={toast.toastType}
+          />
+        </div>
+      )}
     </div>
   ) : null;
-}
+}