From 38584589f5640562479b165f627cce8ee5252edb Mon Sep 17 00:00:00 2001
From: Pooria Setayesh <pooriaset@yahoo.com>
Date: Sat, 4 May 2024 23:21:02 +0330
Subject: [PATCH] refactor: use mobile and desktop components

---
 src/components/Footer/Footer.tsx               | 18 ++++++++++--------
 .../Footer/components/DesktopFooter.tsx        |  2 ++
 src/components/Header/Header.tsx               | 15 ++++++++-------
 .../Header/components/DesktopHeader.tsx        | 16 ++++++++++++++++
 .../Header/components/DesktopView.tsx          | 16 ----------------
 .../{MobileView.tsx => MobileHeader.tsx}       |  4 ++--
 src/components/Header/components/index.ts      |  8 ++++----
 7 files changed, 42 insertions(+), 37 deletions(-)
 create mode 100644 src/components/Header/components/DesktopHeader.tsx
 delete mode 100644 src/components/Header/components/DesktopView.tsx
 rename src/components/Header/components/{MobileView.tsx => MobileHeader.tsx} (96%)

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 4b3eb19..60bbc9b 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,20 +1,22 @@
-'use client';
-
-import { DesktopFooter, MobileFooter } from './components';
+import { IPageListItem } from '@/app/[locale]/(main)/layout';
 import { Box } from '@mui/material';
-import { useAppContext } from '@/hooks/useAppContext';
 import { FC } from 'react';
-import { IPageListItem } from '@/app/[locale]/(main)/layout';
+import DesktopView from '../App/DesktopView';
+import MobileView from '../App/MobileView';
+import { DesktopFooter, MobileFooter } from './components';
 
 export interface FooterProps {
   pages: IPageListItem[];
 }
 const Footer: FC<FooterProps> = ({ pages }) => {
-  const { isMobile } = useAppContext();
-
   return (
     <Box mt={2}>
-      {isMobile ? <MobileFooter /> : <DesktopFooter pages={pages} />}
+      <MobileView>
+        <MobileFooter />
+      </MobileView>
+      <DesktopView>
+        <DesktopFooter pages={pages} />
+      </DesktopView>
     </Box>
   );
 };
diff --git a/src/components/Footer/components/DesktopFooter.tsx b/src/components/Footer/components/DesktopFooter.tsx
index 76a86a2..1f29952 100644
--- a/src/components/Footer/components/DesktopFooter.tsx
+++ b/src/components/Footer/components/DesktopFooter.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { IPageListItem } from '@/app/[locale]/(main)/layout';
 import { Box, Container, Link, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 11dc69d..bb98cce 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { AppBar, Container } from '@mui/material';
-import { DesktopView, MobileView } from './components';
 import { Suspense } from 'react';
-import { useAppContext } from '@/hooks/useAppContext';
+import DesktopView from '../App/DesktopView';
+import MobileView from '../App/MobileView';
+import { DesktopHeader } from './components';
 
 const Header = () => {
-  const { isMobile } = useAppContext();
   return (
     <AppBar
       elevation={0}
@@ -21,13 +21,14 @@ const Header = () => {
       }}
     >
       <Container maxWidth="xl">
-        {isMobile ? (
+        <DesktopView>
+          <DesktopHeader />
+        </DesktopView>
+        <MobileView>
           <Suspense>
             <MobileView />
           </Suspense>
-        ) : (
-          <DesktopView />
-        )}
+        </MobileView>
       </Container>
     </AppBar>
   );
diff --git a/src/components/Header/components/DesktopHeader.tsx b/src/components/Header/components/DesktopHeader.tsx
new file mode 100644
index 0000000..3f99663
--- /dev/null
+++ b/src/components/Header/components/DesktopHeader.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { Suspense } from 'react';
+import BottomSection from './BottomSection';
+import TopSection from './TopSection';
+
+const DesktopHeader = () => {
+  return (
+    <Suspense>
+      <TopSection />
+      <BottomSection />
+    </Suspense>
+  );
+};
+
+export default DesktopHeader;
diff --git a/src/components/Header/components/DesktopView.tsx b/src/components/Header/components/DesktopView.tsx
deleted file mode 100644
index 6bb7e5c..0000000
--- a/src/components/Header/components/DesktopView.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import { Suspense } from "react";
-import BottomSection from "./BottomSection";
-import TopSection from "./TopSection";
-
-const DesktopView = () => {
-  return (
-    <Suspense>
-      <TopSection />
-      <BottomSection />
-    </Suspense>
-  );
-};
-
-export default DesktopView;
diff --git a/src/components/Header/components/MobileView.tsx b/src/components/Header/components/MobileHeader.tsx
similarity index 96%
rename from src/components/Header/components/MobileView.tsx
rename to src/components/Header/components/MobileHeader.tsx
index 15664b6..8f89c57 100644
--- a/src/components/Header/components/MobileView.tsx
+++ b/src/components/Header/components/MobileHeader.tsx
@@ -7,7 +7,7 @@ import SearchDialog from './SearchDialog';
 import SearchSection from './SearchSection';
 import { useTranslations } from 'next-intl';
 
-const MobileView = () => {
+const MobileHeader = () => {
   const { navigate, q } = useCustomSearchParams();
 
   const [open, setOpen] = useState(false);
@@ -64,4 +64,4 @@ const MobileView = () => {
   );
 };
 
-export default MobileView;
+export default MobileHeader;
diff --git a/src/components/Header/components/index.ts b/src/components/Header/components/index.ts
index bf56acb..6ea0244 100644
--- a/src/components/Header/components/index.ts
+++ b/src/components/Header/components/index.ts
@@ -1,4 +1,4 @@
-export { default as TopSection } from "./TopSection";
-export { default as BottomSection } from "./BottomSection";
-export { default as DesktopView } from "./DesktopView";
-export { default as MobileView } from "./MobileView";
+export { default as TopSection } from './TopSection';
+export { default as BottomSection } from './BottomSection';
+export { default as DesktopHeader } from './DesktopHeader';
+export { default as MobileHeader } from './MobileHeader';