add top 100 list

OpenAngelArena · May 31, 2023 · 11a9a94 · 11a9a94
1 parent 797efc3
commit 11a9a94
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 94 deletions.
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
diff --git a/src/api/top.js b/src/api/top.js
@@ -0,0 +1,12 @@
+import Request from "config-request";
+
+export async function getTopPlayers() {
+  return new Promise((resolve, reject) => {
+    Request.get("/top", {}, function (err, data) {
+      if (err) {
+        reject(err);
+      }
+      resolve(data ? data : null);
+    });
+  });
+}
diff --git a/src/components/drawer.js b/src/components/drawer.js
@@ -1,80 +1,81 @@
 import React from "react";
-import globalHook from 'use-global-hook';
+import globalHook from "use-global-hook";
 import { classNames } from "react-extras";
 import { useHistory } from "react-router-dom";
 
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
-import Divider from '@material-ui/core/Divider';
-import Drawer from '@material-ui/core/Drawer';
-import IconButton from '@material-ui/core/IconButton';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import Avatar from "@material-ui/core/Avatar";
+import Divider from "@material-ui/core/Divider";
+import Drawer from "@material-ui/core/Drawer";
+import IconButton from "@material-ui/core/IconButton";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
 
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ExitToAppIcon from '@material-ui/icons/ExitToApp';
-import GroupIcon from '@material-ui/icons/Group';
-import SettingsIcon from '@material-ui/icons/Settings';
-import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import ExitToAppIcon from "@material-ui/icons/ExitToApp";
+import GroupIcon from "@material-ui/icons/Group";
+import SettingsIcon from "@material-ui/icons/Settings";
+import SupervisorAccountIcon from "@material-ui/icons/SupervisorAccount";
+import EmojiEventsIcon from "@material-ui/icons/EmojiEvents";
 // import InboxIcon from '@material-ui/icons/Inbox';
 // import MailIcon from '@material-ui/icons/Mail';
 
-import { useUserState } from './auth';
+import { useUserState } from "./auth";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   drawer: {
     flexShrink: 0,
-    whiteSpace: 'nowrap',
+    whiteSpace: "nowrap",
   },
   drawerOpen: {
-    width: drawerWidth => drawerWidth,
-    transition: theme.transitions.create('width', {
+    width: (drawerWidth) => drawerWidth,
+    transition: theme.transitions.create("width", {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
   },
   drawerClose: {
-    transition: theme.transitions.create('width', {
+    transition: theme.transitions.create("width", {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
-    overflowX: 'hidden',
+    overflowX: "hidden",
     width: theme.spacing(7) + 1,
-    [theme.breakpoints.up('sm')]: {
+    [theme.breakpoints.up("sm")]: {
       width: theme.spacing(9) + 1,
     },
   },
   toolbar: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
     padding: theme.spacing(0, 1),
     ...theme.mixins.toolbar,
   },
 }));
 
 const initialState = {
   open: false,
-  drawerWidth: 240
+  drawerWidth: 240,
 };
 
 const actions = {
   toggleDrawer: (store) => {
     store.setState({
-      open: !store.state.open
+      open: !store.state.open,
     });
   },
   openDrawer: (store) => {
     store.setState({
-      open: true
+      open: true,
     });
   },
   closeDrawer: (store) => {
     store.setState({
-      open: false
+      open: false,
     });
   },
 };
@@ -94,82 +95,102 @@ export default function AppDrawer(props) {
     history.push(entry.path);
   }
 
-  const menuItems = [{
-    icon: GroupIcon,
-    text: 'Your Teams',
-    path: '/team'
-  }, {
-    icon: GroupIcon,
-    text: 'All Teams',
-    path: '/team/list'
-  }, {
-    icon: SettingsIcon,
-    text: 'Manage Team',
-    path: '/team/manage'
-  },
-  'divider',
-  {
-    icon: ExitToAppIcon,
-    text: 'Logout',
-    path: '/logout'
-  }];
+  const menuItems = [
+    {
+      icon: EmojiEventsIcon,
+      text: "Top Players",
+      path: "/top",
+    },
+    {
+      icon: GroupIcon,
+      text: "Your Teams",
+      path: "/team",
+    },
+    {
+      icon: GroupIcon,
+      text: "All Teams",
+      path: "/team/list",
+    },
+    {
+      icon: SettingsIcon,
+      text: "Manage Team",
+      path: "/team/manage",
+    },
+    "divider",
+    {
+      icon: ExitToAppIcon,
+      text: "Logout",
+      path: "/logout",
+    },
+  ];
 
   if (userState.user.isAdmin) {
     const logout = menuItems.pop();
     menuItems.push({
       icon: SupervisorAccountIcon,
-      text: 'Admin',
-      path: '/admin'
+      text: "Admin",
+      path: "/admin",
     });
-    menuItems.push('divider')
+    menuItems.push("divider");
     menuItems.push(logout);
   }
 
   return (
     <Drawer
-        variant="permanent"
-        className={classNames(classes.drawer, {
+      variant="permanent"
+      className={classNames(classes.drawer, {
+        [classes.drawerOpen]: open,
+        [classes.drawerClose]: !open,
+      })}
+      classes={{
+        paper: classNames({
           [classes.drawerOpen]: open,
           [classes.drawerClose]: !open,
-        })}
-        classes={{
-          paper: classNames({
-            [classes.drawerOpen]: open,
-            [classes.drawerClose]: !open,
-          }),
-        }}
-        open={open}
-      >
-        <div className={ classes.toolbar }>
-          <IconButton onClick={ drawerActions.closeDrawer }>
-            {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-          </IconButton>
-        </div>
-        <Divider />
-        <List>
-            <ListItem button onClick={() => handleMenuEntry({ path: '/' })}>
+        }),
+      }}
+      open={open}
+    >
+      <div className={classes.toolbar}>
+        <IconButton onClick={drawerActions.closeDrawer}>
+          {theme.direction === "rtl" ? (
+            <ChevronRightIcon />
+          ) : (
+            <ChevronLeftIcon />
+          )}
+        </IconButton>
+      </div>
+      <Divider />
+      <List>
+        <ListItem button onClick={() => handleMenuEntry({ path: "/" })}>
+          <ListItemIcon>
+            <Avatar
+              alt={userState.user.profile.name}
+              src={userState.user.profile.avatar}
+            />
+          </ListItemIcon>
+          <ListItemText
+            primary={userState.user.profile.name}
+            secondary={`MMR: ${userState.user.mmr}`}
+          />
+        </ListItem>
+        {menuItems.map((entry, index) => {
+          if (entry === "divider") {
+            return <Divider key={"divider" + index} />;
+          }
+          return (
+            <ListItem
+              button
+              key={entry.text}
+              onClick={() => handleMenuEntry(entry)}
+            >
               <ListItemIcon>
-                <Avatar
-                  alt={ userState.user.profile.name }
-                  src={ userState.user.profile.avatar }
-                  />
+                <entry.icon />
               </ListItemIcon>
-              <ListItemText
-                primary={ userState.user.profile.name }
-                secondary={ `MMR: ${userState.user.mmr}` } />
+              <ListItemText primary={entry.text} />
             </ListItem>
-          {menuItems.map((entry, index) => {
-            if (entry === 'divider') {
-              return <Divider key={'divider' + index} />;
-            }
-            return (
-              <ListItem button key={entry.text} onClick={() => handleMenuEntry(entry)}>
-                <ListItemIcon><entry.icon /></ListItemIcon>
-                <ListItemText primary={entry.text} />
-              </ListItem>
-            );
-          })}
-        </List>
+          );
+        })}
+      </List>
     </Drawer>
   );
 }
diff --git a/...mponents/pages/manage-team/player-list.js → ...ponents/pages/manage-team/player-list.jsx b/...mponents/pages/manage-team/player-list.js → ...ponents/pages/manage-team/player-list.jsx
diff --git a/...components/pages/manage-team/team-list.js → ...omponents/pages/manage-team/team-list.jsx b/...components/pages/manage-team/team-list.js → ...omponents/pages/manage-team/team-list.jsx
diff --git a/src/components/pages/overview.js → src/components/pages/overview.jsx b/src/components/pages/overview.js → src/components/pages/overview.jsx
diff --git a/src/components/pages/standard-page.js → src/components/pages/standard-page.jsx b/src/components/pages/standard-page.js → src/components/pages/standard-page.jsx
diff --git a/src/components/pages/top-players.jsx b/src/components/pages/top-players.jsx
@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import { getTopPlayers } from "../../api/top";
+
+import Grid from "@material-ui/core/Grid";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";
+
+import { useUserState } from "../auth";
+import StandardPage from "./standard-page";
+
+export default function TopPlayers() {
+  const [topPlayerData, setTopPlayerData] = useState([]);
+  useEffect(() => {
+    async function fetchData() {
+      const data = await getTopPlayers();
+      setTopPlayerData(data);
+    }
+    fetchData();
+  }, []);
+
+  const [{ user }] = useUserState();
+
+  return (
+    <StandardPage>
+      <Typography variant="h2" gutterBottom>
+        {`Top Players`}
+      </Typography>
+      <List>
+        <ListItem>
+          <Grid container>
+            <Grid item xs={1}>
+              <Typography variant="h6">Rank</Typography>
+            </Grid>
+            <Grid item xs={5}>
+              <Typography variant="h5">Player Name</Typography>
+            </Grid>
+            <Grid item xs={5}>
+              <Typography variant="h6">MMR</Typography>
+            </Grid>
+          </Grid>
+        </ListItem>
+        {topPlayerData.map((player, i) => (
+          <ListItem key={player.steamid}>
+            <Grid container>
+              <Grid item xs={1}>
+                <Typography variant="h6">{i + 1}</Typography>
+              </Grid>
+              <Grid item xs={5}>
+                {user.steamid === player.steamid && (
+                  <Typography variant="h5">
+                    <strong>
+                      <i>{player.name}</i>
+                    </strong>
+                  </Typography>
+                )}
+                {user.steamid !== player.steamid && (
+                  <Typography variant="h5">{player.name}</Typography>
+                )}
+              </Grid>
+              <Grid item xs={5}>
+                <Typography variant="h6">{player.mmr.toFixed(2)}</Typography>
+              </Grid>
+            </Grid>
+          </ListItem>
+        ))}
+      </List>
+    </StandardPage>
+  );
+}
diff --git a/src/components/routes.js → src/components/routes.jsx b/src/components/routes.js → src/components/routes.jsx
@@ -1,10 +1,11 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 
-import FourOhFour from './404';
-import Admin from './pages/admin';
+import FourOhFour from "./404";
+import Admin from "./pages/admin";
 import Overview from "./pages/overview";
-import ManageTeam from './pages/manage-team';
+import ManageTeam from "./pages/manage-team";
+import TopPlayers from "./pages/top-players";
 
 export default function Routes() {
   return (
@@ -15,6 +16,9 @@ export default function Routes() {
       <Route path="/team/:action/*">
         <ManageTeam />
       </Route>
+      <Route path="/top">
+        <TopPlayers />
+      </Route>
       <Route path="/team/:action">
         <ManageTeam />
       </Route>