From 2ce5a4ab4a835f53e968a14be4fe5b4413b19395 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Mon, 19 Jul 2021 14:42:28 +0200
Subject: [PATCH] Refactor App router (#132)

---
 packages/DApp/src/App.tsx                     | 78 +++----------------
 packages/DApp/src/pages/DesktopRouter.tsx     | 30 +++++++
 .../DirectoryMobile.tsx                       |  0
 .../src/{pages => pagesMobile}/InfoMobile.tsx |  0
 .../DApp/src/pagesMobile/MobileRouter.tsx     | 26 +++++++
 .../{pages => pagesMobile}/VotesMobile.tsx    |  0
 6 files changed, 67 insertions(+), 67 deletions(-)
 create mode 100644 packages/DApp/src/pages/DesktopRouter.tsx
 rename packages/DApp/src/{pages => pagesMobile}/DirectoryMobile.tsx (100%)
 rename packages/DApp/src/{pages => pagesMobile}/InfoMobile.tsx (100%)
 create mode 100644 packages/DApp/src/pagesMobile/MobileRouter.tsx
 rename packages/DApp/src/{pages => pagesMobile}/VotesMobile.tsx (100%)

diff --git a/packages/DApp/src/App.tsx b/packages/DApp/src/App.tsx
index 3b87962..9511f0c 100644
--- a/packages/DApp/src/App.tsx
+++ b/packages/DApp/src/App.tsx
@@ -1,28 +1,13 @@
 import React, { useEffect, useState } from 'react'
-import { Redirect, Route, Switch } from 'react-router'
-import { BrowserRouter } from 'react-router-dom'
 import styled from 'styled-components'
 import { GlobalStyle } from './providers/GlobalStyle'
-import { TopBar } from './components/top/TopBar'
-import { Votes } from './pages/Votes'
-import { Directory } from './pages/Directory'
-import { Info } from './pages/Info'
 import { NotificationsList } from './components/NotificationsList'
-import { VotesMobile } from './pages/VotesMobile'
-import { DirectoryMobile } from './pages/DirectoryMobile'
-import { InfoMobile } from './pages/InfoMobile'
+import { MobileRouter } from './pagesMobile/MobileRouter'
+import { DekstopRouter } from './pages/DesktopRouter'
 
 export function App() {
   const [mobileVersion, setMobileVersion] = useState(false)
 
-  useEffect(() => {
-    if (window.innerWidth < 600) {
-      setMobileVersion(true)
-    } else {
-      setMobileVersion(false)
-    }
-  }, [])
-
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth < 600) {
@@ -31,61 +16,20 @@ export function App() {
         setMobileVersion(false)
       }
     }
+    handleResize()
     window.addEventListener('resize', handleResize)
     return () => window.removeEventListener('resize', handleResize)
-  }, [window.innerWidth])
+  }, [])
 
-  if (mobileVersion) {
-    return (
-      <Page>
-        <BrowserRouter>
-          <GlobalStyle />
-
-          <PageContentMobile>
-            <Switch>
-              <Route exact path="/votes" component={VotesMobile} />
-              <Route exact path="/directory" component={DirectoryMobile} />
-              <Route exact path="/info" component={InfoMobile} />
-            </Switch>
-            <Redirect exact from="/" to="/votes" />
-          </PageContentMobile>
-        </BrowserRouter>
-        <NotificationsList />
-      </Page>
-    )
-  } else {
-    return (
-      <Page>
-        <BrowserRouter>
-          <GlobalStyle />
-          <TopBar />
-          <PageContent>
-            <Switch>
-              <Route exact path="/votes" component={Votes} />
-              <Route exact path="/directory" component={Directory} />
-              <Route exact path="/info" component={Info} />
-            </Switch>
-            <Redirect exact from="/" to="/votes" />
-          </PageContent>
-        </BrowserRouter>
-        <NotificationsList />
-      </Page>
-    )
-  }
+  return (
+    <Page>
+      <GlobalStyle />
+      {mobileVersion ? <MobileRouter /> : <DekstopRouter />}
+      <NotificationsList />
+    </Page>
+  )
 }
 
 const Page = styled.div`
   height: 100%;
 `
-const PageContent = styled.div`
-  height: 100%;
-  max-width: 996px;
-  padding: 96px 32px 32px;
-  margin: 0 auto;
-  position: relative;
-`
-const PageContentMobile = styled.div`
-  height: 100%;
-  padding: 196px 16px 16px;
-  position: relative;
-`
diff --git a/packages/DApp/src/pages/DesktopRouter.tsx b/packages/DApp/src/pages/DesktopRouter.tsx
new file mode 100644
index 0000000..f15c1f8
--- /dev/null
+++ b/packages/DApp/src/pages/DesktopRouter.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Redirect, Route, Switch } from 'react-router'
+import { BrowserRouter } from 'react-router-dom'
+import styled from 'styled-components'
+import { Directory } from './Directory'
+import { Votes } from './Votes'
+import { Info } from './Info'
+import { TopBar } from '../components/top/TopBar'
+
+export const DekstopRouter = () => (
+  <BrowserRouter>
+    <TopBar />
+    <PageContent>
+      <Switch>
+        <Route exact path="/votes" component={Votes} />
+        <Route exact path="/directory" component={Directory} />
+        <Route exact path="/info" component={Info} />
+      </Switch>
+      <Redirect exact from="/" to="/votes" />
+    </PageContent>
+  </BrowserRouter>
+)
+
+const PageContent = styled.div`
+  height: 100%;
+  max-width: 996px;
+  padding: 96px 32px 32px;
+  margin: 0 auto;
+  position: relative;
+`
diff --git a/packages/DApp/src/pages/DirectoryMobile.tsx b/packages/DApp/src/pagesMobile/DirectoryMobile.tsx
similarity index 100%
rename from packages/DApp/src/pages/DirectoryMobile.tsx
rename to packages/DApp/src/pagesMobile/DirectoryMobile.tsx
diff --git a/packages/DApp/src/pages/InfoMobile.tsx b/packages/DApp/src/pagesMobile/InfoMobile.tsx
similarity index 100%
rename from packages/DApp/src/pages/InfoMobile.tsx
rename to packages/DApp/src/pagesMobile/InfoMobile.tsx
diff --git a/packages/DApp/src/pagesMobile/MobileRouter.tsx b/packages/DApp/src/pagesMobile/MobileRouter.tsx
new file mode 100644
index 0000000..5ef41da
--- /dev/null
+++ b/packages/DApp/src/pagesMobile/MobileRouter.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Redirect, Route, Switch } from 'react-router'
+import { BrowserRouter } from 'react-router-dom'
+import styled from 'styled-components'
+import { DirectoryMobile } from './DirectoryMobile'
+import { InfoMobile } from './InfoMobile'
+import { VotesMobile } from './VotesMobile'
+
+export const MobileRouter = () => (
+  <BrowserRouter>
+    <PageContentMobile>
+      <Switch>
+        <Route exact path="/votes" component={VotesMobile} />
+        <Route exact path="/directory" component={DirectoryMobile} />
+        <Route exact path="/info" component={InfoMobile} />
+      </Switch>
+      <Redirect exact from="/" to="/votes" />
+    </PageContentMobile>
+  </BrowserRouter>
+)
+
+const PageContentMobile = styled.div`
+  height: 100%;
+  padding: 196px 16px 16px;
+  position: relative;
+`
diff --git a/packages/DApp/src/pages/VotesMobile.tsx b/packages/DApp/src/pagesMobile/VotesMobile.tsx
similarity index 100%
rename from packages/DApp/src/pages/VotesMobile.tsx
rename to packages/DApp/src/pagesMobile/VotesMobile.tsx