From f9377404aee9ed07620ca1336ae5d1ebd0e56bf9 Mon Sep 17 00:00:00 2001
From: Arkapravo-Ghosh <arkapravoghosh99@gmail.com>
Date: Sat, 6 Jan 2024 16:46:25 +0530
Subject: [PATCH] feat: added window width event listeners

---
 src/components/mentors/Mentors.jsx   | 18 ++++++++++++++++--
 src/components/prizes/Prizes.jsx     | 18 ++++++++++++++++--
 src/components/sponsors/Sponsors.jsx | 18 ++++++++++++++++--
 src/components/themes/Theme.jsx      | 18 ++++++++++++++++--
 src/components/timeline/Timeline.jsx | 20 +++++++++++++++++---
 5 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/src/components/mentors/Mentors.jsx b/src/components/mentors/Mentors.jsx
index ff77071..cfb0518 100644
--- a/src/components/mentors/Mentors.jsx
+++ b/src/components/mentors/Mentors.jsx
@@ -1,15 +1,29 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Marquee from "react-fast-marquee";
 import { FaLinkedinIn, FaXTwitter } from "react-icons/fa6";
 import { mentorContent } from "../../assets/data/MentorsContent";
 import "./Mentors.scss";
 
 function Mentors({ refs }) {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <section className="mentors__parent" ref={refs}>
       <div className="mentors__header disable-select">
         <h1>Experts</h1>
-        <h2>{window.innerWidth > 700 ? "Previous" : "Past"} Mentors</h2>
+        <h2>{windowWidth > 700 ? "Previous" : "Past"} Mentors</h2>
       </div>
 
       <div className="mentors__container mentors__container_desktop">
diff --git a/src/components/prizes/Prizes.jsx b/src/components/prizes/Prizes.jsx
index 06c5a25..fae9be6 100644
--- a/src/components/prizes/Prizes.jsx
+++ b/src/components/prizes/Prizes.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 // import white from "../../assets/images/LandingImages/blob_right.png";
 
 // import FirstPrize from "../../assets/images/PrizesImages/FirstPrize.png";
@@ -11,12 +11,26 @@ import ComingSoon from "../comingsoon/ComingSoon";
 import "./Prizes.scss";
 
 const Prizes = ({ refs }) => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <>
       <div className="prizes__parent" ref={refs}>
         <div className="prizes__header disable-select">
           <h1>Awards</h1>
-          <h2>{window.innerWidth > 700 && "Hackathon"} Prizes</h2>
+          <h2>{windowWidth > 700 && "Hackathon"} Prizes</h2>
         </div>
         {/* <img src={red} alt="" className="red__blob" /> */}
         {/* <img src={white} alt="" className="white__blob" /> */}
diff --git a/src/components/sponsors/Sponsors.jsx b/src/components/sponsors/Sponsors.jsx
index 4e6fcc9..ba79f7e 100644
--- a/src/components/sponsors/Sponsors.jsx
+++ b/src/components/sponsors/Sponsors.jsx
@@ -1,14 +1,28 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import sponsors from "../../assets/data/SponsorsContent";
 import SingleSponsors from "../singlesponsors/SingleSponsors";
 import "./Sponsors.scss";
 
 const Sponsors = ({ refs }) => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <>
       <div className="sponsors__parent" ref={refs}>
         <div className="sponsors__header disable-select">
-          <h1>{window.innerWidth > 700 ? "Supporters" : "Backers"}</h1>
+          <h1>{windowWidth > 700 ? "Supporters" : "Backers"}</h1>
           <h2>Past Sponsors</h2>
         </div>
 
diff --git a/src/components/themes/Theme.jsx b/src/components/themes/Theme.jsx
index 82a3e83..eede4c6 100644
--- a/src/components/themes/Theme.jsx
+++ b/src/components/themes/Theme.jsx
@@ -1,14 +1,28 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import ComingSoon from "../comingsoon/ComingSoon";
 import "./Theme.scss";
 
 const Theme = ({ refs }) => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <>
       <div className="theme__parent" ref={refs}>
         <div className="theme__header disable-select">
           <h1>Tracks</h1>
-          <h2>{window.innerWidth > 700 && "Hackathon"} Themes</h2>
+          <h2>{windowWidth > 700 && "Hackathon"} Themes</h2>
         </div>
 
         <ComingSoon />
diff --git a/src/components/timeline/Timeline.jsx b/src/components/timeline/Timeline.jsx
index 4e67a35..5bce118 100644
--- a/src/components/timeline/Timeline.jsx
+++ b/src/components/timeline/Timeline.jsx
@@ -1,14 +1,28 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import ComingSoon from "../comingsoon/ComingSoon";
 import "./Timeline.scss";
 
 const Timeline = ({ refs }) => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <>
       <div className="timeline__parent" ref={refs}>
         <div className="timeline__header disable-select">
-          <h1>{window.innerWidth > 700 ? "Roadmap" : "Plan"}</h1>
-          <h2>{window.innerWidth > 700 && "Hackathon"} Timeline</h2>
+          <h1>{windowWidth > 700 ? "Roadmap" : "Plan"}</h1>
+          <h2>{windowWidth > 700 && "Hackathon"} Timeline</h2>
         </div>
 
         <ComingSoon />