Merge branch 'feat/110152-edit-application' into 'master'

Feat/110152 edit application

See merge request spinning-top/connect!17

src/front/component/App.jsx

@@ -1,52 +1,188 @@
+/* eslint-disable react/forbid-prop-types */
 import * as React from 'react';
-import { BrowserRouter as Router } from "react-router-dom";
-
+import { withRouter } from "react-router-dom";
+import PropTypes from 'prop-types'; // ES6
 
 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';
 
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+
+import IconButton from '@material-ui/core/IconButton';
+import ArrowBack from '@material-ui/icons/ArrowBack';
+
 import { logout, connectedState } from '../services/auth';
 import Routes from "./Router";
 
 
+const options = ['Documentation','My Profile'];
+
 class App extends React.PureComponent {
 
   constructor() {
     super();    
-    this.state = {userConnected : false};
+    this.state = {
+      canBack: false,
+      userConnected : false,
+       anchorRef: {current: null}, 
+       selectedIndex: 0, 
+       open: false
+    };
   }
 
   componentDidMount() {
+    const { history } = this.props;
+    if (history.location.pathname !== '/home' && history.location.pathname !== '/') {
+      this.setState({canBack: true});
+    }
+    history.listen((location) => {
+      if (location.pathname !== '/home' && location.pathname !== '/') {
+        this.setState({canBack: true});
+      } else {
+        this.setState({canBack: false});
+      }
+    });
+
+
     connectedState.subscribe((userConnected) => {
+      if(!userConnected) {
+        history.push('/');
+      }
       this.setState({userConnected});
+    });
+
+  }
+
+  async handleMenuItemClick(event, index) {
+    const { history } = this.props;
+    if (index === 1) {
+      history.push('/profile')
+    }
+
+    this.handleToggle()
+
+  }
+
+  handleToggle() {
+    const { open } = this.state;
+    this.setState({
+      open: !open
     })
   }
 
+  handleClose(event) {
+    const { anchorRef } = this.state;
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    this.setState({
+      open: false
+    })
+  }
+
+  goBack() {
+    const { history } = this.props;
+    history.goBack();
+  }
+
+
   render() {
-    const { userConnected } = this.state;
+    const { userConnected, anchorRef, selectedIndex, open, canBack } = this.state;
 
     return (
       <div>
         <AppBar position="static" color="default">
           <Toolbar>
+            {canBack && (
+            <IconButton 
+              edge="start" 
+              className="margin-right': 16"
+              color="inherit"
+              onClick={() => {this.goBack()}}
+            >
+              <ArrowBack />
+            </IconButton>
+            )}
+
             <Typography variant="h6" color="inherit">
               Connect
             </Typography>
             <div className="spacer" />
 
-            {userConnected && <Button color="inherit" onClick={() => {logout(); window.location.href = '/'}}>Logout</Button>}
-
+            {userConnected && 
+            (
+              <>
+                <ButtonGroup ref={anchorRef} aria-label="Split button">
+                  <Button 
+                    color="inherit" 
+                    onClick={() => {logout(); window.location.href = '/'}}
+                  >
+                    Logout
+                  </Button>
+                  <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    aria-owns={open ? 'menu-list-grow' : undefined}
+                    aria-haspopup="true"
+                    onClick={() => this.handleToggle()}
+                  >
+                    <ArrowDropDownIcon />
+                  </Button>
+                </ButtonGroup>
+                <Popper open={open} anchorEl={anchorRef.current} transition disablePortal>
+                  {({ TransitionProps, placement }) => (
+                    <Grow
+                      {...TransitionProps}
+                      style={{
+                        transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
+                      }}
+                    >
+                      <Paper id="menu-list-grow">
+                        <ClickAwayListener onClickAway={() => this.handleClose()}>
+                          <MenuList>
+                            {options.map((option, index) => (
+                              <MenuItem
+                                key={option}
+                                disabled={index === 2}
+                                selected={index === selectedIndex}
+                                onClick={event => this.handleMenuItemClick(event, index)}
+                              >
+                                {option}
+                              </MenuItem>
+                            ))}
+                          </MenuList>
+                        </ClickAwayListener>
+                      </Paper>
+                    </Grow>
+                  )}
+                </Popper>
+              </>
+            )
+            }
           </Toolbar>
         </AppBar>
 
-        <Router>
-          <Routes />
-        </Router>
+        <Routes />
       </div>
     );
   }
 }
 
-export default App;
+App.propTypes = {
+  history: PropTypes.instanceOf(Object).isRequired,
+};
+
+
+
+export default withRouter(App);

src/front/component/Router.jsx

@@ -5,6 +5,7 @@ import LoginPage from '../pages/login/login';
 import Github from '../pages/login/github';
 import HomePage from '../pages/home/home';
 import DetailsPage from '../pages/details/details';
+import ProfilePage from '../pages/profile/profile';
 
 export const ROUTES = {
   HOME: '/',
@@ -28,6 +29,12 @@ class Routes extends React.PureComponent {
           component={DetailsPage}
         />
 
+        <Route
+          exact
+          path='/profile'
+          component={ProfilePage}
+        />
+
 
         <Route
           exact
@@ -42,8 +49,6 @@ class Routes extends React.PureComponent {
           component={LoginPage}
         />
 
-
-
       </>
     );
   }

src/front/index.jsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
+
 import App from './component/App';
 import './index.css';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
 registerServiceWorker();