Skip to content

Commit 11a9a94

Browse files
chrisinajarchrisinajar
committed
add top 100 list
1 parent 797efc3 commit 11a9a94

File tree

9 files changed

+203
-94
lines changed

9 files changed

+203
-94
lines changed

‎src/App.js renamed to ‎src/App.jsx

File renamed without changes.

‎src/api/top.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Request from "config-request";
2+
3+
export async function getTopPlayers() {
4+
return new Promise((resolve, reject) => {
5+
Request.get("/top", {}, function (err, data) {
6+
if (err) {
7+
reject(err);
8+
}
9+
resolve(data ? data : null);
10+
});
11+
});
12+
}

‎src/components/drawer.js

Lines changed: 112 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,81 @@
11
import React from "react";
2-
import globalHook from 'use-global-hook';
2+
import globalHook from "use-global-hook";
33
import { classNames } from "react-extras";
44
import { useHistory } from "react-router-dom";
55

6-
import { makeStyles, useTheme } from '@material-ui/core/styles';
7-
import Avatar from '@material-ui/core/Avatar';
8-
import Divider from '@material-ui/core/Divider';
9-
import Drawer from '@material-ui/core/Drawer';
10-
import IconButton from '@material-ui/core/IconButton';
11-
import List from '@material-ui/core/List';
12-
import ListItem from '@material-ui/core/ListItem';
13-
import ListItemIcon from '@material-ui/core/ListItemIcon';
14-
import ListItemText from '@material-ui/core/ListItemText';
6+
import { makeStyles, useTheme } from "@material-ui/core/styles";
7+
import Avatar from "@material-ui/core/Avatar";
8+
import Divider from "@material-ui/core/Divider";
9+
import Drawer from "@material-ui/core/Drawer";
10+
import IconButton from "@material-ui/core/IconButton";
11+
import List from "@material-ui/core/List";
12+
import ListItem from "@material-ui/core/ListItem";
13+
import ListItemIcon from "@material-ui/core/ListItemIcon";
14+
import ListItemText from "@material-ui/core/ListItemText";
1515

16-
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
17-
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
18-
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
19-
import GroupIcon from '@material-ui/icons/Group';
20-
import SettingsIcon from '@material-ui/icons/Settings';
21-
import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
16+
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
17+
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
18+
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
19+
import GroupIcon from "@material-ui/icons/Group";
20+
import SettingsIcon from "@material-ui/icons/Settings";
21+
import SupervisorAccountIcon from "@material-ui/icons/SupervisorAccount";
22+
import EmojiEventsIcon from "@material-ui/icons/EmojiEvents";
2223
// import InboxIcon from '@material-ui/icons/Inbox';
2324
// import MailIcon from '@material-ui/icons/Mail';
2425

25-
import { useUserState } from './auth';
26+
import { useUserState } from "./auth";
2627

27-
const useStyles = makeStyles(theme => ({
28+
const useStyles = makeStyles((theme) => ({
2829
drawer: {
2930
flexShrink: 0,
30-
whiteSpace: 'nowrap',
31+
whiteSpace: "nowrap",
3132
},
3233
drawerOpen: {
33-
width: drawerWidth => drawerWidth,
34-
transition: theme.transitions.create('width', {
34+
width: (drawerWidth) => drawerWidth,
35+
transition: theme.transitions.create("width", {
3536
easing: theme.transitions.easing.sharp,
3637
duration: theme.transitions.duration.enteringScreen,
3738
}),
3839
},
3940
drawerClose: {
40-
transition: theme.transitions.create('width', {
41+
transition: theme.transitions.create("width", {
4142
easing: theme.transitions.easing.sharp,
4243
duration: theme.transitions.duration.leavingScreen,
4344
}),
44-
overflowX: 'hidden',
45+
overflowX: "hidden",
4546
width: theme.spacing(7) + 1,
46-
[theme.breakpoints.up('sm')]: {
47+
[theme.breakpoints.up("sm")]: {
4748
width: theme.spacing(9) + 1,
4849
},
4950
},
5051
toolbar: {
51-
display: 'flex',
52-
alignItems: 'center',
53-
justifyContent: 'flex-end',
52+
display: "flex",
53+
alignItems: "center",
54+
justifyContent: "flex-end",
5455
padding: theme.spacing(0, 1),
5556
...theme.mixins.toolbar,
5657
},
5758
}));
5859

5960
const initialState = {
6061
open: false,
61-
drawerWidth: 240
62+
drawerWidth: 240,
6263
};
6364

6465
const actions = {
6566
toggleDrawer: (store) => {
6667
store.setState({
67-
open: !store.state.open
68+
open: !store.state.open,
6869
});
6970
},
7071
openDrawer: (store) => {
7172
store.setState({
72-
open: true
73+
open: true,
7374
});
7475
},
7576
closeDrawer: (store) => {
7677
store.setState({
77-
open: false
78+
open: false,
7879
});
7980
},
8081
};
@@ -94,82 +95,102 @@ export default function AppDrawer(props) {
9495
history.push(entry.path);
9596
}
9697

97-
const menuItems = [{
98-
icon: GroupIcon,
99-
text: 'Your Teams',
100-
path: '/team'
101-
}, {
102-
icon: GroupIcon,
103-
text: 'All Teams',
104-
path: '/team/list'
105-
}, {
106-
icon: SettingsIcon,
107-
text: 'Manage Team',
108-
path: '/team/manage'
109-
},
110-
'divider',
111-
{
112-
icon: ExitToAppIcon,
113-
text: 'Logout',
114-
path: '/logout'
115-
}];
98+
const menuItems = [
99+
{
100+
icon: EmojiEventsIcon,
101+
text: "Top Players",
102+
path: "/top",
103+
},
104+
{
105+
icon: GroupIcon,
106+
text: "Your Teams",
107+
path: "/team",
108+
},
109+
{
110+
icon: GroupIcon,
111+
text: "All Teams",
112+
path: "/team/list",
113+
},
114+
{
115+
icon: SettingsIcon,
116+
text: "Manage Team",
117+
path: "/team/manage",
118+
},
119+
"divider",
120+
{
121+
icon: ExitToAppIcon,
122+
text: "Logout",
123+
path: "/logout",
124+
},
125+
];
116126

117127
if (userState.user.isAdmin) {
118128
const logout = menuItems.pop();
119129
menuItems.push({
120130
icon: SupervisorAccountIcon,
121-
text: 'Admin',
122-
path: '/admin'
131+
text: "Admin",
132+
path: "/admin",
123133
});
124-
menuItems.push('divider')
134+
menuItems.push("divider");
125135
menuItems.push(logout);
126136
}
127137

128138
return (
129139
<Drawer
130-
variant="permanent"
131-
className={classNames(classes.drawer, {
140+
variant="permanent"
141+
className={classNames(classes.drawer, {
142+
[classes.drawerOpen]: open,
143+
[classes.drawerClose]: !open,
144+
})}
145+
classes={{
146+
paper: classNames({
132147
[classes.drawerOpen]: open,
133148
[classes.drawerClose]: !open,
134-
})}
135-
classes={{
136-
paper: classNames({
137-
[classes.drawerOpen]: open,
138-
[classes.drawerClose]: !open,
139-
}),
140-
}}
141-
open={open}
142-
>
143-
<div className={ classes.toolbar }>
144-
<IconButton onClick={ drawerActions.closeDrawer }>
145-
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
146-
</IconButton>
147-
</div>
148-
<Divider />
149-
<List>
150-
<ListItem button onClick={() => handleMenuEntry({ path: '/' })}>
149+
}),
150+
}}
151+
open={open}
152+
>
153+
<div className={classes.toolbar}>
154+
<IconButton onClick={drawerActions.closeDrawer}>
155+
{theme.direction === "rtl" ? (
156+
<ChevronRightIcon />
157+
) : (
158+
<ChevronLeftIcon />
159+
)}
160+
</IconButton>
161+
</div>
162+
<Divider />
163+
<List>
164+
<ListItem button onClick={() => handleMenuEntry({ path: "/" })}>
165+
<ListItemIcon>
166+
<Avatar
167+
alt={userState.user.profile.name}
168+
src={userState.user.profile.avatar}
169+
/>
170+
</ListItemIcon>
171+
<ListItemText
172+
primary={userState.user.profile.name}
173+
secondary={`MMR: ${userState.user.mmr}`}
174+
/>
175+
</ListItem>
176+
{menuItems.map((entry, index) => {
177+
if (entry === "divider") {
178+
return <Divider key={"divider" + index} />;
179+
}
180+
return (
181+
<ListItem
182+
button
183+
key={entry.text}
184+
onClick={() => handleMenuEntry(entry)}
185+
>
151186
<ListItemIcon>
152-
<Avatar
153-
alt={ userState.user.profile.name }
154-
src={ userState.user.profile.avatar }
155-
/>
187+
<entry.icon />
156188
</ListItemIcon>
157-
<ListItemText
158-
primary={ userState.user.profile.name }
159-
secondary={ `MMR: ${userState.user.mmr}` } />
189+
<ListItemText primary={entry.text} />
160190
</ListItem>
161-
{menuItems.map((entry, index) => {
162-
if (entry === 'divider') {
163-
return <Divider key={'divider' + index} />;
164-
}
165-
return (
166-
<ListItem button key={entry.text} onClick={() => handleMenuEntry(entry)}>
167-
<ListItemIcon><entry.icon /></ListItemIcon>
168-
<ListItemText primary={entry.text} />
169-
</ListItem>
170-
);
171-
})}
172-
</List>
191+
);
192+
})}
193+
</List>
173194
</Drawer>
174195
);
175196
}

‎src/components/pages/manage-team/player-list.js renamed to ‎src/components/pages/manage-team/player-list.jsx

File renamed without changes.

‎src/components/pages/manage-team/team-list.js renamed to ‎src/components/pages/manage-team/team-list.jsx

File renamed without changes.

‎src/components/pages/overview.js renamed to ‎src/components/pages/overview.jsx

File renamed without changes.

‎src/components/pages/standard-page.js renamed to ‎src/components/pages/standard-page.jsx

File renamed without changes.

‎src/components/pages/top-players.jsx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, { useEffect, useState } from "react";
2+
import { getTopPlayers } from "../../api/top";
3+
4+
import Grid from "@material-ui/core/Grid";
5+
import List from "@material-ui/core/List";
6+
import ListItem from "@material-ui/core/ListItem";
7+
import ListItemText from "@material-ui/core/ListItemText";
8+
import Paper from "@material-ui/core/Paper";
9+
import Typography from "@material-ui/core/Typography";
10+
11+
import { useUserState } from "../auth";
12+
import StandardPage from "./standard-page";
13+
14+
export default function TopPlayers() {
15+
const [topPlayerData, setTopPlayerData] = useState([]);
16+
useEffect(() => {
17+
async function fetchData() {
18+
const data = await getTopPlayers();
19+
setTopPlayerData(data);
20+
}
21+
fetchData();
22+
}, []);
23+
24+
const [{ user }] = useUserState();
25+
26+
return (
27+
<StandardPage>
28+
<Typography variant="h2" gutterBottom>
29+
{`Top Players`}
30+
</Typography>
31+
<List>
32+
<ListItem>
33+
<Grid container>
34+
<Grid item xs={1}>
35+
<Typography variant="h6">Rank</Typography>
36+
</Grid>
37+
<Grid item xs={5}>
38+
<Typography variant="h5">Player Name</Typography>
39+
</Grid>
40+
<Grid item xs={5}>
41+
<Typography variant="h6">MMR</Typography>
42+
</Grid>
43+
</Grid>
44+
</ListItem>
45+
{topPlayerData.map((player, i) => (
46+
<ListItem key={player.steamid}>
47+
<Grid container>
48+
<Grid item xs={1}>
49+
<Typography variant="h6">{i + 1}</Typography>
50+
</Grid>
51+
<Grid item xs={5}>
52+
{user.steamid === player.steamid && (
53+
<Typography variant="h5">
54+
<strong>
55+
<i>{player.name}</i>
56+
</strong>
57+
</Typography>
58+
)}
59+
{user.steamid !== player.steamid && (
60+
<Typography variant="h5">{player.name}</Typography>
61+
)}
62+
</Grid>
63+
<Grid item xs={5}>
64+
<Typography variant="h6">{player.mmr.toFixed(2)}</Typography>
65+
</Grid>
66+
</Grid>
67+
</ListItem>
68+
))}
69+
</List>
70+
</StandardPage>
71+
);
72+
}

‎src/components/routes.js renamed to ‎src/components/routes.jsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from "react";
22
import { Switch, Route } from "react-router-dom";
33

4-
import FourOhFour from './404';
5-
import Admin from './pages/admin';
4+
import FourOhFour from "./404";
5+
import Admin from "./pages/admin";
66
import Overview from "./pages/overview";
7-
import ManageTeam from './pages/manage-team';
7+
import ManageTeam from "./pages/manage-team";
8+
import TopPlayers from "./pages/top-players";
89

910
export default function Routes() {
1011
return (
@@ -15,6 +16,9 @@ export default function Routes() {
1516
<Route path="/team/:action/*">
1617
<ManageTeam />
1718
</Route>
19+
<Route path="/top">
20+
<TopPlayers />
21+
</Route>
1822
<Route path="/team/:action">
1923
<ManageTeam />
2024
</Route>

0 commit comments

Comments
 (0)