diff --git a/client/package.json b/client/package.json index 944a99e49..fa4bcd6a2 100644 --- a/client/package.json +++ b/client/package.json @@ -1,7 +1,7 @@ { "name": "@advancedalgos/users-client", "description": "Advanced Algos Users client-side web app", - "version": "0.0.17", + "version": "0.0.18", "main": "src/index.js", "dependencies": { "@material-ui/core": "^3.2.0", diff --git a/client/src/components/Browse.js b/client/src/components/Browse.js index 7ee0100dd..7dbaefb78 100644 --- a/client/src/components/Browse.js +++ b/client/src/components/Browse.js @@ -1,47 +1,13 @@ import React, { Component } from 'react' import UserList from './UserList' -import CssBaseline from '@material-ui/core/CssBaseline' +import TopBar from './TopBar' class Browse extends Component { - componentDidMount () { - window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up - } - render () { return ( - -
-
-
-
-
-
    -
  • - -
    -
    -
    -
    -
    -

    Users Directory

    -

    -
    Everyone involved in Advanced Algos is here. -

    -
    -
    -
    -
    -
    -
    • -
-
-
-
-
-
- + ) diff --git a/client/src/components/Contact.js b/client/src/components/Contact.js deleted file mode 100644 index 268efeaee..000000000 --- a/client/src/components/Contact.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react' -import Button from '@material-ui/core/Button' -import Dialog from '@material-ui/core/Dialog' -import DialogActions from '@material-ui/core/DialogActions' -import DialogContent from '@material-ui/core/DialogContent' -import DialogContentText from '@material-ui/core/DialogContentText' -import DialogTitle from '@material-ui/core/DialogTitle' -import CssBaseline from '@material-ui/core/CssBaseline' - -class Contact extends React.Component { - state = { - open: true - } - - handleClickOpen = () => { - this.setState({ open: true }) - } - - handleClose = () => { - this.setState({ open: false }) - } - - render () { - return ( - - - - - - {"Section under development."} - - - - The functionality of this section has not been developed yet. We expect to have it for November 2018. Thanks for your understanding. - - - - - - - - ) - } -} - -export default Contact diff --git a/client/src/components/Home.js b/client/src/components/Home.js index f9437e5d1..7e5506fa9 100644 --- a/client/src/components/Home.js +++ b/client/src/components/Home.js @@ -1,58 +1,15 @@ import React, { Component } from 'react' -import { compose } from 'recompose' -import { withStyles } from '@material-ui/core/styles' -import CssBaseline from '@material-ui/core/CssBaseline' - -const styles = theme => ({ - -}) +import TopBar from './TopBar' class Home extends Component { - componentDidMount () { - window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up - } - render () { - const { classes } = this.props return ( - -
-
-
-
-
-
    -
  • - -
    -
    -
    -
    -
    -

    Users Module

    -

    -
    Responsible for all human users of the Advanced Algos Platform. -

    -
    -
    -
    -
    -
    -
    • -
-
-
-
-
-
+ - ) } } -export default compose( - withStyles(styles) -)(Home) +export default Home diff --git a/client/src/components/Menu.js b/client/src/components/Menu.js deleted file mode 100644 index cd4c60d74..000000000 --- a/client/src/components/Menu.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 classNames from 'classnames' -import AppBar from '@material-ui/core/AppBar' -import Toolbar from '@material-ui/core/Toolbar' -import Typography from '@material-ui/core/Typography' -import Button from '@material-ui/core/Button' - -// icons -import UsersIcon from '@material-ui/icons/People' -import BrowseIcon from '@material-ui/icons/ImportContacts' -import SearchIcon from '@material-ui/icons/Search' -import ContactIcon from '@material-ui/icons/ContactMail' -import BugReportIcon from '@material-ui/icons/BugReport' - -import { Link } from 'react-router-dom' - -// components -import LoggedInUser from './LoggedInUser' - -const HomeLink = props => -const BrowseLink = props => -const SearchLink = props => - -const styles = theme => ({ - cssRoot: { - color: '#FFFFFF', - backgroundColor: theme.palette.secondary, - '&:hover': { - backgroundColor: theme.palette.dark - }, - whiteSpace: 'nowrap', - paddingRight: 2 * theme.spacing.unit, - paddingLeft: 2 * theme.spacing.unit - }, - button: { - margin: theme.spacing.unit - }, - leftIcon: { - marginRight: theme.spacing.unit - }, - iconSmall: { - fontSize: 20 - } -}) - -class Menu extends Component { - - constructor (props) { - super(props) - this.state = { - authId: null - } - } - - componentDidMount () { - let user = localStorage.getItem('user') - let authId - - if (user !== null && user !== undefined && user !== 'undefined') { - user = JSON.parse(user) - authId = user.authId - } - - if (authId !== null && authId !== undefined && authId !== 'undefined') { - this.setState({ authId: authId }) - } - } - - render () { - const { classes, user } = this.props - const match = { - url: '/users' - } - - return ( - - ) - } -} - -Menu.propTypes = { - classes: PropTypes.object.isRequired, - user: PropTypes.object, - match: PropTypes.object -} - -export default withStyles(styles)(Menu) diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js deleted file mode 100644 index 20fd77632..000000000 --- a/client/src/components/NavBar.js +++ /dev/null @@ -1,150 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import { withStyles } from '@material-ui/core/styles' -import classNames from 'classnames' -import AppBar from '@material-ui/core/AppBar' -import Toolbar from '@material-ui/core/Toolbar' -import Typography from '@material-ui/core/Typography' -import Button from '@material-ui/core/Button' - -// icons -import UsersIcon from '@material-ui/icons/People' -import BrowseIcon from '@material-ui/icons/ImportContacts' -import SearchIcon from '@material-ui/icons/Search' -import ContactIcon from '@material-ui/icons/ContactMail' -import BugReportIcon from '@material-ui/icons/BugReport' - -import { Link } from 'react-router-dom' - -// components -import LoggedInUser from './LoggedInUser' - -const HomeLink = props => -const BrowseLink = props => -const SearchLink = props => - -const styles = theme => ({ - root: { - flexGrow: 1 - }, - flex: { - flexGrow: 1, - marginLeft: 30 - }, - menuButton: { - marginLeft: -12, - marginRight: 20 - }, - cssRoot: { - color: '#FFFFFF', - backgroundColor: theme.palette.secondary, - '&:hover': { - backgroundColor: theme.palette.dark - }, - whiteSpace: 'nowrap', - paddingRight: 2 * theme.spacing.unit, - paddingLeft: 2 * theme.spacing.unit - }, - button: { - margin: theme.spacing.unit - }, - leftIcon: { - marginRight: theme.spacing.unit - }, - rightIcon: { - marginLeft: theme.spacing.unit - }, - iconSmall: { - fontSize: 20 - } -}) - -class NavBar extends Component { - - constructor (props) { - super(props) - this.state = { - authId: null - } - } - - componentDidMount () { - let user = localStorage.getItem('user') - let authId - - if (user !== null && user !== undefined && user !== 'undefined') { - user = JSON.parse(user) - authId = user.authId - } - - if (authId !== null && authId !== undefined && authId !== 'undefined') { - this.setState({ authId: authId }) - } - } - - render () { - const { classes, user, match } = this.props - return ( -
- - - - Users - - - - - - - - -
- ) - } -} - -NavBar.propTypes = { - classes: PropTypes.object.isRequired, - user: PropTypes.object, - match: PropTypes.object -} - -export default withStyles(styles)(NavBar) - diff --git a/client/src/components/ProfileSheet.js b/client/src/components/ProfileSheet.js index 4bc2eb00e..9f9883591 100644 --- a/client/src/components/ProfileSheet.js +++ b/client/src/components/ProfileSheet.js @@ -313,44 +313,6 @@ class ProfileSheet extends Component { } } - componentDidMount () { - window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up - } - - addSlider () { - return ( -
-
-
-
-
-
    -
  • - -
    -
    -
    -
    -
    -

    Profile Sheet

    -

    -
    Manage here your basic profile info. -

    -
    -
    -
    -
    -
    -
    • -
-
-
-
-
-
- ) - } - addForm () { const { classes } = this.props return ( @@ -545,7 +507,6 @@ class ProfileSheet extends Component { render () { return ( - {this.addSlider()} {this.addForm()} ) diff --git a/client/src/components/Search.js b/client/src/components/Search.js index 880c8ef09..041116bd3 100644 --- a/client/src/components/Search.js +++ b/client/src/components/Search.js @@ -1,8 +1,8 @@ import React, { Component } from 'react' import UserSearch from './UserSearch' import {compose} from 'react-apollo' -import CssBaseline from '@material-ui/core/CssBaseline' import Paper from '@material-ui/core/Paper' +import TopBar from './TopBar' // Materia UI @@ -21,45 +21,11 @@ const styles = theme => ({ class Search extends Component { - constructor (props) { - super(props) - this.state = { - } - } render () { const { classes } = this.props return ( -
-
-
-
-
-
    -
  • - -
    -
    -
    -
    -
    -

    Users Search

    -

    -
    Find anyone involved in Advanced Algos here. -

    -
    -
    -
    -
    -
    -
    • -
-
-
-
-
-
- + diff --git a/client/src/components/TopBar/index.js b/client/src/components/TopBar/index.js new file mode 100644 index 000000000..82e6b319f --- /dev/null +++ b/client/src/components/TopBar/index.js @@ -0,0 +1,42 @@ +import React from 'react'; + +import { Typography } from '@material-ui/core'; +import { withStyles } from '@material-ui/core/styles'; + +import styles from './styles'; + +class TopBar extends React.Component { + render() { + const { + classes, + size, + title, + text, + } = this.props; + if (size === 'big') { + return ( +
+
+ {title} + {text} +
+
+ ); + } + if (size === 'medium') { + return ( +
+
+ {title} + {text} +
+
+ ); + } + return ( +
+ ); + } +} + +export default withStyles(styles)(TopBar); diff --git a/client/src/components/TopBar/styles.js b/client/src/components/TopBar/styles.js new file mode 100644 index 000000000..ef12ddf5f --- /dev/null +++ b/client/src/components/TopBar/styles.js @@ -0,0 +1,39 @@ +const styles = () => ({ + rootBig: { + backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)', + width: '100%', + height: '100vh', + }, + rootMedium: { + backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)', + width: '100%', + height: '50vh', + }, + rootSmall: { + backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)', + width: '100%', + height: '220px', + }, + captions: { + position: 'relative', + top: '50%', + transform: 'translateY(-50%)', + }, + title: { + fontFamily: 'Saira', + color: 'white', + fontSize: '64px', + lineHeight: '78px', + fontWeight: 100, + }, + text: { + fontFamily: 'Saira', + color: 'white', + fontSize: '20px', + lineHeight: '30px', + fontWeight: 600, + padding: '20px 0 0.5em 0', + }, +}); + +export default styles; diff --git a/client/src/components/User.js b/client/src/components/User.js index 043f3ddaf..2e5c7e1fb 100644 --- a/client/src/components/User.js +++ b/client/src/components/User.js @@ -1,11 +1,11 @@ import React from 'react' import UserTabs from './UserTabs' -import CssBaseline from '@material-ui/core/CssBaseline' +import TopBar from './TopBar' const User = () => { return ( - + ) diff --git a/client/src/components/YourDescendents.js b/client/src/components/YourDescendents.js index db03f60b7..5678ef838 100644 --- a/client/src/components/YourDescendents.js +++ b/client/src/components/YourDescendents.js @@ -60,44 +60,6 @@ class YourDescendents extends Component { } } - componentDidMount () { - window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up - } - - addSlider () { - return ( -
-
-
-
-
-
    -
  • - -
    -
    -
    -
    -
    -

    Your Descendents

    -

    -
    Explore here generations of people that discovered Advanced Algos because of you. -

    -
    -
    -
    -
    -
    -
    • -
-
-
-
-
-
- ) - } - addForm () { const { classes } = this.props return ( @@ -118,7 +80,6 @@ class YourDescendents extends Component { render () { return ( - {this.addSlider()} {this.addForm()} ) diff --git a/client/src/components/YourReferrer.js b/client/src/components/YourReferrer.js index 57ae6a3d2..050d007cb 100644 --- a/client/src/components/YourReferrer.js +++ b/client/src/components/YourReferrer.js @@ -126,44 +126,6 @@ class YourReferrer extends Component { } } - componentDidMount () { - window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up - } - - addSlider () { - return ( -
-
-
-
-
-
    -
  • - -
    -
    -
    -
    -
    -

    Your Referrer

    -

    -
    It is important to know who introduced you to Advanced Algos. -

    -
    -
    -
    -
    -
    -
    • -
-
-
-
-
-
- ) - } - addForm () { const { classes } = this.props return ( @@ -176,7 +138,6 @@ class YourReferrer extends Component { render () { return ( - {this.addSlider()} {this.addForm()} ) diff --git a/client/src/index.js b/client/src/index.js index 8594ffbef..c2f66af6d 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,104 +1,24 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import { Route, BrowserRouter, Switch } from 'react-router-dom' -import { hot } from 'react-hot-loader' +import React from 'react' +import { Route, Switch } from 'react-router-dom' -import { withStyles } from '@material-ui/core/styles' +import { MuiPickersUtilsProvider } from 'material-ui-pickers' +import LuxonUtils from 'material-ui-pickers/utils/luxon-utils' -// Components import Home from './components/Home' import User from './components/User' import Browse from './components/Browse' import Search from './components/Search' -import ProfileSheet from './components/ProfileSheet' -import ProfileImages from './components/ProfileImages' -import YourReferrer from './components/YourReferrer' -import YourDescendents from './components/YourDescendents' -import UsersMenu from './components/Menu' -import { getItem } from './utils/local-storage' -import { - globalStyles -} from './theme' +const App = () => ( + + + + + + + + +) -class App extends Component { - constructor (props) { - super(props) - this.state = { - user: null - } - } +export default App - async componentDidMount () { - let user = await getItem('user') - - if (user !== null && user !== undefined && user !== 'undefined') { - user = JSON.parse(user) - this.setState({ user: user }) - } - } - - render () { - const match = {path: '/users'} - return ( - -
- - - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - -
- - ) - } -} - -App.propTypes = { - auth: PropTypes.object -} - -const StyledApp = withStyles(globalStyles)(App) -export { - StyledApp, - UsersMenu -} -export default hot(module)(StyledApp)