From d04a207b2ebf8ce183afbd6a947bf9f4236a37c2 Mon Sep 17 00:00:00 2001
From: Sivritkin Dmitriy <129217598+velenyx@users.noreply.github.com>
Date: Mon, 25 Sep 2023 09:21:33 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20useGetScreenWidth=20h?=
 =?UTF-8?q?ook=20(#112)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feature: ✨ add useGetScreenWidth hook

* fix: :bug: get window width in server-side
---
 client/src/app/page.tsx                       |  5 ++
 client/src/shared/lib/hooks/index.ts          |  1 +
 .../use-get-screen-width.ts                   | 47 +++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 client/src/shared/lib/hooks/use-get-screen-width/use-get-screen-width.ts

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index f2170e002..73ba35a47 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -1,14 +1,19 @@
 'use client';
 
 import { Typography } from '@/shared/ui';
+import { useGetScreenWidth } from '@/shared/lib';
 
 export default function Home() {
+  const width = useGetScreenWidth();
+
   return (
     <>
       <Typography size='heading_l' variant='h6'>
         We are working hard to deliver teameights on NextJS/TS soon!
       </Typography>
 
+      <div> The screen width is: {width} </div>
+
       <a href='/login' style={{ color: 'green' }}>
         Get to login
       </a>
diff --git a/client/src/shared/lib/hooks/index.ts b/client/src/shared/lib/hooks/index.ts
index 3d8474717..15c0f8edc 100644
--- a/client/src/shared/lib/hooks/index.ts
+++ b/client/src/shared/lib/hooks/index.ts
@@ -1 +1,2 @@
 export { useClickOutside } from './use-click-outside/use-click-outside';
+export { useGetScreenWidth } from './use-get-screen-width/use-get-screen-width';
diff --git a/client/src/shared/lib/hooks/use-get-screen-width/use-get-screen-width.ts b/client/src/shared/lib/hooks/use-get-screen-width/use-get-screen-width.ts
new file mode 100644
index 000000000..dfc8d4842
--- /dev/null
+++ b/client/src/shared/lib/hooks/use-get-screen-width/use-get-screen-width.ts
@@ -0,0 +1,47 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook to get the current screen width.
+ *
+ * This hook returns the current screen width, and will re-render the component
+ * using this hook whenever the screen is resized.
+ *
+ * @returns {number} The current screen width in pixels.
+ *
+ * @example
+ * import { useGetScreenWidth } from '@/shared/lib';
+ *
+ * export const ResponsiveComponent = () => {
+ *   const screenWidth = useGetScreenWidth();
+ *
+ *   return (
+ *     <div>
+ *       The screen width is: {screenWidth}
+ *     </div>
+ *   );
+ * };
+ */
+export const useGetScreenWidth = (): number => {
+  const [screenWidth, setScreenWidth] = useState<number>(0);
+
+  useEffect(() => {
+    // Set the screen width on the client-side after the component has mounted
+    setScreenWidth(window.innerWidth);
+
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+
+    // Event listener for window resize
+    window.addEventListener('resize', handleResize);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return screenWidth;
+};