Use SettingsModal component

extensions/tags/js/admin/src/components/TagSettingsModal.js

@@ -1,17 +1,6 @@
-import Modal from 'flarum/components/Modal';
+import SettingsModal from 'flarum/components/SettingsModal';
-import Button from 'flarum/components/Button';
-import saveConfig from 'flarum/utils/saveConfig';
-
-export default class TagSettingsModal extends Modal {
-  constructor(...args) {
-    super(...args);
-
-    this.minPrimaryTags = m.prop(app.config['tags.min_primary_tags'] || 0);
-    this.maxPrimaryTags = m.prop(app.config['tags.max_primary_tags'] || 0);
-    this.minSecondaryTags = m.prop(app.config['tags.min_secondary_tags'] || 0);
-    this.maxSecondaryTags = m.prop(app.config['tags.max_secondary_tags'] || 0);
-  }
 
+export default class TagSettingsModal extends SettingsModal {
   setMinTags(minTags, maxTags, value) {
     minTags(value);
     maxTags(Math.max(value, maxTags()));
@@ -25,10 +14,14 @@ export default class TagSettingsModal extends Modal {
     return 'Tag Settings';
   }
 
-  content() {
+  form() {
-    return (
+    const minPrimaryTags = this.setting('tags.min_primary_tags', 0);
-      <div className="Modal-body">
+    const maxPrimaryTags = this.setting('tags.max_primary_tags', 0);
-        <div className="Form">
+
+    const minSecondaryTags = this.setting('tags.min_secondary_tags', 0);
+    const maxSecondaryTags = this.setting('tags.max_secondary_tags', 0);
+
+    return [
       <div className="Form-group">
         <label>Required Number of Primary Tags</label>
         <div className="helpText">
@@ -38,18 +31,15 @@ export default class TagSettingsModal extends Modal {
           <input className="FormControl"
             type="number"
             min="0"
-                value={this.minPrimaryTags()}
+            value={minPrimaryTags()}
-                oninput={m.withAttr('value', this.setMinTags.bind(this, this.minPrimaryTags, this.maxPrimaryTags))}
+            oninput={m.withAttr('value', this.setMinTags.bind(this, minPrimaryTags, maxPrimaryTags))} />
-              />
           {' to '}
           <input className="FormControl"
             type="number"
-                min={this.minPrimaryTags()}
+            min={minPrimaryTags()}
-                value={this.maxPrimaryTags()}
+            bidi={maxPrimaryTags} />
-                oninput={m.withAttr('value', this.maxPrimaryTags)}
-              />
-            </div>
         </div>
+      </div>,
 
       <div className="Form-group">
         <label>Required Number of Secondary Tags</label>
@@ -60,48 +50,15 @@ export default class TagSettingsModal extends Modal {
           <input className="FormControl"
             type="number"
             min="0"
-                value={this.minSecondaryTags()}
+            value={minSecondaryTags()}
-                oninput={m.withAttr('value', this.setMinTags.bind(this, this.minSecondaryTags, this.maxSecondaryTags))}
+            oninput={m.withAttr('value', this.setMinTags.bind(this, minSecondaryTags, maxSecondaryTags))} />
-              />
           {' to '}
           <input className="FormControl"
             type="number"
-                min={this.minSecondaryTags()}
+            min={minSecondaryTags()}
-                value={this.maxSecondaryTags()}
+            bidi={maxSecondaryTags} />
-                oninput={m.withAttr('value', this.maxSecondaryTags)}
-              />
         </div>
       </div>
-
+    ];
-          <div className="Form-group">
-            {Button.component({
-              type: 'submit',
-              className: 'Button Button--primary TagSettingsModal-save',
-              loading: this.loading,
-              children: 'Save Changes'
-            })}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    saveConfig({
-      'tags.min_primary_tags': this.minPrimaryTags(),
-      'tags.max_primary_tags': this.maxPrimaryTags(),
-      'tags.min_secondary_tags': this.minSecondaryTags(),
-      'tags.max_secondary_tags': this.maxSecondaryTags()
-    }).then(
-      () => this.hide(),
-      () => {
-        this.loading = false;
-        m.redraw();
-      }
-    );
   }
 }