Added student list of class

client/src/app/actions/students.js

@@ -0,0 +1,9 @@
+import axios from 'axios';
+import { FETCH_STUDENTS } from '../constants/actionTypes';
+
+export const fetchStudents = classId => {
+    return async dispatch => {
+        const res = await axios.get(`/api/classes/${classId}`);
+        dispatch({ type: FETCH_STUDENTS, payload: res.data });
+    };
+};

client/src/app/constants/actionTypes.js

@@ -2,3 +2,4 @@ export const GET_ERRORS = 'GET_ERRORS';
 export const SET_CURRENT_USER = 'SET_CURRENT_USER';
 
 export const FETCH_CLASSES = 'FETCH_CLASSES';
+export const FETCH_STUDENTS = 'FETCH_STUDENTS';

client/src/app/helpers/formatTime.js

@@ -1,4 +1,4 @@
-const getFormatedTime = dateTime => {
+const getFormattedTime = dateTime => {
     return new Date(dateTime).toDateString();
 };
-export default getFormatedTime;
+export default getFormattedTime;

client/src/app/layout/components/Router.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
-import Home from '../../routes/home/Home';
-import Login from '../../routes/login/Login';
-import Register from '../../routes/register/Register';
+import Home from 'app/routes/home/Home';
+import Login from 'app/routes/login/Login';
+import Register from 'app/routes/register/Register';
+import Class from 'app/routes/class/Class';
 const Router = () => (
     <Switch>
         <Route exact path="/" component={Home} />
         <Route exact path="/login" component={Login} />
         <Route exact path="/register" component={Register} />
+        <Route exact path="/class/:classId" component={Class} />
     </Switch>
 );
 export default Router;

client/src/app/reducers/classesReducer.js

@@ -3,7 +3,7 @@ import { FETCH_CLASSES } from '../constants/actionTypes';
 export default function(state = [], action) {
     switch (action.type) {
         case FETCH_CLASSES:
-            return action.payload || [];
+            return action.payload.reverse() || [];
         default:
             return state;
     }

client/src/app/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from 'redux';
 import errorReducer from './errorReducer';
 import authReducer from './authReducer';
 import classesReducer from './classesReducer';
+import studentsReducer from './studentsReducer';
 
 export default combineReducers({
     errors: errorReducer,
     auth: authReducer,
     classes: classesReducer,
+    students: studentsReducer,
 });

client/src/app/reducers/studentsReducer.js

@@ -0,0 +1,10 @@
+import { FETCH_STUDENTS } from '../constants/actionTypes';
+
+export default function(state = [], action) {
+    switch (action.type) {
+        case FETCH_STUDENTS:
+            return action.payload.reverse() || [];
+        default:
+            return state;
+    }
+}

client/src/app/routes/class/Class.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import StudentList from './containers/StudentList';
+class Class extends Component {
+    render() {
+        debugger;
+        return (
+            <div className="class-page">
+                <section className="hero is-primary">
+                    <div className="hero-body">
+                        <div className="container">
+                            <h1 className="title">Primary title</h1>
+                            <h2 className="subtitle">Primary subtitle</h2>
+                        </div>
+                    </div>
+                </section>
+                <StudentList classId={this.props.match.params.classId} />
+            </div>
+        );
+    }
+}
+
+export default Class;

client/src/app/routes/class/components/StudentItem.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const StudentItem = ({ fullName, email }) => {
+    return (
+        <div className="column is-half">
+            <div className="box u-hover-effect ">
+                <article className="media">
+                    <div className="media-content">
+                        <div className="content">
+                            <p>
+                                <span className="tag is-light is-medium">
+                                    <strong className="is-white">{fullName}</strong>{' '}
+                                </span>
+                                <br />
+
+                                <strong>Email: </strong>
+                                {email}
+                            </p>
+                        </div>
+                    </div>
+                </article>
+            </div>
+        </div>
+    );
+};
+
+export default StudentItem;

client/src/app/routes/class/containers/StudentList.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import StudentItem from '../components/StudentItem';
+import { connect } from 'react-redux';
+import { fetchStudents } from 'app/actions/students';
+
+class StudentList extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    componentDidMount() {
+        this.props.fetchStudents(this.props.classId);
+    }
+    renderList(students) {
+        return students.map(({ _id, fullName, email }) => {
+            return <StudentItem key={_id} fullName={fullName} email={email} />;
+        });
+    }
+    render() {
+        return (
+            <section className="section">
+                <div className="container">
+                    <div className="columns is-multiline is-desktop ">{this.renderList(this.props.students)}</div>
+                </div>
+            </section>
+        );
+    }
+}
+const mapStateToProps = state => ({
+    students: state.students,
+});
+export default connect(
+    mapStateToProps,
+    { fetchStudents },
+)(StudentList);

client/src/app/routes/home/components/ClassItem.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import getFormatedTime from 'app/helpers/formatTime';
+import { withRouter } from 'react-router-dom';
 
-const ClassItem = ({ name, description, course, startedTime, endedTime, updatedAt }) => {
+const ClassItem = ({ _id, name, description, course, startedTime, endedTime, updatedAt, history }) => {
+    const onClassItemClicked = () => {
+        history.push(`class/${_id}`);
+    };
     return (
         <div className="column is-one-quarter">
-            <div className="box">
+            <div className="box u-hover-effect " onClick={() => onClassItemClicked()}>
                 <article className="media">
                     <div className="media-content">
                         <div className="content">
@@ -31,11 +35,10 @@ const ClassItem = ({ name, description, course, startedTime, endedTime, updatedA
                             </p>
                         </div>
                     </div>
-                    <div className="media-right" />
                 </article>
             </div>
         </div>
     );
 };
 
-export default ClassItem;
+export default withRouter(ClassItem);

client/src/app/routes/home/containers/ClassList.js

@@ -8,11 +8,11 @@ class ClassList extends Component {
         this.props.fetchClasses();
     }
     renderList(classes) {
-        debugger;
-        return classes.reverse().map(({ _id, name, description, course, startedTime, endedTime, updatedAt }) => {
+        return classes.map(({ _id, name, description, course, startedTime, endedTime, updatedAt }) => {
             return (
                 <ClassItem
                     key={_id}
+                    _id={_id}
                     name={name}
                     description={description}
                     course={course}

client/src/styles/abstracts/_utils.scss

@@ -25,3 +25,10 @@
 .u-margin-top-big {
   margin-top: 8rem !important;
 }
+.u-hover-effect {
+  cursor: pointer;
+  transition: all .2s;
+  &:hover {
+    transform: scale(1.05);
+  }
+}

client/src/styles/main.css

@@ -26814,3 +26814,9 @@ body {
 
 .u-margin-top-big {
   margin-top: 8rem !important; }
+
+.u-hover-effect {
+  cursor: pointer;
+  transition: all .2s; }
+  .u-hover-effect:hover {
+    transform: scale(1.05); }

routes/class.js

@@ -21,15 +21,22 @@ router.get('/', async (req, res) => {
     }
 });
 router.get('/:classId/', async (req, res) => {
-    let classId = new mongoose.Types.ObjectId(req.params.classId);
     try {
+        let classId = new mongoose.Types.ObjectId(req.params.classId);
         await AccessCode.find({
             class: classId,
         })
             .populate('user')
             .exec((err, accessCodes) => {
                 if (err) return res.status(422).json(err);
-                res.json(accessCodes);
+                let users = accessCodes
+                    .map(accessCode => {
+                        return accessCode.user;
+                    })
+                    .filter(user => {
+                        return user !== undefined;
+                    });
+                res.json(users);
             });
     } catch (err) {
         res.status(422).json(err);