feat: add verified mark in new UserStrip comp

2 files changed, 68 insertions, 23 deletions

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;