Remove unused views + fix queryString import
This commit is contained in:
Barry Low committed
1 parent
91c78418c3
commit
b3db07a8d5
16 files changed
+47
-806
No files matched your search
@@ -1,4 +1,9 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env", "@babel/preset-react"],
|
||||
"env": {
|
||||
"development": {
|
||||
"presets": [["@babel/preset-react", { "development": true }]]
|
||||
}
|
||||
},
|
||||
"plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import", "dynamic-import-node"]
|
||||
}
|
||||
+1
-4
@@ -1,9 +1,6 @@
|
||||
src
|
||||
dist
|
||||
build
|
||||
node_modules
|
||||
html
|
||||
tools/docker
|
||||
tools/webpack
|
||||
.env
|
||||
.env.prod
|
||||
.env.sample
|
||||
|
||||
+2
-3
@@ -1,12 +1,11 @@
|
||||
{
|
||||
"name": "@advancedalgos/teams-client",
|
||||
"version": "0.0.9",
|
||||
"version": "0.0.11",
|
||||
"description": "Advanced Algos Team client-side web app",
|
||||
"main": "dist/index.js",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"dev": "NODE_ENV=development PORT=3001 webpack-serve --config ./webpack.config.js",
|
||||
"build": "NODE_ENV=production webpack --mode production --config ./webpack.config.js",
|
||||
"prepublish": "npx babel src --out-dir dist --copy-files --source-maps",
|
||||
"lint": "prettier-standard 'src/**/*.js'",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Route, BrowserRouter, Switch } from 'react-router-dom'
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import {
|
||||
AcceptTeamInvite,
|
||||
Dashboard,
|
||||
Teams,
|
||||
globalStyles
|
||||
} from './views'
|
||||
|
||||
class App extends Component {
|
||||
render () {
|
||||
return (
|
||||
<BrowserRouter basename={window.location.pathname}>
|
||||
<div className='App'>
|
||||
<Switch>
|
||||
<Route exact path='/' component={Teams} />
|
||||
<Route exact path='/:slug' component={Teams} />
|
||||
<Route
|
||||
exact
|
||||
path='/(dashboard|manage-teams|team-members|financial-beings|settings)/'
|
||||
render={props => <Dashboard {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path='/activate-team-membership'
|
||||
render={props => <AcceptTeamInvite {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
App.propTypes = {
|
||||
auth: PropTypes.object
|
||||
}
|
||||
|
||||
export default withStyles(globalStyles)(App)
|
||||
+37
-23
@@ -1,28 +1,42 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Route, BrowserRouter, Switch } from 'react-router-dom'
|
||||
|
||||
import App from './App'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import {
|
||||
AcceptTeamInvite,
|
||||
Dashboard,
|
||||
Teams,
|
||||
globalStyles
|
||||
} from './views'
|
||||
|
||||
import log from '../tools/log'
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'))
|
||||
|
||||
let frontendReloadCount = 0
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (module.hot) {
|
||||
module.hot.accept()
|
||||
|
||||
module.hot.accept('./index', () => {
|
||||
try {
|
||||
log.debug('Updating front-end')
|
||||
frontendReloadCount = (frontendReloadCount || 0) + 1
|
||||
} catch (err) {
|
||||
log(err.stack)
|
||||
}
|
||||
})
|
||||
class App extends Component {
|
||||
render () {
|
||||
return (
|
||||
<BrowserRouter basename={window.location.pathname}>
|
||||
<div className='App'>
|
||||
<Switch>
|
||||
<Route exact path='/' component={Teams} />
|
||||
<Route exact path='/:slug' component={Teams} />
|
||||
<Route
|
||||
exact
|
||||
path='/(dashboard|manage-teams|team-members|financial-beings|settings)/'
|
||||
render={props => <Dashboard {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path='/activate-team-membership'
|
||||
render={props => <AcceptTeamInvite {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default App
|
||||
App.propTypes = {
|
||||
auth: PropTypes.object
|
||||
}
|
||||
|
||||
export default withStyles(globalStyles)(App)
|
||||
@@ -1,91 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
const styles = theme => ({
|
||||
'@global': {
|
||||
body: {
|
||||
backgroundColor: theme.palette.common.white
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
width: 'auto',
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginRight: theme.spacing.unit * 3,
|
||||
[theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 900,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto'
|
||||
}
|
||||
},
|
||||
heroContent: {
|
||||
maxWidth: 600,
|
||||
margin: '0 auto',
|
||||
padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
|
||||
}
|
||||
})
|
||||
|
||||
const About = ({ classes }) => (
|
||||
<React.Fragment>
|
||||
<CssBaseline />
|
||||
<main className={classes.layout}>
|
||||
<div className={classes.heroContent}>
|
||||
<Typography
|
||||
variant='display1'
|
||||
align='center'
|
||||
color='textPrimary'
|
||||
gutterBottom
|
||||
>
|
||||
Welcome to Advanced Algos Teams!
|
||||
</Typography>
|
||||
<Typography
|
||||
variant='title'
|
||||
align='center'
|
||||
color='textSecondary'
|
||||
component='h3'
|
||||
>
|
||||
This module is responsible for managing teams and their members across
|
||||
the Advanced Algos system. You can browser teams and their details,
|
||||
and with an account, create and manage your own teams.
|
||||
</Typography>
|
||||
<Typography align='center' color='textSecondary' component='p'>
|
||||
<strong>Development Status</strong>
|
||||
<br />
|
||||
This module is is currently under heavy development. Implementation
|
||||
started 1st of September 2018 and this is the result of the 1st sprint
|
||||
of 2 weeks of work.
|
||||
</Typography>
|
||||
<Typography align='center' color='textSecondary' component='p'>
|
||||
<strong>What can you do?</strong>
|
||||
<br />
|
||||
Basic team creation and management.
|
||||
</Typography>
|
||||
<Typography align='center' color='textSecondary' component='p'>
|
||||
<strong>What is next?</strong>
|
||||
<br />
|
||||
<ol>
|
||||
<li> Managing team profile images.</li>
|
||||
<li>
|
||||
{' '}
|
||||
Managing team members - inviting members and administrating roles
|
||||
</li>
|
||||
<li>
|
||||
{' '}
|
||||
More detailed team profiles + allowing members to apply to
|
||||
recruiting teams
|
||||
</li>
|
||||
</ol>
|
||||
</Typography>
|
||||
</div>
|
||||
</main>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
About.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default withStyles(styles)(About)
|
||||
@@ -1,7 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
import { MessageCard } from '@advancedalgos/web-components'
|
||||
|
||||
const Callback = () => <MessageCard message='Authenticating...' />
|
||||
|
||||
export default Callback
|
||||
@@ -1,128 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import classNames from 'classnames'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
|
||||
import aalogo from '../../assets/logos/advanced-algos/aa-logo-vert.svg'
|
||||
|
||||
const styles = theme => ({
|
||||
'@global': {
|
||||
body: {
|
||||
backgroundColor: theme.palette.common.white
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
width: 'auto',
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginRight: theme.spacing.unit * 3,
|
||||
[theme.breakpoints.up(1200 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 1200,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto'
|
||||
}
|
||||
},
|
||||
footer: {
|
||||
borderTop: `1px solid ${theme.palette.divider}`,
|
||||
padding: `${theme.spacing.unit * 6}px 0`
|
||||
},
|
||||
footerContainer: {
|
||||
marginRight: theme.spacing.unit * 8,
|
||||
marginLeft: theme.spacing.unit * 8
|
||||
},
|
||||
footerLink: {
|
||||
textDecoration: 'none'
|
||||
}
|
||||
})
|
||||
|
||||
const Footer = ({ classes }) => {
|
||||
return (
|
||||
<footer className={classNames(classes.footer, classes.layout)}>
|
||||
<Grid
|
||||
container
|
||||
spacing={32}
|
||||
justify='space-evenly'
|
||||
className={classNames(classes.footerContainer)}
|
||||
>
|
||||
<Grid item xs>
|
||||
<Typography variant='title' color='textPrimary' gutterBottom>
|
||||
Pages
|
||||
</Typography>
|
||||
<NavLink to='/' className={classNames(classes.footerLink)}>
|
||||
<Typography variant='subheading' color='textSecondary'>
|
||||
Home
|
||||
</Typography>
|
||||
</NavLink>
|
||||
<NavLink to='/teams' className={classNames(classes.footerLink)}>
|
||||
<Typography variant='subheading' color='textSecondary'>
|
||||
Teams
|
||||
</Typography>
|
||||
</NavLink>
|
||||
<NavLink to='/about' className={classNames(classes.footerLink)}>
|
||||
<Typography variant='subheading' color='textSecondary'>
|
||||
About
|
||||
</Typography>
|
||||
</NavLink>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<a
|
||||
href='https://t.me/advancedalgoscommunity'
|
||||
target='_blank>'
|
||||
className={classNames(classes.footerLink)}
|
||||
>
|
||||
<Typography variant='title' color='textPrimary' gutterBottom>
|
||||
Support
|
||||
</Typography>
|
||||
</a>
|
||||
<a
|
||||
href='https://advancedalgos.net/documentation-quick-start.shtml'
|
||||
target='_blank>'
|
||||
className={classNames(classes.footerLink)}
|
||||
>
|
||||
<Typography variant='subheading' color='textSecondary'>
|
||||
Documentation
|
||||
</Typography>
|
||||
</a>
|
||||
<NavLink to='/' className={classNames(classes.footerLink)}>
|
||||
<Typography variant='subheading' color='textSecondary'>
|
||||
Telegram
|
||||
</Typography>
|
||||
</NavLink>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Typography variant='title' color='textPrimary' gutterBottom>
|
||||
Modules
|
||||
</Typography>
|
||||
<NavLink to='/' className={classNames(classes.footerLink)}>
|
||||
<Typography variant='subheading' color='textSecondary'>
|
||||
Teams
|
||||
</Typography>
|
||||
</NavLink>
|
||||
<NavLink to='/' className={classNames(classes.footerLink)}>
|
||||
<Typography variant='subheading' color='textSecondary'>
|
||||
Users
|
||||
</Typography>
|
||||
</NavLink>
|
||||
<NavLink to='/' className={classNames(classes.footerLink)}>
|
||||
<Typography variant='subheading' color='textSecondary'>
|
||||
KeyVault
|
||||
</Typography>
|
||||
</NavLink>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<NavLink to='/'>
|
||||
<img src={aalogo} width={98} height={140} />
|
||||
</NavLink>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
Footer.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default withStyles(styles)(Footer)
|
||||
@@ -1,61 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
const styles = theme => ({
|
||||
'@global': {
|
||||
body: {
|
||||
backgroundColor: theme.palette.common.white
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
width: 'auto',
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginRight: theme.spacing.unit * 3,
|
||||
[theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 900,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto'
|
||||
}
|
||||
},
|
||||
heroContent: {
|
||||
maxWidth: 600,
|
||||
margin: '0 auto',
|
||||
padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
|
||||
}
|
||||
})
|
||||
|
||||
const Home = ({ classes }) => (
|
||||
<React.Fragment>
|
||||
<CssBaseline />
|
||||
<main className={classes.layout}>
|
||||
<div className={classes.heroContent}>
|
||||
<Typography
|
||||
variant='display3'
|
||||
align='center'
|
||||
color='textPrimary'
|
||||
gutterBottom
|
||||
>
|
||||
Collaborate. Innovate. Evolve.
|
||||
</Typography>
|
||||
<Typography
|
||||
variant='title'
|
||||
align='center'
|
||||
color='textSecondary'
|
||||
component='h3'
|
||||
>
|
||||
Welcome to Advanced Algos Teams
|
||||
</Typography>
|
||||
</div>
|
||||
</main>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
Home.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default withStyles(styles)(Home)
|
||||
@@ -1,8 +1,3 @@
|
||||
import NavBar from './navbar'
|
||||
import Footer from './footer'
|
||||
import Callback from './callback'
|
||||
import Home from './home'
|
||||
import About from './about'
|
||||
import Dashboard from './dashboard'
|
||||
import Teams from './teams'
|
||||
import AcceptTeamInvite from './teams/AcceptTeamInvite'
|
||||
@@ -10,12 +5,7 @@ import AcceptTeamInvite from './teams/AcceptTeamInvite'
|
||||
import { theme, globalStyles } from './theme'
|
||||
|
||||
export {
|
||||
NavBar,
|
||||
Footer,
|
||||
Callback,
|
||||
AcceptTeamInvite,
|
||||
Home,
|
||||
About,
|
||||
Dashboard,
|
||||
Teams,
|
||||
theme,
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Query } from 'react-apollo'
|
||||
|
||||
import LoggedInMenu from './LoggedInMenu'
|
||||
|
||||
import { UserClient } from '../../App'
|
||||
import { USER_BY_AUTHID } from '../../graphql/members'
|
||||
|
||||
import { isDefined } from '../../utils/js-helpers'
|
||||
|
||||
export const LoggedIn = props => {
|
||||
let { data, user, auth } = props
|
||||
console.log('LoggedIn :', data, user, auth)
|
||||
let displayName = 'No Display Name'
|
||||
let authId = null
|
||||
if (isDefined(user.authId)) {
|
||||
authId = user.authId
|
||||
}
|
||||
|
||||
if (isDefined(user.alias)) {
|
||||
displayName = user.alias
|
||||
}
|
||||
|
||||
if (isDefined(user.nickname)) {
|
||||
displayName = user.nickname
|
||||
}
|
||||
|
||||
if (isDefined(user.firstName)) {
|
||||
displayName = user.firstName
|
||||
}
|
||||
|
||||
if (isDefined(user.firstName) && isDefined(user.lastName)) {
|
||||
displayName = user.firstName + ' ' + user.lastName
|
||||
}
|
||||
|
||||
if (authId === null) {
|
||||
return (
|
||||
<div>Loading...</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Query
|
||||
query={USER_BY_AUTHID}
|
||||
fetchPolicy='network-only'
|
||||
variables={{ authId }}
|
||||
client={UserClient}
|
||||
>
|
||||
{({ loading, error, data }) => {
|
||||
console.log('USER_BY_AUTHID: ', loading, error, data)
|
||||
|
||||
if (loading) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
if (error) {
|
||||
error.graphQLErrors.map(({ message }, i) => {
|
||||
return <div>{message}</div>
|
||||
})
|
||||
}
|
||||
return (
|
||||
<p>
|
||||
<LoggedInMenu menuLabel={displayName} auth={auth} user={data.userByAuthId} />
|
||||
</p>
|
||||
)
|
||||
}}
|
||||
</Query>
|
||||
)
|
||||
}
|
||||
|
||||
LoggedIn.propTypes = {
|
||||
data: PropTypes.object,
|
||||
user: PropTypes.object.isRequired,
|
||||
auth: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default LoggedIn
|
||||
@@ -1,107 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Menu from '@material-ui/core/Menu'
|
||||
import MenuItem from '@material-ui/core/MenuItem'
|
||||
import Drawer from '@material-ui/core/Drawer'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import ProfileIcon from '@material-ui/icons/Person'
|
||||
import LogoutIcon from '@material-ui/icons/DirectionsWalk'
|
||||
|
||||
import UserProfile from './Profile'
|
||||
|
||||
const LogoutLink = props => <Link to='/' {...props} />
|
||||
|
||||
const styles = {
|
||||
drawer: {
|
||||
width: 250
|
||||
},
|
||||
fullList: {
|
||||
width: 'auto'
|
||||
}
|
||||
}
|
||||
|
||||
class LoggedInUserMenu extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.handleMenu = this.handleMenu.bind(this)
|
||||
this.handleClose = this.handleClose.bind(this)
|
||||
this.handleLogout = this.handleLogout.bind(this)
|
||||
this.toggleDrawer = this.toggleDrawer.bind(this)
|
||||
|
||||
this.state = {
|
||||
menu: null,
|
||||
open: false
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { menuLabel, user, classes } = this.props
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
aria-owns={this.state.open ? 'render-props-menu' : null}
|
||||
aria-haspopup='true'
|
||||
onClick={e => this.handleMenu(e)}
|
||||
color='inherit'
|
||||
>
|
||||
{menuLabel}
|
||||
</Button>
|
||||
<Menu
|
||||
id='render-props-menu'
|
||||
anchorEl={this.state.menu}
|
||||
open={Boolean(this.state.menu)}
|
||||
onClose={this.handleClose}
|
||||
>
|
||||
<MenuItem onClick={this.toggleDrawer}>
|
||||
<ProfileIcon />
|
||||
<div>Profile</div>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={this.handleLogout} component={LogoutLink}>
|
||||
<LogoutIcon />
|
||||
<div>Logout</div>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<Drawer anchor='right' open={this.state.open} onClose={this.toggleDrawer} className={classes.drawer}>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role='button'
|
||||
onClick={this.toggleDrawer}
|
||||
>
|
||||
<UserProfile user={user} toggleDrawer={this.toggleDrawer} />
|
||||
</div>
|
||||
</Drawer>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
handleMenu (e) {
|
||||
this.setState({ menu: e.currentTarget })
|
||||
}
|
||||
|
||||
handleClose () {
|
||||
this.setState({ menu: null })
|
||||
}
|
||||
|
||||
handleLogout () {
|
||||
this.props.auth.logout()
|
||||
this.setState({ menu: null })
|
||||
}
|
||||
|
||||
toggleDrawer () {
|
||||
this.setState({ open: !this.state.open })
|
||||
}
|
||||
}
|
||||
|
||||
LoggedInUserMenu.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
menuLabel: PropTypes.string.isRequired,
|
||||
auth: PropTypes.object.isRequired,
|
||||
user: PropTypes.object
|
||||
}
|
||||
|
||||
export default withStyles(styles)(LoggedInUserMenu)
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Button from '@material-ui/core/Button'
|
||||
|
||||
export const LoggedOut = ({ auth }) => (
|
||||
<div onClick={() => auth.login()}>
|
||||
<Button color='inherit'>Login / Sign up</Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
LoggedOut.propTypes = {
|
||||
auth: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default LoggedOut // This binds the querty to the component
|
||||
@@ -1,94 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
// Materia UI
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import Card from '@material-ui/core/Card'
|
||||
import CardContent from '@material-ui/core/CardContent'
|
||||
import CardMedia from '@material-ui/core/CardMedia'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Divider from '@material-ui/core/Divider'
|
||||
|
||||
// Images
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
padding: 60,
|
||||
margin: 2
|
||||
},
|
||||
card: {
|
||||
maxWidth: 240,
|
||||
minWidth: 240,
|
||||
paddingTop: '30'
|
||||
},
|
||||
media: {
|
||||
paddingTop: '56.25%', // 16:9,
|
||||
marginTop: '30',
|
||||
width: 100,
|
||||
height: 100,
|
||||
maxWidth: 100
|
||||
},
|
||||
grid: {
|
||||
paddingTop: '30',
|
||||
marginTop: '30'
|
||||
},
|
||||
typography: {
|
||||
width: '100%',
|
||||
marginTop: 20,
|
||||
marginBottom: 20
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
class UserProfile extends Component {
|
||||
render () {
|
||||
const { classes, user, toggleDrawer } = this.props
|
||||
return (
|
||||
<Grid container justify='center' spacing={24}>
|
||||
<Grid key={user.id} item>
|
||||
|
||||
<Card className={classes.card}>
|
||||
<CardContent>
|
||||
<Button
|
||||
onClick={toggleDrawer}
|
||||
color='inherit'
|
||||
>
|
||||
Close Profile
|
||||
</Button>
|
||||
<CardMedia
|
||||
className={classes.media}
|
||||
image='data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
|
||||
title='User Profile'
|
||||
|
||||
/>
|
||||
<Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
|
||||
{ user.firstName } { user.lastName } ( {user.alias} )
|
||||
</Typography>
|
||||
<Divider />
|
||||
|
||||
<Typography className={classes.typography} align='left' gutterBottom variant='subheading' component='h2'>
|
||||
{ user.role.name }
|
||||
</Typography>
|
||||
<Divider />
|
||||
|
||||
<Typography className={classes.typography} component='p'>
|
||||
{ user.bio }
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
UserProfile.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
user: PropTypes.object,
|
||||
toggleDrawer: PropTypes.func
|
||||
}
|
||||
export default withStyles(styles)(UserProfile)
|
||||
@@ -1,141 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import AppBar from '@material-ui/core/AppBar'
|
||||
import Toolbar from '@material-ui/core/Toolbar'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import Button from '@material-ui/core/Button'
|
||||
|
||||
// icons
|
||||
import HomeIcon from '@material-ui/icons/Home'
|
||||
import DashboardIcon from '@material-ui/icons/Dashboard'
|
||||
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import { getItem } from '../../utils/local-storage'
|
||||
|
||||
// components
|
||||
import { LoggedIn } from './LoggedIn'
|
||||
import { LoggedOut } from './LoggedOut'
|
||||
|
||||
import AALogo from '../../assets/logos/advanced-algos/aa-logo-dark.svg'
|
||||
|
||||
const AboutLink = props => <Link to='/about' {...props} />
|
||||
const TeamsLink = props => <Link to='/teams' {...props} />
|
||||
const DashboardLink = props => <Link to='/dashboard' {...props} />
|
||||
const HomeLink = props => <Link to='/' {...props} />
|
||||
|
||||
const styles = theme => ({
|
||||
'@global': {
|
||||
body: {
|
||||
backgroundColor: theme.palette.common.white
|
||||
}
|
||||
},
|
||||
root: {
|
||||
flexGrow: 1
|
||||
},
|
||||
colorDefault: {
|
||||
color: '#000'
|
||||
},
|
||||
flex: {
|
||||
flexGrow: 1
|
||||
},
|
||||
toolbarTitle: {
|
||||
flex: 1
|
||||
},
|
||||
menuButton: {
|
||||
marginLeft: -12,
|
||||
marginRight: 20
|
||||
},
|
||||
appBar: {
|
||||
position: 'relative'
|
||||
},
|
||||
img: {
|
||||
margin: 20,
|
||||
display: 'block',
|
||||
maxWidth: 240,
|
||||
maxHeight: 48
|
||||
}
|
||||
})
|
||||
|
||||
class NavBar extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
user: null,
|
||||
open: false
|
||||
}
|
||||
}
|
||||
|
||||
async componentDidMount () {
|
||||
const user = await getItem('user')
|
||||
console.log('NavBar CDM: ', user, this.state)
|
||||
this.setState({ user })
|
||||
}
|
||||
|
||||
render () {
|
||||
let { classes, auth } = this.props
|
||||
|
||||
let user = JSON.parse(this.state.user)
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar
|
||||
position='static'
|
||||
classes={{ root: classes.appBar, colorDefault: classes.colorDefault }}
|
||||
>
|
||||
<Toolbar>
|
||||
<img className={classes.img} src={AALogo} alt='Advanced Algos' />
|
||||
<Typography
|
||||
variant='title'
|
||||
color='inherit'
|
||||
className={classes.toolbarTitle}
|
||||
>
|
||||
Teams
|
||||
</Typography>
|
||||
|
||||
<IconButton
|
||||
className={classes.menuButton}
|
||||
color='inherit'
|
||||
title='Home'
|
||||
component={HomeLink}
|
||||
>
|
||||
<HomeIcon />
|
||||
</IconButton>
|
||||
<Button component={TeamsLink} color='inherit'>
|
||||
Teams
|
||||
</Button>
|
||||
<Button component={AboutLink} color='inherit'>
|
||||
About
|
||||
</Button>
|
||||
|
||||
{this.state.user !== undefined && this.state.user !== null ? (
|
||||
<React.Fragment>
|
||||
<IconButton
|
||||
className={classes.menuButton}
|
||||
color='inherit'
|
||||
title='Dashboard'
|
||||
component={DashboardLink}
|
||||
>
|
||||
<DashboardIcon />
|
||||
</IconButton>
|
||||
<LoggedIn user={user} auth={auth} styles={styles} />
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<LoggedOut auth={auth} styles={styles} />
|
||||
)}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
NavBar.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
auth: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default withStyles(styles)(NavBar)
|
||||
@@ -1,14 +1,14 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import queryString from 'query-string'
|
||||
import { parse } from 'query-string'
|
||||
|
||||
import { MessageCard } from '@advancedalgos/web-components'
|
||||
|
||||
class AcceptTeamInvite extends Component {
|
||||
render () {
|
||||
const { location, auth } = this.props
|
||||
const param = queryString.parse(location.search)
|
||||
const param = parse(location.search)
|
||||
console.log(param, auth)
|
||||
|
||||
if (auth === undefined) {
|
||||
|
||||
Reference in new issue
Block a user