diff --git a/client/.babelrc b/client/.babelrc index efe06ecc1..4da58d142 100644 --- a/client/.babelrc +++ b/client/.babelrc @@ -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"] } diff --git a/client/.npmignore b/client/.npmignore index b17b85485..a33d28610 100644 --- a/client/.npmignore +++ b/client/.npmignore @@ -1,9 +1,6 @@ -src +dist build node_modules -html -tools/docker -tools/webpack .env .env.prod .env.sample diff --git a/client/package.json b/client/package.json index 6533be36c..600c280bb 100644 --- a/client/package.json +++ b/client/package.json @@ -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" }, diff --git a/client/src/App.js b/client/src/App.js deleted file mode 100644 index f6d4a707f..000000000 --- a/client/src/App.js +++ /dev/null @@ -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 ( - -
- - - - } - /> - } - /> - -
- - ) - } -} - -App.propTypes = { - auth: PropTypes.object -} - -export default withStyles(globalStyles)(App) diff --git a/client/src/index.js b/client/src/index.js index f572d5ac7..f6d4a707f 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -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(, 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 ( + +
+ + + + } + /> + } + /> + +
+ + ) } } -export default App +App.propTypes = { + auth: PropTypes.object +} + +export default withStyles(globalStyles)(App) diff --git a/client/src/views/about/index.js b/client/src/views/about/index.js deleted file mode 100644 index fd3069a0d..000000000 --- a/client/src/views/about/index.js +++ /dev/null @@ -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 }) => ( - - -
-
- - Welcome to Advanced Algos Teams! - - - 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. - - - Development Status -
- 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. - - - What can you do? -
- Basic team creation and management. - - - What is next? -
-
    -
  1. Managing team profile images.
    2. -
  2. - {' '} - Managing team members - inviting members and administrating roles -
    3. -
  3. - {' '} - More detailed team profiles + allowing members to apply to - recruiting teams -
    4. -
- -
-
- -) - -About.propTypes = { - classes: PropTypes.object.isRequired -} - -export default withStyles(styles)(About) diff --git a/client/src/views/callback/index.js b/client/src/views/callback/index.js deleted file mode 100644 index 2dbf4c27f..000000000 --- a/client/src/views/callback/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -import { MessageCard } from '@advancedalgos/web-components' - -const Callback = () => - -export default Callback diff --git a/client/src/views/footer/index.js b/client/src/views/footer/index.js deleted file mode 100644 index 2fb5b72e9..000000000 --- a/client/src/views/footer/index.js +++ /dev/null @@ -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 ( -
- - - - Pages - - - - Home - - - - - Teams - - - - - About - - - - - - - Support - - - - - Documentation - - - - - Telegram - - - - - - Modules - - - - Teams - - - - - Users - - - - - KeyVault - - - - - - - - - -
- ) -} - -Footer.propTypes = { - classes: PropTypes.object.isRequired -} - -export default withStyles(styles)(Footer) diff --git a/client/src/views/home/index.js b/client/src/views/home/index.js deleted file mode 100644 index bfa124910..000000000 --- a/client/src/views/home/index.js +++ /dev/null @@ -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 }) => ( - - -
-
- - Collaborate. Innovate. Evolve. - - - Welcome to Advanced Algos Teams - -
-
- -) - -Home.propTypes = { - classes: PropTypes.object.isRequired -} - -export default withStyles(styles)(Home) diff --git a/client/src/views/index.js b/client/src/views/index.js index 30ab09b90..07632c230 100644 --- a/client/src/views/index.js +++ b/client/src/views/index.js @@ -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, diff --git a/client/src/views/navbar/LoggedIn.js b/client/src/views/navbar/LoggedIn.js deleted file mode 100644 index 242feefb1..000000000 --- a/client/src/views/navbar/LoggedIn.js +++ /dev/null @@ -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 ( -
Loading...
- ) - } - - return ( - - {({ loading, error, data }) => { - console.log('USER_BY_AUTHID: ', loading, error, data) - - if (loading) { - return
Loading...
- } - - if (error) { - error.graphQLErrors.map(({ message }, i) => { - return
{message}
- }) - } - return ( -

- -

- ) - }} - - ) -} - -LoggedIn.propTypes = { - data: PropTypes.object, - user: PropTypes.object.isRequired, - auth: PropTypes.object.isRequired -} - -export default LoggedIn diff --git a/client/src/views/navbar/LoggedInMenu.js b/client/src/views/navbar/LoggedInMenu.js deleted file mode 100644 index 6c1fb266c..000000000 --- a/client/src/views/navbar/LoggedInMenu.js +++ /dev/null @@ -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 => - -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 ( - - - - - -
Profile
- - - -
Logout
- - - -
- -
- - - ) - } - - 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) diff --git a/client/src/views/navbar/LoggedOut.js b/client/src/views/navbar/LoggedOut.js deleted file mode 100644 index ceb40ac28..000000000 --- a/client/src/views/navbar/LoggedOut.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Button from '@material-ui/core/Button' - -export const LoggedOut = ({ auth }) => ( -
auth.login()}> - -
-) - -LoggedOut.propTypes = { - auth: PropTypes.object.isRequired -} - -export default LoggedOut // This binds the querty to the component diff --git a/client/src/views/navbar/Profile.js b/client/src/views/navbar/Profile.js deleted file mode 100644 index adbef1761..000000000 --- a/client/src/views/navbar/Profile.js +++ /dev/null @@ -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 ( - - - - - - - - - { user.firstName } { user.lastName } ( {user.alias} ) - - - - - { user.role.name } - - - - - { user.bio } - - - - - - ) - } -} - -UserProfile.propTypes = { - classes: PropTypes.object.isRequired, - user: PropTypes.object, - toggleDrawer: PropTypes.func -} -export default withStyles(styles)(UserProfile) diff --git a/client/src/views/navbar/index.js b/client/src/views/navbar/index.js deleted file mode 100644 index f144156e0..000000000 --- a/client/src/views/navbar/index.js +++ /dev/null @@ -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 => -const TeamsLink = props => -const DashboardLink = props => -const HomeLink = 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 ( -
- - - Advanced Algos - - Teams - - - - - - - - - {this.state.user !== undefined && this.state.user !== null ? ( - - - - - - - ) : ( - - )} - - -
- ) - } -} - -NavBar.propTypes = { - classes: PropTypes.object.isRequired, - auth: PropTypes.object.isRequired -} - -export default withStyles(styles)(NavBar) diff --git a/client/src/views/teams/AcceptTeamInvite.js b/client/src/views/teams/AcceptTeamInvite.js index b2ac3ece5..02ca2f1ad 100644 --- a/client/src/views/teams/AcceptTeamInvite.js +++ b/client/src/views/teams/AcceptTeamInvite.js @@ -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) {