From 9f9e3ed36078e17578446f701a2c30a3a1517f4b Mon Sep 17 00:00:00 2001
From: moonlitgrace <moonlitgrace.gaia@gmail.com>
Date: Wed, 30 Oct 2024 23:26:15 +0530
Subject: [PATCH] fix: remove hook and ssr false dynamic loading

---
 app/(routes)/(admin)/layout.tsx      |  8 ++------
 app/(routes)/(main)/layout.tsx       |  8 ++------
 app/_components/_admin/admin-bar.tsx | 10 +++-------
 app/_components/_main/app-bar.tsx    | 21 +++++----------------
 app/_components/responsive.tsx       | 24 ++++++++++++++++++++++++
 hooks/use-screen-device.ts           | 23 -----------------------
 tsconfig.json                        | 24 +++++++++++++++++++-----
 7 files changed, 55 insertions(+), 63 deletions(-)
 create mode 100644 app/_components/responsive.tsx
 delete mode 100644 hooks/use-screen-device.ts

diff --git a/app/(routes)/(admin)/layout.tsx b/app/(routes)/(admin)/layout.tsx
index 8ac8d13..cd34ddd 100644
--- a/app/(routes)/(admin)/layout.tsx
+++ b/app/(routes)/(admin)/layout.tsx
@@ -1,10 +1,6 @@
-import dynamic from 'next/dynamic';
+import AdminBar from '@/app/_components/_admin/admin-bar';
 import React from 'react';
 
-const DynamicAdminBar = dynamic(() => import('@/app/_components/_admin/admin-bar'), {
-  ssr: false,
-});
-
 export default function ProtectedLayout({
   children,
 }: Readonly<{
@@ -12,7 +8,7 @@ export default function ProtectedLayout({
 }>) {
   return (
     <div className="mb-40 mt-10 flex w-full flex-col gap-10 md:mb-10">
-      <DynamicAdminBar />
+      <AdminBar />
       {children}
     </div>
   );
diff --git a/app/(routes)/(main)/layout.tsx b/app/(routes)/(main)/layout.tsx
index a9cecf0..1cdc16a 100644
--- a/app/(routes)/(main)/layout.tsx
+++ b/app/(routes)/(main)/layout.tsx
@@ -1,10 +1,6 @@
-import dynamic from 'next/dynamic';
+import AppBar from '@/app/_components/_main/app-bar';
 import React from 'react';
 
-const DynamicAppBar = dynamic(() => import('@/app/_components/_main/app-bar'), {
-  ssr: false,
-});
-
 export default function MainLayout({
   children,
 }: Readonly<{
@@ -13,7 +9,7 @@ export default function MainLayout({
   return (
     <>
       {children}
-      <DynamicAppBar />
+      <AppBar />
     </>
   );
 }
diff --git a/app/_components/_admin/admin-bar.tsx b/app/_components/_admin/admin-bar.tsx
index c746b8e..0f91d5e 100644
--- a/app/_components/_admin/admin-bar.tsx
+++ b/app/_components/_admin/admin-bar.tsx
@@ -3,18 +3,16 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
 import React from 'react';
 import PencilIcon from '@/components/icons/pencil';
-import { useScreenDevice } from '@/hooks/use-screen-device';
 import HomeIcon from '@/components/icons/home';
+import { ResponsiveTooltipContent } from '@/app/_components/responsive';
 
 const AdminBar = () => {
   const pathname = usePathname();
 
-  const { isMobile } = useScreenDevice();
-
   const MAPPING = {
     links: {
       home: {
@@ -49,9 +47,7 @@ const AdminBar = () => {
                 </Link>
               </Button>
             </TooltipTrigger>
-            <TooltipContent sideOffset={15} side={isMobile ? 'top' : 'right'}>
-              <p>{item.label}</p>
-            </TooltipContent>
+            <ResponsiveTooltipContent content={item.label} />
           </Tooltip>
         ))}
       </div>
diff --git a/app/_components/_main/app-bar.tsx b/app/_components/_main/app-bar.tsx
index 35cfe1d..0f6503d 100644
--- a/app/_components/_main/app-bar.tsx
+++ b/app/_components/_main/app-bar.tsx
@@ -4,21 +4,17 @@ import Link from 'next/link';
 import HomeIcon from '@/components/icons/home';
 import { usePathname } from 'next/navigation';
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
 import React from 'react';
 import PencilIcon from '@/components/icons/pencil';
 import GithubIcon from '@/components/icons/github';
 import MailIcon from '@/components/icons/mail';
-import { Separator } from '@/components/ui/separator';
-import { useScreenDevice } from '@/hooks/use-screen-device';
-import { cn } from '@/lib/utils';
+import { ResponsiveSeparator, ResponsiveTooltipContent } from '@/app/_components/responsive';
 
 const AppBar = () => {
   const pathname = usePathname();
 
-  const { isMobile } = useScreenDevice();
-
   const MAPPING = {
     links: {
       home: {
@@ -65,15 +61,10 @@ const AppBar = () => {
                 </Link>
               </Button>
             </TooltipTrigger>
-            <TooltipContent sideOffset={15} side={isMobile ? 'top' : 'right'}>
-              <p>{item.label}</p>
-            </TooltipContent>
+            <ResponsiveTooltipContent content={item.label} />
           </Tooltip>
         ))}
-        <Separator
-          orientation={isMobile ? 'vertical' : 'horizontal'}
-          className={cn(isMobile ? 'h-5' : 'h-px w-1/2')}
-        />
+        <ResponsiveSeparator />
         {Object.values(MAPPING.socials).map((item, idx) => (
           <Tooltip key={idx}>
             <TooltipTrigger asChild>
@@ -91,9 +82,7 @@ const AppBar = () => {
                 </a>
               </Button>
             </TooltipTrigger>
-            <TooltipContent sideOffset={15} side={isMobile ? 'top' : 'right'}>
-              <p>{item.label}</p>
-            </TooltipContent>
+            <ResponsiveTooltipContent content={item.label} />
           </Tooltip>
         ))}
       </div>
diff --git a/app/_components/responsive.tsx b/app/_components/responsive.tsx
new file mode 100644
index 0000000..98f7566
--- /dev/null
+++ b/app/_components/responsive.tsx
@@ -0,0 +1,24 @@
+import { Separator } from '@/components/ui/separator';
+import { TooltipContent } from '@/components/ui/tooltip';
+
+export const ResponsiveTooltipContent = ({ content }: { content: string }) => {
+  return (
+    <>
+      <TooltipContent className="hidden md:flex" sideOffset={15} side="right">
+        <p>{content}</p>
+      </TooltipContent>
+      <TooltipContent className="md:hidden" sideOffset={15} side="top">
+        <p>{content}</p>
+      </TooltipContent>
+    </>
+  );
+};
+
+export const ResponsiveSeparator = () => {
+  return (
+    <>
+      <Separator orientation="horizontal" className="hidden h-px w-1/2 md:flex" />
+      <Separator orientation="vertical" className="h-5 md:hidden" />
+    </>
+  );
+};
diff --git a/hooks/use-screen-device.ts b/hooks/use-screen-device.ts
deleted file mode 100644
index bee355e..0000000
--- a/hooks/use-screen-device.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export const useScreenDevice = () => {
-  const [width, setWidth] = useState(window.innerWidth);
-
-  function handleResize() {
-    setWidth(window.innerWidth);
-  }
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  const isMobile = width < 768;
-  const isTablet = width <= 1024;
-  const isDesktop = width > 1024;
-
-  return { isMobile, isTablet, isDesktop };
-};
diff --git a/tsconfig.json b/tsconfig.json
index e7ff90f..d81d4ee 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }