From 392261c20817a6ccf42952a67e5e8b2f7497c8db Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 7 Aug 2023 05:48:03 +0500
Subject: [PATCH] web: add helper to imperitively match a media query

---
 apps/web/src/hooks/use-media-query.ts | 11 ++++++-----
 apps/web/src/hooks/use-mobile.ts      |  6 ++++--
 apps/web/src/hooks/use-tablet.ts      |  7 ++++---
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/hooks/use-media-query.ts b/apps/web/src/hooks/use-media-query.ts
index e3ba08637..6afa6622e 100644
--- a/apps/web/src/hooks/use-media-query.ts
+++ b/apps/web/src/hooks/use-media-query.ts
@@ -39,13 +39,11 @@ const useMediaQuery = (mediaQuery: string) => {
     return false;
   }
 
-  const [isVerified, setIsVerified] = useState(
-    !!window.matchMedia(mediaQuery).matches
-  );
+  const [isMatch, setIsMatch] = useState(matchMediaQuery(mediaQuery));
 
   useEffect(() => {
     const mediaQueryList = window.matchMedia(mediaQuery);
-    const documentChangeHandler = () => setIsVerified(!!mediaQueryList.matches);
+    const documentChangeHandler = () => setIsMatch(!!mediaQueryList.matches);
 
     if (mediaQueryList.addEventListener)
       mediaQueryList.addEventListener("change", documentChangeHandler);
@@ -59,7 +57,10 @@ const useMediaQuery = (mediaQuery: string) => {
     };
   }, [mediaQuery]);
 
-  return isVerified;
+  return isMatch;
 };
 
 export default useMediaQuery;
+
+export const matchMediaQuery = (mediaQuery: string) =>
+  !!window.matchMedia(mediaQuery).matches;
diff --git a/apps/web/src/hooks/use-mobile.ts b/apps/web/src/hooks/use-mobile.ts
index 4b2ced6eb..2a6fa5b3f 100644
--- a/apps/web/src/hooks/use-mobile.ts
+++ b/apps/web/src/hooks/use-mobile.ts
@@ -17,7 +17,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import useMediaQuery from "./use-media-query";
+import useMediaQuery, { matchMediaQuery } from "./use-media-query";
 
-const useMobile = () => useMediaQuery("(max-width: 480px)");
+const MOBILE_MEDIA_QUERY = "(max-width: 480px)";
+export const useMobile = () => useMediaQuery(MOBILE_MEDIA_QUERY);
+export const isMobile = () => matchMediaQuery(MOBILE_MEDIA_QUERY);
 export default useMobile;
diff --git a/apps/web/src/hooks/use-tablet.ts b/apps/web/src/hooks/use-tablet.ts
index d25e3954b..70d5fa6dc 100644
--- a/apps/web/src/hooks/use-tablet.ts
+++ b/apps/web/src/hooks/use-tablet.ts
@@ -17,8 +17,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import useMediaQuery from "./use-media-query";
+import useMediaQuery, { matchMediaQuery } from "./use-media-query";
 
-const useTablet = () =>
-  useMediaQuery("(min-width: 480px) and (max-width: 1000px)");
+const TABLET_MEDIA_QUERY = "(min-width: 480px) and (max-width: 1000px)";
+export const useTablet = () => useMediaQuery(TABLET_MEDIA_QUERY);
+export const isTablet = () => matchMediaQuery(TABLET_MEDIA_QUERY);
 export default useTablet;