Move Settings to React

controllers/MembersNewController.php

@@ -7,7 +7,7 @@ public static function getPath(): string {
 
   public static function get(): :xhp {
     $members = new Vector(DB::query("SELECT * FROM users ORDER BY created ASC"));
-    
+
     return
       <x:js-scope>
         <nucleus:members-table members={$members} />

controllers/SettingsController.php

@@ -11,24 +11,14 @@ public static function getConfig(): ControllerConfig {
   }
 
   public static function get(): :xhp {
-    $applications_open = Settings::get('applications_open');
+    $settings = Map {
+      'applications_open' => Settings::get('applications_open'),
+    };
+
     return
-      <div class="col-md-6 col-md-offset-3">
-        <form class="form" action="/settings" method="post">
-          <div class="panel panel-default">
-            <div class="panel-body">
-                <div class="form-group">
-                  <div class="checkbox">
-                    <label>
-                      <input type="checkbox" name="applications_disabled" checked={!$applications_open}/> Disable Applications
-                    </label>
-                  </div>
-                </div>
-            </div>
-          </div>
-          <button type="submit" class="btn btn-primary pull-right">Save</button>
-        </form>
-      </div>;
+      <x:js-scope>
+        <nucleus:settings settings={$settings} />
+      </x:js-scope>;
   }
 
   public static function post(): void {

gulpfile.js

@@ -15,6 +15,7 @@ gulp.task('build', function () {
   });
 
   b.require('./react/MembersTable.js', { expose: 'MembersTable' });
+  b.require('./react/Settings.js', { expose: 'Settings' });
   b.require('xhpjs');
 
   return b.bundle()

react/Settings.js

@@ -0,0 +1,30 @@
+var React = require('react');
+
+class Settings extends React.Component {
+  render() {
+    return (
+      <div className="col-md-6 col-md-offset-3">
+        <form className="form" action="/settings" method="post">
+          <div className="panel panel-default">
+            <div className="panel-body">
+                <div className="form-group">
+                  <div className="checkbox">
+                    <label>
+                      <input type="checkbox" name="applications_disabled" checked={!this.props.settings.applications_open}/> Disable Applications
+                    </label>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <button type="submit" className="btn btn-primary pull-right">Save</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+Settings.propTypes = {
+  members: React.PropTypes.array,
+};
+
+module.exports = Settings;

views/settings.php

@@ -0,0 +1,19 @@
+<?hh // strict
+
+final class :nucleus:settings extends :x:element {
+  use XHPHelpers;
+  use XHPReact;
+
+  attribute
+    :xhp:html-element,
+    Map<string, bool> settings @required;
+
+  protected function render(): XHPRoot {
+    $this->constructReactInstance(
+      'Settings',
+      Map {'settings' => $this->:settings }
+    );
+
+    return <div id={$this->getID()} />;
+  }
+}