From 4471fef74dfe312a8cf6a1440f5a703e897af136 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 7 Oct 2020 23:25:52 +0300
Subject: feat: wire modal routes

---
 src/components/Fab/Fab.tsx     | 23 +++++++++-----------
 src/containers/Page/Page.tsx   | 15 ++++++++-----
 src/containers/Page/Router.tsx | 48 +++++++++++++++++++++++++++++-------------
 3 files changed, 53 insertions(+), 33 deletions(-)

diff --git a/src/components/Fab/Fab.tsx b/src/components/Fab/Fab.tsx
index 7ca2893..f6b85e5 100644
--- a/src/components/Fab/Fab.tsx
+++ b/src/components/Fab/Fab.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation, Link } from 'react-router-dom';
 import { Fab as FabBase, Slide, useScrollTrigger } from '@material-ui/core/';
 import { makeStyles } from '@material-ui/core/styles';
 import PlusIcon from '@material-ui/icons/Add';
@@ -26,22 +26,19 @@ const useStyles = makeStyles(theme => ({
 
 const Fab: React.FC<PropTypes> = ({ hideOnScroll = false }) => {
   const classes = useStyles();
-  const history = useHistory();
+  const location = useLocation();
   const trigger = useScrollTrigger();
 
-  const handleClick = () => {
-    history.push('/new');
-  };
-
   return (
     <Slide appear={false} direction="up" in={(!hideOnScroll) || !trigger}>
-      <FabBase
-        onClick={handleClick}
-        className={classes.root}
-        color="secondary"
-      >
-        <PlusIcon />
-      </FabBase>
+      <Link to={{ pathname: '/new', state: { background: location } }}>
+        <FabBase
+          className={classes.root}
+          color="secondary"
+        >
+          <PlusIcon />
+        </FabBase>
+      </Link>
     </Slide>
   );
 };
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;
-- 
cgit v1.2.3