From 4bd68ee56ba5c226b872a20577ccb17983157c16 Mon Sep 17 00:00:00 2001 From: Matija Sosic Date: Fri, 5 Feb 2021 10:57:26 +0100 Subject: [PATCH] Added material-ui to RWA example. --- examples/realworld/ext/MainPage.js | 113 ++++++++++-- examples/realworld/ext/Navbar.js | 51 ++++-- .../article/components/ArticleEditorPage.js | 90 +++++++--- .../ext/article/components/ArticleList.js | 83 +++++++-- .../ext/article/components/ArticleViewPage.js | 170 +++++++++++++----- examples/realworld/ext/article/queries.js | 4 +- .../ext/user/components/UserProfilePage.js | 132 +++++++++++--- .../ext/user/components/UserSettingsPage.js | 88 ++++++--- examples/realworld/main.wasp | 8 +- 9 files changed, 558 insertions(+), 181 deletions(-) diff --git a/examples/realworld/ext/MainPage.js b/examples/realworld/ext/MainPage.js index 8ace881dc..2af05a64a 100644 --- a/examples/realworld/ext/MainPage.js +++ b/examples/realworld/ext/MainPage.js @@ -2,6 +2,16 @@ import React, { useState } from 'react' import { Link } from 'react-router-dom' import _ from 'lodash' +import Container from '@material-ui/core/Container' +import Grid from '@material-ui/core/Grid' +import Tabs from '@material-ui/core/Tabs' +import Tab from '@material-ui/core/Tab' +import Box from '@material-ui/core/Box' +import Typography from '@material-ui/core/Typography' +import Chip from '@material-ui/core/Chip' +import Paper from '@material-ui/core/Paper'; +import { makeStyles } from '@material-ui/core/styles' + import useAuth from '@wasp/auth/useAuth.js' import { useQuery } from '@wasp/queries' @@ -15,35 +25,98 @@ const MainPage = () => { const { data: me } = useAuth() return ( -
+ - + + + + + + + + - { me && ( -
-

Your Feed

+ + ) +} + +const useStylesFeedTabs = makeStyles((theme) => ({ + root: { + marginBottom: theme.spacing(2), + }, +})) + +const FeedTabs = ({ me }) => { + const classes = useStylesFeedTabs() + + const [value, setValue] = useState(0); + + const handleChange = (event, newValue) => setValue(newValue) + + return ( + <> + + + + + + + { me && ( ({ skip, take })} - pageSize={2} + pageSize={5} /> -
- )} + )} + -
-

Global Feed

+ ({ skip, take })} - pageSize={2} + pageSize={5} /> -
+ + + ) +} + +function TabPanel(props) { + const { children, value, index, ...other } = props + + return ( + ) } +const useStylesTags = makeStyles((theme) => ({ + root: { + padding: theme.spacing(0.5), + margin: 0, + }, + chip: { + margin: theme.spacing(0.5), + }, + title: { + marginLeft: theme.spacing(0.5) + } +})) + const Tags = () => { + const classes = useStylesTags() + const { data: tags } = useQuery(getTags) if (!tags) return null @@ -51,13 +124,15 @@ const Tags = () => { const popularTags = _.take(_.sortBy(tags, [t => -1 * t.numArticles]), 10) return ( -
- Popular tags: { popularTags.map(tag => ( -
- { tag.name } ({ tag.numArticles }) -
- ))} -
+ + Popular tags + { popularTags.map(tag => ( + + ))} + ) } diff --git a/examples/realworld/ext/Navbar.js b/examples/realworld/ext/Navbar.js index e3ec3467e..3a0235e5d 100644 --- a/examples/realworld/ext/Navbar.js +++ b/examples/realworld/ext/Navbar.js @@ -1,26 +1,57 @@ import React from 'react' import { Link } from 'react-router-dom' +import AppBar from '@material-ui/core/AppBar' +import Toolbar from '@material-ui/core/Toolbar' +import Button from '@material-ui/core/Button' +import Typography from '@material-ui/core/Typography' +import { makeStyles } from '@material-ui/core/styles' + import useAuth from '@wasp/auth/useAuth.js' -const Navbar = () => { - const { data: user } = useAuth() +const useStyles = makeStyles((theme) => ({ + root: { + flexGrow: 1, + marginBottom: 50 + }, + title: { + flexGrow: 1, + }, +})); +const Navbar = () => { + const classes = useStyles() + + const { data: user } = useAuth() if (user) { return ( -
- Home - New Article - Settings - { user.username } +
+ + + Conduit + + + + + + + +
) } else { return ( -
- Sign in - Sign up +
+ + + Conduit + + + + + +
) } diff --git a/examples/realworld/ext/article/components/ArticleEditorPage.js b/examples/realworld/ext/article/components/ArticleEditorPage.js index fff5ba204..4915bf1af 100644 --- a/examples/realworld/ext/article/components/ArticleEditorPage.js +++ b/examples/realworld/ext/article/components/ArticleEditorPage.js @@ -2,6 +2,13 @@ import React, { useState } from 'react' import PropTypes from 'prop-types' import { Link, useHistory } from 'react-router-dom' +import Container from '@material-ui/core/Container' +import TextField from '@material-ui/core/TextField' +import Grid from '@material-ui/core/Grid' +import Chip from '@material-ui/core/Chip' +import Button from '@material-ui/core/Button' +import { makeStyles } from '@material-ui/core/styles' + import logout from '@wasp/auth/logout.js' import { useQuery } from '@wasp/queries' @@ -11,6 +18,27 @@ import getArticle from '@wasp/queries/getArticle' import Navbar from '../../Navbar' +const useStyles = makeStyles((theme) => ({ + /* + root: { + display: 'flex', + flexWrap: 'wrap', + }, + */ + textField: { + //marginLeft: theme.spacing(1), + //width: '25ch', + marginBottom: theme.spacing(3) + }, + + tags: { + '& *:not(:last-child)': { + marginRight: theme.spacing(0.5) + }, + marginBottom: theme.spacing(3) + } +})) + const ArticleEditorPage = (props) => { // TODO: Here, as in some other places, it feels tricky to figure out what is happening regarding the state. // When is article null, when not, should I look into combination of article and articleSlug, then @@ -21,10 +49,14 @@ const ArticleEditorPage = (props) => { return articleError ? articleError.message || articleError : ( -
+ - -
+ + + + + + ) } @@ -32,8 +64,9 @@ ArticleEditorPage.propTypes = { user: PropTypes.object } - const ArticleEditor = (props) => { + const classes = useStyles() + const user = props.user const article = props.article @@ -85,30 +118,37 @@ const ArticleEditor = (props) => { ) }
-

Article title

- setTitle(e.target.value)} /> -

What's this article about?

- setDescription(e.target.value)} /> -

Markdown content

-