2 files changed, 35 insertions, 12 deletions

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;
+}