feat: wire modal routes

2 files changed, 43 insertions, 20 deletions

diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index 7df62cd..51b6d21 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -5,11 +5,14 @@ import { SnackbarProvider } from 'notistack';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useHistory } from 'react-router-dom';
 
-import Router from './Router';
+import Router, { LocationState } from './Router';
 import DynoWaiter from './DynoWaiter';
 import Loading from '../../components/Loading/Loading';
 import EmptyState from '../../components/EmptyState/EmptyState';
 
+interface HistoryChange {
+  state?: LocationState | null;
+}
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -32,11 +35,13 @@ const Page: React.FC = () => {
   const history = useHistory();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-  useEffect(() => {
-    return history.listen(() => {
+  useEffect(() => history.listen((update: HistoryChange) => {
+    console.log(update)
+    if (!update.state?.background) {
+      console.log('scrolling')
       window.scrollTo(0, 0);
-    });
-  }, [history]);
+    }
+  }), [history]);
 
   return (
     <SnackbarProvider
diff --git a/src/containers/Page/Router.tsx b/src/containers/Page/Router.tsx
index 7067eea..abf8f00 100644
--- a/src/containers/Page/Router.tsx
+++ b/src/containers/Page/Router.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Switch, Route, useLocation } from 'react-router-dom';
+import { Location } from 'history';
+
+import PollCreation from '../PollCreation/PollCreation';
 
 const Profile = React.lazy(() => import('../Profile/Profile'));
 const Feed = React.lazy(() => import('../Feed/Feed'));
@@ -7,20 +10,35 @@ const Login = React.lazy(() => import('../Login/Login'));
 const Registration = React.lazy(() => import('../Registration/Registration'));
 const Home = React.lazy(() => import('../Home/Home'));
 const Notifications = React.lazy(() => import('../Notifications/Notifications'));
-const PollCreation = React.lazy(() => import('../PollCreation/PollCreation'));
-
-
-const Router: React.FC = React.memo(() => (
-  <Switch>
-    <Route exact path="/" component={Home} />
-    <Route exact path="/login" component={Login} />
-    <Route exact path="/registration" component={Registration} />
-    <Route exact path="/feed" component={Feed} />
-    <Route exact path="/notifications" component={Notifications} />
-    <Route exact path="/new" component={PollCreation} />
-    <Route path="/profile/:username" component={Profile} />
-  </Switch>
-));
+
+export interface LocationState {
+  background?: Location;
+}
+
+const Router: React.FC = React.memo(() => {
+  const location = useLocation<LocationState>();
+  const background = location.state && location.state.background;
+
+  const ModalSwitch = (
+    <Switch>
+      <Route path="/new" component={PollCreation} />
+    </Switch>
+  );
+
+  return (
+    <>
+      {background && ModalSwitch}
+      <Switch location={background || location}>
+        <Route exact path="/" component={Home} />
+        <Route exact path="/login" component={Login} />
+        <Route exact path="/registration" component={Registration} />
+        <Route exact path="/notifications" component={Notifications} />
+        <Route path="/feed" component={Feed} />
+        <Route path="/profile/:username" component={Profile} />
+      </Switch>
+    </>
+  );
+});
 
 
 export default Router;