adding episodes to projects

2 files changed, 179 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)
diff --git a/animism-align/frontend/app/views/dashboard/dashboard.css b/animism-align/frontend/app/views/dashboard/dashboard.css
new file mode 100644
index 0000000..34bcb66
--- /dev/null
+++ b/animism-align/frontend/app/views/dashboard/dashboard.css
@@ -0,0 +1,52 @@
+.dashboard {
+  padding: 1.5rem;
+}
+
+.project-top {
+  padding: 1rem;
+}
+.project-top h1 {
+  margin: 0;
+}
+
+.dashboard .project-entry {
+  padding: 1rem;
+  margin: 0 0 1rem 0;
+  background: #111;
+}
+
+.dashboard .episode-entry {
+  margin-bottom: 0.5rem;
+}
+.dashboard .project-entry .row.project-heading {
+  margin-bottom: 1rem;
+}
+.dashboard h2 {
+  display: inline-block;
+  margin: 0;
+}
+.dashboard .title {
+  width: 25rem;
+  color: #fff;
+  text-overflow: ellipsis;
+  white-space: pre;
+  overflow: hidden;
+}
+.dashboard .row {
+  margin-bottom: 0.25rem;
+  align-items: center;
+}
+.dashboard .links a {
+  margin-right: 0.5rem;
+  text-decoration: none;
+}
+.dashboard .links a:hover {
+  text-decoration: underline;
+}
+.dashboard .published {
+  color: #888;
+  margin-left: 0.5rem;
+}
+.dashboard i {
+  color: #bbb;
+}
\ No newline at end of file