ContestSignature : redirect, not reload

Also, it no longer spans across the remaining space of the navigation bar, preventing accidental clicks
vnma0 · May 11, 2019 · 8d4b392 · 8d4b392
1 parent 7e567e6
commit 8d4b392
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 27 deletions.
diff --git a/src/app/globalStatusBar/contestSignature/contestName.js b/src/app/globalStatusBar/contestSignature/contestName.js
@@ -1,25 +1,33 @@
 import React, { Component } from 'react';
 import { Typography } from '@material-ui/core';
 
+import { Redirect } from 'react-router-dom';
+
 /**
  * @name ContestNameText : Contest name
  * @param {String} contestName : Contest name
- * @return {React.Component} : A @material-ui/core/Typography that shows current contest name.
+ * @return {React.Component} : A `@material-ui/core/Typography` component that shows current contest name.
  *                             In case the component has children, only them get rendered.
  * @author minhducsun2002
  */
 
 class ContestNameText extends Component {
+    componentDidUpdate() {
+        if ((this.state || {}).redirect)
+            // setState only if truthy
+            // prevent infinite loops
+            this.setState({
+                redirect: false
+                // avoid error from react-router
+            });
+    }
     render() {
         return (
-            <Typography
-                onClick={() => (window.location = '/')}
-                variant='h5'
-                color='inherit'
-                style={{
-                    flexGrow: 1
-                }}>
-                {this.props.children ? this.props.children : this.props.contestName}
+            <Typography variant='h5' color='inherit' onClick={() => this.setState({ redirect: true })}>
+                <span>
+                    {(this.state || {}).redirect && <Redirect to='/' />}
+                    {this.props.children ? this.props.children : this.props.contestName}
+                </span>
             </Typography>
         );
     }

diff --git a/src/app/globalStatusBar/globalStatusBar.js b/src/app/globalStatusBar/globalStatusBar.js
@@ -104,6 +104,7 @@ class GlobalStatusBar extends Component {
                         {/* this button opens the sidenav or invoke whatever passed as menuOpen */}
 
                         <ContestSignature contestName={this.props.contestName} />
+                        <span style={{ flexGrow: 1 }} />
                         {loggedIn && <CountdownClock time={this.props.contestTime} />}
 
                         {!this.props.loggedIn ? (

diff --git a/src/index.js b/src/index.js
@@ -96,18 +96,18 @@ class Hestia extends React.Component {
         const { t } = this.props;
         const { user, contestName, contestTime } = this.state;
         return (
-            <>
-                <GlobalStatusBar
-                    currentUser={user.username}
-                    currentUserId={user.id}
-                    loggedIn={user.loggedIn}
-                    contestName={contestName}
-                    contestTime={contestTime}
-                    menuOpen={toggleSidenav}
-                    isAdmin={user.isAdmin}
-                />
-                <div style={{ display: this.state.user.loggedIn ? 'block' : 'none' }}>
-                    <Router>
+            <Router>
+                <>
+                    <GlobalStatusBar
+                        currentUser={user.username}
+                        currentUserId={user.id}
+                        loggedIn={user.loggedIn}
+                        contestName={contestName}
+                        contestTime={contestTime}
+                        menuOpen={toggleSidenav}
+                        isAdmin={user.isAdmin}
+                    />
+                    <div style={{ display: this.state.user.loggedIn ? 'block' : 'none' }}>
                         <div>
                             <Sidenav
                                 pages={[
@@ -157,12 +157,12 @@ class Hestia extends React.Component {
                                 )}
                             />
                         </div>
-                    </Router>
-                </div>
-                <div style={{ display: this.state.user.loggedIn ? 'none' : 'block' }}>
-                    {!this.state.user.loggedIn && <LoggedOut />}
-                </div>
-            </>
+                    </div>
+                    <div style={{ display: this.state.user.loggedIn ? 'none' : 'block' }}>
+                        {!this.state.user.loggedIn && <LoggedOut />}
+                    </div>
+                </>
+            </Router>
         );
     }
 }