import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { fetchDataIfNeeded } from '../../actions/index'
import { setActivityExpanded, setStudentExpanded, setStudentsExpanded, setStudentSort } from '../../actions/dashboard'
import Dashboard from '../../components/dashboard/dashboard'
import SortByDropdown from '../../components/dashboard/sort-by-dropdown'
import Header from '../../components/common/header'
import DataFetchError from '../../components/report/data-fetch-error'
import LoadingIcon from '../../components/report/loading-icon'
import { getActivityTrees } from '../../selectors/report-tree'
import { getStudentProgress, getSortedStudents } from '../../selectors/dashboard-selectors'
import css from '../../../css/dashboard/dashboard-app.less'

// Make icons available.
import '../../../css/icomoon.css'

class DashboardApp extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      initialLoading: true
    }
  }

  componentDidMount () {
    const { fetchDataIfNeeded } = this.props
    fetchDataIfNeeded()
  }

  componentDidUpdate (prevProps) {
    const { initialLoading } = this.state
    const { isFetching } = this.props
    if (initialLoading && !isFetching && prevProps.isFetching) {
      this.setState({ initialLoading: false })
    }
  }

  render () {
    const { initialLoading } = this.state
    const { error, clazzName, activityTrees, students, lastUpdated, studentProgress, expandedStudents, expandedActivities, setActivityExpanded, setStudentExpanded, setStudentsExpanded, setStudentSort } = this.props
    return (
      <div className={css.dashboardApp}>
        <Header lastUpdated={lastUpdated} background='#6fc6da' />
        <div className={css.title}>
          <h1>Report for { clazzName }</h1>
          <SortByDropdown setStudentSort={setStudentSort} />
        </div>
        <div>
          {activityTrees && <Dashboard
            activities={activityTrees}
            students={students}
            studentProgress={studentProgress}
            expandedActivities={expandedActivities}
            expandedStudents={expandedStudents}
            setActivityExpanded={setActivityExpanded}
            setStudentExpanded={setStudentExpanded}
            setStudentsExpanded={setStudentsExpanded}
            setStudentSort={setStudentSort}
          />}
          {error && <DataFetchError error={error} />}
        </div>
        {initialLoading && <LoadingIcon />}
      </div>
    )
  }
}

function mapStateToProps (state) {
  const data = state.get('data')
  const error = data.get('error')
  const dataDownloaded = !error && !!data.get('lastUpdated')
  return {
    isFetching: data.get('isFetching'),
    lastUpdated: data.get('lastUpdated'),
    error: error,
    clazzName: dataDownloaded && state.getIn(['report', 'clazzName']),
    students: dataDownloaded && getSortedStudents(state),
    activityTrees: dataDownloaded && getActivityTrees(state),
    studentProgress: dataDownloaded && getStudentProgress(state),
    expandedActivities: state.getIn(['dashboard', 'expandedActivities']),
    expandedStudents: state.getIn(['dashboard', 'expandedStudents'])
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    fetchDataIfNeeded: () => dispatch(fetchDataIfNeeded()),
    setActivityExpanded: (activityId, value) => dispatch(setActivityExpanded(activityId, value)),
    setStudentExpanded: (studentId, value) => dispatch(setStudentExpanded(studentId, value)),
    setStudentsExpanded: (studentIds, value) => dispatch(setStudentsExpanded(studentIds, value)),
    setStudentSort: (value) => dispatch(setStudentSort(value))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(DashboardApp)

@@ -102,16 +102,32 @@
 IfNeeded
+, invalidateData
  %7D from 
@@ -148,16 +148,16 @@
 /index'%0A
-
 import %7B
@@ -862,16 +862,59 @@
 n.css'%0A%0A
+const AUTO_REFRESH_INTERVAL = 10000 // ms%0A%0A
 class Da
@@ -1037,24 +1037,89 @@
  true%0A    %7D%0A
+    this.autoRefreshHandler = this.autoRefreshHandler.bind(this)%0A
   %7D%0A%0A  compo
@@ -1204,16 +1204,173 @@
 Needed()
+%0A%0A    this.autoRefreshId = setInterval(this.autoRefreshHandler, AUTO_REFRESH_INTERVAL)%0A  %7D%0A%0A  componentWillUnmount () %7B%0A    clearInterval(this.autoRefreshId)
 %0A  %7D%0A%0A  
@@ -1594,16 +1594,16 @@
 alse %7D)%0A
-
     %7D%0A  
@@ -1605,16 +1605,153 @@
  %7D%0A  %7D%0A%0A
+  autoRefreshHandler () %7B%0A    const %7B invalidateData, fetchDataIfNeeded %7D = this.props%0A    invalidateData()%0A    fetchDataIfNeeded()%0A  %7D%0A%0A
   render
@@ -3717,24 +3717,78 @@
 fNeeded()),%0A
+    invalidateData: () =%3E dispatch(invalidateData()),%0A
     setActiv

Add 10s auto-refresh to Dashboard