implement add roaster on frontend

fixes #24, fixes #27
glifchits · Apr 12, 2018 · f2b6e33 · f2b6e33
1 parent ea0397e
commit f2b6e33
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 26 deletions.
diff --git a/src/containers/AddNewCoffee.js b/src/containers/AddNewCoffee.js
@@ -33,6 +33,7 @@ import FormTextInput from "../components/form/FormTextInput";
 import Dropdown from "../components/Dropdown";
 import coffee from "../testdata/my_coffees";
 import SearchbarHeader from "../components/SearchbarHeader";
+import { GET_ROASTERS } from "../queries";
 
 const ROAST_OPTIONS = [
   { label: "Light", value: "light" },
@@ -50,15 +51,6 @@ class ShowRoasterModal extends React.Component {
   render() {
     const { onSelectRoaster, onAddNewRoaster } = this.props;
 
-    const GET_ROASTERS = gql`
-      {
-        roasters {
-          id
-          name
-        }
-      }
-    `;
-
     return (
       <Modal
         onRequestClose={this.props.onCloseModal}

diff --git a/src/containers/AddNewRoaster.js b/src/containers/AddNewRoaster.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from "react";
-import { Query } from "react-apollo";
+import { Query, Mutation } from "react-apollo";
 import gql from "graphql-tag";
 import {
   View,
@@ -33,6 +33,7 @@ import FormTextInput from "../components/form/FormTextInput";
 import Dropdown from "../components/Dropdown";
 import coffee from "../testdata/my_coffees";
 import SearchbarHeader from "../components/SearchbarHeader";
+import { CREATE_ROASTER, GET_ROASTERS } from "../queries";
 
 export default class AddNewRoaster extends React.Component {
   state = {
@@ -49,11 +50,6 @@ export default class AddNewRoaster extends React.Component {
     tabBarVisible: false,
   };
 
-  _handleAddRoaster = () => {
-    // Do something
-    console.log("_handleAddRoaster", this.state);
-  };
-
   _handleInputChange = (newText, inputName) => {
     let newInputValues = { ...this.state.inputValues };
     newInputValues[inputName] = newText;
@@ -80,32 +76,54 @@ export default class AddNewRoaster extends React.Component {
         <ScrollView style={styles.body}>
           <FormTextInput
             label="Name (Required)"
-            placeholder="What name does this coffee roaster go by?"
-            value={inputValues.roasterName}
-            type="roasterName"
+            placeholder="What do they call this roaster?"
+            value={inputValues.name}
+            type="name"
             onChange={this._handleInputChange}
           />
           <FormTextInput
             label="Location"
             placeholder="Where are they located?"
-            value={inputValues.roasterLocation}
-            type="roasterLocation"
+            value={inputValues.location}
+            type="location"
             onChange={this._handleInputChange}
           />
           <FormTextInput
             label="Description"
             placeholder="Some text to brag about this roaster"
-            value={inputValues.roasterDescription}
-            type="roasterDescription"
+            value={inputValues.description}
+            type="description"
             onChange={this._handleInputChange}
             multiline
             numberOfLines={4}
           />
         </ScrollView>
-        <ButtonBar
-          buttonText="Add This Roaster"
-          onPress={this._handleAddRoaster}
-        />
+        <Mutation
+          mutation={CREATE_ROASTER}
+          update={(cache, { data }) => {
+            const { roasters } = cache.readQuery({ query: GET_ROASTERS });
+            const newRoasters = [data.createRoaster, ...roasters];
+            cache.writeQuery({
+              query: GET_ROASTERS,
+              data: { roasters: newRoasters },
+            });
+          }}
+          onCompleted={data => this.props.navigation.goBack()}
+        >
+          {(addRoaster, { loading, error }) => {
+            const { inputValues } = this.state;
+            const { name, location, description, ...metadata } = inputValues;
+            const args = { name, location, description };
+            return (
+              <ButtonBar
+                buttonText="Add This Roaster"
+                onPress={() => {
+                  addRoaster({ variables: { ...args, metadata } });
+                }}
+              />
+            );
+          }}
+        </Mutation>
       </View>
     );
   }
@@ -117,6 +135,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   body: {
+    flexGrow: 1,
     padding: 20,
   },
   headerName: {

diff --git a/src/queries.js b/src/queries.js
@@ -35,6 +35,15 @@ export const GET_BREW = gql`
   ${BREW_FRAGMENT}
 `;
 
+export const GET_ROASTERS = gql`
+  {
+    roasters {
+      id
+      name
+    }
+  }
+`;
+
 export const CREATE_ROASTER = gql`
   mutation CreateRoaster(
     $name: String!