4 files changed, 187 insertions, 3 deletions
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index b7d719e..0017275 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -1,14 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Poll } from 'which-types';
+import { Poll, User } from 'which-types';
 
 import Feed from '../../components/Feed/Feed';
 import { get } from '../../requests';
+import PollSubmission from './PollSubmission';
+
 
 interface PropTypes {
   navigate: (prefix: string, id: string) => void;
+  user: User | undefined;
 }
 
-const FeedPage: React.FC<PropTypes> = ({ navigate }) => {
+const FeedPage: React.FC<PropTypes> = ({ navigate, user }) => {
   const [polls, setPolls] = useState<Poll[]>([]);
 
   useEffect(() => {
@@ -17,7 +20,18 @@ const FeedPage: React.FC<PropTypes> = ({ navigate }) => {
     });
   }, []);
 
-  return <Feed polls={polls} navigate={navigate} />;
+  const addPoll = (poll: Poll): void => {
+    polls.unshift(poll);
+    setPolls([...polls]);
+  };
+
+
+  return (
+    <>
+      {user && <PollSubmission user={user} addPoll={addPoll} />}
+      <Feed polls={polls} navigate={navigate} />
+    </>
+  );
 };
 
 export default FeedPage;
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
new file mode 100644
index 0000000..16c8350
--- /dev/null
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Collapse from '@material-ui/core/Collapse';
+import {
+  Button,
+  Card,
+  ClickAwayListener,
+  Divider
+} from '@material-ui/core';
+import { User, Poll, Which } from 'which-types';
+import PollSubmissionImage from './PollSubmissionImage';
+import UserStrip from '../../components/UserStrip/UserStrip';
+import { post } from '../../requests';
+import { Contents } from './types';
+
+interface PropTypes{
+  user: User;
+  addPoll: (poll: Poll) => void;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: theme.spacing(50),
+    display: 'flex'
+  }
+}));
+
+const emptyContents: Contents = {
+  left: { url: '' },
+  right: { url: '' }
+};
+
+const PollSubmission: React.FC<PropTypes> = ({ user, addPoll }) => {
+  const classes = useStyles();
+  const [expanded, setExpanded] = useState(false);
+  const [contents, setContents] = useState<Contents>(emptyContents);
+
+  const readyToSubmit = contents.left.url && contents.right.url;
+
+  const setUrl = (which: Which) => (url: string): void => {
+    setContents({ ...contents, [which]: { url } });
+  };
+
+  const handleClickAway = () => {
+    setExpanded(false);
+  };
+
+  const handleClick = () => {
+    if (expanded && readyToSubmit) {
+      post('/polls/', { authorId: user._id, contents }).then(response => {
+        addPoll(response.data);
+      });
+      setContents({ ...emptyContents });
+    }
+    setExpanded(!expanded);
+  };
+
+  return (
+    <ClickAwayListener onClickAway={handleClickAway}>
+      <Card>
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+          <UserStrip user={user} info="" navigate={() => {}} />
+          <Divider />
+          <div className={classes.root}>
+            <PollSubmissionImage url={contents.left.url} setUrl={setUrl('left')} />
+            <PollSubmissionImage url={contents.right.url} setUrl={setUrl('right')} />
+          </div>
+        </Collapse>
+        <Button
+          color="primary"
+          disabled={expanded && !readyToSubmit}
+          variant={expanded ? 'contained' : 'outlined'}
+          onClick={handleClick}
+          fullWidth
+        >
+          {expanded ? 'Submit' : 'Create a Poll'}
+        </Button>
+      </Card>
+    </ClickAwayListener>
+  );
+};
+
+export default PollSubmission;
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
new file mode 100644
index 0000000..1e9fa0e
--- /dev/null
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import { CardActionArea, CardMedia, Typography } from '@material-ui/core';
+import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
+
+import UploadImage from '../../components/UploadImage/UploadImage';
+
+interface PropTypes {
+  url: string;
+  setUrl: (url: string) => void;
+}
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  clearIcon: {
+    opacity: '.5',
+    fontSize: 50
+  },
+  media: {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+
+
+const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => {
+  const classes = useStyles();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isMediaHover, setIsMediaHover] = useState(false);
+
+  const handleClick = (): void => {
+    if (url) setUrl('');
+    else setIsModalOpen(!isModalOpen);
+  };
+
+  const handleMouseEnter = (): void => {
+    setIsMediaHover(true);
+  };
+
+  const handleMouseLeave = (): void => {
+    setIsMediaHover(false);
+  };
+
+
+  const Upload = (
+    <>
+      <CloudUploadIcon fontSize="large" color="primary" />
+      <Typography variant="h5"> Upload an image </Typography>
+      <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={setUrl} />
+    </>
+  );
+
+  const Media = (
+    <CardMedia
+      image={url}
+      className={classes.media}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {isMediaHover && <CancelOutlinedIcon className={classes.clearIcon} />}
+    </CardMedia>
+  );
+
+  return (
+    <CardActionArea onClick={handleClick} className={classes.root}>
+      {url ? Media : Upload}
+    </CardActionArea>
+  );
+};
+
+export default PollSubmissionImage;
diff --git a/src/pages/FeedPage/types.ts b/src/pages/FeedPage/types.ts
new file mode 100644
index 0000000..24ace4e
--- /dev/null
+++ b/src/pages/FeedPage/types.ts
@@ -0,0 +1,7 @@
+export interface ImageData {
+  url: string;
+}
+export interface Contents {
+  left: ImageData;
+  right: ImageData;
+}