From f7dac7bebd521a22d38fd3155eb708b0ed41aba1 Mon Sep 17 00:00:00 2001
From: Shivam Gaur <shivamgaur8527@gmail.com>
Date: Sun, 28 Jul 2024 15:37:21 +0530
Subject: [PATCH] Fixed: Bugs In Broadcasts

---
 backend/app/routes/broadcast/getBroadcasts.js |  1 +
 .../Broadcast/ManageBroadcasts/Card/Card.jsx  | 23 +++++++++----------
 .../ManageBroadcasts/Card/card.module.scss    |  1 +
 .../Broadcast/Component/Carousel/Carousel.jsx | 16 +++++++++++--
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/backend/app/routes/broadcast/getBroadcasts.js b/backend/app/routes/broadcast/getBroadcasts.js
index 26e97c10..d637dc6d 100644
--- a/backend/app/routes/broadcast/getBroadcasts.js
+++ b/backend/app/routes/broadcast/getBroadcasts.js
@@ -18,6 +18,7 @@ const getBroadcastsAggregate = (startIndex, match) => {
         expiresOn: 1,
         createdAt: 1,
         updatedAt: 1,
+        isApproved: 1,
         year: { $year: '$createdAt' },
         month: { $month: '$createdAt' },
       },
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 dac54e7a..6c1ebfc8 100644
--- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx
+++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx
@@ -87,8 +87,8 @@ export function Card(props) {
   const sanitizedContent = DOMPurify.sanitize(props.project.content);
 
   const truncatedContent =
-    sanitizedContent.length > 400
-      ? sanitizedContent.substring(0, 400) + "..."
+    sanitizedContent.length > 250
+      ? sanitizedContent.substring(0, 250) + "..."
       : sanitizedContent;
 
   return (
@@ -167,17 +167,16 @@ export function Card(props) {
             >
               View Details
             </button>
+          
             <div className={style["button-group"]}>
-              <button
-                className={
-                  !props?.project?.isApproved
-                    ? style["button-approve"]
-                    : style["button-info"]
-                }
-                onClick={!props?.project?.isApproved && handleApprove}
-              >
-                {props?.project?.isApproved ? "Approved" : "Approve"}
-              </button>
+            {!props?.project?.isApproved && (
+                <button
+                  className={style["button-approve"]}
+                  onClick={handleApprove}
+                >
+                  Approve
+                </button>
+              )}
               <button
                 className={style["button-delete"]}
                 onClick={() => deleteCard(props.id)}
diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/card.module.scss b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/card.module.scss
index c0f552c1..98b5048a 100644
--- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/card.module.scss
+++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/card.module.scss
@@ -116,6 +116,7 @@
   text-align: center;
   font-size: 1.2rem;
   width: 100%;
+  word-wrap: break-word;
 }
 
 .card-item-light:hover {
diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
index ca6e7ad9..543cc423 100644
--- a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
+++ b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
@@ -9,6 +9,8 @@ import { Modals } from "./Modal/index.js";
 import Loader from "../../../../components/util/Loader";
 import { boardcast } from "../../../../service/Broadcast.jsx";
 import { SimpleToast } from "../../../../components/util/Toast/Toast.jsx";
+import DOMPurify from "dompurify";
+
 export function Carousel(props) {
   const head = props.head;
   let dark = props.theme;
@@ -87,7 +89,8 @@ export function Carousel(props) {
   const getData = async () => {
     setLoaded(false);
     const result = await boardcast(setToast,toast)
-    setDataa(result);
+    const approvedBroadcasts = result.filter(broadcast => broadcast.isApproved);
+    setDataa(approvedBroadcasts);
     setLoaded(true);
   }
   const handleCloseToast = (event,reason) => {
@@ -96,6 +99,14 @@ export function Carousel(props) {
     }
     setToast({ ...toast, toastStatus: false });
   };
+
+  const truncatedContent = (content, maxLength) => {
+    if (content.length > maxLength) {
+      return content.substring(0, maxLength) + '...';
+    }
+    return content;
+  };
+
   return !isLoaded ? (
     <Loader />
   ) : (
@@ -143,7 +154,8 @@ export function Carousel(props) {
               ></div>
 
               <h3 className={style["card-head"]}>{item.title}</h3>
-              <div className={style["card-text"]} dangerouslySetInnerHTML={{__html: item.content}} />
+              <div className={style["card-text"]} 
+              dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(truncatedContent(item.content, 250)),}} />
             </div>
           ))}
         </OwlCarousel>