From a283d4310c11f03fe9ff889c6274798b70cf6a19 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 7 Oct 2020 23:51:45 +0300
Subject: feat: create ModalScreen component

---
 src/components/ModalScreen/ModalScreen.tsx   | 39 +++++++++++++++++++
 src/containers/Page/Page.tsx                 |  6 +--
 src/containers/PollCreation/PollCreation.tsx | 58 +++++++++++++---------------
 3 files changed, 66 insertions(+), 37 deletions(-)
 create mode 100644 src/components/ModalScreen/ModalScreen.tsx

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
new file mode 100644
index 0000000..6b7c52c
--- /dev/null
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Dialog,
+  Toolbar,
+  Typography,
+  IconButton,
+  useMediaQuery,
+  useTheme
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+interface PropTypes {
+  title: string;
+}
+
+const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const history = useHistory();
+
+  const handleClose = useCallback(() => history.goBack(), [history]);
+
+  return (
+    <Dialog fullScreen={isMobile} fullWidth open>
+      <Toolbar color="primary">
+        <IconButton edge="start" onClick={handleClose}>
+          <CloseIcon />
+        </IconButton>
+        <Typography variant="h6">
+          { title }
+        </Typography>
+      </Toolbar>
+      { children }
+    </Dialog>
+  );
+};
+
+export default ModalScreen;
diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index 51b6d21..b7e1938 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -36,11 +36,7 @@ const Page: React.FC = () => {
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   useEffect(() => history.listen((update: HistoryChange) => {
-    console.log(update)
-    if (!update.state?.background) {
-      console.log('scrolling')
-      window.scrollTo(0, 0);
-    }
+    if (!update.state?.background) window.scrollTo(0, 0);
   }), [history]);
 
   return (
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index ecc6757..079c79f 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -5,7 +5,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import {
   Button,
   Card,
-  Divider,
   Container,
   LinearProgress
 } from '@material-ui/core';
@@ -13,16 +12,12 @@ import { useSnackbar } from 'notistack';
 
 import useS3Preupload from './useS3Preupload';
 import ImageInput from './ImageInput';
-import UserStrip from '../../components/UserStrip/UserStrip';
+import ModalScreen from '../../components/ModalScreen/ModalScreen';
 import { post } from '../../requests';
-import { useAuth } from '../../hooks/useAuth';
 import { useFeed } from '../../hooks/APIClient';
 
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    marginBottom: theme.spacing(4)
-  },
   images: {
     height: theme.spacing(50),
     display: 'flex'
@@ -34,7 +29,6 @@ const PollCreation: React.FC = () => {
   const classes = useStyles();
   const history = useHistory();
   const { enqueueSnackbar } = useSnackbar();
-  const { user } = useAuth();
   const { mutate: updateFeed } = useFeed();
   const {
     file: left,
@@ -71,31 +65,31 @@ const PollCreation: React.FC = () => {
   };
 
   return (
-    <Container maxWidth="sm" disableGutters>
-      <Card className={classes.root}>
-        {user && <UserStrip user={user} info="" />}
-        <Divider />
-        <div className={classes.images}>
-          <ImageInput callback={setLeft} progress={leftProgress} />
-          <ImageInput callback={setRight} progress={rightProgress} />
-        </div>
-        {
-          leftProgress || rightProgress
-            ? <LinearProgress color="primary" />
-            : (
-              <Button
-                color="primary"
-                disabled={!(left && right)}
-                variant="contained"
-                onClick={handleClick}
-                fullWidth
-              >
-                Submit
-              </Button>
-            )
-        }
-      </Card>
-    </Container>
+    <ModalScreen title="Create a poll">
+      <Container maxWidth="sm" disableGutters>
+        <Card>
+          <div className={classes.images}>
+            <ImageInput callback={setLeft} progress={leftProgress} />
+            <ImageInput callback={setRight} progress={rightProgress} />
+          </div>
+          {
+            leftProgress || rightProgress
+              ? <LinearProgress color="primary" />
+              : (
+                <Button
+                  color="primary"
+                  disabled={!(left && right)}
+                  variant="contained"
+                  onClick={handleClick}
+                  fullWidth
+                >
+                  Submit
+                </Button>
+              )
+          }
+        </Card>
+      </Container>
+    </ModalScreen>
   );
 };
 
-- 
cgit v1.2.3