From eee8f2f1c6b8308479574b2b12501b88046ea4e1 Mon Sep 17 00:00:00 2001
From: Balaharisankar Lakshmanaperumal
 <114602603+BHS-Harish@users.noreply.github.com>
Date: Fri, 26 Jul 2024 23:38:37 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=80=20Refactor:=20Manage=20Broadcast?=
 =?UTF-8?q?=20(#1076)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Refactor:Manage Broadcast

* Edit broadcast fixed
---
 frontend/package.json                         |   1 +
 .../Broadcast/AddBroadcasts/AddBroadcasts.jsx | 316 +++++++++---------
 .../AddBroadcasts/add-broadcasts.module.scss  |   6 +-
 .../Broadcast/ManageBroadcasts/Card/Card.jsx  |   5 +-
 .../ManageBroadcasts/ManageBroadcasts.jsx     |  10 +-
 .../Component/AllBroadcasts/Edit/Edit.jsx     | 291 +++++++++++++---
 .../AllBroadcasts/Edit/edit.module.scss       |   2 +
 7 files changed, 420 insertions(+), 211 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index fd51a960..e481ae99 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
     "joi-browser": "^13.4.0",
     "jwt-decode": "^3.1.2",
     "mdbreact": "^5.0.1",
+    "moment": "^2.30.1",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
diff --git a/frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/AddBroadcasts.jsx b/frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/AddBroadcasts.jsx
index 23239deb..56c81267 100644
--- a/frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/AddBroadcasts.jsx
+++ b/frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/AddBroadcasts.jsx
@@ -1,11 +1,11 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import SunEditor from "suneditor-react";
 import "suneditor/dist/css/suneditor.min.css";
 import styles from "./add-broadcasts.module.scss";
 import Joi from "joi-browser";
 import { Button2 } from "../../../../../components/util/Button/index";
-import { formatTag } from '../../../../../components/util/Tags';
-import  Loader  from "../../../../../components/util/Loader/index";
+import { formatTag } from "../../../../../components/util/Tags";
+import Loader from "../../../../../components/util/Loader/index";
 import { SimpleToast } from "../../../../../components/util/Toast/index";
 import { postBoardcast } from "../../../../../service/Broadcast";
 
@@ -30,12 +30,13 @@ export function AddBroadcasts() {
   const [formData, setFormData] = useState(schema);
   const [errorObj, setErrorObj] = useState({});
   const [isUploadingData, setIsUploadingData] = useState(false);
+  const [broadcastContent, setBroadcasetContent] = useState("");
   const handleCloseToast = (event, reason) => {
     if (reason === "clickaway") {
       return;
     }
     setToast({ ...toast, toastStatus: false });
-  }
+  };
 
   const validationSchema = {
     title: Joi.string().required(),
@@ -52,7 +53,7 @@ export function AddBroadcasts() {
     });
     if (!check.error) return true;
     const errors = {};
-    check.error.details.map(item => {
+    check.error.details.map((item) => {
       if (!errors[item.path[0]]) errors[item.path[0]] = item.message;
       return 0;
     });
@@ -60,7 +61,7 @@ export function AddBroadcasts() {
     return false;
   };
 
-  const validateField = input => {
+  const validateField = (input) => {
     const { name, value } = input;
     const obj = { [name]: value };
     const obj_schema = { [name]: validationSchema[name] };
@@ -69,7 +70,7 @@ export function AddBroadcasts() {
     return result.error ? result.error.details[0].message : null;
   };
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     const { currentTarget: input } = e;
     const errors = { ...errorObj };
     const errorMessage = validateField(input);
@@ -83,7 +84,7 @@ export function AddBroadcasts() {
   const addTag = () => {
     const tag = formatTag(tagRef.current.value.trim(), "Hyphens");
     if (tag) {
-      setTags(prevTags => [...prevTags, tag]);
+      setTags((prevTags) => [...prevTags, tag]);
       setFormData({ ...formData, tags: [...formData.tags, tag] });
       tagRef.current.value = "";
     }
@@ -91,185 +92,194 @@ export function AddBroadcasts() {
   const addImageUrl = () => {
     const url = imageRef.current.value;
     if (url.trim()) {
-      setImageUrls(prevUrl => [...prevUrl, url.trim()]);
-      setFormData({ ...formData, imageUrl: [...formData.imageUrl, url.trim()] });
+      setImageUrls((prevUrl) => [...prevUrl, url.trim()]);
+      setFormData({
+        ...formData,
+        imageUrl: [...formData.imageUrl, url.trim()],
+      });
       imageRef.current.value = "";
     }
-  }
+  };
 
-  const removeTag = tag => {
-    setTags(tags.filter(t => t !== tag));
-    setFormData({ ...formData, tags: formData.tags.filter(t => t !== tag) });
+  const removeTag = (tag) => {
+    setTags(tags.filter((t) => t !== tag));
+    setFormData({ ...formData, tags: formData.tags.filter((t) => t !== tag) });
+  };
+  const removeImageUrl = (url) => {
+    setImageUrls(imageUrls.filter((u) => u !== url));
+    setFormData({
+      ...formData,
+      imageUrl: formData.imageUrl.filter((u) => u !== url),
+    });
   };
-  const removeImageUrl = url => {
-    setImageUrls(imageUrls.filter(u => u !== url));
-    setFormData({ ...formData, imageUrl: formData.imageUrl.filter(u => u !== url) });
-  }
   async function uploadData(formData) {
     const response = await postBoardcast(formData, setToast, toast);
-      if(response) {
-        const schema = {
-          title: "",
-          content: "",
-          tags: [],
-          expiresOn: "dd-mm-yyyy",
-          imageUrl: [],
-          link: "",
-        };
-        setTags([])
-        setImageUrls([])
-        setFormData(schema)
-      }
+    if (response) {
+      const schema = {
+        title: "",
+        content: "",
+        tags: [],
+        expiresOn: "dd-mm-yyyy",
+        imageUrl: [],
+        link: "",
+      };
+      setTags([]);
+      setImageUrls([]);
+      setFormData(schema);
+    }
   }
   const onSubmit = async (e) => {
     e.preventDefault();
+    setFormData({ ...formData, content: broadcastContent });
     if (isFormValid()) {
       // TODO: send data to server
-      setIsUploadingData(true)
+      setIsUploadingData(true);
       await uploadData(formData);
-      setIsUploadingData(false)
+      setIsUploadingData(false);
     }
   };
 
-  const onContentChange = content => {
+  const onContentChange = (content) => {
     let value = "";
     if (content !== "<p></p>" && content !== "<p><br></p>") {
       value = content;
     }
-    handleChange({ currentTarget: { name: "content", value } });
+    setBroadcasetContent(value);
   };
 
   return (
     <div>
       <div className={styles["add-broadcasts-container"]}>
-      {toast.toastStatus && (
-        <SimpleToast
-          open={toast.toastStatus}
-          message={toast.toastMessage}
-          handleCloseToast={handleCloseToast}
-          severity={toast.toastType}
-        />
-      )}
-      <div className={styles["card"]}>
-        <form className={styles["editor"]} noValidate onSubmit={onSubmit}>
-          <div className={styles["motive"]}>
-            <h1 className={styles["heading"]}>ADD BROADCAST</h1>
-            <div className={styles["dash"]}></div>
-          </div>
-          <div>
-            <div className={styles["form-control"]}>
-              <input
-                type="text"
-                name="title"
-                className={styles["form-control-input"]}
-                placeholder="Heading"
-                onChange={handleChange}
-                value={formData.title}
-              />
-              <i className="fas fa-pencil-alt" />
-              {errorObj.title && (
-                <div className={styles["error"]}>{errorObj.title}</div>
-              )}
+        {toast.toastStatus && (
+          <SimpleToast
+            open={toast.toastStatus}
+            message={toast.toastMessage}
+            handleCloseToast={handleCloseToast}
+            severity={toast.toastType}
+          />
+        )}
+        <div className={styles["card"]}>
+          <form className={styles["editor"]} noValidate onSubmit={onSubmit}>
+            <div className={styles["motive"]}>
+              <h1 className={styles["heading"]}>ADD BROADCAST</h1>
+              <div className={styles["dash"]}></div>
             </div>
-          </div>
-          <div>
-            <div className={styles["form-control"]}>
-              <SunEditor
-                lang="en"
-                name="content"
-                placeholder="Please type here..."
-                height="200px"
-                onChange={onContentChange}
-                setContents={formData.content}
-                className={styles["edit"]}
-              />
-              {errorObj.content && (
-                <div className={styles["error"]}>{errorObj.content}</div>
-              )}
+            <div>
+              <div className={styles["form-control"]}>
+                <input
+                  type="text"
+                  name="title"
+                  className={styles["form-control-input"]}
+                  placeholder="Heading"
+                  onChange={handleChange}
+                  value={formData.title}
+                />
+                <i className="fas fa-pencil-alt" />
+                {errorObj.title && (
+                  <div className={styles["error"]}>{errorObj.title}</div>
+                )}
+              </div>
             </div>
-          </div>
-          <div>
-            <div className={styles["form-control"]}>
-              <input
-                type="date"
-                name="expiresOn"
-                className={styles["form-control-input"]}
-                value={formData.expiresOn}
-                placeholder="Broadcast Date(DD/MM/YY)"
-                onChange={handleChange}
-              />
-              {errorObj.expiresOn && (
-                <div className={styles["error"]}>{errorObj.expiresOn}</div>
-              )}
+            <div>
+              <div className={styles["form-control"]}>
+                <SunEditor
+                  lang="en"
+                  name="content"
+                  placeholder="Please type here..."
+                  height="200px"
+                  onChange={onContentChange}
+                  setContents={broadcastContent}
+                  className={styles["edit"]}
+                />
+                {errorObj.content && (
+                  <div className={styles["error"]}>{errorObj.content}</div>
+                )}
+              </div>
             </div>
-          </div>
-          <div className={styles["form-control"]}>
-            <div className={styles["tags-container"]}>
-              <div className={styles["tags"]}>
-                {imageUrls.map((tag, index) => (
-                  <ImageUrl key={index} label={tag} remove={removeImageUrl} />
-                ))}
+            <div>
+              <div className={styles["form-control"]}>
+                <input
+                  type="date"
+                  name="expiresOn"
+                  className={styles["form-control-input"]}
+                  value={formData.expiresOn}
+                  placeholder="Broadcast Date(DD/MM/YY)"
+                  onChange={handleChange}
+                />
+                {errorObj.expiresOn && (
+                  <div className={styles["error"]}>{errorObj.expiresOn}</div>
+                )}
               </div>
-              <input
-                type="text"
-                ref={imageRef}
-                onKeyDown={e => {
-                  if (e.key === "Enter") {
-                    addImageUrl();
-                  }
-                }}
-                placeholder="Enter Image url (Hit enter to add image url)"
-              />
-              <i className="fas fa-link" />
             </div>
-          </div>
-          <div>
             <div className={styles["form-control"]}>
-              <input
-                type="text"
-                name="link"
-                className={styles["form-control-input"]}
-                placeholder="Resource Link"
-                value={formData.link}
-                onChange={handleChange}
-              />
-              <i className="fas fa-link" />
-              {errorObj.link && (
-                <div className={styles["error"]}>{errorObj.link}</div>
-              )}
+              <div className={styles["tags-container"]}>
+                <div className={styles["tags"]}>
+                  {imageUrls.map((tag, index) => (
+                    <ImageUrl key={index} label={tag} remove={removeImageUrl} />
+                  ))}
+                </div>
+                <input
+                  type="text"
+                  ref={imageRef}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      addImageUrl();
+                    }
+                  }}
+                  placeholder="Enter Image url (Hit enter to add image url)"
+                />
+                <i className="fas fa-link" />
+              </div>
+            </div>
+            <div>
+              <div className={styles["form-control"]}>
+                <input
+                  type="text"
+                  name="link"
+                  className={styles["form-control-input"]}
+                  placeholder="Resource Link"
+                  value={formData.link}
+                  onChange={handleChange}
+                />
+                <i className="fas fa-link" />
+                {errorObj.link && (
+                  <div className={styles["error"]}>{errorObj.link}</div>
+                )}
+              </div>
             </div>
-          </div>
-          <div>
-            <div className={styles["tags-container"]}>
-              <div className={styles["tags"]}>
-                {tags.map((tag, index) => (
-                  <Tag key={index} label={tag} remove={removeTag} />
-                ))}
+            <div>
+              <div className={styles["tags-container"]}>
+                <div className={styles["tags"]}>
+                  {tags.map((tag, index) => (
+                    <Tag key={index} label={tag} remove={removeTag} />
+                  ))}
+                </div>
+                <input
+                  type="text"
+                  ref={tagRef}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      addTag();
+                    }
+                  }}
+                  placeholder="Enter Tags (Hit enter to add tags)"
+                />
               </div>
-              <input
-                type="text"
-                ref={tagRef}
-                onKeyDown={e => {
-                  if (e.key === "Enter") {
-                    addTag();
-                  }
-                }}
-                placeholder="Enter Tags (Hit enter to add tags)"
+            </div>
+            <div className={styles["data-loader"]}>
+              {isUploadingData ? <Loader /> : null}
+            </div>
+            <div className={styles["submit-btn"]}>
+              <Button2
+                className={styles["submit-btn-text"]}
+                label="Submit"
+                type="submit"
               />
             </div>
-          </div>
-            <div className={styles["data-loader"]}>{isUploadingData?<Loader/>:null}</div>
-          <div className={styles["submit-btn"]}>
-            <Button2
-              className={styles["submit-btn-text"]}
-              label="Submit"
-              type="submit"
-            />
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
     </div>
-    </div>
   );
 }
 
@@ -288,5 +298,5 @@ const ImageUrl = ({ label, remove }) => {
       <span className={styles["tag-label"]}>{label}</span>
       <span className={styles["tag-remove"]}>x</span>
     </div>
-  )
-}
+  );
+};
diff --git a/frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/add-broadcasts.module.scss b/frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/add-broadcasts.module.scss
index 68e46618..9b99e38d 100644
--- a/frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/add-broadcasts.module.scss
+++ b/frontend/src/pages/Admin/Components/Broadcast/AddBroadcasts/add-broadcasts.module.scss
@@ -121,11 +121,13 @@
 .tag {
   padding: 5px 10px;
   border-radius: 4px;
-  margin-right: 10px;
   background-color: #f5f5f5;
   color: #333;
   font-size: 14px;
   cursor: pointer;
+  width: 100%;
+  overflow: hidden;
+  margin: 2px;
 
   & .tag-remove {
     margin-left: 5px;
@@ -221,4 +223,4 @@
   height: 10px;
   justify-content: center;
   align-items: center;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx
index 1b47046f..6233701e 100644
--- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx
+++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx
@@ -105,7 +105,6 @@ export function Card(props) {
             </div>
           </div>
         </div>
-
         <div
           className={
             dark
@@ -119,7 +118,9 @@ export function Card(props) {
               <div className={style["admin-controls"]}>
                 <IconButton
                   className={style["icon-button"]}
-                  onClick={props.handler}
+                  onClick={() => {
+                    props.setIndex(props.index);
+                  }}
                 >
                   <Edit />
                 </IconButton>
diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx
index cc597290..eb9a1a33 100644
--- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx
+++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx
@@ -12,7 +12,7 @@ import { customBoardcast } from "../../../../../service/Broadcast.jsx";
 
 export function ManageBroadcasts() {
   const [array, setArray] = useState([]);
-  const [index, setIndex] = useState(0);
+  const [index, setIndex] = useState("");
   const [visible, setVisible] = useState(false);
   const [tags, setTags] = useState("");
   const [month, setMonth] = useState("");
@@ -21,6 +21,10 @@ export function ManageBroadcasts() {
   const [isLoaded, setLoaded] = useState(false);
   const [filterText, setFilterText] = useState("");
   const [handleDelete, setHandleDelete] = useState(0);
+  useEffect(() => {
+    if (index === "") setVisible(false);
+    else setVisible(true);
+  }, [index]);
   const months = [
     "January",
     "Febuary",
@@ -85,7 +89,7 @@ export function ManageBroadcasts() {
     const result = await customBoardcast(api);
     setArray(result);
     setLoaded(true);
-  }
+  };
   return (
     <div>
       <Edit
@@ -178,6 +182,8 @@ export function ManageBroadcasts() {
               key={`card-${i}`}
               id={element._id}
               handler={() => handler(i)}
+              index={i}
+              setIndex={setIndex}
               handleDelete={handleDelete}
               setHandleDelete={setHandleDelete}
             />
diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx
index 2083b5c2..545884c9 100644
--- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx
+++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx
@@ -1,79 +1,244 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
+import SunEditor from "suneditor-react";
 import style from "./edit.module.scss";
-import { TextField } from "@material-ui/core";
+import styles from "../../../../Admin/Components/Broadcast/AddBroadcasts/add-broadcasts.module.scss";
+import { formatTag } from "../../../../../components/util/Tags";
+import { SimpleToast } from "../../../../../components/util/Toast";
+import { UpdateBoardCast } from "../../../../../service/Broadcast";
 import CloseIcon from "@material-ui/icons/Close";
+import moment from "moment";
 
 export function Edit(props) {
   const [a, seta] = useState();
+  const [broadcast, setBroadcast] = useState({});
+  const [broadcastContent, setBroadcastContent] = useState("");
+  const [tags, setTags] = useState([]);
+  const [imageUrls, setImageUrls] = useState([]);
+  const [isUploadingData, setIsUploadingData] = useState(false);
+  const [toast, setToast] = useState({
+    toastStatus: false,
+    toastType: "",
+    toastMessage: "",
+  });
+  const tagRef = useRef();
+  const imageRef = useRef();
   function scrolls() {
     let b = window.scrollY;
     seta(b);
   }
+  const onContentChange = (content) => {
+    let value = "";
+    if (content !== "<p></p>" && content !== "<p><br></p>") {
+      value = content;
+    }
+    setBroadcastContent(value);
+  };
   useEffect(() => {
     window.addEventListener("scroll", scrolls);
   }, []);
 
+  useEffect(() => {
+    setBroadcast(props?.data);
+    setBroadcastContent(props?.data?.content);
+    setImageUrls(props?.data?.imageUrl);
+    setTags(props?.data?.tags);
+  }, [props]);
+
+  const handleChange = (e) => {
+    if (e.target.name === "expiresOn")
+      setBroadcast({
+        ...broadcast,
+        [e.target.name]: new Date(e.target.value).toISOString(),
+      });
+    else setBroadcast({ ...broadcast, [e.target.name]: e.target.value });
+  };
+  const addTag = () => {
+    const tag = formatTag(tagRef.current.value.trim(), "Hyphens");
+    if (tag) {
+      setTags((prevTags) => [...prevTags, tag]);
+      setBroadcast({ ...broadcast, tags: [...broadcast.tags, tag] });
+      tagRef.current.value = "";
+    }
+  };
+  const addImageUrl = () => {
+    const url = imageRef.current.value;
+    if (url.trim()) {
+      setImageUrls((prevUrl) => [...prevUrl, url.trim()]);
+      setBroadcast({
+        ...broadcast,
+        imageUrl: [...broadcast.imageUrl, url.trim()],
+      });
+      imageRef.current.value = "";
+    }
+  };
+
+  const removeTag = (tag) => {
+    setTags(tags.filter((t) => t !== tag));
+    setBroadcast({
+      ...broadcast,
+      tags: broadcast.tags.filter((t) => t !== tag),
+    });
+  };
+  const removeImageUrl = (url) => {
+    setImageUrls(imageUrls.filter((u) => u !== url));
+    setBroadcast({
+      ...broadcast,
+      imageUrl: broadcast.imageUrl.filter((u) => u !== url),
+    });
+  };
+  const handleCloseToast = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setToast({ ...toast, toastStatus: false });
+  };
+  const handleUpdate = async () => {
+    setIsUploadingData(true);
+    const { _id, imageUrl, tags, title, link, expiresOn, isApproved } =
+      broadcast;
+    const response = await UpdateBoardCast(
+      {
+        id: _id,
+        imageUrl,
+        tags,
+        title,
+        link,
+        expiresOn,
+        content: broadcastContent,
+        isApproved,
+      },
+      setToast,
+      toast
+    );
+    if (response) {
+      setBroadcast({});
+      setTags([]);
+      setImageUrls([]);
+      props.setVisible(false);
+    }
+    setIsUploadingData(false);
+  };
   let dark = props.theme;
   return props.visible ? (
     <div className={style["popup"]} style={{ top: a }}>
+      {toast.toastStatus && (
+        <SimpleToast
+          open={toast.toastStatus}
+          message={toast.toastMessage}
+          handleCloseToast={handleCloseToast}
+          severity={toast.toastType}
+        />
+      )}
       <div className={dark ? style["div-dark"] : style["div"]}>
         <h1 className={style["heading"]}>
           Edit modal
           <CloseIcon
             style={{ float: "right", cursor: "pointer" }}
-            onClick={() => props.setVisible(false)}
+            onClick={() => {
+              setBroadcast({});
+              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}
-            />
-          </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={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
-            />
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleUpdate();
+          }}
+        >
+          <div className={styles["form"]}>
+            <div className={styles["form-control"]}>
+              <input
+                type="text"
+                name="title"
+                className={styles["form-control-input"]}
+                placeholder="Heading"
+                onChange={handleChange}
+                value={broadcast?.title}
+              />
+              <i className="fas fa-pencil-alt" />
+            </div>
+            <div>
+              <div className={styles["form-control"]}>
+                <SunEditor
+                  lang="en"
+                  name="content"
+                  placeholder="Please type here..."
+                  height="200px"
+                  onChange={onContentChange}
+                  setContents={broadcastContent}
+                  defaultValue={""}
+                  className={styles["edit"]}
+                />
+              </div>
+            </div>
+            <div>
+              <div className={styles["form-control"]}>
+                <input
+                  type="date"
+                  name="expiresOn"
+                  className={styles["form-control-input"]}
+                  value={formartDate(broadcast?.expiresOn)}
+                  placeholder="Broadcast Date(DD/MM/YY)"
+                  onChange={handleChange}
+                />
+              </div>
+            </div>
+            <div className={styles["form-control"]}>
+              <div className={styles["tags-container"]}>
+                {imageUrls?.map((tag, index) => (
+                  <ImageUrl key={index} label={tag} remove={removeImageUrl} />
+                ))}
+                <input
+                  type="text"
+                  ref={imageRef}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      addImageUrl();
+                    }
+                  }}
+                  placeholder="Enter Image url (Hit enter to add image url)"
+                />
+                <i className="fas fa-link" />
+              </div>
+              <div style={{ marginTop: "15px" }}>
+                <div className={styles["form-control"]}>
+                  <input
+                    type="text"
+                    name="link"
+                    className={styles["form-control-input"]}
+                    placeholder="Resource Link"
+                    value={broadcast?.link}
+                    onChange={handleChange}
+                  />
+                  <i className="fas fa-link" />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div className={styles["tags-container"]}>
+                <div className={styles["tags"]}>
+                  {tags?.map((tag, index) => (
+                    <Tag key={index} label={tag} remove={removeTag} />
+                  ))}
+                </div>
+                <input
+                  type="text"
+                  ref={tagRef}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      addTag();
+                    }
+                  }}
+                  placeholder="Enter Tags (Hit enter to add tags)"
+                />
+              </div>
+            </div>
           </div>
-          <button
-            className={style["btns1"]}
-            onClick={() => props.setVisible(false)}
-          >
+          {isUploadingData && (
+            <p style={{ textAlign: "center" }}>Updating...</p>
+          )}
+          <button style={{ marginTop: "10px" }} className={style["btns1"]}>
             Edit
           </button>
         </form>
@@ -81,3 +246,25 @@ export function Edit(props) {
     </div>
   ) : null;
 }
+
+const Tag = ({ label, remove }) => {
+  return (
+    <div className={styles["tag"]} onClick={() => remove(label)}>
+      <span className={styles["tag-label"]}>{label}</span>
+      <span className={styles["tag-remove"]}>x</span>
+    </div>
+  );
+};
+
+const ImageUrl = ({ label, remove }) => {
+  return (
+    <div className={styles["tag"]} onClick={() => remove(label)}>
+      <span className={styles["tag-label"]}>{label}</span>
+      <span className={styles["tag-remove"]}>x</span>
+    </div>
+  );
+};
+
+const formartDate = (date) => {
+  return moment.utc(date).format("YYYY-MM-DD");
+};
diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss
index a1a39a74..ab7d6efe 100644
--- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss
+++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss
@@ -19,6 +19,8 @@
   border-radius: 8px;
   background: white;
   padding: 1em;
+  height: 100%;
+  overflow-y: scroll;
   @media (max-width: 600px) {
     width: 95%;
   }