work in progress.

backend/src/file.js

@@ -9,22 +9,11 @@ const uploadMiddleware = multer({ dest: './static/uploads' })
 
 const handleFile = async (req, res) => {
   const { file } = req
-  const { description } = req.body
   if (!file) {
     await res.json({ error: 'File not received.' })
     return
   }
-  const dbFile = await db.mutation.createFile({
-    data: {
-      path: file.path,
-      name: file.originalname,
-      description: description,
-      filename: file.filename,
-      mimetype: file.mimetype,
-      size: file.size
-    }
-  })
-  await res.json({ file: dbFile })
+  await res.json({ file })
 }
 
 module.exports = { uploadMiddleware, handleFile }

backend/src/system.js

@@ -53,16 +53,16 @@ const typeDefs = `
 function system () {
   return {
     apiVersion: '0.1',
-    hostname: os.hostname,
-    type: os.type,
-    platform: os.platform,
-    arch: os.arch,
-    release: os.release,
-    uptime: os.uptime,
-    loadavg: os.loadavg,
-    totalmem: os.totalmem,
-    freemem: os.freemem,
-    cpus: os.cpus,
+    hostname: os.hostname(),
+    type: os.type(),
+    platform: os.platform(),
+    arch: os.arch(),
+    release: os.release(),
+    uptime: os.uptime(),
+    loadavg: os.loadavg(),
+    totalmem: os.totalmem(),
+    freemem: os.freemem(),
+    cpus: os.cpus(),
     networkInterfaces: () => {
       const interfaces = os.networkInterfaces()
       const ifaceArray = []

frontend/components/FileUpload.js

@@ -1,11 +1,38 @@
 import { endpoint } from '../config'
 
+const FileFields = props => (
+  <fieldset>
+    <label htmlFor='file'>File</label>
+    <input type='file' name='file' id='file' onChange={props.selectFile} />
+    <label htmlFor='name'>File name</label>
+    <input type='text' name='name' id='name' placeholder='File name' value={props.state.name} onChange={props.onChange} />
+    <label htmlFor='description'>File description</label>
+    <textarea name='description' id='description' placeholder='File description' value={props.state.description} onChange={props.onChange} />
+  </fieldset>
+)
+
+const FileState = {
+  file: null,
+  name: '',
+  description: '',
+  filename: '',
+  mimetype: '',
+  size: '',
+  path: '',
+  uploading: false
+}
+
+async function uploadFile(file) {
+  const body = new FormData()
+  body.append('file', file)
+
+  const res = await fetch(`${endpoint}/upload`, { method: 'POST', body })
+  return res.json()
+}
+
 class FileUpload extends React.Component {
   state = {
-    file: null,
-    description: '',
-    path: '',
-    uploading: false
+    ...FileState
   }
 
   upload = async event => {
@@ -63,3 +90,4 @@ class FileUpload extends React.Component {
 }
 
 export default FileUpload
+export { FileFields, FileState, uploadFile }

frontend/components/Header.js

@@ -49,8 +49,6 @@ nav {
 }
 
 nav a {
-  display: flex;
-  justify-self: end;
   padding: 0 1em;
 }
 `

frontend/components/ProjectForm.js

@@ -1,8 +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'
+import { FileFields, FileState, uploadFile } from './FileUpload'
+import { ProjectVersionFields, ProjectVersionState } from './ProjectVersionForm'
 
 const CREATE_PROJECT = gql`
   mutation CREATE_PROJECT($name: String!, $abbreviation: String!, $description: String) {
@@ -94,6 +94,14 @@ class Project extends React.Component {
             this.state.id = data.createProject.id
           }}>
             <ProjectFields title="Project" state={this.state} onChange={this.toState} />
+            {this.state.versions.map(version =>
+              <ProjectVersionFields title="Project version" state={version} onChange={this.toState} />
+            )}
+            <button onClick={event => this.state.versions.push(ProjectVersionState)}>Add project version</button>
+            {this.state.files.map(file =>
+              <FileFields state={file} onChange={this.toState} />
+            )}
+            <button onClick={event => this.state.files.push(FileState)}>Add file</button>
             <button type='submit'>{this.state.id && this.state.id !== "__NEW__" ? "Save" : "Add"}</button>
           </form>
         )}

frontend/components/ProjectVersionForm.js

@@ -13,23 +13,27 @@ const CREATE_PROJECT_VERSION = gql`
 const ProjectVersionFields = props => (
   <fieldset>
     {props.title && <legend>{props.title}</legend>}
-    <label htmlFor='name'>Project name</label>
+    <label htmlFor='name'>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>
+    <label htmlFor='change'>Changes</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>
 )
 
+const ProjectVersionState = {
+  id: null,
+  name: '',
+  date: '',
+  change: '',
+  changes: [],
+  project: null,
+}
+
 class ProjectVersionForm extends React.Component {
   state = {
-    id: null,
-    name: '',
-    date: '',
-    change: '',
-    changes: [],
-    project: null,
+    ...ProjectVersionState,
     ...this.props.projectVersion
   }
 
@@ -66,3 +70,4 @@ class ProjectVersionForm extends React.Component {
 }
 
 export default ProjectVersionForm
+export { ProjectVersionFields, ProjectVersionState }

frontend/components/System.js

@@ -43,20 +43,29 @@ const QUERY_SYSTEM = gql`
 
 const System = props => (
   <Query query={QUERY_SYSTEM}>
-    {(data, loading, error) => (
-      <div>
-        <h1>System</h1>
-        <p>API Version:</p><p>{data.apiVersion}</p>
-        <p>Hostname:</p><p>{data.hostname}</p>
-        <p>Type:</p><p>{data.type}</p>
-        <p>Platform:</p><p>{data.platform}</p>
-        <p>Architecture:</p><p>{data.arch}</p>
-        <p>Release:</p><p>{data.release}</p>
-        <p>Uptime:</p><p>{data.uptime}</p>
-        <p>Total memory:</p><p>{data.totalmem}</p>
-        <p>Free memory:</p><p>{data.freemem}</p>
-      </div>
-    )}
+    {({ data, loading, error }) => {
+      if (loading) return <p>Loading system data...</p>
+      if (error) {
+        console.error(error)
+        return <p>Error: {error.message}</p>
+      }
+      if (!data) return <p>No system data found</p>
+      const { system } = data
+      return (
+        <div>
+          <h1>System</h1>
+          <p>API Version:</p><p>{system.apiVersion}</p>
+          <p>Hostname:</p><p>{system.hostname}</p>
+          <p>Type:</p><p>{system.type}</p>
+          <p>Platform:</p><p>{system.platform}</p>
+          <p>Architecture:</p><p>{system.arch}</p>
+          <p>Release:</p><p>{system.release}</p>
+          <p>Uptime:</p><p>{system.uptime}</p>
+          <p>Total memory:</p><p>{system.totalmem}</p>
+          <p>Free memory:</p><p>{system.freemem}</p>
+        </div>
+      )
+    }}
   </Query>
 )