2021-07-06 20:41:47 +00:00
|
|
|
import React from "react";
|
|
|
|
import { useQuery } from "react-query";
|
|
|
|
import axios from "axios";
|
2021-07-09 03:10:04 +00:00
|
|
|
import { BrowserRouter, Switch, Route } from "react-router-dom";
|
2021-07-06 20:41:47 +00:00
|
|
|
import { Container } from "@chakra-ui/react";
|
|
|
|
|
|
|
|
import Search from "./Search";
|
|
|
|
import Player from "./Player";
|
|
|
|
import Statistic from "./Statistic";
|
|
|
|
|
|
|
|
const App = () => {
|
|
|
|
const statistics = useQuery(
|
|
|
|
"statistics",
|
|
|
|
async () => {
|
|
|
|
const { data } = await axios.get("/api/statistics");
|
|
|
|
return data;
|
|
|
|
},
|
|
|
|
{
|
|
|
|
placeholderData: [],
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
|
|
|
const players = useQuery(
|
|
|
|
"players",
|
|
|
|
async () => {
|
|
|
|
const { data } = await axios.get("/api/players");
|
|
|
|
return data;
|
|
|
|
},
|
|
|
|
{
|
|
|
|
placeholderData: [],
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Container>
|
|
|
|
<BrowserRouter>
|
|
|
|
<Switch>
|
|
|
|
<Route
|
|
|
|
path="/statistic/:type/:name"
|
|
|
|
render={(routeProps) => (
|
|
|
|
<Statistic
|
|
|
|
type={routeProps.match.params.type}
|
|
|
|
name={routeProps.match.params.name}
|
|
|
|
players={players}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path="/player/:id"
|
|
|
|
render={(routeProps) => (
|
|
|
|
<Player playerId={routeProps.match.params.id} players={players} />
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
<Route>
|
|
|
|
<Search statistics={statistics.data} players={players.data} />
|
|
|
|
</Route>
|
|
|
|
</Switch>
|
|
|
|
</BrowserRouter>
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default App;
|