Overdue tasks page

src/browser/components/molecules/OverdueTaskList/index.css

@@ -0,0 +1,3 @@
+td{
+  max-width: 600px;
+}

src/browser/components/molecules/OverdueTaskList/index.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react'
+import {fetchURL, toStandardDate } from '../../../common/utils'
+import moment from 'moment'
+import styles from './index.css'
+
+export default class OverdueTaskList extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      tasks:[]
+    }
+  }
+
+  componentDidMount(){
+    fetchURL('api/task/tasksAndUsers')
+    .then(results => {
+    this.setState({
+      tasks: results.filter(this.isOverdue),
+      })
+    })
+    .catch(err => {
+      return err
+    })
+  }
+
+
+  findEmailByUUID( user_id ){
+    for( let task of this.state.tasks ){
+      if( task.user_id == user_id ){
+        if(task.email !== null) {
+          return (
+            <a href={`mailto:${task.email}`}>
+              {task.github_handle}
+            </a>
+          )
+        } else {
+          return task.github_handle
+        }
+      }
+    }
+  }
+
+  isOverdue(task){
+    if (moment().isAfter(task.due_date) && task.is_complete === false){
+      return true
+    }
+  }
+
+  daysOverdue(task_due_date) {
+    let diffInDays = Math.abs(moment(task_due_date).diff(moment(), 'days'))
+
+    return (
+      <span className="label label-danger">Overdue By: {diffInDays} days</span>
+    )
+  }
+
+  render() {
+    return (
+      <div className='panel panel-info'>
+        <div className='panel-heading'>
+          <div className='panel-title'>Overdue Tasks</div>
+        </div>
+        <div className='panel-body'>
+          <div className='list-group'>
+            <table className='table'>
+              <thead>
+                <tr>
+                  <th> GitHub Handle </th>
+                  <th> Title </th>
+                  <th> Description </th>
+                  <th> Days Overdue </th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.state.tasks.map(task =>
+                  <tr key={task.id}>
+                    <td>
+                      {this.findEmailByUUID(task.user_id)}
+                    </td>
+                    <td>
+                      {task.title}
+                    </td>
+                    <td>
+                      {task.description}
+                    </td>
+                    <td>
+                      {this.daysOverdue(task.due_date)}
+                    </td>
+                  </tr>)}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

src/browser/components/pages/Dashboard/index.js

@@ -5,7 +5,7 @@ import GenericDashboard from '../GenericDashboard/index'
 import MentorDashboard from '../MentorDashboard/index'
 import NewbieDashboard from '../NewbieDashboard/index'
 import TemplateTask from '../TemplateTask/index'
-import {browserHistory} from 'react-router'
+import {Link, browserHistory} from 'react-router'
 
 export default class Dashboard extends Component {
 
@@ -40,6 +40,7 @@ export default class Dashboard extends Component {
     if(user.role === 'admin') {
       return (<div>
                 <h3>Admin Dashboard</h3>
+                <Link to={'/overdue_tasks'} > Overdue Tasks </Link>
                 <TemplateTask />
               </div>)
     } else if (user.role === 'mentor') {

src/browser/components/pages/OverdueTask/index.js

@@ -0,0 +1,18 @@
+import  React, { Component } from 'react'
+import OverdueTaskList from '../../molecules/OverdueTaskList/index'
+import { fetchURL, toStandardDate } from '../../../common/utils'
+import moment from 'moment'
+
+export default class OverdueTask extends Component {
+
+  render() {
+    return (
+      <div className='container'>
+        <div>
+          <h1>Overdue Tasks</h1>
+        </div>
+        <OverdueTaskList/>
+      </div>
+    )
+  }
+}

src/browser/main.js

@@ -5,13 +5,15 @@ import { Router, Route, Link, browserHistory } from 'react-router'
 import TemplateTask from './components/pages/TemplateTask/index'
 import Signup from './components/pages/Signup/index'
 import Dashboard from './components/pages/Dashboard'
+import OverdueTask from './components/pages/OverdueTask'
 
 class Root extends Component {
   render() {
     return (
       <Router history={browserHistory}>
         <Route path='/' component={Dashboard} />
         <Route path='/signup' component={Signup} />
+        <Route path='/overdue_tasks' component={OverdueTask} />
         <Route path='/template_tasks' component={TemplateTask}/>
       </Router>
     )

src/database/queries/task.js

@@ -9,6 +9,9 @@ const add = attributes =>
 const getAll = () =>
   _.findAll( 'task' )
 
+const getTasksAndUsers = () =>
+  knex.select('*').from('task').leftJoin('users', 'task.user_id', 'users.id')
+
 const getBy = ( column, data ) =>
   _.findAllWhere( 'task', column, data )
 
@@ -49,5 +52,6 @@ export { add,
          update,
          expunge,
          deleteAll,
+         getTasksAndUsers,
          convertTemplateTasks,
          addTemplateTasksByRole }

src/routes/task.js

@@ -47,9 +47,11 @@ router.post('/:task_id', (request, response, next) => {
     console.log(`Error loading user ${currentUser.handle}, or Task id ${task_id}.`);
     throw err
   })
+})
 
-
-
+router.get('/tasksAndUsers', (request, response, next) => {
+  task.getTasksAndUsers()
+  .then(results => response.json(results))
 })
 
 export default router

src/routes/users.js

@@ -35,6 +35,9 @@ router.post('/', (request, response, next) => {
   })
 })
 
-
+router.get('/all', function(request, response){
+  users.findAll()
+  .then(results => response.json(results))
+})
 
 export default router