1 files changed, 127 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/dashboard/dashboard.container.js b/animism-align/frontend/app/views/dashboard/dashboard.container.js
new file mode 100644
index 0000000..6befaae
--- /dev/null
+++ b/animism-align/frontend/app/views/dashboard/dashboard.container.js
@@ -0,0 +1,127 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import './dashboard.css'
+
+// import actions from 'app/actions'
+import { Loader } from 'app/common'
+import { groupResponseBy } from 'app/utils/api.utils'
+
+class DashboardContainer extends Component {
+  state = {
+    ready: false,
+    episodes: {},
+    venues: {},
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount() {
+    this.build()
+  }
+  
+  componentDidUpdate(prevProps) {
+    if (
+      !this.state.ready ||
+      (this.props.project !== prevProps.project) ||
+      (this.props.episode !== prevProps.episode) ||
+      (this.props.venue !== prevProps.venue)
+    ) {
+      this.build()
+    }
+  }
+
+  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) {
+      return (
+        <div className='dashboard'>
+          <Loader />
+        </div>
+      )
+    }
+    return (
+      <div className='dashboard'>
+        <div className='project-top'>
+          <div className='row project-heading'>
+            <div className='title'>
+              <h1>Projects</h1>
+            </div>
+            <div className='links'>
+              <Link to={`/project/new/`}>+ Add Project</Link>
+            </div>
+          </div>
+        </div>
+        {projects.order.map((project_id) => {
+          const project = projects.lookup[project_id]
+          console.log(project)
+          return (
+            <div className='project-entry' key={project.id}>
+              <div className='row project-heading'>
+                <div className='title'>
+                  <h2>{project.title}</h2>
+                  {project.is_live && <span className='published'>{"(published)"}</span>}
+                </div>
+                <div className='links'>
+                  <Link to={`/project/${project.id}/new-episode/`}>+ Add Episode</Link>
+                  <Link to={`/project/${project.id}/venues/`}>Venues</Link>
+                  <Link to={`/project/${project.id}/edit/`}>Settings</Link>
+                </div>
+              </div>
+              {(episodes[project.id] || []).map(episode => (
+                <div className='episode-entry' key={episode.id}>
+                  <div className='row'>
+                    <div className='title'>
+                      <Link to={`/editor/${episode.id}/viewer/`}>
+                        {'Episode #' + episode.episode_number}
+                      </Link>
+                      {episode.is_live && <span className='published'>{"(published)"}</span>}
+                    </div>
+                    <div className='links'>
+                      <Link to={`/editor/${episode.id}/viewer/`}>Viewer</Link>
+                      <Link to={`/editor/${episode.id}/timeline/`}>Timeline</Link>
+                      <Link to={`/editor/${episode.id}/transcript/`}>Transcript</Link>
+                      <Link to={`/episode/${episode.id}/edit/`}>Settings</Link>
+                    </div>
+                  </div>
+                  <div className='row'>
+                    <div className='title'>
+                      <i>{episode.title}</i>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  loading: (
+    !state.project.index.lookup ||
+    !state.episode.index.lookup ||
+    !state.venue.index.lookup ||
+    state.project.index.loading ||
+    state.episode.index.loading ||
+    state.venue.index.loading
+  ),
+  projects: state.project.index,
+  episodes: state.episode.index,
+  venues: state.venue.index,
+})
+
+export default connect(mapStateToProps)(DashboardContainer)