From 0a23633aa49ece18897a6ceaa56fdd3cd837b8e8 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Tue, 15 Sep 2020 00:15:30 +0300
Subject: feat: add description to poll

---
 src/containers/PollCreation/PollCreation.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'src/containers/PollCreation')

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 68f41d2..7f29119 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
-import { Card, Container, LinearProgress } from '@material-ui/core';
+import { Card, Container, LinearProgress, Divider } from '@material-ui/core';
 import SendIcon from '@material-ui/icons/Send';
 import { useSnackbar } from 'notistack';
 
@@ -25,8 +25,9 @@ const useStyles = makeStyles(theme => ({
 
 const PollCreation: React.FC = () => {
   const classes = useStyles();
-  const { user } = useAuth();
+  const ref = useRef<HTMLTextAreaElement>(null);
   const { enqueueSnackbar } = useSnackbar();
+  const { user } = useAuth();
   const { mutate: updateFeed } = useFeed();
   const { mutate: updateProfile } = useProfile(user?.username || '');
   const {
@@ -50,8 +51,8 @@ const PollCreation: React.FC = () => {
         left: { url: leftUrl },
         right: { url: rightUrl }
       };
-
-      post('/polls/', { contents }).then(() => {
+      const description = ref?.current?.value;
+      post('/polls/', { contents, description }).then(() => {
         updateFeed();
         updateProfile();
         enqueueSnackbar('Your poll has been successfully created!', { variant: 'success' });
@@ -71,6 +72,8 @@ const PollCreation: React.FC = () => {
       <Container maxWidth="sm" disableGutters>
         <Card elevation={3}>
           {user && <UserStrip user={user} info="" />}
+          <Divider />
+          <textarea ref={ref} />
           <div className={classes.images}>
             <ImageInput callback={setLeft} progress={leftProgress} />
             <ImageInput callback={setRight} progress={rightProgress} />
-- 
cgit v1.2.3


From 14c42281faafb4866190a025f17abbe471f99fe9 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Fri, 18 Sep 2020 16:58:06 +0300
Subject: add textField for description input

---
 src/containers/PollCreation/PollCreation.tsx | 30 ++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

(limited to 'src/containers/PollCreation')

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 7f29119..05a1966 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,7 +1,7 @@
-import React, {useRef} from 'react';
+import React, { useState } from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
-import { Card, Container, LinearProgress, Divider } from '@material-ui/core';
+import { Card, Container, LinearProgress, Divider, TextField } from '@material-ui/core';
 import SendIcon from '@material-ui/icons/Send';
 import { useSnackbar } from 'notistack';
 
@@ -19,13 +19,20 @@ const useStyles = makeStyles(theme => ({
   images: {
     height: theme.spacing(50),
     display: 'flex'
+  },
+  textarea: {
+    width: '100%',
+    height: 100
+  },
+  descriptionText: {
+    padding: 10
   }
 }));
 
 
 const PollCreation: React.FC = () => {
+  const [description, setDescription] = useState<string>('');
   const classes = useStyles();
-  const ref = useRef<HTMLTextAreaElement>(null);
   const { enqueueSnackbar } = useSnackbar();
   const { user } = useAuth();
   const { mutate: updateFeed } = useFeed();
@@ -43,15 +50,18 @@ const PollCreation: React.FC = () => {
     progress: rightProgress
   } = useS3Preupload();
 
+  const handleDescriptionChange = (e: any) => {
+    setDescription(e.target.value);
+  };
+
   const handleSubmit = async () => {
     try {
       const [leftUrl, rightUrl] = await Bluebird.all([resolveLeft(), resolveRight()]);
-
       const contents = {
         left: { url: leftUrl },
         right: { url: rightUrl }
       };
-      const description = ref?.current?.value;
+
       post('/polls/', { contents, description }).then(() => {
         updateFeed();
         updateProfile();
@@ -73,7 +83,15 @@ const PollCreation: React.FC = () => {
         <Card elevation={3}>
           {user && <UserStrip user={user} info="" />}
           <Divider />
-          <textarea ref={ref} />
+          <TextField
+            multiline
+            rows={2}
+            placeholder="Add a description"
+            fullWidth
+            InputProps={{
+              className: classes.descriptionText,
+            }}
+          />
           <div className={classes.images}>
             <ImageInput callback={setLeft} progress={leftProgress} />
             <ImageInput callback={setRight} progress={rightProgress} />
-- 
cgit v1.2.3


From 2a8d307b53b1b7fa5962e73b5e506c7466b79a7e Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sat, 19 Sep 2020 01:22:20 +0300
Subject: fix eslint errors

---
 src/containers/PollCreation/PollCreation.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/containers/PollCreation')

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 05a1966..2fef64f 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
 import { Card, Container, LinearProgress, Divider, TextField } from '@material-ui/core';
@@ -50,7 +50,7 @@ const PollCreation: React.FC = () => {
     progress: rightProgress
   } = useS3Preupload();
 
-  const handleDescriptionChange = (e: any) => {
+  const handleDescriptionChange = (e: ChangeEvent<HTMLTextAreaElement|HTMLInputElement>) => {
     setDescription(e.target.value);
   };
 
@@ -86,8 +86,9 @@ const PollCreation: React.FC = () => {
           <TextField
             multiline
             rows={2}
-            placeholder="Add a description"
             fullWidth
+            placeholder="Add a description"
+            onChange={handleDescriptionChange}
             InputProps={{
               className: classes.descriptionText,
             }}
-- 
cgit v1.2.3


From 8c8e38f93dba84f67624959540cd2b2042dd5089 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 23:31:08 +0300
Subject: feat: make PollCreation input same as description

---
 src/containers/PollCreation/PollCreation.tsx | 32 +++++++++++++---------------
 1 file changed, 15 insertions(+), 17 deletions(-)

(limited to 'src/containers/PollCreation')

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 2fef64f..33d95bb 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useState } from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
-import { Card, Container, LinearProgress, Divider, TextField } from '@material-ui/core';
+import { Card, Container, LinearProgress, InputBase, Typography } from '@material-ui/core';
 import SendIcon from '@material-ui/icons/Send';
 import { useSnackbar } from 'notistack';
 
@@ -24,8 +24,8 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     height: 100
   },
-  descriptionText: {
-    padding: 10
+  description: {
+    padding: theme.spacing(1, 2)
   }
 }));
 
@@ -77,28 +77,26 @@ const PollCreation: React.FC = () => {
       title="Create a poll"
       actionIcon={<SendIcon />}
       handleAction={handleSubmit}
-      isActionDisabled={!(left && right) || leftProgress > 0 || rightProgress > 0}
+      isActionDisabled={!(left && right) || leftProgress + rightProgress > 0}
     >
       <Container maxWidth="sm" disableGutters>
         <Card elevation={3}>
-          {user && <UserStrip user={user} info="" />}
-          <Divider />
-          <TextField
-            multiline
-            rows={2}
-            fullWidth
-            placeholder="Add a description"
-            onChange={handleDescriptionChange}
-            InputProps={{
-              className: classes.descriptionText,
-            }}
-          />
+          {user && <UserStrip user={user} />}
+          <Typography>
+            <InputBase
+              multiline
+              fullWidth
+              placeholder="Add description"
+              onChange={handleDescriptionChange}
+              className={classes.description}
+            />
+          </Typography>
           <div className={classes.images}>
             <ImageInput callback={setLeft} progress={leftProgress} />
             <ImageInput callback={setRight} progress={rightProgress} />
           </div>
         </Card>
-        {(leftProgress > 0 || rightProgress > 0) && (
+        {(leftProgress + rightProgress > 0) && (
           <>
             <LinearProgress color="primary" />
             <Message
-- 
cgit v1.2.3


From 388ccd1ae73e0dcc710e9b497e95c70a131c73cc Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 9 Oct 2020 00:21:58 +0300
Subject: feat: remove gap between header on mobile

---
 src/containers/PollCreation/PollCreation.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/containers/PollCreation')

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 33d95bb..2e2bd06 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useState, useMemo } from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
 import { Card, Container, LinearProgress, InputBase, Typography } from '@material-ui/core';
@@ -72,12 +72,14 @@ const PollCreation: React.FC = () => {
     }
   };
 
+  const isSubmitting = useMemo(() => leftProgress + rightProgress > 0, [leftProgress, rightProgress]);
+
   return (
     <ModalScreen
       title="Create a poll"
       actionIcon={<SendIcon />}
       handleAction={handleSubmit}
-      isActionDisabled={!(left && right) || leftProgress + rightProgress > 0}
+      isActionDisabled={!(left && right) || isSubmitting}
     >
       <Container maxWidth="sm" disableGutters>
         <Card elevation={3}>
@@ -89,6 +91,7 @@ const PollCreation: React.FC = () => {
               placeholder="Add description"
               onChange={handleDescriptionChange}
               className={classes.description}
+              readOnly={isSubmitting}
             />
           </Typography>
           <div className={classes.images}>
@@ -96,7 +99,7 @@ const PollCreation: React.FC = () => {
             <ImageInput callback={setRight} progress={rightProgress} />
           </div>
         </Card>
-        {(leftProgress + rightProgress > 0) && (
+        {isSubmitting && (
           <>
             <LinearProgress color="primary" />
             <Message
-- 
cgit v1.2.3