[APP]: Create HallOfFame page

Author: cnasikas

app/src/routes/app.js

@@ -6,10 +6,12 @@ import AssignmentList from 'views/Assignments/AssignmentList'
 import SingleAssignment from 'views/Assignments/Assignment'
 import LoginCallback from 'views/Callbacks/LoginCallback.js'
 import Home from 'views/Home/Home.js'
+import HallOfFame from 'views/Stats/HallOfFame'
 
 import {
   Class,
-  Assignment
+  Assignment,
+  Poll
 } from '@material-ui/icons/'
 
 const appRoutes = [
@@ -48,6 +50,13 @@ const appRoutes = [
   {
     path: '/loginCallback',
     component: LoginCallback
+  },
+  {
+    path: '/hall-of-fame',
+    sidebarName: 'Hall of Fame',
+    icon: Poll,
+    component: HallOfFame,
+    show: true
   }
 ]
 

app/src/views/Stats/HallOfFame.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { withStyles } from '@material-ui/core/styles'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableHead from '@material-ui/core/TableHead'
+import TableRow from '@material-ui/core/TableRow'
+
+import {
+  statsActions
+} from '../../actions'
+
+const topUsers = statsActions.topUsers
+
+const styles = theme => ({
+  jumbotron: {
+    fontSize: '100%'
+  },
+  button: {
+    margin: theme.spacing.unit
+  },
+  buttonFirst: {
+    marginLeft: 0
+  }
+})
+
+class HallOfFame extends React.Component {
+  componentDidMount () {
+    this.props.actions.topUsers().catch(e => console.log(e))
+  }
+
+  render () {
+    return (
+      <div>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Username</TableCell>
+              <TableCell>Total Assignments Solved</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {this.props.stats.topUsers.map(user => (
+              <TableRow key={user.id}>
+                <TableCell component='th' scope='row'>
+                  {user.username}
+                </TableCell>
+                <TableCell>{user.solved}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    stats: state.stats
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    actions: bindActionCreators({ topUsers }, dispatch)
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(HallOfFame))