detect leaderboard agent / game change and reset pagination

src/components/MenuBar.js

@@ -130,9 +130,11 @@ function MenuBar (props) {
 
     const history = useHistory();
     const handleGameJump = (gameName) => {
+        props.resetPagination();
         history.push(`/leaderboard?type=game&name=${gameName}`);
     }
     const handleAgentJump = (agentName) => {
+        props.resetPagination();
         history.push(`/leaderboard?type=agent&name=${agentName}`);
     }
 

src/view/LeaderBoard.js

@@ -71,8 +71,6 @@ function LeaderBoard () {
     }
     console.log(requestUrl);
 
-    // todo: detect type change then reset page and page size
-
     useEffect(() => {
         async function fetchData() {
             const res = await axios.get(requestUrl);
@@ -92,7 +90,13 @@ function LeaderBoard () {
 
     return (
         <div>
-            <MenuBar gameList={gameList} modelList={modelList} reloadMenu={reloadMenu} setReloadMenu={setReloadMenu}/>
+            <MenuBar
+                gameList={gameList}
+                modelList={modelList}
+                reloadMenu={reloadMenu}
+                setReloadMenu={setReloadMenu}
+                resetPagination={() => {setPage(0); setRowsPerPage(initRowsPerPage);}}
+            />
             <div style={{marginLeft: '250px'}}>
                 <div style={{padding: 20}}>
                     <EnhancedTable