Move footer into stateless functional component

ui/src/data_explorer/components/WriteDataBody.js

@@ -1,4 +1,5 @@
 import React, {PropTypes} from 'react'
+import WriteDataFooter from 'src/data_explorer/components/WriteDataFooter'
 
 const WriteDataBody = ({
   handleKeyUp,
@@ -28,7 +29,7 @@ const WriteDataBody = ({
               type="file"
               onChange={handleFile}
               className="write-data-form--upload"
-              ref={r => (inputRef = r)}
+              ref={r => inputRef = r}
               accept="text/*, application/gzip"
             />
             <button
@@ -45,35 +46,12 @@ const WriteDataBody = ({
                   No file selected
                 </span>}
           </div>}
-      <div className="write-data-form--footer">
-        {isManual
-          ? <span className="write-data-form--helper">
-              Need help writing InfluxDB Line Protocol? -&nbsp;
-              <a
-                href="https://docs.influxdata.com/influxdb/latest/write_protocols/line_protocol_tutorial/"
-                target="_blank"
-              >
-                See Documentation
-              </a>
-            </span>
-          : <span className="write-data-form--helper">
-              <a
-                href="https://docs.influxdata.com/influxdb/v1.2//tools/shell/#import-data-from-a-file-with-import"
-                target="_blank"
-              >
-                File Upload Documentation
-              </a>
-            </span>}
-        <button
-          className="btn btn-sm btn-success write-data-form--submit"
-          onClick={handleSubmit}
-          disabled={
-            (!inputContent && isManual) || (!uploadContent && !isManual)
-          }
-        >
-          Write
-        </button>
-      </div>
+      <WriteDataFooter
+        isManual={isManual}
+        inputContent={inputContent}
+        handleSubmit={handleSubmit}
+        uploadContent={uploadContent}
+      />
     </div>
   )
 }

ui/src/data_explorer/components/WriteDataFooter.js

@@ -0,0 +1,47 @@
+import React, {PropTypes} from 'react'
+
+const WriteDataFooter = ({
+  isManual,
+  inputContent,
+  uploadContent,
+  handleSubmit,
+}) => (
+  <div className="write-data-form--footer">
+    {isManual
+      ? <span className="write-data-form--helper">
+          Need help writing InfluxDB Line Protocol? -&nbsp;
+          <a
+            href="https://docs.influxdata.com/influxdb/latest/write_protocols/line_protocol_tutorial/"
+            target="_blank"
+          >
+            See Documentation
+          </a>
+        </span>
+      : <span className="write-data-form--helper">
+          <a
+            href="https://docs.influxdata.com/influxdb/v1.2//tools/shell/#import-data-from-a-file-with-import"
+            target="_blank"
+          >
+            File Upload Documentation
+          </a>
+        </span>}
+    <button
+      className="btn btn-sm btn-success write-data-form--submit"
+      onClick={handleSubmit}
+      disabled={(!inputContent && isManual) || (!uploadContent && !isManual)}
+    >
+      Write
+    </button>
+  </div>
+)
+
+const {bool, func, string} = PropTypes
+
+WriteDataFooter.propTypes = {
+  isManual: bool.isRequired,
+  uploadContent: string,
+  inputContent: string,
+  handleSubmit: func,
+}
+
+export default WriteDataFooter