making overview load

9 files changed, 65 insertions, 30 deletions

diff --git a/animism-align/frontend/app/common/tableIndex.component.js b/animism-align/frontend/app/common/tableIndex.component.js
index c58fc35..127ecf9 100644
--- a/animism-align/frontend/app/common/tableIndex.component.js
+++ b/animism-align/frontend/app/common/tableIndex.component.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
 
 import { formatDateTime } from 'app/utils'
 import { Loader, Swatch, Dot } from 'app/common'
diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index 4f9d123..1966dde 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -28,7 +28,7 @@ export const audio = with_type('audio', [
 ])
 
 export const editor = with_type('editor', [
-  'loaded',
+  'loading', 'loaded',
 ])
 export const viewer = with_type('viewer', [
   'load_sections', 'toggle_component', 'toggle_nav_component',
diff --git a/animism-align/frontend/app/views/editor/align/align.reducer.js b/animism-align/frontend/app/views/editor/align/align.reducer.js
index c9b85d7..d37cd6d 100644
--- a/animism-align/frontend/app/views/editor/align/align.reducer.js
+++ b/animism-align/frontend/app/views/editor/align/align.reducer.js
@@ -13,7 +13,6 @@ const initialState = {
   },
   peaks: { loading: true },
   text: { loading: true },
-  currentEpisodeId: -1,
   annotation: {},
   selectedAnnotation: {},
   options: {
@@ -23,13 +22,6 @@ const initialState = {
 export default function alignReducer(state = initialState, action) {
   // console.log(action.type, action)
   switch (action.type) {
-
-    case types.editor.loaded:
-      return {
-        ...state,
-        currentEpisodeId: action.episode_id,
-      }
-
     case types.peaks.loaded:
       // console.log('peaks duration:', action.data.length / 10)
       return {
diff --git a/animism-align/frontend/app/views/editor/editor.container.js b/animism-align/frontend/app/views/editor/editor.container.js
index 599225a..2d4b036 100644
--- a/animism-align/frontend/app/views/editor/editor.container.js
+++ b/animism-align/frontend/app/views/editor/editor.container.js
@@ -10,7 +10,6 @@ import ViewerContainer from 'app/views/viewer/viewer.container'
 
 export default class Router extends Component {
   render() {
-    console.log(this.props.match.params)
     return (
       <EditorGate episode_id={this.props.match.params.episode_id}>
         <Route path={"/editor/:episode_id/timeline/"} component={AlignContainer} />
diff --git a/animism-align/frontend/app/views/editor/editor.gate.js b/animism-align/frontend/app/views/editor/editor.gate.js
index b835a69..5076350 100644
--- a/animism-align/frontend/app/views/editor/editor.gate.js
+++ b/animism-align/frontend/app/views/editor/editor.gate.js
@@ -18,32 +18,37 @@ class EditorGate extends Component {
   componentDidUpdate(prevProps) {
     if (
       this.props.episode_id !== prevProps.episode_id ||
-      this.props.episode.lookup !== prevProps.episode.lookup
+      this.props.episode.lookup !== prevProps.episode.lookup ||
+      this.props.project.lookup !== prevProps.project.lookup
     ) {
       this.load()
     }
   }
 
   load() {
+    if (!this.props.project.lookup) return
     if (!this.props.episode.lookup) return
     if (!this.props.episode_id) return
+    if (parseInt(this.props.episode_id) === parseInt(this.props.current_episode_id)) return
     const episode = this.props.episode.lookup[this.props.episode_id]
-    actions.site.loadEpisode(episode)
+    const project = this.props.project.lookup[episode.project_id]
+    actions.site.loadEpisode(project, episode)
   }
 
   render() {
-    if (parseInt(this.props.episode_id) === parseInt(this.props.currentEpisodeId)) {
+    if (parseInt(this.props.episode_id) === parseInt(this.props.current_episode_id)) {
       return this.props.children
     }
     return (
-      <div className="dashboard"><Loader /></div>
+      <div className="overview"><Loader /></div>
     )
   }
 }
 
 const mapStateToProps = state => ({
   episode: state.episode.index,
-  currentEpisodeId: state.align.currentEpisodeId,
+  project: state.project.index,
+  current_episode_id: state.site.episode.id,
 })
 
 export default connect(mapStateToProps)(EditorGate)
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/editor/overview/overview.container.js b/animism-align/frontend/app/views/editor/overview/overview.container.js
index 8ce64b9..b06a299 100644
--- a/animism-align/frontend/app/views/editor/overview/overview.container.js
+++ b/animism-align/frontend/app/views/editor/overview/overview.container.js
@@ -5,8 +5,9 @@ import { Link } from 'react-router-dom'
 import './overview.css'
 
 // import actions from 'app/actions'
-import { Loader } from 'app/common'
+import { Loader, TableObject } from 'app/common'
 import { groupResponseBy } from 'app/utils/api.utils'
+import { courtesyS, formatDateTime } from 'app/utils'
 
 class OverviewContainer extends Component {
   state = {
@@ -28,30 +29,39 @@ class OverviewContainer extends Component {
   }
 
   build() {
-    if (this.props.loading) return
     // const episodes = groupResponseBy(this.props.episodes, 'project_id')
     // const venues = groupResponseBy(this.props.venues, 'project_id')
     // this.setState({ ready: true, episodes, venues })
   }
 
   render() {
-    const { loading, projects } = this.props
-    const { episodes, venues, ready } = this.state
-    if (loading || !ready) {
+    const { project, episode, media, annotation, align } = this.props
+    const { ready } = this.state
+    if (!ready) {
       return (
-        <div className='dashboard'>
+        <div className='overview'>
           <Loader />
         </div>
       )
     }
+    // console.log(this.props)
+    console.log(annotation.order.length)
     return (
-      <div className='dashboard overview'>
+      <div className='overview'>
         <div className='project-top'>
-          <div className='row project-heading'>
-            <div className='title'>
-              <h1>Episode</h1>
-            </div>
+          <div className='project-heading'>
+            <h1>{`${project.title}: Episode ${episode.episode_number}`}</h1>
+            <h2>{episode.title}</h2>
           </div>
+          <h3>Statistics</h3>
+
+          <TableObject
+            className="overview"
+            order={"annotations".split(" ")}
+            object={{
+              annotations: courtesyS(annotation.order.length, 'annotation'),
+            }}
+          />
         </div>
       </div>
     )
@@ -59,6 +69,15 @@ class OverviewContainer extends Component {
 }
 
 const mapStateToProps = state => ({
+  project: state.site.project,
+  episode: state.site.episode,
+  media: state.media.index,
+  annotation: state.annotation.index,
+  align: state.align,
 })
 
 export default connect(mapStateToProps)(OverviewContainer)
+
+/*
+  last_updated: formatDateTime(dataset.last_updated),
+ */
diff --git a/animism-align/frontend/app/views/editor/overview/overview.css b/animism-align/frontend/app/views/editor/overview/overview.css
index abd6c93..2c8b903 100644
--- a/animism-align/frontend/app/views/editor/overview/overview.css
+++ b/animism-align/frontend/app/views/editor/overview/overview.css
@@ -1,3 +1,7 @@
 .overview {
+  padding: 1.5rem;
+}
 
-}
\ No newline at end of file
+.overview h2 {
+  margin: 0.5rem 0 1rem 0;
+}
diff --git a/animism-align/frontend/app/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js
index 493e566..a9d3deb 100644
--- a/animism-align/frontend/app/views/site/site.actions.js
+++ b/animism-align/frontend/app/views/site/site.actions.js
@@ -17,8 +17,9 @@ export const loadSite = () => dispatch => {
   })
 }
 
-export const loadEpisode = (episode) => dispatch => {
+export const loadEpisode = (project, episode) => dispatch => {
   const { id: episode_id } = episode
+  dispatch({ type: types.editor.loading })
   Promise.all([
     // actions.site.loadText(episode),
     actions.site.loadPeaks(episode),
@@ -28,7 +29,7 @@ export const loadEpisode = (episode) => dispatch => {
     actions.media.index({ episode_id }),
   ]).then(() => {
     actions.viewer.loadSections()
-    dispatch({ type: types.editor.loaded, episode_id })
+    dispatch({ type: types.editor.loaded, project, episode })
     console.log('Episode loaded')
   }).catch(err => {
     console.error(err)
diff --git a/animism-align/frontend/app/views/site/site.reducer.js b/animism-align/frontend/app/views/site/site.reducer.js
index d6a475e..36f50ca 100644
--- a/animism-align/frontend/app/views/site/site.reducer.js
+++ b/animism-align/frontend/app/views/site/site.reducer.js
@@ -1,11 +1,27 @@
 import * as types from 'app/types'
 
 const initialState = {
+  project: {},
+  episode: {},
 }
 
 export default function siteReducer(state = initialState, action) {
   // console.log(action.type, action)
   switch (action.type) {
+    case types.editor.loading:
+      return {
+        ...state,
+        project: {},
+        episode: {},
+      }
+
+    case types.editor.loaded:
+      return {
+        ...state,
+        project: action.project,
+        episode: action.episode,
+      }
+
     default:
       return state
   }