From 1ac600e2fd9024604d98c525957cd2fbfdf9a779 Mon Sep 17 00:00:00 2001 From: ilyayudovin 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 = ({ 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 = ({ poll }) => { - {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 = ({ profile }) => { +const ProfileInfo: React.FC = ({ id }) => { + const [userInfo, setUserInfo] = useState(); + + let endpoint: string = '/users/' + id; + + get(endpoint).then(response => { + setUserInfo(response.data) + }); + const classes = useStyles(); return (
- +
- Nick Name + {userInfo?.name}
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 = () => {
{ - page === 'profile' && + page === 'profile' && }
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 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 = ({ poll }) => { + )} title={author.name} /> -- cgit v1.2.3 From 282bd3180b149571cfc5caad98d8b462596157ef Mon Sep 17 00:00:00 2001 From: ilyayudovin 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 = ({ id }) => { const [userInfo, setUserInfo] = useState(); - 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 = () => {
{ - page === 'profile' && + page === 'profile' && }
-- cgit v1.2.3 From 0d878909fe17311910f2ba13e203bdfa1bc72a1e Mon Sep 17 00:00:00 2001 From: eug-vs 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 = ({ id }) => { const [userInfo, setUserInfo] = useState(); - 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(''); const classes = useStyles(); + get('/users').then(response => { + setId(response.data[0]._id); + }); + return (
{ - page === 'profile' && + page === 'profile' && }
-- cgit v1.2.3