🍁 [Frontend] The Broadcast isn't appearing in correct format Fixed (#956

) * Boardcast * all
HITK-TECH-Community · May 24, 2024 · f0a7bd7 · f0a7bd7
1 parent fa0368e
commit f0a7bd7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/Card.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/Card.jsx
@@ -13,9 +13,9 @@ export function Card(props) {
     setFlipped(!flipped);
   };
 
-  const handleOpen = (s, h, i) => {
+  const handleOpen = (s, h, i, l) => {
     setOpen(true);
-    setData({ head: h, desc: s, img: i });
+    setData({ head: h, desc: s, img: i, link: l });
   };
 
   const handleClose = () => {
@@ -53,9 +53,7 @@ export function Card(props) {
         >
           <div className={style["clickable-card"]}>
             <div className={style["card-title"]}>{props.project.title}</div>
-            <div className={style["card-content"]}>
-              {props.project.content.substring(0, 400)}...
-            </div>
+            <div className={style["card-content"]} dangerouslySetInnerHTML={{__html: props.project.content}} />
             <div className={style["card-date"]}>
               {months[date.getMonth()]},{date.getFullYear()}
             </div>
@@ -86,7 +84,8 @@ export function Card(props) {
                 handleOpen(
                   props.project.content,
                   props.project.title,
-                  props.project.imageUrl[0]
+                  props.project.imageUrl[0],
+                  props.project.link
                 )
               }
               className={

diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
@@ -15,9 +15,9 @@ export function Carousel(props) {
   const [open, setOpen] = useState(false);
   const [dataa, setDataa] = useState([]);
   const [isLoaded, setLoaded] = useState(false);
-  const handleOpen = (s, h, i) => {
+  const handleOpen = (s, h, i, l) => {
     setOpen(true);
-    setData({ head: h, desc: s, img: i });
+    setData({ head: h, desc: s, img: i, link: l });
   };
 
   const handleClose = () => {
@@ -131,17 +131,15 @@ export function Carousel(props) {
                   : `${style["slide-card-light"]} ${style["slide-card"]}`
               }
               onClick={() =>
-                handleOpen(item.content, item.title, item.imageUrl[0])
+                handleOpen(item.content, item.title, item.imageUrl[0], item?.link)
               }
             >
               <div
                 style={dark ? cardImageArrayDark[i] : cardImageArrayLight[i]}
               ></div>
 
               <h3 className={style["card-head"]}>{item.title}</h3>
-              <div className={style["card-text"]}>
-                {item.content.substring(0, 210)}...
-              </div>
+              <div className={style["card-text"]} dangerouslySetInnerHTML={{__html: item.content}} />
             </div>
           ))}
         </OwlCarousel>

diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Modal/Modals.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Modal/Modals.jsx
@@ -6,6 +6,7 @@ import style from "./modals.module.scss";
 
 export function Modals(props) {
   let dark = props.theme;
+  console.log(props)
   return (
     <div>
       <Modal
@@ -53,14 +54,15 @@ export function Modals(props) {
                 className={style["image"]}
                 alt="dummy_img"
               />
-              <div className={style["cont"]}>{props.data.desc}</div>
+              <div className={style["cont"]} dangerouslySetInnerHTML={{__html:props.data.desc}} />
             </div>
             <h1
               className={
                 dark
                   ? `${style["link-dark"]} ${style["link"]}`
                   : `${style["link-light"]} ${style["link"]}`
               }
+              onClick={()=>window.open(props.data.link,"_blank")}
             >
               Link
             </h1>