From 5cab93aa847d347e4ae7700ecdad322506072888 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 8 Jul 2020 16:15:53 +0200
Subject: space for media forms

---
 .../frontend/views/media/components/media.form.js  | 59 ++++++++++++++++++----
 .../views/media/components/media.formImage.js      | 44 ++++++++++++++++
 .../views/media/components/media.formVideo.js      | 44 ++++++++++++++++
 3 files changed, 137 insertions(+), 10 deletions(-)
 create mode 100644 animism-align/frontend/views/media/components/media.formImage.js
 create mode 100644 animism-align/frontend/views/media/components/media.formVideo.js

(limited to 'animism-align/frontend')

diff --git a/animism-align/frontend/views/media/components/media.form.js b/animism-align/frontend/views/media/components/media.form.js
index 848d1f8..94968df 100644
--- a/animism-align/frontend/views/media/components/media.form.js
+++ b/animism-align/frontend/views/media/components/media.form.js
@@ -6,6 +6,9 @@ import { capitalize } from '../../../util'
 
 import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
 
+import MediaImageForm from './media.formImage'
+import MediaVideoForm from './media.formVideo'
+
 const newMedia = () => ({
   type: 'image',
   tag: 'media',
@@ -33,6 +36,14 @@ export default class MediaForm extends Component {
     errorFields: new Set([]),
   }
 
+  constructor(props) {
+    super(props)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
   componentDidMount() {
     const { data, isNew } = this.props
     const title = isNew ? 'New media' : 'Editing ' + data.title
@@ -67,6 +78,18 @@ export default class MediaForm extends Component {
     })
   }
 
+  handleSettingsChange(name, value) {
+    this.setState({
+      data: {
+        ...this.state.data,
+        settings: {
+          ...this.state.data.settings,
+          [name]: [value],
+        }
+      }
+    })
+  }
+
   handleSubmit(e) {
     e.preventDefault()
     const { isNew, onSubmit } = this.props
@@ -102,7 +125,7 @@ export default class MediaForm extends Component {
     return (
       <div className='form'>
         <h1>{title}</h1>
-        <form onSubmit={this.handleSubmit.bind(this)}>
+        <form onSubmit={this.handleSubmit}>
           <Select
             title='Media Type'
             name='type'
@@ -111,12 +134,28 @@ export default class MediaForm extends Component {
             onChange={this.handleSelect}
           />
 
+          {data.type === 'image' &&
+            <MediaImageForm
+              data={data}
+              onChange={this.handleSelect}
+              onSettingsChange={this.handleSettingsChange}
+            />
+          }
+
+          {data.type === 'video' &&
+            <MediaVideoForm
+              data={data}
+              onChange={this.handleSelect}
+              onSettingsChange={this.handleSettingsChange}
+            />
+          }
+
           <TextInput
             title="Author"
             name="author"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -124,7 +163,7 @@ export default class MediaForm extends Component {
             name="title"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -132,7 +171,7 @@ export default class MediaForm extends Component {
             name="pre_title"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -140,7 +179,7 @@ export default class MediaForm extends Component {
             name="translated_title"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -148,7 +187,7 @@ export default class MediaForm extends Component {
             name="date"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -156,7 +195,7 @@ export default class MediaForm extends Component {
             name="medium"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
           />
           <TextInput
             title="Source"
@@ -164,18 +203,18 @@ export default class MediaForm extends Component {
             placeholder="Courtesy of / Copyright"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextArea
             title="Description"
             name="description"
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
           />
           <SubmitButton
             title={submitTitle}
-            onClick={this.handleSubmit.bind(this)}
+            onClick={this.handleSubmit}
           />
           {!!errorFields.size &&
             <label>
diff --git a/animism-align/frontend/views/media/components/media.formImage.js b/animism-align/frontend/views/media/components/media.formImage.js
new file mode 100644
index 0000000..b3d227e
--- /dev/null
+++ b/animism-align/frontend/views/media/components/media.formImage.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { session } from '../../../session'
+import { capitalize } from '../../../util'
+
+import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+
+export default class MediaImageForm extends Component {
+  state = {
+  }
+
+  constructor(props) {
+    super(props)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+  }
+
+  componentDidMount() {
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+
+  handleSelect(name, value) {
+    this.props.onSelect(name, value)
+  }
+
+  handleSettingsChange(name, value) {
+    this.props.onSettingsChange(name, value)
+  }
+
+  render() {
+    const { data } = this.props
+    console.log(data)
+    return (
+      <div className='imageForm'>
+      </div>
+    )
+  }
+}
diff --git a/animism-align/frontend/views/media/components/media.formVideo.js b/animism-align/frontend/views/media/components/media.formVideo.js
new file mode 100644
index 0000000..16c1fbb
--- /dev/null
+++ b/animism-align/frontend/views/media/components/media.formVideo.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { session } from '../../../session'
+import { capitalize } from '../../../util'
+
+import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+
+export default class MediaVideoForm extends Component {
+  state = {
+  }
+
+  constructor(props) {
+    super(props)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+  }
+
+  componentDidMount() {
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+
+  handleSelect(name, value) {
+    this.props.onSelect(name, value)
+  }
+
+  handleSettingsChange(name, value) {
+    this.props.onSettingsChange(name, value)
+  }
+
+  render() {
+    const { data } = this.props
+    console.log(data)
+    return (
+      <div className='imageForm'>
+      </div>
+    )
+  }
+}
-- 
cgit v1.2.3-70-g09d2