refactor navbar to functional component

This commit is contained in:
Songyi Huang 2021-04-13 22:23:58 -07:00
parent 66639d1aa8
commit fa35a34355
5 changed files with 46 additions and 44 deletions

View File

@ -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>
);

View File

@ -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={"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>{this.state.stars} stars</span></div>
<div className={"github-text"}>Github<br /><span>{stars} stars</span></div>
</div>
</div>
</AppBar>
)
}
}
export default Navbar;

View File

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

View File

@ -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>
<div>Under Development...</div>
</div>
);
}
}
export default PVEDoudizhuDemoView;
export default PvEDoudizhuDemoView;

View File

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