refactor navbar to functional component

src/App.js

@@ -1,35 +1,33 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
 import LeaderBoard from './view/LeaderBoard';
-import { DoudizhuGameView, LeducHoldemGameView } from './view/GameView';
-import { PVEDoudizhuDemoView } from './view/PVEView';
+import { DoudizhuReplayView, LeducHoldemReplayView } from './view/ReplayView';
+import { PvEDoudizhuDemoView } from './view/PvEView';
 import Navbar from "./components/Navbar";
-import {makeStyles} from "@material-ui/core/styles";
 
-const useStyles = makeStyles(() => ({
-    navBar: {
-        zIndex: 1002
-    }
-}));
+const navbarSubtitleMap = {
+    "/leaderboard": "",
+    "/replay/doudizhu": "Doudizhu",
+    "/replay/leduc-holdem": "Leduc Hold'em",
+    "/pve/doudizhu-demo": "Doudizhu PvE Demo"
+};
 
 function App() {
-    const classes = useStyles();
-
     // todo: add 404 page
 
     return (
         <Router>
-            <Navbar className={classes.navBar} gameName={""}/>
+            <Navbar subtitleMap={navbarSubtitleMap}/>
             <div style={{marginTop: '75px'}}>
                 <Route exact path="/">
                     {/* for test use */}
                     {/* <Redirect to="/leaderboard?type=game&name=leduc-holdem" /> */}
-                    <Redirect to="/pve-doudizhu-demo" />
+                    <Redirect to="/pve/doudizhu-demo" />
                 </Route>
                 <Route path="/leaderboard" component={LeaderBoard} />
-                <Route path="/replay/doudizhu" component={DoudizhuGameView} />
-                <Route path="/replay/leduc-holdem" component={LeducHoldemGameView} />
-                <Route path="/pve-doudizhu-demo" component={PVEDoudizhuDemoView} />
+                <Route path="/replay/doudizhu" component={DoudizhuReplayView} />
+                <Route path="/replay/leduc-holdem" component={LeducHoldemReplayView} />
+                <Route path="/pve/doudizhu-demo" component={PvEDoudizhuDemoView} />
             </div>
         </Router>
     );

src/components/Navbar.js

@@ -1,39 +1,37 @@
-import React from "react";
-import { Link } from 'react-router-dom';
+import React, { useEffect, useState } from "react";
+import { Link, useLocation } from 'react-router-dom';
 import logo_white from "../assets/images/logo_white.png";
 import GitHubIcon from "@material-ui/icons/GitHub";
 import AppBar from "@material-ui/core/AppBar";
 import axios from 'axios';
 
-class Navbar extends React.Component {
-    constructor(props) {
-        super(props);
+function Navbar({subtitleMap}) {
+    const [stars, setStars] = useState('...');
+    let location = useLocation();
+    console.log(location.pathname, subtitleMap);
+    const subtitle = subtitleMap[location.pathname];
 
-        this.state = {stars: '...'};
-    }
-
-    componentDidMount() {
+    useEffect(() => {
         axios.get("https://api.github.com/repos/datamllab/rlcard")
             .then(res=>{
-                this.setState({stars: res.data.stargazers_count});
+                setStars(res.data.stargazers_count);
             });
-    }
+    }, [])
 
-    render() {
-        return (
-            <AppBar position="fixed" className={"header-bar-wrapper"}>
-                <div className={"header-bar"}>
-                    <Link to="/leaderboard"><img src={logo_white} alt={"Logo"} height="65px" /></Link>
-                    <div className={"title unselectable"}><div className={"title-text"}>Showdown<span className={"subtitle"}>{this.props.gameName === '' ? '' : '/ ' + this.props.gameName}</span></div></div>
-                    <div className={"stretch"} />
-                    <div className={"github-info"} onClick={()=>{window.location.href = 'https://github.com/datamllab/rlcard'}}>
-                        <div className={"github-icon"}><GitHubIcon /></div>
-                        <div className={"github-text"}>Github<br /><span>{this.state.stars} stars</span></div>
-                    </div>
+    return (
+        <AppBar position="fixed" className={"header-bar-wrapper"}>
+            <div className={"header-bar"}>
+                <Link to="/leaderboard"><img src={logo_white} alt={"Logo"} height="65px" /></Link>
+                <div className={"title unselectable"}><div className={"title-text"}>Showdown<span className={"subtitle"}>{subtitle ? '/ ' + subtitle : ''}</span></div></div>
+                <div className={"stretch"} />
+                <div className={"github-info"} onClick={()=>{window.location.href = 'https://github.com/datamllab/rlcard'}}>
+                    <div className={"github-icon"}><GitHubIcon /></div>
+                    <div className={"github-text"}>Github<br /><span>{stars} stars</span></div>
                 </div>
-            </AppBar>
+            </div>
+        </AppBar>
         )
-    }
+
 }
 
 export default Navbar;

src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import './assets/index.scss';
 import App from './App';
 

src/view/PVEView/PVEDoudizhuDemoView.js

@@ -1,15 +1,20 @@
 import React from 'react';
+import Navbar from "../../components/Navbar";
+import { DoudizhuGameBoard } from '../../components/GameBoard';
 
-class PVEDoudizhuDemoView extends React.Component {
+
+class PvEDoudizhuDemoView extends React.Component {
     constructor(props) {
         super(props);
     }
 
     render() {
         return (
-            <div>Under Development...</div>
+            <div>
+                <div>Under Development...</div>
+            </div>
         );
     }
 }
 
-export default PVEDoudizhuDemoView;
+export default PvEDoudizhuDemoView;

src/view/PVEView/index.js

@@ -1,3 +1,3 @@
-import PVEDoudizhuDemoView from './PVEDoudizhuDemoView';
+import PvEDoudizhuDemoView from './PvEDoudizhuDemoView';
 
-export {PVEDoudizhuDemoView};
+export {PvEDoudizhuDemoView};