Update settings page

src/components/settings.js

@@ -2,7 +2,31 @@ import React from "react"; // eslint-disable-line
 import { Component } from "flumpt";
 
 export class SettingsComponent extends Component {
+  handleSubmit(e) {
+    e.preventDefault();
+    this.dispatch("updateSettings",
+        this.refs.channelId.value.trim(), this.refs.upstreamToken.value.trim());
+    return false;
+  }
   render() {
-    return <div>Settings</div>;
+    return (
+      <div className="pane-more">
+        <form onSubmit={this.handleSubmit.bind(this)}>
+          <div className="form-group">
+            <label>チャネルID</label>
+            <input type="text" className="form-control"
+             ref="channelId" defaultValue={this.props.settings.channelId} />
+          </div>
+          <div className="form-group">
+            <label>配信用トークン</label>
+            <input type="text" className="form-control"
+             ref="upstreamToken" defaultValue={this.props.settings.upstreamToken} />
+          </div>
+          <div className="form-actions">
+            <button type="submit" className="btn btn-form btn-primary">保存</button>
+          </div>
+        </form>
+      </div>
+    );
   }
 }

src/index.js

@@ -41,6 +41,17 @@ class Decap extends Flux {
         return state;
       });
     });
+    this.on("updateSettings", (channelId, upstreamToken) => {
+      return this.update(state => {
+        state.settings = {
+          channelId: channelId,
+          upstreamToken: upstreamToken
+        };
+        window.localStorage.setItem(
+            "decapSettings", JSON.stringify(state.settings));
+        return state;
+      });
+    });
   }
   render(state) {
     return <DecapComponent {...state} />;
@@ -56,10 +67,18 @@ const decap = new Decap({
     activeSourceId: "",
     isPlaying: false,
     anzu: null,
-    sources: []
+    sources: [],
+    settings: {
+    }
   },
   middlewares: [
   ]
 });
 
-decap.update(state => (state));
+decap.update(state => {
+  let settings = JSON.parse(window.localStorage.getItem("decapSettings"));
+  if (settings !== null) {
+    state.settings = settings;
+  }
+  return state;
+});