feat: added window width event listeners

hack4bengal · Jan 6, 2024 · f937740 · f937740
1 parent 4d45e5e
commit f937740
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 />