fix(deployment): fix server deployment bugs (#85)

* fix(deployment): fix server deployment bugs

* fix(leaderboard): remove student dropdown

Author: bestinbthomas

Dockerfile

@@ -9,7 +9,7 @@ COPY src/config/config.example.ts src/config/config.ts
 
 COPY . .
 
-RUN npm run build
+RUN mkdir -p build && npm run build
 
 WORKDIR /usr/src/app/server
 

__tests__/app/containers/SideBar.test.tsx

@@ -5,6 +5,7 @@ import { SidePanelTab } from 'app/reducers/Dashboard';
 import { configureStore } from 'app/store';
 import { mount } from 'enzyme';
 import * as React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 
 describe('SideBar Container', () => {
   const { store } = configureStore();
@@ -17,6 +18,7 @@ describe('SideBar Container', () => {
       context: {
         store,
       },
+      wrappingComponent: BrowserRouter,
     },
   );
 

__tests__/app/containers/__snapshots__/SideBar.test.tsx.snap

@@ -9,4 +9,4 @@ app.get('/*', (req, res) => {
 });
 
 app.listen(5000);
-console.log('Server is listening on http://localhost:5000');
+console.log('Server is listening on http://localhost:5000');

server/app.js

@@ -6,7 +6,6 @@ import GameLog from 'app/containers/GameLog';
 import Renderer from 'app/containers/Renderer';
 import SideBar from 'app/containers/SideBar';
 import SidePanel from 'app/containers/SidePanel';
-import SocketHandler from 'app/containers/SocketHandler';
 import SubmitBar from 'app/containers/SubmitBar';
 import { Routes } from 'app/routes';
 import * as style from 'app/styles/Dashboard.css';
@@ -118,7 +117,6 @@ export class Dashboard extends React.Component<
         {isLoggedIn && isReactTourActive && !isWelcomeModalOpen ? (
           <ReactTour toggleReactTour={this.onToggleReactTour} />
         ) : null}
-        {isLoggedIn ? <SocketHandler /> : null}
         <SplitPane
           style={{
             filter: `blur(${isAuthenticationOpen || isWelcomeModalOpen ? 2 : 0}px)`,

src/app/components/Dashboard.tsx

@@ -13,7 +13,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NavBar, NavPage } from 'app/components/home/Navbar';
 import { LeaderboardElement } from 'app/components/Leaderboard/LeaderboardElement';
 import { Timer } from 'app/components/Leaderboard/Timer';
-import SocketHandler from 'app/containers/SocketHandler';
 import { Routes } from 'app/routes';
 import * as styles from 'app/styles/Leaderboard.module.css';
 import * as LeaderboardInterfaces from 'app/types/Leaderboard';
@@ -94,7 +93,6 @@ export class Leaderboard extends React.Component<
       <>
         <NavBar isLoggedIn={isLoggedIn} page={NavPage.LEADERBOARD} />
         <Grid fluid={true} className={classnames(styles.Leaderboard)}>
-          {isLoggedIn ? <SocketHandler /> : null}
           <Row className={classnames('py-4 pl-3')}>
             <Col
               sm={9}
@@ -185,59 +183,6 @@ export class Leaderboard extends React.Component<
                     </div>
                   </div>
                 </Col>
-                <Col>
-                  <div className={styles.dropdown}>
-                    <button className={styles.dropbtn}>
-                      {LeaderboardInterfaces.UserTypeName[this.state.currentUserType]}
-                    </button>
-                    <FontAwesomeIcon style={{ color: 'white' }} icon={faCaretDown} />
-                    <div className={styles['dropdown-content']}>
-                      <a
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => {
-                          this.setState({
-                            currentUserType: LeaderboardInterfaces.UserType.STUDENT,
-                          });
-                        }}
-                        className={
-                          this.state.currentUserType === LeaderboardInterfaces.UserType.STUDENT
-                            ? classnames(styles.dropDownMenuActive, styles.dropDownMenuActive)
-                            : classnames(styles.dropDownMenu)
-                        }
-                      >
-                        {LeaderboardInterfaces.UserTypeName.STUDENT}
-                      </a>
-                      <a
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => {
-                          this.setState({
-                            currentUserType: LeaderboardInterfaces.UserType.PROFESSIONAL,
-                          });
-                        }}
-                        className={
-                          this.state.currentUserType === LeaderboardInterfaces.UserType.PROFESSIONAL
-                            ? classnames(styles.dropDownMenuActive, styles.dropDownMenuActive)
-                            : classnames(styles.dropDownMenu)
-                        }
-                      >
-                        {LeaderboardInterfaces.UserTypeName.PROFESSIONAL}
-                      </a>
-                      <a
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => {
-                          this.setState({ currentUserType: LeaderboardInterfaces.UserType.ALL });
-                        }}
-                        className={
-                          this.state.currentUserType === LeaderboardInterfaces.UserType.ALL
-                            ? classnames(styles.dropDownMenuActive, styles.dropDownMenuActive)
-                            : classnames(styles.dropDownMenu)
-                        }
-                      >
-                        {LeaderboardInterfaces.UserTypeName.All}
-                      </a>
-                    </div>
-                  </div>
-                </Col>
                 <Col style={{ position: 'absolute', left: '96.5%' }}>
                   <button
                     className={styles.button}

src/app/components/Leaderboard/index.tsx

@@ -23,6 +23,7 @@ import * as React from 'react';
 import { Button, ButtonGroup } from 'react-bootstrap';
 
 import Tooltip from '@material-ui/core/Tooltip';
+import { Link } from 'react-router-dom';
 
 export class Sidebar extends React.Component<SideBarInterfaces.Props, {}> {
   public render() {
@@ -84,16 +85,16 @@ export class Sidebar extends React.Component<SideBarInterfaces.Props, {}> {
             </Button>
           </Tooltip>
           <Tooltip title="Leaderboard" placement="right">
-            <a
-              href="./leaderboard"
+            <Link
+              to="/leaderboard"
               className={classnames('py-2 px-auto leaderboard-btn-ctrl', styles.customBtn, {
                 [`${styles.customBtnActive}`]: sidePanelTab === SidePanelTab.LEADERBOARD,
               })}
               id="leaderboard_button"
               onClick={() => clearAllLogs()}
             >
               <FontAwesomeIcon icon={faTrophy} />
-            </a>
+            </Link>
           </Tooltip>
           {isLoggedIn ? (
             <Tooltip title="Commit Log" placement="right">
@@ -145,8 +146,8 @@ export class Sidebar extends React.Component<SideBarInterfaces.Props, {}> {
             </Button>
           </Tooltip>
           <Tooltip title={isLoggedIn ? 'Profile' : 'Login'} placement="right">
-            <Button
-              href={'./profile'}
+            <Link
+              to="/profile"
               className={classnames('py-2 px-auto', styles.customBtn)}
               id="user_profile_button"
               onClick={() => {
@@ -158,7 +159,7 @@ export class Sidebar extends React.Component<SideBarInterfaces.Props, {}> {
               }}
             >
               <FontAwesomeIcon icon={isLoggedIn ? faUser : faSignInAlt} />
-            </Button>
+            </Link>
           </Tooltip>
           {isLoggedIn ? (
             <Tooltip title="Logout" placement="right">
@@ -175,17 +176,17 @@ export class Sidebar extends React.Component<SideBarInterfaces.Props, {}> {
             </Tooltip>
           ) : null}
           <Tooltip title="Home" placement="right">
-            <a
+            <Link
               className={classnames(
                 'py-2 px-auto notification-btn-ctrl',
                 styles.customBtn,
                 styles.infoCircle,
               )}
-              href="./home"
+              to="/home"
               onClick={() => clearAllLogs()}
             >
               <FontAwesomeIcon icon={faInfoCircle} />
-            </a>
+            </Link>
           </Tooltip>
           <Tooltip title="Take a tour" placement="right">
             <Button

src/app/components/SideBar.tsx

@@ -0,0 +1,8 @@
+import SocketHandler from 'app/containers/SocketHandler';
+import * as React from 'react';
+
+export class SocketHandlerWrapper extends React.Component<{ isLoggedIn: boolean }> {
+  public render() {
+    return this.props.isLoggedIn ? <SocketHandler /> : null;
+  }
+}

src/app/components/SocketHandlerWrapper.tsx

@@ -0,0 +1,13 @@
+import { SocketHandlerWrapper } from 'app/components/SocketHandlerWrapper';
+import { RootState } from 'app/reducers';
+import { connect } from 'react-redux';
+
+const mapStateToProps = (rootState: RootState) => {
+  return {
+    isLoggedIn: rootState.user.isLoggedIn,
+  };
+};
+
+const socketHandlerWrapperContainer = connect(mapStateToProps)(SocketHandlerWrapper);
+
+export default socketHandlerWrapperContainer;

src/app/containers/SocketHandlerWrapper.ts

@@ -4,6 +4,7 @@ import Register from 'app/containers/Authentication/Register';
 import Dashboard from 'app/containers/Dashboard';
 import LandingPage from 'app/containers/LandingPage';
 import Leaderboard from 'app/containers/Leaderboard';
+import SocketHandlerWrapper from 'app/containers/SocketHandlerWrapper';
 import UserProfileModal from 'app/containers/UserProfileModal';
 import { Routes } from 'app/routes';
 // @ts-ignore
@@ -17,15 +18,18 @@ initializeRendererAssets();
 
 /* tslint:disable-next-line:variable-name */
 export const App = hot(module)(() => (
-  <BrowserRouter>
-    <Switch>
-      <Route exact path={Routes.ROOT} component={Dashboard} />
-      <Route exact path={Routes.LOGIN} component={Login} />
-      <Route exact path={Routes.REGISTER} component={Register} />
-      <Route exact path={Routes.LEADERBOARD} component={Leaderboard} />
-      <Route exact path={Routes.USER_PROFILE_MODEL} component={UserProfileModal} />
-      <Route path={Routes.USER_ACTIVATION} component={ActivateUser} />
-      <Route exact path={Routes.HOME} component={LandingPage} />
-    </Switch>
-  </BrowserRouter>
+  <React.Fragment>
+    <SocketHandlerWrapper />
+    <BrowserRouter>
+      <Switch>
+        <Route exact path={Routes.ROOT} component={Dashboard} />
+        <Route exact path={Routes.LOGIN} component={Login} />
+        <Route exact path={Routes.REGISTER} component={Register} />
+        <Route exact path={Routes.LEADERBOARD} component={Leaderboard} />
+        <Route exact path={Routes.USER_PROFILE_MODEL} component={UserProfileModal} />
+        <Route path={Routes.USER_ACTIVATION} component={ActivateUser} />
+        <Route exact path={Routes.HOME} component={LandingPage} />
+      </Switch>
+    </BrowserRouter>
+  </React.Fragment>
 ));