Merge pull request #49 from which-ecosystem/feed-improvements

Feed improvements

5 files changed, 73 insertions, 28 deletions

diff --git a/package-lock.json b/package-lock.json
index f9311e4..84e7815 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14118,9 +14118,9 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
     "which-types": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/which-types/-/which-types-1.4.1.tgz",
-      "integrity": "sha512-ZtN3cDwz/fQbJBwrItsZ0jpGafReTd/fIffHNQtFW4THrZqi8z4qnFTbyu1M6LnAmPlwU/FaRLZPfd67ZQ4mFw=="
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/which-types/-/which-types-1.4.2.tgz",
+      "integrity": "sha512-nwcohvhH+VEA11cReLi/BgeuKHJYH7VM2BWe9OIX89CB+iaZ0+wb6oLFcIP6Vp6jw3k93yoPMe9pMBsOi4kj6w=="
     },
     "word-wrap": {
       "version": "1.2.3",
diff --git a/package.json b/package.json
index 98f44df..ca1967a 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "react-icons": "^3.10.0",
     "react-scripts": "3.4.1",
     "typeface-roboto": "0.0.75",
-    "which-types": "^1.4.1"
+    "which-types": "^1.4.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 72c2daf..d3b4fc2 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -3,13 +3,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import {
   Card,
   CardActionArea,
-  CardMedia,
-  Avatar,
-  CardHeader
+  CardMedia
 } from '@material-ui/core/';
 import { Which, Poll } from 'which-types';
 
 import PercentageBar from './PercentageBar';
+import UserStrip from '../UserStrip/UserStrip';
 import { post } from '../../requests';
 
 interface PropTypes {
@@ -38,9 +37,6 @@ const useStyles = makeStyles(theme => ({
   imagesBlock: {
     display: 'flex'
   },
-  avatar: {
-    cursor: 'pointer'
-  },
   rateLine: {
     position: 'relative',
     width: '100%',
@@ -64,10 +60,6 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
   const { author, contents: { left, right }, userChoice } = poll;
   const date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT);
 
-  const handleNavigate = () => {
-    navigate('profile', poll.author._id);
-  };
-
   const vote = (which: Which) => {
     if (userChoice) return;
     post('votes/', { which, pollId: poll._id }).then(() => {
@@ -87,19 +79,7 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
 
   return (
     <Card className={classes.root}>
-      <CardHeader
-        avatar={(
-          <Avatar
-            aria-label="avatar"
-            src={author.avatarUrl}
-            alt={author.username[0].toUpperCase()}
-            onClick={handleNavigate}
-            className={classes.avatar}
-          />
-        )}
-        title={author.username}
-        subheader={date}
-      />
+      <UserStrip user={author} info={date} navigate={navigate} />
       <div className={classes.imagesBlock}>
         <CardActionArea onDoubleClick={handleLeft}>
           <CardMedia
diff --git a/src/components/UserStrip/UserStrip.tsx b/src/components/UserStrip/UserStrip.tsx
new file mode 100644
index 0000000..6e84768
--- /dev/null
+++ b/src/components/UserStrip/UserStrip.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
+import {
+  Avatar,
+  CardHeader
+} from '@material-ui/core/';
+import { User } from 'which-types';
+
+
+interface PropTypes {
+  user: User;
+  info: string | JSX.Element
+  navigate: (prefix: string, id: string) => void;
+}
+
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  verified: {
+    marginLeft: theme.spacing(0.5),
+    width: theme.spacing(2),
+    height: theme.spacing(2)
+  },
+  avatar: {
+    cursor: 'pointer'
+  }
+}));
+
+
+const UserStrip: React.FC<PropTypes> = ({ user, info, navigate }) => {
+  const classes = useStyles();
+  const {
+    username,
+    avatarUrl,
+    verified
+  } = user;
+
+  const handleNavigate = () => {
+    navigate('profile', user._id);
+  };
+
+  const avatar = (
+    <Avatar
+      src={avatarUrl}
+      alt={username[0].toUpperCase()}
+      onClick={handleNavigate}
+      className={classes.avatar}
+    />
+  );
+
+  const title = (
+    <div className={classes.root}>
+      {username}
+      {verified && <VerifiedIcon color="primary" className={classes.verified} />}
+    </div>
+  );
+
+  return <CardHeader avatar={avatar} title={title} subheader={info} />;
+};
+
+export default UserStrip;
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index 937b0a9..b7d719e 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -12,7 +12,7 @@ const FeedPage: React.FC<PropTypes> = ({ navigate }) => {
   const [polls, setPolls] = useState<Poll[]>([]);
 
   useEffect(() => {
-    get('/polls').then(response => {
+    get('/feed').then(response => {
       setPolls(response.data);
     });
   }, []);