From 1ac600e2fd9024604d98c525957cd2fbfdf9a779 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Fri, 12 Jun 2020 18:29:51 +0300
Subject: feat: take user info from database
---
src/Feed/Feed.tsx | 2 +-
src/PollCard/PollCard.tsx | 4 +---
src/ProfileInfo/ProfileInfo.tsx | 21 +++++++++++++++------
src/index.tsx | 2 +-
src/types.d.ts | 4 ++++
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;
--
cgit v1.2.3
From 8bee1a3fc948f292b23e9024cb89600e08757240 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Fri, 12 Jun 2020 19:34:57 +0300
Subject: fix: add text shadow for percentage
---
src/PollCard/PollCard.tsx | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx
index 2a51840..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,7 +72,7 @@ const PollCard: React.FC<PropTypes> = ({ poll }) => {
<Card className={classes.root}>
<CardHeader
avatar={(
- <Avatar aria-label="avatar" src={author.avatarUrl} alt={author.name[0].toUpperCase()}/>
+ <Avatar aria-label="avatar" src={author.avatarUrl} alt={author.name[0].toUpperCase()} />
)}
title={author.name}
/>
--
cgit v1.2.3
From 282bd3180b149571cfc5caad98d8b462596157ef Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Fri, 12 Jun 2020 19:41:54 +0300
Subject: fix: clear eslint errors
---
src/ProfileInfo/ProfileInfo.tsx | 12 +++++-------
src/index.tsx | 38 +-------------------------------------
2 files changed, 6 insertions(+), 44 deletions(-)
diff --git a/src/ProfileInfo/ProfileInfo.tsx b/src/ProfileInfo/ProfileInfo.tsx
index 05a2b78..2bba586 100644
--- a/src/ProfileInfo/ProfileInfo.tsx
+++ b/src/ProfileInfo/ProfileInfo.tsx
@@ -1,8 +1,8 @@
-import React, {useEffect, useState} from 'react';
+import React, { useState } from 'react';
import { Avatar } from '@material-ui/core/';
import { makeStyles } from '@material-ui/core/styles';
-import {Poll, User} from "../types";
-import {get} from "../requests";
+import { User } from '../types';
+import { get } from '../requests';
interface PropTypes {
id: string;
@@ -37,10 +37,8 @@ const useStyles = makeStyles({
const ProfileInfo: React.FC<PropTypes> = ({ id }) => {
const [userInfo, setUserInfo] = useState<User>();
- let endpoint: string = '/users/' + id;
-
- get(endpoint).then(response => {
- setUserInfo(response.data)
+ get(`/users/ + ${id}`).then(response => {
+ setUserInfo(response.data);
});
const classes = useStyles();
diff --git a/src/index.tsx b/src/index.tsx
index 530cd82..9fb34cb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -21,42 +21,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),
@@ -75,7 +39,7 @@ const App: React.FC = () => {
<Header setPage={setPage} />
<div className={classes.root}>
{
- page === 'profile' && <ProfileInfo id='5ee39a3b29600306e4e2b0b7' />
+ page === 'profile' && <ProfileInfo id="5ee39a3b29600306e4e2b0b7" />
}
<Feed page={page} />
</div>
--
cgit v1.2.3
From 0d878909fe17311910f2ba13e203bdfa1bc72a1e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 12 Jun 2020 19:58:36 +0300
Subject: feat: fetch default user
---
.eslintrc.json | 1 +
src/ProfileInfo/ProfileInfo.tsx | 2 +-
src/index.tsx | 9 ++++++++-
3 files changed, 10 insertions(+), 2 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/ProfileInfo/ProfileInfo.tsx b/src/ProfileInfo/ProfileInfo.tsx
index 2bba586..a7289df 100644
--- a/src/ProfileInfo/ProfileInfo.tsx
+++ b/src/ProfileInfo/ProfileInfo.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles({
const ProfileInfo: React.FC<PropTypes> = ({ id }) => {
const [userInfo, setUserInfo] = useState<User>();
- get(`/users/ + ${id}`).then(response => {
+ get(`/users/${id}`).then(response => {
setUserInfo(response.data);
});
diff --git a/src/index.tsx b/src/index.tsx
index 9fb34cb..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: {
@@ -31,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 id="5ee39a3b29600306e4e2b0b7" />
+ page === 'profile' && <ProfileInfo id={id} />
}
<Feed page={page} />
</div>
--
cgit v1.2.3