feat: take user info from database

5 files changed, 22 insertions, 11 deletions

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..2a51840 100644
--- a/src/PollCard/PollCard.tsx
+++ b/src/PollCard/PollCard.tsx
@@ -71,9 +71,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..05a2b78 100644
--- a/src/ProfileInfo/ProfileInfo.tsx
+++ b/src/ProfileInfo/ProfileInfo.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { Avatar } from '@material-ui/core/';
 import { makeStyles } from '@material-ui/core/styles';
-import { Poll } from '../types';
+import {Poll, User} from "../types";
+import {get} from "../requests";
 
 interface PropTypes {
-  profile: Poll;
+  id: string;
 }
 
 const useStyles = makeStyles({
@@ -33,14 +34,22 @@ const useStyles = makeStyles({
   }
 });
 
-const ProfileInfo: React.FC<PropTypes> = ({ profile }) => {
+const ProfileInfo: React.FC<PropTypes> = ({ id }) => {
+  const [userInfo, setUserInfo] = useState<User>();
+
+  let endpoint: string = '/users/' + id;
+
+  get(endpoint).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..530cd82 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -75,7 +75,7 @@ const App: React.FC = () => {
       <Header setPage={setPage} />
       <div className={classes.root}>
         {
-          page === 'profile' && <ProfileInfo profile={polls[0]} />
+          page === 'profile' && <ProfileInfo id='5ee39a3b29600306e4e2b0b7' />
         }
         <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;