From 786404a8a692448b04fd8df5dbca8013631a0abd Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 9 Mar 2021 17:50:09 +0100
Subject: adding episodes to projects

---
 .../app/views/episode/components/episode.form.js   | 48 ++++++++++++++++++----
 .../app/views/episode/components/episode.menu.js   |  6 +--
 .../app/views/episode/containers/episode.edit.js   | 20 ++++++++-
 .../app/views/episode/containers/episode.new.js    | 24 +++++++++--
 .../app/views/episode/episode.container.js         |  6 ++-
 .../frontend/app/views/episode/episode.css         |  6 +++
 6 files changed, 94 insertions(+), 16 deletions(-)

(limited to 'animism-align/frontend/app/views/episode')

diff --git a/animism-align/frontend/app/views/episode/components/episode.form.js b/animism-align/frontend/app/views/episode/components/episode.form.js
index 63d55e7..c60d3b2 100644
--- a/animism-align/frontend/app/views/episode/components/episode.form.js
+++ b/animism-align/frontend/app/views/episode/components/episode.form.js
@@ -20,6 +20,7 @@ const newEpisode = () => ({
 
 export default class EpisodeForm extends Component {
   state = {
+    project_id: 0,
     title: "",
     submitTitle: "",
     data: { ...newEpisode() },
@@ -37,8 +38,10 @@ export default class EpisodeForm extends Component {
   }
 
   componentDidMount() {
-    const { data, isNew } = this.props
-    const title = isNew ? 'New episode' : 'Editing ' + data.title
+    const { data, isNew, project } = this.props
+    const title = isNew
+      ? 'Add episode to project ' + project.title
+      : 'Editing Episode ' + data.episode_number + ": " + data.title
     const submitTitle = isNew ? "Add Episode" : "Save Changes"
     this.setState({
       title,
@@ -112,8 +115,8 @@ export default class EpisodeForm extends Component {
     }
     const { isNew, onSubmit } = this.props
     const { data } = this.state
-    const requiredKeys = "episode_number release_date".split(" ")
-    const validKeys = "title episode_number release_date is_live settings".split(" ")
+    const requiredKeys = "project_id episode_number release_date".split(" ")
+    const validKeys = "project_id title episode_number release_date is_live settings".split(" ")
     const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
     if (!data.title) {
       data.title = "TBD"
@@ -141,10 +144,8 @@ export default class EpisodeForm extends Component {
       <div className='form'>
         <h1>{title}</h1>
         <form onSubmit={this.handleSubmit}>
-          <SubmitButton
-            title={submitTitle}
-            onClick={this.handleSubmit}
-          />
+          <h2>Episode information</h2>
+
           <TextInput
             title="Title"
             name="title"
@@ -176,6 +177,37 @@ export default class EpisodeForm extends Component {
             onChange={this.handleSelect}
           />
 
+          <h2>Build configuration</h2>
+
+          <TextInput
+            title="HTML title"
+            name="page_title"
+            placeholder="HTML title tag"
+            data={data.settings}
+            onChange={this.handleSettingsChangeEvent}
+            autoComplete="off"
+          />
+
+          <TextArea
+            title="Page description"
+            name="page_desc"
+            placeholder="Social media / search engine snippet"
+            data={data.settings}
+            onChange={this.handleSettingsChangeEvent}
+            autoComplete="off"
+          />
+
+          <TextInput
+            title="Build folder"
+            name="url_path"
+            placeholder="Folder to build into, e.g. episode1"
+            data={data.settings}
+            onChange={this.handleSettingsChangeEvent}
+            autoComplete="off"
+          />
+
+          <h2>Credits</h2>
+
           <TextArea
             title="Artists"
             name="artists"
diff --git a/animism-align/frontend/app/views/episode/components/episode.menu.js b/animism-align/frontend/app/views/episode/components/episode.menu.js
index 445084b..4b75ec1 100644
--- a/animism-align/frontend/app/views/episode/components/episode.menu.js
+++ b/animism-align/frontend/app/views/episode/components/episode.menu.js
@@ -28,7 +28,7 @@ const EpisodeIndexMenu = () => ([
 ])
 
 const EpisodeShowMenu = connect(mapStateToProps)((props) => ([
-  <MenuButton key='back' name="back" href="/episode/" />,
+  <MenuButton key='back' name="back" href="/" />,
   <MenuButton key='edit' name="edit" href={"/episode/" + props.match.params.id + "/edit/"} />,
   <MenuButton key='delete' name="delete" onClick={() => {
     const { res: episode } = props.episode.show
@@ -41,11 +41,11 @@ const EpisodeShowMenu = connect(mapStateToProps)((props) => ([
 ]))
 
 const EpisodeNewMenu = (props) => ([
-  <MenuButton key='back' name="back" href="/episode/" />,
+  <MenuButton key='back' name="back" href="/" />,
 ])
 
 const EpisodeEditMenu = connect(mapStateToProps)((props) => ([
-  <MenuButton key='back' name="back" href="/episode/" />,
+  <MenuButton key='back' name="back" href="/" />,
   <MenuButton key='delete' name="delete" onClick={() => {
     const { res: episode } = props.episode.show
     if (confirm("Really delete this episode?")) {
diff --git a/animism-align/frontend/app/views/episode/containers/episode.edit.js b/animism-align/frontend/app/views/episode/containers/episode.edit.js
index 4d7e270..8ba16ae 100644
--- a/animism-align/frontend/app/views/episode/containers/episode.edit.js
+++ b/animism-align/frontend/app/views/episode/containers/episode.edit.js
@@ -10,9 +10,25 @@ import EpisodeForm from '../components/episode.form'
 import EpisodeMenu from '../components/episode.menu'
 
 class EpisodeEdit extends Component {
+  state = {
+    project: {},
+  }
   componentDidMount() {
+    this.ready()
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.project.lookup !== prevProps.project.lookup) {
+      this.ready()
+    }
+  }
+  ready() {
+    if (!this.props.project.lookup) return
     console.log(this.props.match.params.id)
     actions.episode.show(this.props.match.params.id)
+    .then(episode => {
+      const project = this.props.project.lookup[episode.project_id]
+      this.setState({ project })
+    })
   }
 
   handleSubmit(data) {
@@ -20,7 +36,7 @@ class EpisodeEdit extends Component {
       .then(response => {
         // response
         console.log(response)
-        history.push('/episode/')
+        history.push('/')
       })
   }
 
@@ -38,6 +54,7 @@ class EpisodeEdit extends Component {
         <EpisodeMenu episodeActions={this.props.episodeActions} />
         <EpisodeForm
           data={show.res}
+          project={this.state.project}
           onSubmit={this.handleSubmit.bind(this)}
         />
       </div>
@@ -47,6 +64,7 @@ class EpisodeEdit extends Component {
 
 const mapStateToProps = state => ({
   episode: state.episode,
+  project: state.episode.index,
 })
 
 export default connect(mapStateToProps)(EpisodeEdit)
diff --git a/animism-align/frontend/app/views/episode/containers/episode.new.js b/animism-align/frontend/app/views/episode/containers/episode.new.js
index 42e9837..2ff279b 100644
--- a/animism-align/frontend/app/views/episode/containers/episode.new.js
+++ b/animism-align/frontend/app/views/episode/containers/episode.new.js
@@ -12,10 +12,26 @@ class EpisodeNew extends Component {
   state = {
     loading: true,
     initialData: {},
+    project: {},
   }
-
   componentDidMount() {
-    this.setState({ loading: false })
+    this.ready()
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.project.lookup !== prevProps.project.lookup) {
+      this.ready()
+    }
+  }
+  ready() {
+    if (!this.props.project.lookup) return
+    const { project_id } = this.props.match.params
+    const project = this.props.project.lookup[project_id]
+    this.setState({
+      loading: false,
+      initialData: { project_id },
+      project,
+    })
+    console.log(this.props.match.params.project_id)
   }
 
   handleSubmit(data) {
@@ -24,7 +40,7 @@ class EpisodeNew extends Component {
       .then(res => {
         console.log(res)
         if (res.res && res.res.id) {
-          history.push('/episode/')
+          history.push('/')
         }
       })
       .catch(err => {
@@ -44,6 +60,7 @@ class EpisodeNew extends Component {
         <EpisodeForm
           isNew
           data={this.state.initialData}
+          project={this.state.project}
           onSubmit={this.handleSubmit.bind(this)}
         />
       </div>
@@ -53,6 +70,7 @@ class EpisodeNew extends Component {
 
 const mapStateToProps = state => ({
   episode: state.episode,
+  project: state.project.index,
 })
 
 const mapDispatchToProps = dispatch => ({
diff --git a/animism-align/frontend/app/views/episode/episode.container.js b/animism-align/frontend/app/views/episode/episode.container.js
index 62363ec..9cd70f8 100644
--- a/animism-align/frontend/app/views/episode/episode.container.js
+++ b/animism-align/frontend/app/views/episode/episode.container.js
@@ -13,7 +13,6 @@ class Container extends Component {
     return (
       <div className='episodeContainer'>
         <Route exact path='/episode/:id/edit/' component={EpisodeEdit} />
-        <Route exact path='/episode/new/' component={EpisodeNew} />
         <Route exact path='/episode/' component={EpisodeIndex} />
       </div>
     )
@@ -24,3 +23,8 @@ const mapStateToProps = state => ({
 })
 
 export default connect(mapStateToProps)(Container)
+
+/*
+  // episodes are now added via the project
+  <Route exact path='/episode/new/' component={EpisodeNew} />
+*/
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/episode/episode.css b/animism-align/frontend/app/views/episode/episode.css
index e0747ab..96806da 100644
--- a/animism-align/frontend/app/views/episode/episode.css
+++ b/animism-align/frontend/app/views/episode/episode.css
@@ -7,3 +7,9 @@
 .episode-index {
   margin-top: 1rem;
 }
+
+.episodeContainer .formContainer h2 {
+  color: #888;
+  margin-top: 1.5rem;
+  font-style: italic;
+}
-- 
cgit v1.2.3-70-g09d2