Get form working, needs some design

components/form.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Form = ({ callback, children }) => {
+  const formRef = React.createRef();
+  const data = {}
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    for(let field of formRef.current.elements) {
+      if(field.id)
+        data[field.id] = field.value;
+    }
+    callback(data, formRef.current);
+  }
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit}>
+      {children}
+    </form>
+  )
+}
+
+export default Form

components/input.js

@@ -1,3 +1,5 @@
+import React, { fragment } from 'react'
+
 class Input extends React.Component {
   constructor(props) {
     super(props)

lib/init-apollo.js

@@ -14,7 +14,7 @@ function create (initialState) {
     connectToDevTools: process.browser,
     ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
     link: new HttpLink({
-      uri: process.env.CADET_GRAPHQL, // Server URL (must be absolute)
+      uri: 'https://api.graph.cool/simple/v1/cjle3is6l2gkz01079fo1axnl', // Server URL (must be absolute)
       credentials: 'same-origin' // Additional fetch() options like `credentials` or `headers`
     }),
     cache: new InMemoryCache().restore(initialState || {})

package.json

@@ -9,9 +9,11 @@
     "apollo-boost": "^0.1.15",
     "graphql": "^0.13.2",
     "isomorphic-unfetch": "^2.1.1",
+    "jest": "^23.5.0",
     "next": "^6.1.1",
     "react": "^16.4.2",
     "react-apollo": "^2.1.11",
-    "react-dom": "^16.4.2"
+    "react-dom": "^16.4.2",
+    "react-testing-library": "^5.0.1"
   }
 }

pages/apply.js

@@ -1,27 +1,60 @@
 import React, { fragment } from 'react'
+import { graphql } from 'react-apollo'
 import gql from "graphql-tag"
 import { Mutation } from "react-apollo"
 import Input from '../components/input'
+import Form from '../components/form'
 
-const Apply = () => {
-  const handleSubmit = (event) => {
-    event.preventDefault();
+const ADD_CADET = gql`
+  mutation AddCadet($name: String!, $email: String!, $location: String!, $languages: String!, $githubUrl: String, $twitterUrl: String, $linkedInUrl: String) {
+    createCadet(name: $name, email: $email, location: $location, languages: $languages, githubUrl: $githubUrl, twitterUrl: $twitterUrl, linkedInUrl: $linkedInUrl) {
+      id
+			name
+			email
+			location
+			languages
+			githubUrl
+			twitterUrl
+			linkedInUrl
+    }
   }
+`;
+
+const Apply = () => {
+  const data = {}
+
+	const formSubmitted = (formData) => {
+
+	}
 
   return (
-    <fragment>
-      <h1>Apply for the Spacedojo Cadet program</h1>
-      <form onSubmit={handleSubmit} >
-        <Input type="text" label="name" />
-        <Input type="email" label="email" />
-        <Input type="textarea" label="languages" rows="4" hint="Languages you've used to develop before" />
-        <Input type="text" label="githubUrl" />
-        <Input type="text" label="twitterUrl" />
-        <Input type="text" label="linkedInUrl" />
-        <Input type="text" label="location" hint="Your physical city and state" />
-        <Input type="submit" value="Apply" />
-      </form>
-    </fragment>
+		<Mutation mutation={ADD_CADET}>
+			{(addCadet, {error, data}) => (
+				<fragment>
+					<h1>Apply for the Spacedojo Cadet program</h1>
+					<Form callback={(formData, ref) => {
+						addCadet({variables: { ...formData }})
+						.then((response) => {
+							ref.reset()
+							console.log(response.data, 'INCOMING TRANSMISSION')
+						})
+						.catch((err) => {
+							console.log(err, 'DANGER WILL')
+							console.log(error, 'DANGER WILL PT 2')
+						})
+					}}>
+						<Input type="text" label="name" required />
+						<Input type="email" label="email" required />
+						<Input type="textarea" label="languages" rows="4" hint="Languages you've used to develop before" required />
+						<Input type="text" label="githubUrl" />
+						<Input type="text" label="twitterUrl" />
+						<Input type="text" label="linkedInUrl" />
+						<Input type="text" label="location" hint="Your physical city and state" required />
+						<Input type="submit" value="Apply" />
+					</Form>
+				</fragment>
+			)}
+		</Mutation>
   )
 }