Refactor Projects.jsx into presentational and container components in separate directories

Author: acrellin

static/js/components/AddProject/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Expand from '../Expand';
+import NewProjectForm from '../../containers/NewProjectForm';
+
+
+const AddProject = (props) => {
+  const expandBoxStyle = {
+    zIndex: 1000,
+    position: 'relative',
+    width: 500,
+    WebkitBoxShadow: '0 0 5px black',
+    MozBoxShadow: '0 0 5px black',
+    boxShadow: '0 0 5px black',
+    color: 'black'
+  };
+  return (
+    <Expand
+      id={props.id}
+      label={props.label || "Add Project"}
+      expandBoxStyle={expandBoxStyle} style={props.style}
+    >
+      <NewProjectForm label="Create Project" onSubmit={props.addProject} />
+    </Expand>
+  );
+};
+
+AddProject.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  addProject: PropTypes.func.isRequired,
+  style: PropTypes.object
+};
+
+
+export default AddProject;

static/js/components/Datasets.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from "react-redux";
 import { reduxForm } from 'redux-form';
 
-import { FormComponent, Form, TextInput, FileInput, SubmitButton } from './Form';
+import { FormComponent, Form, TextInput, FileInput, SubmitButton } from './Form/index';
 import * as Validate from '../validate';
 import Expand from './Expand';
 import Delete from './Delete';

static/js/components/Delete.jsx renamed to static/js/components/Delete/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const Delete = (props) => {
   const style = {
@@ -19,11 +20,11 @@ const Delete = (props) => {
   );
 };
 Delete.propTypes = {
-  ID: React.PropTypes.oneOfType([
-    React.PropTypes.number,
-    React.PropTypes.string]).isRequired,
-  delete: React.PropTypes.func.isRequired,
-  typeName: React.PropTypes.string
+  ID: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string]).isRequired,
+  delete: PropTypes.func.isRequired,
+  typeName: PropTypes.string
 };
 
 export default Delete;

static/js/components/Features.jsx

@@ -4,7 +4,7 @@ import { reduxForm } from 'redux-form';
 import ReactTabs from 'react-tabs';
 
 import { FormComponent, Form, TextInput, TextareaInput, SubmitButton,
-         CheckBoxInput, SelectInput } from './Form';
+         CheckBoxInput, SelectInput } from './Form/index';
 import * as Validate from '../validate';
 import Expand from './Expand';
 import * as Action from '../actions';

static/js/components/Form.jsx renamed to static/js/components/Form/index.jsx

@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+
 
 export const FormComponent = (props) => {
 };

static/js/components/Main.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 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';
@@ -10,7 +11,9 @@ import configureStore from '../configureStore';
 import * as Action from '../actions';
 import WebSocket from 'baselayer/components/WebSocket';
 import CesiumMessageHandler from '../CesiumMessageHandler';
-import { ProjectSelector, AddProject, ProjectTab } from './Projects';
+import AddProject from '../containers/AddProject';
+import ProjectSelector from '../containers/ProjectSelector';
+import ProjectTab from '../containers/ProjectTab';
 import DatasetsTab from './Datasets';
 import FeaturesTab from './Features';
 import ModelsTab from './Models';
@@ -372,10 +375,10 @@ class MainContent extends React.Component {
   }
 }
 MainContent.propTypes = {
-  selectedProject: React.PropTypes.object.isRequired,
-  root: React.PropTypes.string.isRequired,
-  logoSpinAngle: React.PropTypes.number.isRequired,
-  spinLogo: React.PropTypes.func
+  selectedProject: PropTypes.object.isRequired,
+  root: PropTypes.string.isRequired,
+  logoSpinAngle: PropTypes.number.isRequired,
+  spinLogo: PropTypes.func
 };
 
 const mapStateToProps = function (state) {

static/js/components/Models.jsx

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { reduxForm } from 'redux-form';
 
-import { FormComponent, TextInput, CheckBoxInput, SelectInput, SubmitButton, Form } from './Form';
+import { FormComponent, TextInput, CheckBoxInput, SelectInput, SubmitButton, Form } from './Form/index';
 
 import * as Validate from '../validate';
 

static/js/components/Predictions.jsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { reduxForm } from 'redux-form';
 
 import { FormComponent, SelectInput, SubmitButton,
-         Form } from './Form';
+         Form } from './Form/index';
 
 import * as Validate from '../validate';
 

static/js/components/ProjectForm/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FormComponent, Form, SelectInput, TextInput, SubmitButton } from '../Form/index';
+
+
+const ProjectForm = (props) => {
+  const { fields: { projectName, projectDescription },
+          error, resetForm, submitting, handleSubmit } = props;
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <TextInput label="Project Name" {...projectName} />
+      <TextInput label="Project Description (optional)" {...projectDescription} />
+      <SubmitButton
+        label={props.label}
+        submitting={submitting} resetForm={resetForm}
+      />
+    </Form>
+  );
+};
+ProjectForm.propTypes = {
+  fields: PropTypes.object.isRequired,
+  label: PropTypes.string.isRequired,
+  error: PropTypes.string,
+  handleSubmit: PropTypes.func.isRequired,
+  submitting: PropTypes.bool.isRequired,
+  resetForm: PropTypes.func.isRequired
+};
+
+export default ProjectForm;

static/js/components/ProjectSelector/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {SelectInput, Form} from '../Form/index';
+
+
+let ProjectSelector = (props) => {
+  const { fields: { project } } = props;
+
+  const projects = props.projects.map(proj => (
+    {
+      id: proj.id,
+      label: proj.name
+    }
+  ));
+
+  return (
+    <div style={props.style}>
+      <Form onSubmit={form => null}>
+        <SelectInput
+          label={props.label}
+          options={projects}
+          {...project}
+        />
+      </Form>
+    </div>
+  );
+};
+ProjectSelector.propTypes = {
+  fields: PropTypes.object,
+  projects: PropTypes.arrayOf(PropTypes.object).isRequired,
+  style: PropTypes.object,
+  label: PropTypes.string
+};
+
+
+export default ProjectSelector;