Merge pull request #24 from hellokritty/fe_leaderByTopic

added leaderboard frontend component

client/actions/leaderActions.js

@@ -0,0 +1,34 @@
+/**
+ * ************************************
+ *
+ * @module  leaderActions.js
+ * @author Kritika & Aris
+ * @date 02/26/2020
+ * @description Action Creators for leaderReducer
+ *
+ * ************************************
+ */
+
+// import actionType constants
+import axios from "axios";
+import * as types from "../constants/actionTypes";
+
+
+// CHECK BACK ON THIS - NOT QUITE DONE YET**
+export const getLeaderBoard = () => dispatch =>
+    axios
+        .get("/api/leaderboard")
+        .then(({ data }) => {
+            if (!data.isLoggedIn) {
+              dispatch({
+                type: types.USER_LOGOUT,
+                payload: data,
+              })
+            }
+            else {
+                dispatch({
+                    type: types.LEADER_BY_TOPIC,
+                    payload: data
+                })
+            }
+        })

client/components/LeaderBox.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const LeaderBox = ({
+    mentorId,
+    username,
+    totalSnaps,
+    ranking
+}) => (
+    <tr>
+        <td>{ranking}</td>
+        <td>{username}</td>
+        <td>{totalSnaps}</td>
+    </tr>
+);
+
+export default LeaderBox;

client/components/RightNav.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import Button from 'react-bootstrap/Button';
+import LeaderBoard from '../containers/LeaderBoard.jsx';
 
 const RightNav = props => (
   <Navbar bg="dark" variant="dark" className="flex-column navbar-right">
@@ -12,6 +13,7 @@ const RightNav = props => (
     </div>
     <hr />
     <h3>Leaderboard</h3>
+    <LeaderBoard />
   </Navbar>
 );
 

client/constants/actionTypes.js

@@ -27,3 +27,4 @@ export const CANCEL_ACCEPT = 'CANCEL_ACCEPT';
 export const USER_LOGIN = 'USER_LOGIN';
 export const LOAD_USER = 'LOAD_USER';
 export const USER_LOGOUT = 'USER_LOGOUT';
+export const LEADER_BY_TOPIC = 'LEADER_BY_TOPIC';

client/containers/LeaderBoard.jsx

@@ -0,0 +1,80 @@
+/**
+ * ************************************
+ *
+ * @module  FeedContainer
+ * @author
+ * @date
+ * @description container that renders TicketBox and TicketCreator
+ *
+ * ************************************
+ */
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Table } from 'react-bootstrap';
+import { bindActionCreators } from 'redux';
+import * as actions from '../actions/leaderActions';
+
+import LeaderBox from '../components/LeaderBox';
+
+
+const mapStateToProps = state => ({
+    leaderList: state.leader.leaderList
+  });
+
+const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
+
+class LeaderBoard extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.props.getLeaderBoard();
+    }
+
+    render() {
+        let leaderList; 
+//this.props.leaderboard = [{leader 1},{leader 2},.....]
+        if (!this.props.leaderList || this.props.leaderList.length === 0) {
+            leaderList = <p>No current Rankings </p>;
+        } else {
+            leaderList = [];
+            for (let i = 0; i < this.props.leaderList.length; i++) {
+                console.log('leaderboard', this.props.leaderList[i])
+                let currentLeader;
+                currentLeader = (
+                <LeaderBox
+                key={`leader${i}`}
+                mentorId = {this.props.leaderList[i].mentor_id}
+                username={this.props.leaderList[i].name}
+                totalSnaps={this.props.leaderList[i].sum}
+                ranking={i+1}
+                />
+                )
+                leaderList.push(currentLeader);
+          }
+        }
+        return (
+            <div>
+                <Table>
+                    <thead>
+                    <tr>
+                        <th>Ranking</th>
+                        <th>Username</th>
+                        <th>Total Snaps</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {leaderList}
+                    </tbody>
+                </Table>
+            </div>
+        )
+    }
+}
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(LeaderBoard);

client/containers/Wrapper.jsx

@@ -24,8 +24,8 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
 const mapStateToProps = state => ({
-  totalSnaps: state.tickets.totalSnaps,
-  leaderBoard: state.tickets.leaderBoard,
+  // totalSnaps: state.tickets.totalSnaps,
+  // leaderBoard: state.tickets.leaderBoard,
   ticketsCount: state.tickets.ticketsCount,
   userAvatar: state.user.userAvatar,
   userName:state.user.userName,

client/reducers/leaderReducer.js

@@ -0,0 +1,32 @@
+/**
+ * ************************************
+ *
+ * @module  leaderReducer
+ * @author Kritika & Aris
+ * @date 2/26/20
+ * @description reducer for leaderboard by topic
+ *
+ * ************************************
+ */
+
+import * as types from "../constants/actionTypes";
+
+const leaderState = {
+    leaderList: [], 
+};
+
+const leaderReducer = (state = leaderState, action) => {
+    switch(action.type) {
+        case types.LEADER_BY_TOPIC: {
+            return {
+                leaderList: action.payload.leaderBoard
+            }
+        }
+
+        default:
+            return state;
+    }
+
+}
+
+export default leaderReducer;

client/reducers/reducers.js

@@ -14,12 +14,14 @@ import { combineReducers } from 'redux';
 // import all reducers here
 import ticketsReducer from './ticketsReducer';
 import userReducer from './userReducer';
+import leaderReducer from './leaderReducer';
 
 // combine reducers
 const reducers = combineReducers({
   // if we had other reducers, they would go here
   tickets: ticketsReducer,
   user: userReducer,
+  leader: leaderReducer
 });
 
 // make the combined reducers available for import

server/controllers/leaderboardController.js

@@ -5,16 +5,19 @@ const leaderboardController = {};
 leaderboardController.getLeaderBoard = (req, res, next) => {
     const getLeaderBoard = {
         text:`
-        SELECT mentor_id, users.name, SUM(snaps_given)
-        FROM tickets
-        INNER JOIN users ON users._id=mentor_id
+
+        SELECT SUM(snaps_given), mentor_id, users.name
+        FROM tickets 
+        INNER JOIN users ON users._id = mentor_id
         WHERE status = 'resolved'
         GROUP BY mentor_id, users.name
-        ORDER BY sum DESC
+        ORDER BY sum desc
+
         LIMIT 10;`}
 
     db.query(getLeaderBoard)
         .then(data => {
+            res.locals.leaderBoard = data.rows;
             return next();
         })
         .catch(err => next({