generalizing forms

frontend/components/ProjectForm.js

@@ -1,6 +1,8 @@
 import styled from 'styled-components'
 import gql from 'graphql-tag'
 import { Mutation, Query } from 'react-apollo'
+import File from './File'
+import ProjectVersion from './ProjectVersion'
 
 const CREATE_PROJECT = gql`
   mutation CREATE_PROJECT($name: String!, $abbreviation: String!, $description: String) {
@@ -55,12 +57,27 @@ const ProjectSelector = props => (
   </Query >
 )
 
+const ProjectFields = props => (
+  <fieldset>
+    {props.title && <legend>{props.title}</legend>}
+    <label htmlFor='name'>Project name</label>
+    <input type='text' name='name' id='name' placeholder='Project name' value={props.state.name} onChange={props.onChange} />
+    <label htmlFor='abbreviation'>Project abbreviation</label>
+    <input type='text' name='abbreviation' id='abbreviation' placeholder='Project abbreviation' value={props.state.abbreviation} onChange={props.onChange} />
+    <label htmlFor='description'>Project description</label>
+    <textarea name='description' id='description' placeholder='Project description' value={props.state.description} onChange={props.onChange} />
+  </fieldset>
+)
+
 class Project extends React.Component {
   state = {
     id: null,
     name: '',
     abbreviation: '',
     description: '',
+    files: [],
+    versions: [],
+    ...this.props.project
   }
 
   toState = event => {
@@ -76,16 +93,8 @@ class Project extends React.Component {
             const { data } = await createProject()
             this.state.id = data.createProject.id
           }}>
-            <h1>Project Setup</h1>
-            <fieldset id='project-generic'>
-              <label htmlFor='name'>Project name</label>
-              <input type='text' name='name' id='name' placeholder='Project name' value={this.state.name} onChange={this.toState} />
-              <label htmlFor='abbreviation'>Project abbreviation</label>
-              <input type='text' name='abbreviation' id='abbreviation' placeholder='Project abbreviation' value={this.state.abbreviation} onChange={this.toState} />
-              <label htmlFor='description'>Project description</label>
-              <textarea name='description' id='description' placeholder='Project description' value={this.state.description} onChange={this.toState} />
-            </fieldset>
-            <button type='submit'>Save</button>
+            <ProjectFields title="Project" state={this.state} onChange={this.toState} />
+            <button type='submit'>{this.state.id && this.state.id !== "__NEW__" ? "Save" : "Add"}</button>
           </form>
         )}
       </Mutation>
@@ -94,4 +103,4 @@ class Project extends React.Component {
 }
 
 export default Project
-export { ProjectSelector }
+export { ProjectSelector, QUERY_PROJECTS, ProjectFields }

frontend/components/ProjectVersionForm.js

@@ -10,14 +10,27 @@ const CREATE_PROJECT_VERSION = gql`
   }
 `
 
+const ProjectVersionFields = props => (
+  <fieldset>
+    {props.title && <legend>{props.title}</legend>}
+    <label htmlFor='name'>Project name</label>
+    <input type='text' name='name' id='name' placeholder='Project version name' value={props.state.name} onChange={props.onChange} />
+    <label htmlFor='date'>Date</label>
+    <input type='date' name='date' id='date' placeholder='Project date' value={props.state.date} onChange={props.onChange} />
+    <label htmlFor='change'>Comments</label>
+    <input type='text' name='change' id='change' placeholder='Project change' value={props.state.change} onChange={props.onChange} /><button onClick={props.addChange}>Add</button>
+  </fieldset>
+)
+
 class ProjectVersionForm extends React.Component {
   state = {
-    id: this.props.project ? this.props.project.id : null,
+    id: null,
     name: '',
     date: '',
     change: '',
     changes: [],
-    project: null
+    project: null,
+    ...this.props.projectVersion
   }
 
   toState = event => {
@@ -25,11 +38,6 @@ class ProjectVersionForm extends React.Component {
   }
 
   addComment = event => {
-    event.preventDefault()
-    const newState = { ...this.state }
-    newState.changes.push(this.state.change)
-    newState.change = ''
-    this.setState(newState)
   }
 
   render() {
@@ -41,17 +49,14 @@ class ProjectVersionForm extends React.Component {
             const { data } = await createProjectVersion()
             this.state.id = data.createProjectVersion.id
           }}>
-            {!this.props.title && <h1>Project Version</h1>}
-            <fieldset id='project-generic'>
-              <label htmlFor='name'>Project name</label>
-              <input type='text' name='name' id='name' placeholder='Project version name' value={this.state.name} onChange={this.toState} />
-              <label htmlFor='date'>Date</label>
-              <input type='date' name='date' id='date' placeholder='Project date' value={this.state.date} onChange={this.toState} />
-              <label htmlFor='change'>Comments</label>
-              <input type='text' name='change' id='change' placeholder='Project change' value={this.state.change} onChange={this.toState} /><button onClick={this.addComment}>Add</button>
-              {this.state.changes.map((change, index) => <p key={index}>{change}</p>)}
-              {this.props.project || <ProjectSelector name='project' id='project' value={this.state.project} onChange={this.toState} />}
-            </fieldset>
+            <ProjectVersionFields title="Project Version" state={this.state} addChange={event => {
+              event.preventDefault()
+              const newChanges = this.state.changes
+              newChanges.push(this.state.change)
+              this.setState({ changes: newChanges, change: '' })
+            }} onChange={this.toState} />
+            {this.state.changes.map((change, index) => <p key={index}>{change}</p>)}
+            {this.props.project || <ProjectSelector name='project' id='project' value={this.state.project} onChange={this.toState} />}
             <button type='submit'>Save</button>
           </form>
         )}

frontend/package-lock.json

@@ -5046,6 +5046,23 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-adopt": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/react-adopt/-/react-adopt-0.6.0.tgz",
+      "integrity": "sha1-5f+QOmVdMIIhf4K8nVAzpLZPr60=",
+      "requires": {
+        "hoist-non-react-statics": "^2.5.0",
+        "react": "^16.3.2",
+        "react-display-name": "^0.2.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
     "react-apollo": {
       "version": "2.5.4",
       "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.5.4.tgz",
@@ -5084,6 +5101,11 @@
         }
       }
     },
+    "react-display-name": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.4.tgz",
+      "integrity": "sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA=="
+    },
     "react-dom": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
     "next-with-apollo": "^3.4.0",
     "nprogress": "^0.2.0",
     "react": "^16.8.6",
+    "react-adopt": "^0.6.0",
     "react-apollo": "^2.5.4",
     "react-dom": "^16.8.6",
     "standard": "^12.0.1",