Refactor responsive behavior by replacing local state management with useWindowResize hook in multiple components

Author: hppanpaliya

react/src/components/common/ButtonSection.js

@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Button, Grid, Box } from "@mui/material";
 import { Link, useLocation } from "react-router-dom";
 import { useContext } from "react";
 import { ThemeContext } from "../../context/ThemeContext";
+import useWindowResize from "../../hooks/useWindowResize";
 
 const ButtonSection = () => {
   const { darkMode, setDarkMode } = useContext(ThemeContext);
@@ -70,25 +71,12 @@ const ButtonSection = () => {
       : {};
   };
 
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 700);
-    };
-
-    handleResize();
-
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+  const isMobile = useWindowResize();
 
   return (
     <Grid
       item
-      sm={2}
+      md={2}
       sx={{
         marginTop: isMobile ? "0vh" : "12vh",
         display: isMobile ? "flex" : "initial",

react/src/components/common/TitleBar.js

@@ -1,27 +1,19 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useContext } from "react";
 import { Box, Typography, Grid } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 
 import { ThemeContext } from "../../context/ThemeContext";
+import useWindowResize from "../../hooks/useWindowResize";
 
 const TitleBar = () => {
   const navigate = useNavigate();
 
-  const [isMobile, setIsMobile] = useState(false);
+  const isMobile = useWindowResize();
   const { darkMode } = useContext(ThemeContext);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 700);
-    };
 
-    handleResize();
 
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+  
 
   return (
     <>

react/src/components/pages/AllEmailList/index.js

@@ -8,28 +8,18 @@ import FiberNewOutlinedIcon from "@mui/icons-material/FiberNewOutlined";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ConfirmModal from "../../common/ConfirmModal";
 import { env } from "../../../env";
+import useWindowResize from "../../../hooks/useWindowResize";
 
 const AllEmailList = () => {
   const [emailData, setEmailData] = useState([]);
   // eslint-disable-next-line no-unused-vars
   const [loading, setLoading] = useState(true);
-  const [isMobile, setIsMobile] = useState(false);
+  const isMobile = useWindowResize();
   const [emailToDelete, setEmailToDelete] = useState(null);
   const [openModal, setOpenModal] = useState(false);
   const [reload, setReload] = useState(false);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 700);
-    };
-
-    handleResize();
 
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
 
   const navigate = useNavigate();
 

react/src/components/pages/Generate/index.js

@@ -88,7 +88,7 @@ const Generate = () => {
     <>
       <Grid container spacing={2} sx={{ height: "100%" }}>
         <ButtonSection />
-        <Grid item xs={12} sm={10} sx={{ marginTop: "6vh" }}>
+        <Grid item xs={12} md={10} sx={{ marginTop: "6vh" }}>
           <Box
             sx={{
               display: "flex",
@@ -100,7 +100,7 @@ const Generate = () => {
               textAlign: "center",
             }}
           >
-            <Grid item xs={12} sm={5}>
+            <Grid item xs={12} md={5}>
               <motion.div initial={{ scale: 0.5 }} animate={{ scale: 1 }} transition={{ duration: 0.3 }}>
                 <TextField
                   label="Enter your email"

react/src/components/pages/InboxEmail/index.js

@@ -8,29 +8,17 @@ import InfoIcon from "@mui/icons-material/Info";
 import { ThemeContext } from "../../../context/ThemeContext";
 import { motion } from "framer-motion";
 import { env } from "../../../env";
+import useWindowResize from "../../../hooks/useWindowResize";
 
 const InboxEmail = () => {
   const { emailId, email_id } = useParams();
   const [emailData, setEmailData] = useState();
   const [emailAttachments, setEmailAttachments] = useState([]);
   const [emailHeaders, setEmailHeaders] = useState([]);
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-
+  const isMobile = useWindowResize();
   const { darkMode } = useContext(ThemeContext);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 700);
-    };
-
-    handleResize();
-
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
 
   let headers;
 
@@ -107,8 +95,8 @@ const InboxEmail = () => {
     <>
       <Grid container spacing={2} sx={{ height: "100%" }}>
         <ButtonSection />
-        <Grid item xs={12} sm={1} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}></Grid>
-        <Grid item xs={12} sm={8} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}>
+        <Grid item xs={12} md={1} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}></Grid>
+        <Grid item xs={12} md={8} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}>
           <Paper
             elevation={3}
             sx={{

react/src/components/pages/InboxList/index.js

@@ -9,29 +9,19 @@ import NoEmailDisplay from "../../common/NoEmailDisplay";
 import { ThemeContext } from "../../../context/ThemeContext";
 import { FileCopyOutlined } from "@mui/icons-material";
 import { env } from "../../../env";
+import useWindowResize from "../../../hooks/useWindowResize";
 
 const EmailList = () => {
   const { emailId } = useParams();
   const [emailData, setEmailData] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [isMobile, setIsMobile] = useState(false);
+  const isMobile = useWindowResize();
   const [openModal, setOpenModal] = useState(false);
   const [emailToDelete, setEmailToDelete] = useState(null);
   const { darkMode } = useContext(ThemeContext);
   const staggerDuration = 0.05;
 
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 700);
-    };
-
-    handleResize();
 
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
 
   const navigate = useNavigate();
 
@@ -97,8 +87,8 @@ const EmailList = () => {
     <>
       <Grid container spacing={2} sx={{ height: "100%" }}>
         <ButtonSection />
-        <Grid item xs={12} sm={1} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}></Grid>
-        <Grid item xs={12} sm={8} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}>
+        <Grid item xs={12} md={1} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}></Grid>
+        <Grid item xs={12} md={8} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}>
           <Tooltip title="Copy Email" placement="top">
             <Typography
               variant="h5"

react/src/components/pages/Main/index.js

@@ -1,25 +1,14 @@
-import React, { useEffect, useState, useContext } from "react";
+import React, { useContext } from "react";
 import { Grid, Box, Typography } from "@mui/material";
 import ButtonSection from "../../common/ButtonSection";
 import { ThemeContext } from "../../../context/ThemeContext";
 import { motion } from "framer-motion";
+import useWindowResize from "../../../hooks/useWindowResize";
 
 const Main = () => {
-  const [isMobile, setIsMobile] = useState(false);
+  const isMobile = useWindowResize();
   const { darkMode } = useContext(ThemeContext);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 700);
-    };
-
-    handleResize();
-
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
 
   return (
     <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
@@ -28,7 +17,7 @@ const Main = () => {
         <Grid
           item
           xs={12}
-          sm={10}
+          md={10}
           sx={{
             marginTop: isMobile ? "1vh" : "6vh",
             paddingLeft: "2%",

react/src/hooks/useWindowResize.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const useWindowResize = (breakpoint = 900) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= breakpoint);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoint]);
+
+  return isMobile;
+};
+
+export default useWindowResize;