Add verdict in MatchView component

- Update Navbar Styles in Leaderboard

Author: kumaran-14

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

@@ -29,70 +29,58 @@ exports[`SideBar Container Should render 1`] = `
         <div
           className="w-100 justify-content-center align-items-center btn-group-vertical"
         >
-          <Button
-            active={false}
-            block={false}
-            bsClass="btn"
-            bsStyle="default"
+          <a
             className="py-2 px-auto text-white d-flex justify-content-center"
-            disabled={false}
-            onClick={[Function]}
+            href="/#/home"
           >
-            <button
-              className="py-2 px-auto text-white d-flex justify-content-center btn btn-default"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              <FontAwesomeIcon
-                border={false}
-                className=""
-                fixedWidth={false}
-                flip={null}
-                icon={
-                  Object {
-                    "icon": Array [
-                      640,
-                      512,
-                      Array [],
-                      "f121",
-                      "M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z",
-                    ],
-                    "iconName": "code",
-                    "prefix": "fas",
-                  }
+            <FontAwesomeIcon
+              border={false}
+              className=""
+              fixedWidth={false}
+              flip={null}
+              icon={
+                Object {
+                  "icon": Array [
+                    576,
+                    512,
+                    Array [],
+                    "f015",
+                    "M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z",
+                  ],
+                  "iconName": "home",
+                  "prefix": "fas",
                 }
-                inverse={false}
-                listItem={false}
-                mask={null}
-                pull={null}
-                pulse={false}
-                rotation={null}
-                size={null}
-                spin={false}
-                symbol={false}
-                title=""
-                transform={null}
+              }
+              inverse={false}
+              listItem={false}
+              mask={null}
+              pull={null}
+              pulse={false}
+              rotation={null}
+              size={null}
+              spin={false}
+              symbol={false}
+              title=""
+              transform={null}
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-home fa-w-18 "
+                data-icon="home"
+                data-prefix="fas"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 576 512"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  aria-hidden="true"
-                  className="svg-inline--fa fa-code fa-w-20 "
-                  data-icon="code"
-                  data-prefix="fas"
-                  role="img"
+                <path
+                  d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"
+                  fill="currentColor"
                   style={Object {}}
-                  viewBox="0 0 640 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
-                    fill="currentColor"
-                    style={Object {}}
-                  />
-                </svg>
-              </FontAwesomeIcon>
-            </button>
-          </Button>
+                />
+              </svg>
+            </FontAwesomeIcon>
+          </a>
           <Button
             active={false}
             block={false}

src/app/components/Leaderboard/index.tsx

@@ -84,19 +84,11 @@ export class Leaderboard extends React.Component<
       isLoggedIn,
     } = this.props;
     return (
-      <Grid fluid={true} className={classnames(styles.Leaderboard)}>
-        {isLoggedIn ? <SocketHandler /> : null}
-        <Row className={classnames('py-2 pl-3', styles.leaderboardTitle)}>
-          <Col
-            sm={9}
-            className="text-light font-weight-bold my-auto"
-            style={{ left: '45%', height: '10%', paddingTop: '10px', paddingBottom: '10px' }}
-          >
-            LEADERBOARD
-          </Col>
-        </Row>
-        {this.state.isSearching ? (
-          <Row className={classnames('py-2 pl-3', styles.leaderboardTitle)}>
+      <>
+        <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={10}
               className="text-light font-weight-bold my-auto"

src/app/components/SideBar.tsx

@@ -37,15 +37,17 @@ export class Sidebar extends React.Component<SideBarInterfaces.Props, {}> {
           vertical
           className={classnames('w-100 justify-content-center align-items-center', styles.Sidebar)}
         >
-          <Button
+          <a
+            href="/#/home"
             className={classnames(
               'py-2 px-auto text-white d-flex justify-content-center',
               styles.customBtn,
             )}
             onClick={() => closeSidePanelTab()}
           >
-            <FontAwesomeIcon icon={faCode} />
-          </Button>
+            <FontAwesomeIcon icon={faHome} />
+          </a>
+
           <Button
             className={classnames('py-2 px-auto documentation-btn-ctrl', styles.customBtn, {
               [`${styles.customBtnActive}`]: sidePanelTab === SidePanelTab.DOCS,

src/app/index.tsx

@@ -17,7 +17,8 @@ initializeRendererAssets();
 
 /* tslint:disable-next-line:variable-name */
 export const App = hot(module)(() => (
-  <BrowserRouter>
+  <HashRouter>
+    <Sugar background="#484848" color="white" />
     <Switch>
       <Route exact path={Routes.ROOT} component={Dashboard} />
       <Route exact path={Routes.LOGIN} component={Login} />
@@ -26,6 +27,5 @@ export const App = hot(module)(() => (
       <Route exact path={Routes.USER_PROFILE_MODEL} component={UserProfileModal} />
       <Route path={Routes.USER_ACTIVATION} component={ActivateUser} />
     </Switch>
-    <Sugar background="#484848" color="white" />
-  </BrowserRouter>
+  </HashRouter>
 ));

src/app/sagas/MatchView.ts

@@ -18,7 +18,6 @@ export function* getMatches(action: ActionType<typeof MatchActions.getMatches>)
 
     if (isArray(res)) {
       const matchData = mapMatchResponse(res);
-
       yield put(MatchActions.updateMatches(matchData));
     } else yield put(NotificationActions.error(res.message));
   } catch (err) {

src/app/sagas/utils/index.ts

@@ -60,15 +60,27 @@ export const mapMatchResponse = (
   });
 };
 
+export enum VERDICT {
+  TIE = 'TIE',
+  PLAYER1 = 'PLAYER1',
+  PLAYER2 = 'PLAYER2',
+}
+
+export enum MAP_VERDICT_TO_STRING {
+  TIE = '0',
+  PLAYER1 = '1',
+  PLAYER2 = '2',
+}
+
 const getVerdict = (verdict: string) => {
   switch (verdict) {
-    case 'PLAYER_1':
-      return '1';
-    case 'PLAYER_1':
-      return '2';
-    case 'TIE':
-      return '0';
+    case VERDICT.PLAYER1:
+      return MAP_VERDICT_TO_STRING.PLAYER1;
+    case VERDICT.PLAYER2:
+      return MAP_VERDICT_TO_STRING.PLAYER2;
+    case VERDICT.TIE:
+      return MAP_VERDICT_TO_STRING.TIE;
     default:
-      return '0';
+      return MAP_VERDICT_TO_STRING.TIE;
   }
 };