ui/src/components/app.jsx (121 lines of code) (raw):

/* * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"). * You may not use this file except in compliance with the License. * A copy of the License is located at * * http://aws.amazon.com/apache2.0/ * * or in the "license" file accompanying this file. This file is distributed * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either * express or implied. See the License for the specific language governing * permissions and limitations under the License. */ import React, {PropTypes, Component} from 'react'; import WheelTable from './wheel_table/wheel_table'; import Wheel from './wheel'; import ParticipantTable from './participant_table/participant_table'; import Login from './login'; import NotFound from './notFound'; import Navigation from './navigation'; import connect, {container} from 'react-redux-fetch'; import {Route, Switch} from 'react-router-dom'; import '../styles.css'; import {CognitoUserPool} from 'amazon-cognito-identity-js'; import {BrowserRouter, Router} from 'react-router-dom'; import {apiURL} from '../util'; export interface AppProps { dispatchConfigGet: PropTypes.func, configFetch: PropTypes.object, } export interface AppState { cognitoUserPool: Object | undefined, cognitoSession: Object | undefined, } /** * Main Application component */ class App extends Component<AppProps, AppState> { constructor(props) { super(props); this.state = { cognitoUserPool: undefined, cognitoSession: undefined }; } componentDidMount() { this.props.dispatchConfigGet(); } componentDidUpdate() { if (this.state.cognitoUserPool === undefined && this.props.configFetch.fulfilled) { const cognitoUserPool = new CognitoUserPool({ UserPoolId: this.props.configFetch.value.USER_POOL_ID, ClientId: this.props.configFetch.value.APP_CLIENT_ID, }) this.setState({cognitoUserPool}, this.refreshSession); } } refreshSession = () => { const currentUser = this.state.cognitoUserPool.getCurrentUser() if (currentUser !== null) { const app = this; // Necessary because of 'this' getting overridden in the callback currentUser.getSession(function(err, session) { if (err) { console.error(err); return; } container.registerRequestHeader('Authorization', session.getIdToken().getJwtToken()); app.setState({cognitoSession: session}); }) } } userLogout = () => { this.state.cognitoUserPool.getCurrentUser().signOut(); this.setState({cognitoUserPool: undefined, cognitoSession: undefined}); } handleClickCapture = () => { if(this.state.cognitoUserPool!== undefined){ this.refreshSession() }else{ this.componentDidUpdate() } } render() { if (!this.props.configFetch.fulfilled) { return (<div>Loading ...</div>); } const childProps = { userHasAuthenticated: this.refreshSession, userPool: new CognitoUserPool({ UserPoolId: this.props.configFetch.value.USER_POOL_ID, ClientId: this.props.configFetch.value.APP_CLIENT_ID, }), userLogout: this.userLogout }; if (this.state.cognitoSession !== undefined && this.state.cognitoSession.isValid()) { return ( <BrowserRouter> <div id="grandparent" onClickCapture={this.handleClickCapture}> <Navigation {...childProps} /> <Switch> <Route path='/app' exact={true} component={WheelTable} /> <Route path='/app/wheel/:wheel_id' exact={true} component={Wheel} /> <Route path='/app/wheel/:wheel_id/participant' exact={true} component={ParticipantTable} /> <Route component={NotFound} /> </Switch> </div> </BrowserRouter> ) } else { return <Login {...childProps}/>; } } } export default connect([ { resource: 'config', method: 'get', request: {url: apiURL('config')}, }, ]) (App);