Add UI for import/export data

src/routes/adminPeople/AdminPeople.css

@@ -73,3 +73,11 @@ td {
 .showSortIcon {
   display: inline-block;
 }
+
+.importForm {
+  display: none;
+}
+
+.importFormVisible {
+  display: block;
+}

src/routes/adminPeople/AdminPeople.js

@@ -48,6 +48,11 @@ class AdminPeople extends React.Component {
     this.setState({ personFormVisible: !this.state.personFormVisible });
   }
 
+  openImportForm = (event) => {
+    event.preventDefault();
+    this.setState({ openImportForm: true });
+  }
+
   render() {
     return (
       <div className={s.root}>
@@ -176,7 +181,7 @@ class AdminPeople extends React.Component {
           </table>
           }
           <h2>
-            <a href="#sortcolumn" onClick={this.togglePersonForm}>
+            <a href="#openpersonform" onClick={this.togglePersonForm}>
               <span>{this.state.personFormVisible ? '-' : '+'}</span> Add Person
             </a>
           </h2>
@@ -251,6 +256,36 @@ class AdminPeople extends React.Component {
               </Button>
             </div>
           </form>
+          <div>
+            <a href="#openimportform" onClick={this.openImportForm}>Import data</a>
+            {!this.state.openImportForm ? ' / ' : null}
+            {!this.state.openImportForm ? <a href="/admin/people/export">Export data</a> : null}
+          </div>
+          <form
+            method="post"
+            action="/admin/people/import"
+            className={[
+              s.importForm,
+              this.state.openImportForm ? s.importFormVisible : null,
+            ].join(' ')}
+          >
+            <div className={s.formGroup}>
+              <label className={s.label} htmlFor="importdata">
+                Enter JSON:
+              </label>
+              <textarea
+                className={s.input}
+                id="importdata"
+                type="text"
+                name="importdata"
+              />
+            </div>
+            <div className={s.formGroup}>
+              <Button type="submit">
+                Save
+              </Button>
+            </div>
+          </form>
         </div>
       </div>
     );

src/server.js

@@ -295,19 +295,20 @@ app.get('/admin/people/export', (req, res, next) => {
 
 app.post('/admin/people/import', (req, res, next) => {
   try {
-    if (req.body.data && req.body.data.length > 0) {
+    if (req.body.importdata && req.body.importdata.length > 0) {
+      const data = JSON.parse(req.body.importdata);
       Person.destroy({ where: {} }).then(() => {
         const promises = [];
-        req.body.data.map(person => promises.push(Person.create(person)));
+        data.map(person => promises.push(Person.create(person)));
         sequelize.Promise.all(promises).then(() => {
-          res.json({ success: true });
+          res.redirect(201, '/admin/people');
         });
       }).catch(err => {
         Rollbar.handleError(err);
         next(err);
       });
     } else {
-      res.json({ success: false, error: 'no data' });
+      res.redirect(400, '/admin/people');
     }
   } catch (err) {
     Rollbar.handleError(err);