Refactor Datasets tab components into separate (presentational and container) component files

Author: acrellin

static/js/components/DatasetForm/index.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Form, TextInput, FileInput, SubmitButton } from '../Form';
+import CesiumTooltip from '../Tooltip';
 
-let DatasetForm = (props) => {
+
+const DatasetForm = (props) => {
   const { fields: { datasetName, headerFile, tarFile },
           error, handleSubmit, submitting } = props;
 
@@ -23,7 +26,7 @@ let DatasetForm = (props) => {
         />
 
         <div style={description}>
-          Format: comma-separated with columns "filename" (of a time series from the uploaded archive), "label" (class label or numerical value), and any metafeatures (numerical).
+          {'Format: comma-separated with columns "filename" (of a time series from the uploaded archive), "label" (class label or numerical value), and any metafeatures (numerical).'}
         </div>
 
         <FileInput
@@ -33,7 +36,7 @@ let DatasetForm = (props) => {
           data-for="tarfileTooltip"
         />
         <div style={description}>
-          Format: zipfile or tarfile containing time series files, each of which is comma-separated with columns "time", "value", "error" (optional).
+          {'Format: zipfile or tarfile containing time series files, each of which is comma-separated with columns "time", "value", "error" (optional).'}
         </div>
 
         <SubmitButton label="Upload Dataset" disabled={submitting} />
@@ -62,3 +65,8 @@ DatasetForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   submitting: PropTypes.bool.isRequired
 };
+DatasetForm.defaultProps = {
+  error: ""
+};
+
+export default DatasetForm;

static/js/components/DatasetInfo/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const DatasetInfo = props => (
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Time Series File Names</th>
+        <th>Meta Features</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          {props.dataset.files.join(', ')}
+        </td>
+        <td>
+          {props.dataset.meta_features.join(', ')}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+);
+DatasetInfo.propTypes = {
+  dataset: PropTypes.object.isRequired
+};
+
+export default DatasetInfo;

static/js/components/DatasetTable/index.jsx

@@ -1,10 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import DatasetInfo from '../containers/DatasetInfo';
-import DeleteDataset from '../containers/DeleteDataset';
+import DatasetInfo from '../../components/DatasetInfo';
+import DeleteDataset from '../../containers/DeleteDataset';
+import FoldableRow from '../FoldableRow';
+import { reformatDatetime } from '../../utils';
 
-export let DatasetTable = props => (
+
+const DatasetTable = props => (
   <table className="table">
     <thead>
       <tr>
@@ -38,7 +42,7 @@ export let DatasetTable = props => (
   </table>
 );
 DatasetTable.propTypes = {
-  datasets: React.PropTypes.arrayOf(React.PropTypes.object)
+  datasets: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 
 export default DatasetTable;

static/js/components/Datasets.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+
 const Delete = (props) => {
   const style = {
     display: 'inline-block'

static/js/components/Delete/index.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { connect, Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
 import ReactTabs from 'react-tabs';
-import PropTypes from 'prop-types';
 
 import 'bootstrap-css';
 import 'bootstrap';
@@ -12,16 +11,14 @@ import { Notifications } from 'baselayer/components/Notifications';
 import WebSocket from 'baselayer/components/WebSocket';
 import configureStore from '../configureStore';
 import * as Action from '../actions';
-import WebSocket from 'baselayer/components/WebSocket';
 import CesiumMessageHandler from '../CesiumMessageHandler';
 import AddProject from '../containers/AddProject';
 import ProjectSelector from '../containers/ProjectSelector';
 import ProjectTab from '../containers/ProjectTab';
-import DatasetsTab from './Datasets';
+import DatasetsTab from './DatasetsTab';
 import FeaturesTab from './Features';
 import ModelsTab from './Models';
 import PredictTab from './Predictions';
-import { Notifications } from 'baselayer/components/Notifications';
 import colorScheme from './colorscheme';
 import Progress from './Progress';
 import CesiumTooltip from './Tooltip';

static/js/components/Main.jsx

@@ -1,6 +1,7 @@
 import { connect } from "react-redux";
 
-import * as Action from '../actions';
+import * as Action from '../../actions';
+import Delete from '../../components/Delete';
 
 
 const mapDispatchToProps = dispatch => (