From 2247e281f7f1c8c59ff758053dcb7b2c4f28d4a9 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 19:02:06 +0300 Subject: feat: create a bunch of empty pages --- src/components/Header/Header.tsx | 15 +++++++++++---- src/hooks/useNavigate.tsx | 2 +- src/pages/HomePage/HomePage.tsx | 20 ++++++++++++++++++++ src/pages/NotificationsPage/NotificationsPage.tsx | 22 ++++++++++++++++++++++ src/pages/Page.tsx | 4 ++++ 5 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 src/pages/HomePage/HomePage.tsx create mode 100644 src/pages/NotificationsPage/NotificationsPage.tsx (limited to 'src') diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 72e40f8..339f322 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -22,7 +22,8 @@ const useStyles = makeStyles({ margin: 'auto' }, logo: { - fontWeight: 'bold' + fontWeight: 'bold', + cursor: 'pointer' }, avatar: { width: 24, @@ -36,6 +37,10 @@ const Header: React.FC = () => { const { navigate } = useNavigate(); const handleHome = (): void => { + navigate('home'); + }; + + const handleFeed = (): void => { navigate('feed'); }; @@ -44,17 +49,19 @@ const Header: React.FC = () => { else navigate('auth'); }; - const handleNotifications = (): void => {}; + const handleNotifications = (): void => { + navigate('notifications'); + }; return ( - + Which
- + diff --git a/src/hooks/useNavigate.tsx b/src/hooks/useNavigate.tsx index 47de4df..d1a433d 100644 --- a/src/hooks/useNavigate.tsx +++ b/src/hooks/useNavigate.tsx @@ -11,7 +11,7 @@ interface ContextType { navigate: (prefix: string, id?: string) => void; } -const landingPage = { prefix: 'feed' }; +const landingPage = { prefix: 'home' }; const context = createContext({ page: landingPage, diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx new file mode 100644 index 0000000..6930cc8 --- /dev/null +++ b/src/pages/HomePage/HomePage.tsx @@ -0,0 +1,20 @@ +import React, { useState } from 'react'; +import { Typography } from '@material-ui/core/'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles({ +}); + +const HomePage: React.FC = () => { + const classes = useStyles(); + + return ( + <> + Which one to choose? + + + ); +}; + +export default HomePage; + diff --git a/src/pages/NotificationsPage/NotificationsPage.tsx b/src/pages/NotificationsPage/NotificationsPage.tsx new file mode 100644 index 0000000..56243f9 --- /dev/null +++ b/src/pages/NotificationsPage/NotificationsPage.tsx @@ -0,0 +1,22 @@ +import React, { useState } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; + +const useStyles = makeStyles({ + root: { + textAlign: 'center' + } +}); + +const NotificationsPage: React.FC = () => { + const classes = useStyles(); + + return ( + + Sorry, this page is being constructed yet. + + ); +}; + +export default NotificationsPage; + diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index f6353b2..2a09228 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -4,6 +4,8 @@ import { SnackbarProvider } from 'notistack'; import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; import AuthPage from './AuthPage/AuthPage'; +import HomePage from './HomePage/HomePage'; +import NotificationsPage from './NotificationsPage/NotificationsPage'; import { useNavigate } from '../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ @@ -27,9 +29,11 @@ const Page: React.FC = () => { }} >
+ { page.prefix === 'home' && } { page.prefix === 'profile' && } { page.prefix === 'feed' && } { page.prefix === 'auth' && } + { page.prefix === 'notifications' && }
); -- cgit v1.2.3 From 68de14f03ec3cba9937669535783956766363462 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 19:11:41 +0300 Subject: refactor: distribute styles across pages --- src/pages/FeedPage/FeedPage.tsx | 14 +++++++++++--- src/pages/Page.tsx | 4 +--- src/pages/ProfilePage/ProfilePage.tsx | 13 +++++++++++-- 3 files changed, 23 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx index b591141..8149c8c 100644 --- a/src/pages/FeedPage/FeedPage.tsx +++ b/src/pages/FeedPage/FeedPage.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { Poll } from 'which-types'; +import { makeStyles } from '@material-ui/core/styles'; import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; @@ -7,9 +8,17 @@ import PollSubmission from './PollSubmission'; import { useAuth } from '../../hooks/useAuth'; +const useStyles = makeStyles(theme => ({ + root: { + width: theme.spacing(75), + margin: '0 auto' + } +})); + const FeedPage: React.FC = () => { const [polls, setPolls] = useState([]); const { isAuthenticated } = useAuth(); + const classes = useStyles(); useEffect(() => { get('/feed').then(response => { @@ -23,12 +32,11 @@ const FeedPage: React.FC = () => { setPolls(polls); }; - return ( - <> +
{isAuthenticated() && } - +
); }; diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 2a09228..24487f3 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -10,9 +10,7 @@ import { useNavigate } from '../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ root: { - width: theme.spacing(75), - marginTop: theme.spacing(15), - margin: '0 auto' + margin: theme.spacing(15, 5, 5, 8) } })); diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index b7106bb..4710ae8 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { User, Poll } from 'which-types'; +import { makeStyles } from '@material-ui/core/styles'; import ProfileInfo from './ProfileInfo'; import Feed from '../../components/Feed/Feed'; @@ -8,12 +9,20 @@ import { useAuth } from '../../hooks/useAuth'; import { useNavigate } from '../../hooks/useNavigate'; +const useStyles = makeStyles(theme => ({ + root: { + width: theme.spacing(75), + margin: '0 auto' + } +})); + const ProfilePage: React.FC = () => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); const [totalVotes, setTotalVotes] = useState(0); const { page, navigate } = useNavigate(); const { user } = useAuth(); + const classes = useStyles(); useEffect(() => { const id = page?.id || user?._id; @@ -35,7 +44,7 @@ const ProfilePage: React.FC = () => { }, [navigate, page, user]); return ( - <> +
{ totalVotes={totalVotes} /> - +
); }; -- cgit v1.2.3 From 020356cb5588c2fd4d12dd91d60fe082eb4c69a2 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 20:06:57 +0300 Subject: feat: create basic markup --- src/components/Header/Header.tsx | 2 +- src/pages/HomePage/HomePage.tsx | 58 +++++++++++++++++++++++++++++++++++----- 2 files changed, 52 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 339f322..294c250 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -69,7 +69,7 @@ const Header: React.FC = () => { { - user?.avatarUrl?.match(/\.(jpeg|jpg|gif|png)$/) + user?.avatarUrl ? : } diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 6930cc8..d0e29f5 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -1,18 +1,62 @@ import React, { useState } from 'react'; -import { Typography } from '@material-ui/core/'; +import { Typography, Divider, Grid, Button } from '@material-ui/core/'; import { makeStyles } from '@material-ui/core/styles'; +import { useNavigate } from '../../hooks/useNavigate'; -const useStyles = makeStyles({ -}); +const useStyles = makeStyles(theme => ({ + logo: { + width: theme.spacing(32), + height: theme.spacing(32) + }, + leftColumn: { + display: 'flex', + justifyContent: 'center' + }, + title: { + fontWeight: 'bold' + } +})); const HomePage: React.FC = () => { const classes = useStyles(); + const { navigate } = useNavigate(); - return ( - <> - Which one to choose? + const handleLetsGo = () => { + navigate('feed'); + }; - + return ( + + + logo + + + + + Which one to choose? + + +

Have you ever found yourself stuck between two options, not being able to choose any? This is exactly the problem we are going to solve!

+

Share your minor everyday uncertainties with the whole world and see what others think!

+ + + + + About the project + +

+ Visit our GitHub +

+ + + Leave feedback + + + + + ); }; -- cgit v1.2.3 From 3dbde4e742d34c767d433057ff9280fd82d59f76 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 20:33:13 +0300 Subject: feat: markup About section --- src/pages/HomePage/HomePage.tsx | 37 +++++++++++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index d0e29f5..c45c271 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -1,6 +1,8 @@ import React, { useState } from 'react'; -import { Typography, Divider, Grid, Button } from '@material-ui/core/'; +import { Typography, Divider, Grid, Button, Link } from '@material-ui/core/'; import { makeStyles } from '@material-ui/core/styles'; +import TrendingUpIcon from '@material-ui/icons/TrendingUp'; + import { useNavigate } from '../../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ @@ -46,9 +48,36 @@ const HomePage: React.FC = () => { About the project -

- Visit our GitHub -

+ +

+ The project is written in + Typescript + and features + React + , + Feathers + , and + Material-UI + . + It is currently open-source and you can visit our + GitHub (make sure to star our repositories)! +

+

+ We encourage any developer to check it out. Feel free to open issues and create Pull Requests! +

+

+ All the development process is being tracked on the KanBan board (thanks GitHub). + You can always check it to see what is the current state of the project. +

+ + Leave feedback -- cgit v1.2.3 From d1ae44a8158a00d642e6c79a80420f585eef2b05 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 21:00:56 +0300 Subject: feat: fetch feedbacks and display app rating --- src/pages/HomePage/HomePage.tsx | 68 ++++++++++++++++++++++++++++++++--------- 1 file changed, 53 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index c45c271..f3cadee 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -1,36 +1,69 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Typography, Divider, Grid, Button, Link } from '@material-ui/core/'; import { makeStyles } from '@material-ui/core/styles'; import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import { Rating } from '@material-ui/lab'; +import { Feedback } from 'which-types'; import { useNavigate } from '../../hooks/useNavigate'; +import { useAuth } from '../../hooks/useAuth'; +import { get } from '../../requests'; const useStyles = makeStyles(theme => ({ logo: { - width: theme.spacing(32), - height: theme.spacing(32) + width: theme.spacing(20), + height: theme.spacing(20) }, - leftColumn: { - display: 'flex', - justifyContent: 'center' - }, - title: { + score: { fontWeight: 'bold' + }, + signup: { + marginLeft: theme.spacing(2) } })); const HomePage: React.FC = () => { + const [feedbacks, setFeedbacks] = useState([]); const classes = useStyles(); const { navigate } = useNavigate(); + const { isAuthenticated } = useAuth(); + + + const rating = feedbacks.length && feedbacks.reduce( + (acc: number, feedback: Feedback) => acc + feedback.score, + 0 + ) / feedbacks.length; + + useEffect(() => { + get('/feedback').then(response => { + setFeedbacks(response.data); + }); + }, []); const handleLetsGo = () => { navigate('feed'); }; + const handleSignUp = () => { + navigate('auth'); + }; + return ( - - logo + + + + logo + + + + + + + User score: {rating.toFixed(1)} + + + @@ -41,8 +74,17 @@ const HomePage: React.FC = () => {

Have you ever found yourself stuck between two options, not being able to choose any? This is exactly the problem we are going to solve!

Share your minor everyday uncertainties with the whole world and see what others think!

+ {!isAuthenticated() && } @@ -79,10 +121,6 @@ const HomePage: React.FC = () => { - - Leave feedback - - -- cgit v1.2.3 From 14926e00ec1d749d5e2c83bdcd98ed68e9b2f896 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 21:15:28 +0300 Subject: style: fix eslint errors --- src/pages/HomePage/HomePage.tsx | 59 +++++++++++++---------- src/pages/NotificationsPage/NotificationsPage.tsx | 2 +- 2 files changed, 34 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index f3cadee..8995630 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -1,5 +1,11 @@ import React, { useState, useEffect } from 'react'; -import { Typography, Divider, Grid, Button, Link } from '@material-ui/core/'; +import { + Typography, + Divider, + Grid, + Button, + Link +} from '@material-ui/core/'; import { makeStyles } from '@material-ui/core/styles'; import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import { Rating } from '@material-ui/lab'; @@ -28,7 +34,6 @@ const HomePage: React.FC = () => { const { navigate } = useNavigate(); const { isAuthenticated } = useAuth(); - const rating = feedbacks.length && feedbacks.reduce( (acc: number, feedback: Feedback) => acc + feedback.score, 0 @@ -48,12 +53,18 @@ const HomePage: React.FC = () => { navigate('auth'); }; + const GithubLink = GitHub; + const TypescriptLink = Typescript; + const ReactLink = React; + const FeathersLink = Feathers; + const MUILink = Material-UI; + return ( - logo + logo @@ -71,20 +82,25 @@ const HomePage: React.FC = () => { Which one to choose? -

Have you ever found yourself stuck between two options, not being able to choose any? This is exactly the problem we are going to solve!

+

+ Have you ever found yourself stuck between two options, not being able to choose any? + This is exactly the problem we are going to solve! +

Share your minor everyday uncertainties with the whole world and see what others think!

- {!isAuthenticated() && } + {!isAuthenticated() && ( + + )} @@ -92,17 +108,8 @@ const HomePage: React.FC = () => {

- The project is written in - Typescript - and features - React - , - Feathers - , and - Material-UI - . - It is currently open-source and you can visit our - GitHub (make sure to star our repositories)! + The project is written in {TypescriptLink} and features {ReactLink}, {FeathersLink}, and {MUILink}. + It is currently open-source and you can visit our {GithubLink} (make sure to star our repositories)!

We encourage any developer to check it out. Feel free to open issues and create Pull Requests! @@ -117,7 +124,7 @@ const HomePage: React.FC = () => { startIcon={} href="https://github.com/orgs/which-ecosystem/projects/1" > - track our progress + track our progress diff --git a/src/pages/NotificationsPage/NotificationsPage.tsx b/src/pages/NotificationsPage/NotificationsPage.tsx index 56243f9..d162eff 100644 --- a/src/pages/NotificationsPage/NotificationsPage.tsx +++ b/src/pages/NotificationsPage/NotificationsPage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Typography } from '@material-ui/core'; -- cgit v1.2.3