Merge pull request #27 from ilyayudovin/profileInfo

ProfileInfo integration

6 files changed, 30 insertions, 48 deletions

diff --git a/.eslintrc.json b/.eslintrc.json
index ac3fbd3..7b16771 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -17,6 +17,7 @@
     "comma-dangle": ["error", "never"],
     "import/extensions": ["error", { "ts": "never", "tsx": "never" }],
     "arrow-body-style": 0,
+    "no-underscore-dangle": 0,
     "no-cond-assign": 0,
     "linebreak-style": 0,
     "react/prop-types": 0,
diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx
index 51a3c4c..21bda5e 100644
--- a/src/Feed/Feed.tsx
+++ b/src/Feed/Feed.tsx
@@ -22,7 +22,7 @@ const Feed: React.FC<PropTypes> = ({ page }) => {
 
   let endpoint: string;
   if (page === 'feed') endpoint = '/polls';
-  else if (page === 'profile') endpoint = '/profile';
+  else if (page === 'profiles') endpoint = '/profiles';
 
   useEffect(() => {
     get(endpoint).then(response => {
diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx
index 588714a..b639f25 100644
--- a/src/PollCard/PollCard.tsx
+++ b/src/PollCard/PollCard.tsx
@@ -35,7 +35,8 @@ const useStyles = makeStyles(theme => ({
     position: 'absolute',
     color: 'white',
     top: '86%',
-    fontSize: 20
+    fontSize: 20,
+    textShadow: '0 0 3px black'
   },
   percentageLeft: {
     left: 30
@@ -71,9 +72,7 @@ const PollCard: React.FC<PropTypes> = ({ poll }) => {
     <Card className={classes.root}>
       <CardHeader
         avatar={(
-          <Avatar aria-label="avatar">
-            <img src={author.avatarUrl} alt={author.name[0].toUpperCase()} />
-          </Avatar>
+          <Avatar aria-label="avatar" src={author.avatarUrl} alt={author.name[0].toUpperCase()} />
         )}
         title={author.name}
       />
diff --git a/src/ProfileInfo/ProfileInfo.tsx b/src/ProfileInfo/ProfileInfo.tsx
index ac8ef26..a7289df 100644
--- a/src/ProfileInfo/ProfileInfo.tsx
+++ b/src/ProfileInfo/ProfileInfo.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Avatar } from '@material-ui/core/';
 import { makeStyles } from '@material-ui/core/styles';
-import { Poll } from '../types';
+import { User } from '../types';
+import { get } from '../requests';
 
 interface PropTypes {
-  profile: Poll;
+  id: string;
 }
 
 const useStyles = makeStyles({
@@ -33,14 +34,20 @@ const useStyles = makeStyles({
   }
 });
 
-const ProfileInfo: React.FC<PropTypes> = ({ profile }) => {
+const ProfileInfo: React.FC<PropTypes> = ({ id }) => {
+  const [userInfo, setUserInfo] = useState<User>();
+
+  get(`/users/${id}`).then(response => {
+    setUserInfo(response.data);
+  });
+
   const classes = useStyles();
 
   return (
     <div>
-      <Avatar className={classes.avatar} src={profile.author.avatarUrl} />
+      <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
       <div className={classes.name}>
-        Nick Name
+        {userInfo?.name}
       </div>
       <div className={classes.profileMenu}>
         <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
diff --git a/src/index.tsx b/src/index.tsx
index 5fd57f0..adf44a5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,6 +13,8 @@ import Header from './Header/Header';
 import Feed from './Feed/Feed';
 import ProfileInfo from './ProfileInfo/ProfileInfo';
 
+import { get } from './requests';
+
 const theme = createMuiTheme({
   palette: {
     primary: {
@@ -21,42 +23,6 @@ const theme = createMuiTheme({
   }
 });
 
-const polls = [{
-  author: {
-    name: 'John Doe',
-    avatarUrl: ''
-  },
-  contents: {
-    left: {
-      // eslint-disable-next-line max-len
-      url: 'https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-      votes: 15
-    },
-    right: {
-      // eslint-disable-next-line max-len
-      url: 'https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/2019-06/pexels-photo-556667.jpeg',
-      votes: 17
-    }
-  }
-}, {
-  author: {
-    name: 'John Doe',
-    avatarUrl: ''
-  },
-  contents: {
-    left: {
-      // eslint-disable-next-line max-len
-      url: 'https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-      votes: 15
-    },
-    right: {
-      // eslint-disable-next-line max-len
-      url: 'https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/2019-06/pexels-photo-556667.jpeg',
-      votes: 17
-    }
-  }
-}];
-
 const useStyles = makeStyles({
   root: {
     width: theme.spacing(75),
@@ -67,15 +33,20 @@ const useStyles = makeStyles({
 
 const App: React.FC = () => {
   const [page, setPage] = useState('feed');
+  const [id, setId] = useState<string>('');
   const classes = useStyles();
 
+  get('/users').then(response => {
+    setId(response.data[0]._id);
+  });
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Header setPage={setPage} />
       <div className={classes.root}>
         {
-          page === 'profile' && <ProfileInfo profile={polls[0]} />
+          page === 'profile' && <ProfileInfo id={id} />
         }
         <Feed page={page} />
       </div>
diff --git a/src/types.d.ts b/src/types.d.ts
index 9b4d16a..6cf4fdd 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,3 +1,7 @@
+export interface User {
+  name: string;
+  avatarUrl: string;
+}
 interface ImageData {
   url: string;
   votes: number;