Fix subscriber export button

frontend/src/Subscriber.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react"
 import {
   Row,
   Col,
@@ -12,72 +12,72 @@ import {
   Spin,
   Popconfirm,
   notification
-} from "antd";
+} from "antd"
 
-import * as cs from "./constants";
+import * as cs from "./constants"
 
 const tagColors = {
   enabled: "green",
   blacklisted: "red"
-};
+}
 const formItemLayoutModal = {
   labelCol: { xs: { span: 24 }, sm: { span: 4 } },
   wrapperCol: { xs: { span: 24 }, sm: { span: 18 } }
-};
+}
 const formItemLayout = {
   labelCol: { xs: { span: 16 }, sm: { span: 4 } },
   wrapperCol: { xs: { span: 16 }, sm: { span: 10 } }
-};
+}
 const formItemTailLayout = {
   wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 10, offset: 4 } }
-};
+}
 
 class CreateFormDef extends React.PureComponent {
   state = {
     confirmDirty: false,
     loading: false
-  };
+  }
 
   // Handle create / edit form submission.
   handleSubmit = (e, cb) => {
-    e.preventDefault();
+    e.preventDefault()
     if (!cb) {
       // Set a fake callback.
-      cb = () => {};
+      cb = () => {}
     }
 
     var err = null,
-      values = {};
+      values = {}
     this.props.form.validateFields((e, v) => {
-      err = e;
+      err = e
-      values = v;
+      values = v
-    });
+    })
     if (err) {
-      return;
+      return
     }
 
-    let a = values["attribs"];
+    let a = values["attribs"]
-    values["attribs"] = {};
+    values["attribs"] = {}
     if (a && a.length > 0) {
       try {
-        values["attribs"] = JSON.parse(a);
+        values["attribs"] = JSON.parse(a)
         if (values["attribs"] instanceof Array) {
           notification["error"]({
             message: "Invalid JSON type",
             description: "Attributes should be a map {} and not an array []"
-          });
+          })
-          return;
+          return
         }
       } catch (e) {
         notification["error"]({
           message: "Invalid JSON in attributes",
           description: e.toString()
-        });
+        })
-        return;
+        return
       }
     }
 
-    this.setState({ loading: true });
+    this.setState({ loading: true })
     if (this.props.formType === cs.FormCreate) {
       // Add a subscriber.
       this.props
@@ -91,22 +91,22 @@ class CreateFormDef extends React.PureComponent {
           notification["success"]({
             message: "Subscriber added",
             description: `${values["email"]} added`
-          });
+          })
           if (!this.props.isModal) {
-            this.props.fetchRecord(this.props.record.id);
+            this.props.fetchRecord(this.props.record.id)
           }
-          cb(true);
+          cb(true)
-          this.setState({ loading: false });
+          this.setState({ loading: false })
         })
         .catch(e => {
-          notification["error"]({ message: "Error", description: e.message });
+          notification["error"]({ message: "Error", description: e.message })
-          cb(false);
+          cb(false)
-          this.setState({ loading: false });
+          this.setState({ loading: false })
-        });
+        })
     } else {
       // Edit a subscriber.
-      delete values["keys"];
+      delete values["keys"]
-      delete values["vals"];
+      delete values["vals"]
       this.props
         .modelRequest(
           cs.ModelSubscribers,
@@ -118,20 +118,20 @@ class CreateFormDef extends React.PureComponent {
           notification["success"]({
             message: "Subscriber modified",
             description: `${values["email"]} modified`
-          });
+          })
           if (!this.props.isModal) {
-            this.props.fetchRecord(this.props.record.id);
+            this.props.fetchRecord(this.props.record.id)
           }
-          cb(true);
+          cb(true)
-          this.setState({ loading: false });
+          this.setState({ loading: false })
         })
         .catch(e => {
-          notification["error"]({ message: "Error", description: e.message });
+          notification["error"]({ message: "Error", description: e.message })
-          cb(false);
+          cb(false)
-          this.setState({ loading: false });
+          this.setState({ loading: false })
-        });
+        })
     }
-  };
+  }
 
   handleDeleteRecord = record => {
     this.props
@@ -145,40 +145,40 @@ class CreateFormDef extends React.PureComponent {
         notification["success"]({
           message: "Subscriber deleted",
           description: `${record.email} deleted`
-        });
+        })
 
         this.props.route.history.push({
           pathname: cs.Routes.ViewSubscribers
-        });
+        })
       })
       .catch(e => {
-        notification["error"]({ message: "Error", description: e.message });
+        notification["error"]({ message: "Error", description: e.message })
-      });
+      })
-  };
+  }
 
   render() {
-    const { formType, record } = this.props;
+    const { formType, record } = this.props
-    const { getFieldDecorator } = this.props.form;
+    const { getFieldDecorator } = this.props.form
 
     if (formType === null) {
-      return null;
+      return null
     }
 
-    let subListIDs = [];
+    let subListIDs = []
-    let subStatuses = {};
+    let subStatuses = {}
     if (this.props.record && this.props.record.lists) {
       subListIDs = this.props.record.lists.map(v => {
-        return v["id"];
+        return v["id"]
-      });
+      })
       subStatuses = this.props.record.lists.reduce(
         (o, item) => ({ ...o, [item.id]: item.subscription_status }),
         {}
-      );
+      )
     } else if (this.props.list) {
-      subListIDs = [this.props.list.id];
+      subListIDs = [this.props.list.id]
     }
 
-    const layout = this.props.isModal ? formItemLayoutModal : formItemLayout;
+    const layout = this.props.isModal ? formItemLayoutModal : formItemLayout
     return (
       <Spin spinning={this.state.loading}>
         <Form onSubmit={this.handleSubmit}>
@@ -282,7 +282,7 @@ class CreateFormDef extends React.PureComponent {
                 <Popconfirm
                   title="Are you sure?"
                   onConfirm={() => {
-                    this.handleDeleteRecord(record);
+                    this.handleDeleteRecord(record)
                   }}
                 >
                   <Button icon="delete">Delete</Button>
@@ -292,11 +292,11 @@ class CreateFormDef extends React.PureComponent {
           )}
         </Form>
       </Spin>
-    );
+    )
   }
 }
 
-const CreateForm = Form.create()(CreateFormDef);
+const CreateForm = Form.create()(CreateFormDef)
 
 class Subscriber extends React.PureComponent {
   state = {
@@ -306,19 +306,19 @@ class Subscriber extends React.PureComponent {
     subID: this.props.route.match.params
       ? parseInt(this.props.route.match.params.subID, 10)
       : 0
-  };
+  }
 
   componentDidMount() {
     // When this component is invoked within a modal from the subscribers list page,
     // the necessary context is supplied and there's no need to fetch anything.
     if (!this.props.isModal) {
       // Fetch lists.
-      this.props.modelRequest(cs.ModelLists, cs.Routes.GetLists, cs.MethodGet);
+      this.props.modelRequest(cs.ModelLists, cs.Routes.GetLists, cs.MethodGet)
 
       // Fetch subscriber.
-      this.fetchRecord(this.state.subID);
+      this.fetchRecord(this.state.subID)
     } else {
-      this.setState({ record: this.props.record, loading: false });
+      this.setState({ record: this.props.record, loading: false })
     }
   }
 
@@ -326,38 +326,39 @@ class Subscriber extends React.PureComponent {
     this.props
       .request(cs.Routes.GetSubscriber, cs.MethodGet, { id: id })
       .then(r => {
-        this.setState({ record: r.data.data, loading: false });
+        this.setState({ record: r.data.data, loading: false })
       })
       .catch(e => {
         notification["error"]({
           placement: cs.MsgPosition,
           message: "Error",
           description: e.message
-        });
+        })
-      });
+      })
-  };
+  }
 
   setFormRef = r => {
-    this.setState({ formRef: r });
+    this.setState({ formRef: r })
-  };
+  }
 
   submitForm = (e, cb) => {
     if (this.state.formRef) {
-      this.state.formRef.handleSubmit(e, cb);
+      this.state.formRef.handleSubmit(e, cb)
     }
-  };
+  }
 
   render() {
     return (
       <section className="content">
         <header className="header">
           <Row>
-            <Col span={22}>
+            <Col span={20}>
               {!this.state.record.id && <h1>Add subscriber</h1>}
               {this.state.record.id && (
                 <div>
                   <h1>
-                    <Tag className="subscriber-status"
+                    <Tag
+                      className="subscriber-status"
                       color={
                         tagColors.hasOwnProperty(this.state.record.status)
                           ? tagColors[this.state.record.status]
@@ -367,8 +368,8 @@ class Subscriber extends React.PureComponent {
                       {this.state.record.status}
                     </Tag>{" "}
                     <span className="subscriber-name">
-					  {this.state.record.name} ({this.state.record.email})
+                      {this.state.record.name} ({this.state.record.email})
-					</span>
+                    </span>
                   </h1>
                   <span className="text-small text-grey">
                     ID {this.state.record.id} / UUID {this.state.record.uuid}
@@ -376,13 +377,13 @@ class Subscriber extends React.PureComponent {
                 </div>
               )}
             </Col>
-            <Col span={2} className="right subscriber-export">
+            <Col span={4} className="right subscriber-export">
-              <Tooltip title="Export data" placement="top">
+              <Tooltip title="Export subscriber data" placement="top">
                 <a
                   role="button"
                   href={"/api/subscribers/" + this.state.record.id + "/export"}
                 >
-                  <Icon type="export" style={{ fontSize: "20px" }}/>
+                  Export <Icon type="export" />
                 </a>
               </Tooltip>
             </Col>
@@ -398,20 +399,20 @@ class Subscriber extends React.PureComponent {
               lists={this.props.data[cs.ModelLists].results}
               wrappedComponentRef={r => {
                 if (!r) {
-                  return;
+                  return
                 }
 
                 // Save the form's reference so that when this component
                 // is used as a modal, the invoker of the model can submit
                 // it via submitForm()
-                this.setState({ formRef: r });
+                this.setState({ formRef: r })
               }}
             />
           </Spin>
         </div>
       </section>
-    );
+    )
   }
 }
 
-export default Subscriber;
+export default Subscriber