From 359ec6a68ea92b3d1eecf020742157eb3be90b9f Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 9 Aug 2020 21:17:33 +0300
Subject: feat: add useFeed hook

---
 src/pages/FeedPage/FeedPage.tsx | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

(limited to 'src/pages/FeedPage')

diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index 0b7d44a..8e7fb55 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -1,32 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Poll } from 'which-types';
 import { Container } from '@material-ui/core/';
 
 import Feed from '../../components/Feed/Feed';
-import { get } from '../../requests';
 import PollSubmission from './PollSubmission';
 import { useAuth } from '../../hooks/useAuth';
+import { useFeed } from '../../hooks/APIClient';
 
 const FeedPage: React.FC = () => {
-  const [polls, setPolls] = useState<Poll[]>([]);
+  const { data, mutate } = useFeed();
   const { isAuthenticated } = useAuth();
 
-  useEffect(() => {
-    get('/feed').then(response => {
-      setPolls(response.data);
-    });
-  }, []);
-
   const addPoll = (poll: Poll): void => {
-    polls.unshift(poll);
-    setPolls([]);
-    setPolls(polls);
+    mutate([poll, ...data], true);
   };
 
   return (
     <Container maxWidth="sm" disableGutters>
       {isAuthenticated() && <PollSubmission addPoll={addPoll} />}
-      <Feed polls={polls} />
+      <Feed polls={data} />
     </Container>
   );
 };
-- 
cgit v1.2.3


From fd6e663a1bcc43cfc49bda99ccbfab380489324b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:02:24 +0300
Subject: feat!: add useLocalStorage hook

---
 src/pages/FeedPage/FeedPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/pages/FeedPage')

diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index 8e7fb55..da0fb2a 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -17,7 +17,7 @@ const FeedPage: React.FC = () => {
 
   return (
     <Container maxWidth="sm" disableGutters>
-      {isAuthenticated() && <PollSubmission addPoll={addPoll} />}
+      {isAuthenticated && <PollSubmission addPoll={addPoll} />}
       <Feed polls={data} />
     </Container>
   );
-- 
cgit v1.2.3


From 7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:28:39 +0300
Subject: refactor: move pages -> containers

---
 src/pages/FeedPage/FeedPage.tsx            | 27 ---------
 src/pages/FeedPage/PollSubmission.tsx      | 92 ------------------------------
 src/pages/FeedPage/PollSubmissionImage.tsx | 87 ----------------------------
 src/pages/FeedPage/types.ts                |  7 ---
 4 files changed, 213 deletions(-)
 delete mode 100644 src/pages/FeedPage/FeedPage.tsx
 delete mode 100644 src/pages/FeedPage/PollSubmission.tsx
 delete mode 100644 src/pages/FeedPage/PollSubmissionImage.tsx
 delete mode 100644 src/pages/FeedPage/types.ts

(limited to 'src/pages/FeedPage')

diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
deleted file mode 100644
index da0fb2a..0000000
--- a/src/pages/FeedPage/FeedPage.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Poll } from 'which-types';
-import { Container } from '@material-ui/core/';
-
-import Feed from '../../components/Feed/Feed';
-import PollSubmission from './PollSubmission';
-import { useAuth } from '../../hooks/useAuth';
-import { useFeed } from '../../hooks/APIClient';
-
-const FeedPage: React.FC = () => {
-  const { data, mutate } = useFeed();
-  const { isAuthenticated } = useAuth();
-
-  const addPoll = (poll: Poll): void => {
-    mutate([poll, ...data], true);
-  };
-
-  return (
-    <Container maxWidth="sm" disableGutters>
-      {isAuthenticated && <PollSubmission addPoll={addPoll} />}
-      <Feed polls={data} />
-    </Container>
-  );
-};
-
-export default FeedPage;
-
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
deleted file mode 100644
index 347eecc..0000000
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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 { Poll, Which } from 'which-types';
-import { useSnackbar } from 'notistack';
-import PollSubmissionImage from './PollSubmissionImage';
-import UserStrip from '../../components/UserStrip/UserStrip';
-import { post } from '../../requests';
-import { Contents } from './types';
-import { useAuth } from '../../hooks/useAuth';
-
-interface PropTypes{
-  addPoll: (poll: Poll) => void;
-}
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    marginBottom: theme.spacing(4)
-  },
-  images: {
-    height: theme.spacing(50),
-    display: 'flex'
-  }
-}));
-
-const emptyContents: Contents = {
-  left: { url: '' },
-  right: { url: '' }
-};
-
-const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => {
-  const classes = useStyles();
-  const [expanded, setExpanded] = useState(false);
-  const [contents, setContents] = useState<Contents>(emptyContents);
-  const { enqueueSnackbar } = useSnackbar();
-  const { user } = useAuth();
-
-  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/', { contents }).then(response => {
-        addPoll(response.data);
-        enqueueSnackbar('Your poll has been successfully created!', {
-          variant: 'success'
-        });
-      });
-      setContents({ ...emptyContents });
-    }
-    setExpanded(!expanded);
-  };
-
-  return (
-    <ClickAwayListener onClickAway={handleClickAway}>
-      <Card className={classes.root}>
-        <Collapse in={expanded} timeout="auto" unmountOnExit>
-          {user && <UserStrip user={user} info="" />}
-          <Divider />
-          <div className={classes.images}>
-            <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
deleted file mode 100644
index 8835989..0000000
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-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'
-  },
-  text: {
-    textAlign: '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 (!isModalOpen) {
-      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" className={classes.text}> Upload an image </Typography>
-    </>
-  );
-
-  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>
-      <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={setUrl} />
-    </>
-  );
-};
-
-export default PollSubmissionImage;
diff --git a/src/pages/FeedPage/types.ts b/src/pages/FeedPage/types.ts
deleted file mode 100644
index 24ace4e..0000000
--- a/src/pages/FeedPage/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface ImageData {
-  url: string;
-}
-export interface Contents {
-  left: ImageData;
-  right: ImageData;
-}
-- 
cgit v1.2.3