From 2bdce34ec4c08000f983b0e54ef6f8f67cf6956e Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Wed, 4 Jan 2017 11:06:08 -0200
Subject: [PATCH 01/14] Templates for Relay frontend

Add.js.template - simple screen with a form with all input fields
of the mutation from schema.json, it commit mutation onSubmit

AddMutation.js.template - simple add mutation template

Edit.js.template - simple screen with a form to edit a graphql object type

EditMutation.js.template - simple edit mutation template

List.js.template - list of objects from relay

View.js.template - tabbed detail view of graphql object type

WIP of #12
---
 .../frontend/add/templates/Add.js.template    | 109 ++++++++++++++++
 .../add/templates/AddMutation.js.template     |  63 +++++++++
 .../frontend/edit/templates/Edit.js.template  | 106 ++++++++++++++++
 .../edit/templates/EditMutation.js.template   |  48 +++++++
 packages/generator/src/frontend/list/index.js |  62 +++++++++
 .../frontend/list/templates/List.js.template  | 120 ++++++++++++++++++
 .../frontend/view/templates/View.js.template  |  57 +++++++++
 7 files changed, 565 insertions(+)
 create mode 100644 packages/generator/src/frontend/add/templates/Add.js.template
 create mode 100644 packages/generator/src/frontend/add/templates/AddMutation.js.template
 create mode 100644 packages/generator/src/frontend/edit/templates/Edit.js.template
 create mode 100644 packages/generator/src/frontend/edit/templates/EditMutation.js.template
 create mode 100644 packages/generator/src/frontend/list/index.js
 create mode 100644 packages/generator/src/frontend/list/templates/List.js.template
 create mode 100644 packages/generator/src/frontend/view/templates/View.js.template

diff --git a/packages/generator/src/frontend/add/templates/Add.js.template b/packages/generator/src/frontend/add/templates/Add.js.template
new file mode 100644
index 0000000..7bbdec1
--- /dev/null
+++ b/packages/generator/src/frontend/add/templates/Add.js.template
@@ -0,0 +1,109 @@
+import React, { Component, PropTypes } from 'react';
+import Relay from 'react-relay';
+import RelayStore from '../../RelayStore';
+import { withRouter } from 'react-router';
+
+import <%= name %>AddMutation from './<%= name %>AddMutation';
+
+import Form from '../common/Form';
+
+class <%= name %>Add extends Component {
+  static contextTypes = {
+    showSnackbar: PropTypes.func,
+  };
+
+  fields = [
+    {
+      name: 'id',
+      placeholder: 'ID',
+      required: true,
+    },
+    // TODO - add ObjectType fields here
+  ];
+
+  onSubmit = (data) => {
+    const mutation = new <%= name %>AddMutation({
+      viewer: this.props.viewer,
+      ...data,
+    });
+
+    RelayStore.commitUpdate(mutation, {
+      onSuccess: ({ <%= name %>Add }) => {
+        this.context.showSnackbar({
+          message: '<%= rawName %> created successfully!',
+        });
+
+        this.props.router.push(`/<%= pluralName %>/view/${<%= name %>Add.<%= rawName %>Edge.node.id}`);
+      },
+      onFailure: (failureResponse) => {
+        this.context.showSnackbar({
+          message: 'There was an error while trying to create a <%= rawName %>.',
+        });
+
+        console.log('FAIL', failureResponse);
+      },
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <h1 style={styles.title}>
+          New <%= name %>
+        </h1>
+        <Form
+          fields={this.fields}
+          onSubmit={this.onSubmit}
+        />
+      </div>
+    );
+  }
+}
+
+const styles = {
+  form: {
+    backgroundColor: 'white',
+    boxShadow: 'rgba(0, 0, 0, 0.056863) 0px 7px 8px, rgba(0, 0, 0, 0.227451) 0px 0px 0px',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#E7ECEA',
+    padding: 20,
+    paddingTop: 50,
+  },
+  formContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  title: {
+    fontSize: 25,
+    fontWeight: 300,
+  },
+  actionsContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: 5,
+    paddingRight: 8,
+    borderTopStyle: 'solid',
+    borderTopWidth: 1,
+    paddingTop: 15,
+    borderColor: '#ECECEC',
+  },
+  formField: {
+    marginRight: 10,
+    flex: '1 0 47%',
+  },
+  selectField: {
+    marginRight: 10,
+    flex: '1 0 48%',
+  },
+};
+
+export default Relay.createContainer(withRouter(<%= name %>Add), {
+  fragments: {
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        ${<%= name %>AddMutation.getFragment('viewer')}
+      }
+    `,
+  },
+});
diff --git a/packages/generator/src/frontend/add/templates/AddMutation.js.template b/packages/generator/src/frontend/add/templates/AddMutation.js.template
new file mode 100644
index 0000000..8365533
--- /dev/null
+++ b/packages/generator/src/frontend/add/templates/AddMutation.js.template
@@ -0,0 +1,63 @@
+import Relay from 'react-relay';
+
+export default class <%= name %>AddMutation extends Relay.Mutation {
+  static fragments = {
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        id
+      }
+    `,
+  };
+
+  getMutation() {
+    return Relay.QL`mutation {
+      <%= name %>Add
+    }`;
+  }
+
+  getVariables() {
+    const {
+      id
+      // TODO - add mutation input fields here
+    } = this.props;
+
+    return {
+      id
+      // TODO - add mutation input fields here
+    };
+  }
+
+  getFatQuery() {
+    return Relay.QL`
+      fragment on <%= name %>AddPayload {
+        <%= rawName %>Edge
+        viewer {
+          <%= pluralName %>
+        }
+      }
+    `;
+  }
+
+  getConfigs() {
+    return [
+      {
+        type: 'RANGE_ADD',
+        parentName: 'viewer',
+        parentID: this.props.viewer.id,
+        connectionName: '<%= pluralName %>',
+        edgeName: '<%= rawName %>Edge',
+        rangeBehaviors: {
+          '': 'prepend',
+        },
+      },
+      {
+        type: 'REQUIRED_CHILDREN',
+        children: [Relay.QL`
+          fragment on <%= name %>AddPayload {
+            <%= rawName %>Edge
+          }
+        `],
+      },
+    ];
+  }
+}
diff --git a/packages/generator/src/frontend/edit/templates/Edit.js.template b/packages/generator/src/frontend/edit/templates/Edit.js.template
new file mode 100644
index 0000000..1e4bd0a
--- /dev/null
+++ b/packages/generator/src/frontend/edit/templates/Edit.js.template
@@ -0,0 +1,106 @@
+import React, { Component, PropTypes } from 'react';
+import Relay from 'react-relay';
+import RelayStore from '../../../RelayStore';
+import { withRouter } from 'react-router';
+
+import <%= name %>EditMutation from './<%= name %>EditMutation.js';
+
+import Form from '../../common/Form';
+
+class <%= name %>Edit extends Component {
+  static contextTypes = {
+    showSnackbar: PropTypes.func,
+  };
+
+  fields = [
+    {
+      name: 'id',
+      placeholder: 'ID',
+      required: true,
+    },
+    // TODO - add ObjectType fields here
+  ];
+
+  onSubmit = (data) => {
+    const { company } = this.props;
+
+    const mutation = new <%= rawName %>EditMutation({
+      ...data,
+    });
+
+    RelayStore.commitUpdate(mutation, {
+      onSuccess: () => {
+        this.context.showSnackbar({
+          message: '<%= name %> edited successfully!',
+        });
+
+        this.props.router.goBack();
+      },
+      onFailure: (failureResponse) => {
+        this.context.showSnackbar({
+          message: 'There was an error while trying to edit this <%= rawName %>.',
+        });
+
+        console.log('FAIL', failureResponse);
+      },
+    });
+  };
+
+  render() {
+    const { <%= rawName %> } = this.props;
+
+    return (
+      <Form
+        fields={this.fields}
+        onSubmit={this.onSubmit}
+        value={<%= rawName %>}
+      />
+    );
+  }
+}
+
+const styles = {
+  formContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    paddingTop: 30,
+    paddingLeft: 10,
+  },
+  actionsContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: 5,
+    paddingRight: 8,
+    borderTopStyle: 'solid',
+    borderTopWidth: 1,
+    paddingTop: 15,
+    borderColor: '#ECECEC',
+  },
+  formField: {
+    marginRight: 10,
+    flex: '1 0 47%',
+  },
+  selectField: {
+    marginRight: 10,
+    flex: '1 0 48%',
+  },
+};
+
+export default Relay.createContainer(withRouter(<%= name %>Edit), {
+  initialVariables: {
+    id: null,
+  },
+  fragments: {
+    <%= rawName %>: () => Relay.QL`
+      fragment on <%= name %> {
+        id
+        ${<%= name %>EditMutation.getFragment('<%= rawName %>')}
+      }
+    `,
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        id
+      }
+    `,
+  },
+});
diff --git a/packages/generator/src/frontend/edit/templates/EditMutation.js.template b/packages/generator/src/frontend/edit/templates/EditMutation.js.template
new file mode 100644
index 0000000..85156de
--- /dev/null
+++ b/packages/generator/src/frontend/edit/templates/EditMutation.js.template
@@ -0,0 +1,48 @@
+import Relay from 'react-relay';
+
+export default class <%= name %>EditMutation extends Relay.Mutation {
+  static fragments = {
+    <%= rawName %>: () => Relay.QL`
+      fragment on <%= name %> {
+        id
+      }
+    `,
+  };
+
+  getMutation() {
+    return Relay.QL`mutation {
+      <%= name %>Edit
+    }`;
+  }
+
+  getVariables() {
+    const {
+      <%= rawName %>: {
+        id,
+      },
+      // Todo add more mutation input fields here
+    } = this.props;
+
+    return {
+      id,
+      // Todo add more mutation input fields here
+    };
+  }
+
+  getFatQuery() {
+    return Relay.QL`
+      fragment on FlightEditPayload {
+        <%= rawName %>
+      }
+    `;
+  }
+
+  getConfigs() {
+    return [{
+      type: 'FIELDS_CHANGE',
+      fieldIDs: {
+      <%= rawName %>: this.props.<%= rawName %>.id,
+      },
+    }];
+  }
+}
diff --git a/packages/generator/src/frontend/list/index.js b/packages/generator/src/frontend/list/index.js
new file mode 100644
index 0000000..532f87f
--- /dev/null
+++ b/packages/generator/src/frontend/list/index.js
@@ -0,0 +1,62 @@
+import Generator from 'yeoman-generator';
+import pluralize from 'pluralize';
+import {
+  getMongooseModelSchema,
+  getConfigDir,
+  getRelativeConfigDir,
+  camelCaseText,
+  uppercaseFirstLetter,
+} from '../../utils';
+
+class ListGenerator extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.argument('name', {
+      type: String,
+      required: true,
+    });
+
+    // TODO read schema.json
+
+    this.destinationDir = getConfigDir('list');
+  }
+
+  _getConfigDirectories() {
+    return getRelativeConfigDir('loader', ['model', 'connection']);
+  }
+
+  generateList() {
+    // const schema = this.options.model ?
+    //   getMongooseModelSchema(this.options.model, true)
+    //   : null;
+
+    const name = uppercaseFirstLetter(this.options.name);
+
+    const templatePath = this.templatePath('List.js.template');
+
+    // const templatePath = schema ?
+    //   this.templatePath('LoaderWithSchema.js.template')
+    //   : this.templatePath('Loader.js.template');
+    //
+    // const directories = this._getConfigDirectories();
+
+    const pluralName = pluralize(this.options.name);
+
+    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}List.js`);
+    const templateVars = {
+      name,
+      rawName: this.options.name,
+      pluralName,
+      pluralCamelCaseName: camelCaseText(pluralName),
+    };
+
+    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+  }
+
+  end() {
+    this.log('🔥 List created!');
+  }
+}
+
+module.exports = ListGenerator;
diff --git a/packages/generator/src/frontend/list/templates/List.js.template b/packages/generator/src/frontend/list/templates/List.js.template
new file mode 100644
index 0000000..8f739e4
--- /dev/null
+++ b/packages/generator/src/frontend/list/templates/List.js.template
@@ -0,0 +1,120 @@
+// @flow
+
+import React, { Component } from 'react';
+import Relay from 'react-relay';
+import { withRouter } from 'react-router';
+
+import Table from '../common/Table';
+import Toolbar from '../common/Toolbar';
+
+class <%= name %>List extends Component {
+  state = {
+    isLoading: true,
+  };
+
+  tableColumns = [
+    {
+      property: '',
+      header: {
+        label: 'Actions',
+      },
+      icon: 'mode_edit',
+      type: 'icon',
+      clickPath: '/<%= pluralName %>/view/:id',
+    },
+    {
+      property: 'id',
+      header: {
+        label: 'ID',
+      },
+    },
+    // TODO - add more fields to table
+  ];
+
+  componentDidMount = () => {
+    this.setState({
+      isLoading: false,
+    });
+  };
+
+  _handleNew = () => this.props.router.push('/<%= pluralName %>/new');
+
+  _handleRefreshList = () => {
+    this.setState({
+      isLoading: true,
+    });
+
+    this.props.relay.forceFetch({}, ({ done }) => {
+      if (done) {
+        this.setState({
+          isLoading: false,
+        });
+      }
+    });
+  };
+
+  _handleLoadMore = () => {
+    const { relay } = this.props;
+
+    this.setState({
+      isLoading: true,
+    });
+
+    relay.setVariables({
+      count: relay.variables.count + 10,
+    }, ({ done }) => {
+      if (done) {
+        this.setState({
+          isLoading: false,
+        });
+      }
+    });
+  };
+
+  render() {
+    const { isLoading } = this.state;
+
+    return (
+      <div>
+        <Toolbar
+          title=<%= pluralName %>
+          primaryActionLabel="New <%= name %>"
+          primaryActionOnClick={this._handleNew}
+          onRefresh={this._handleRefreshList}
+        />
+
+        <Table
+          name="<%= name %>"
+          columns={this.tableColumns}
+          rows={this.props.viewer.<%= pluralName %>}
+          router={this.props.router}
+          onLoadMore={this._handleLoadMore}
+          isLoading={isLoading}
+        />
+      </div>
+    );
+  }
+}
+
+export default Relay.createContainer(withRouter(<%= name %>List), {
+  initialVariables: {
+    count: 20,
+  },
+  fragments: {
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        <%= pluralName %>(first: $count) {
+          pageInfo {
+            hasNextPage
+          }
+          edges {
+            node {
+              id
+              // TODO - add relay fields
+            }
+          }
+        }
+      }
+    `,
+  },
+});
diff --git a/packages/generator/src/frontend/view/templates/View.js.template b/packages/generator/src/frontend/view/templates/View.js.template
new file mode 100644
index 0000000..0a81b6b
--- /dev/null
+++ b/packages/generator/src/frontend/view/templates/View.js.template
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import Relay from 'react-relay';
+import { withRouter } from 'react-router';
+
+import <%= name %>Edit from './<%= name %>Edit';
+
+import Tabs from '../../common/Tabs';
+
+class <%= name %>View extends Component {
+  render() {
+    const { viewer } = this.props;
+    const { <%= rawName %> } = viewer;
+
+    const tabs = [{
+      label: 'Details',
+      component: (
+        <FlightEdit
+          <%= rawName %>={<%= rawName %>}
+          viewer={viewer}
+        />
+      ),
+      icon: 'assignment',
+    }];
+
+    return (
+      <div>
+        <h1 style={styles.title}><%= name %>: {<%= rawName %>.id}</h1>
+
+        <Tabs tabs={tabs} />
+      </div>
+    );
+  }
+}
+
+const styles = {
+  title: {
+    fontSize: 25,
+    fontWeight: 300,
+  },
+};
+
+export default Relay.createContainer(withRouter(<%= name %>View), {
+  initialVariables: {
+    id: null,
+  },
+  fragments: {
+    viewer: ({ id }) => Relay.QL`
+      fragment on Viewer {
+        <%= rawName %>(id: $id) {
+          id
+          ${<%= name %>Edit.getFragment('<%= rawName %>')}
+        }
+        ${<%= name %>Edit.getFragment('viewer')}
+      }
+    `,
+  },
+});

From b713a852c84477881245a2802124090fb900bcc4 Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Wed, 4 Jan 2017 11:32:59 -0200
Subject: [PATCH 02/14] fix templates issues, add generator v0 code, add them
 to package.json

---
 packages/generator/package.json               |  4 ++
 packages/generator/src/frontend/add/index.js  | 63 +++++++++++++++++++
 packages/generator/src/frontend/edit/index.js | 63 +++++++++++++++++++
 .../frontend/edit/templates/Edit.js.template  | 10 +--
 .../edit/templates/EditMutation.js.template   | 12 ++--
 packages/generator/src/frontend/list/index.js |  1 +
 .../frontend/list/templates/List.js.template  |  6 +-
 packages/generator/src/frontend/view/index.js | 63 +++++++++++++++++++
 .../frontend/view/templates/View.js.template  | 12 ++--
 9 files changed, 214 insertions(+), 20 deletions(-)
 create mode 100644 packages/generator/src/frontend/add/index.js
 create mode 100644 packages/generator/src/frontend/edit/index.js
 create mode 100644 packages/generator/src/frontend/view/index.js

diff --git a/packages/generator/package.json b/packages/generator/package.json
index 27c5160..e07914b 100644
--- a/packages/generator/package.json
+++ b/packages/generator/package.json
@@ -31,6 +31,10 @@
     "generators/mutation",
     "generators/test",
     "generators/utils.js",
+    "generators/frontend/add",
+    "generators/frontend/edit",
+    "generators/frontend/list",
+    "generators/frontend/view",
     "generators/graphql-logo.js",
     "generators/graphqlrc.json"
   ],
diff --git a/packages/generator/src/frontend/add/index.js b/packages/generator/src/frontend/add/index.js
new file mode 100644
index 0000000..c7d0614
--- /dev/null
+++ b/packages/generator/src/frontend/add/index.js
@@ -0,0 +1,63 @@
+import Generator from 'yeoman-generator';
+import pluralize from 'pluralize';
+import {
+  getMongooseModelSchema,
+  getConfigDir,
+  getRelativeConfigDir,
+  camelCaseText,
+  uppercaseFirstLetter,
+} from '../../utils';
+
+class AddGenerator extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.argument('name', {
+      type: String,
+      required: true,
+    });
+
+    // TODO read schema.json
+
+    this.destinationDir = getConfigDir('add');
+  }
+
+  _getConfigDirectories() {
+    return getRelativeConfigDir('loader', ['model', 'connection']);
+  }
+
+  generateList() {
+    // const schema = this.options.model ?
+    //   getMongooseModelSchema(this.options.model, true)
+    //   : null;
+
+    const name = uppercaseFirstLetter(this.options.name);
+
+    const templatePath = this.templatePath('Add.js.template');
+
+    // const templatePath = schema ?
+    //   this.templatePath('LoaderWithSchema.js.template')
+    //   : this.templatePath('Loader.js.template');
+    //
+    // const directories = this._getConfigDirectories();
+
+    const pluralName = pluralize(this.options.name);
+
+    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}Add.js`);
+    const templateVars = {
+      name,
+      rawName: this.options.name,
+      camelCaseName: camelCaseText(name),
+      pluralName,
+      pluralCamelCaseName: camelCaseText(pluralName),
+    };
+
+    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+  }
+
+  end() {
+    this.log('🔥 Add created!');
+  }
+}
+
+module.exports = AddGenerator;
diff --git a/packages/generator/src/frontend/edit/index.js b/packages/generator/src/frontend/edit/index.js
new file mode 100644
index 0000000..7d4a222
--- /dev/null
+++ b/packages/generator/src/frontend/edit/index.js
@@ -0,0 +1,63 @@
+import Generator from 'yeoman-generator';
+import pluralize from 'pluralize';
+import {
+  getMongooseModelSchema,
+  getConfigDir,
+  getRelativeConfigDir,
+  camelCaseText,
+  uppercaseFirstLetter,
+} from '../../utils';
+
+class EditGenerator extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.argument('name', {
+      type: String,
+      required: true,
+    });
+
+    // TODO read schema.json
+
+    this.destinationDir = getConfigDir('edit');
+  }
+
+  _getConfigDirectories() {
+    return getRelativeConfigDir('loader', ['model', 'connection']);
+  }
+
+  generateList() {
+    // const schema = this.options.model ?
+    //   getMongooseModelSchema(this.options.model, true)
+    //   : null;
+
+    const name = uppercaseFirstLetter(this.options.name);
+
+    const templatePath = this.templatePath('Edit.js.template');
+
+    // const templatePath = schema ?
+    //   this.templatePath('LoaderWithSchema.js.template')
+    //   : this.templatePath('Loader.js.template');
+    //
+    // const directories = this._getConfigDirectories();
+
+    const pluralName = pluralize(this.options.name);
+
+    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}Edit.js`);
+    const templateVars = {
+      name,
+      rawName: this.options.name,
+      camelCaseName: camelCaseText(name),
+      pluralName,
+      pluralCamelCaseName: camelCaseText(pluralName),
+    };
+
+    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+  }
+
+  end() {
+    this.log('🔥 Edit created!');
+  }
+}
+
+module.exports = EditGenerator;
diff --git a/packages/generator/src/frontend/edit/templates/Edit.js.template b/packages/generator/src/frontend/edit/templates/Edit.js.template
index 1e4bd0a..0eb869f 100644
--- a/packages/generator/src/frontend/edit/templates/Edit.js.template
+++ b/packages/generator/src/frontend/edit/templates/Edit.js.template
@@ -22,9 +22,9 @@ class <%= name %>Edit extends Component {
   ];
 
   onSubmit = (data) => {
-    const { company } = this.props;
+    const { <%= camelCasedName %> } = this.props;
 
-    const mutation = new <%= rawName %>EditMutation({
+    const mutation = new <%= name %>EditMutation({
       ...data,
     });
 
@@ -47,13 +47,13 @@ class <%= name %>Edit extends Component {
   };
 
   render() {
-    const { <%= rawName %> } = this.props;
+    const { <%= camelCasedName %> } = this.props;
 
     return (
       <Form
         fields={this.fields}
         onSubmit={this.onSubmit}
-        value={<%= rawName %>}
+        value={<%= camelCasedName %>}
       />
     );
   }
@@ -91,7 +91,7 @@ export default Relay.createContainer(withRouter(<%= name %>Edit), {
     id: null,
   },
   fragments: {
-    <%= rawName %>: () => Relay.QL`
+    <%= camelCasedName %>: () => Relay.QL`
       fragment on <%= name %> {
         id
         ${<%= name %>EditMutation.getFragment('<%= rawName %>')}
diff --git a/packages/generator/src/frontend/edit/templates/EditMutation.js.template b/packages/generator/src/frontend/edit/templates/EditMutation.js.template
index 85156de..487b40f 100644
--- a/packages/generator/src/frontend/edit/templates/EditMutation.js.template
+++ b/packages/generator/src/frontend/edit/templates/EditMutation.js.template
@@ -2,7 +2,7 @@ import Relay from 'react-relay';
 
 export default class <%= name %>EditMutation extends Relay.Mutation {
   static fragments = {
-    <%= rawName %>: () => Relay.QL`
+    <%= camelCasedName %>: () => Relay.QL`
       fragment on <%= name %> {
         id
       }
@@ -17,7 +17,7 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
 
   getVariables() {
     const {
-      <%= rawName %>: {
+      <%= camelCasedName %>: {
         id,
       },
       // Todo add more mutation input fields here
@@ -25,14 +25,14 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
 
     return {
       id,
-      // Todo add more mutation input fields here
+      // TODO add more mutation input fields here
     };
   }
 
   getFatQuery() {
     return Relay.QL`
-      fragment on FlightEditPayload {
-        <%= rawName %>
+      fragment on <%= name %>EditPayload {
+        <%= camelCasedName %>
       }
     `;
   }
@@ -41,7 +41,7 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
     return [{
       type: 'FIELDS_CHANGE',
       fieldIDs: {
-      <%= rawName %>: this.props.<%= rawName %>.id,
+      <%= camelCasedName %>: this.props.<%= camelCasedName %>.id,
       },
     }];
   }
diff --git a/packages/generator/src/frontend/list/index.js b/packages/generator/src/frontend/list/index.js
index 532f87f..4566187 100644
--- a/packages/generator/src/frontend/list/index.js
+++ b/packages/generator/src/frontend/list/index.js
@@ -47,6 +47,7 @@ class ListGenerator extends Generator {
     const templateVars = {
       name,
       rawName: this.options.name,
+      camelCaseName: camelCaseText(name),
       pluralName,
       pluralCamelCaseName: camelCaseText(pluralName),
     };
diff --git a/packages/generator/src/frontend/list/templates/List.js.template b/packages/generator/src/frontend/list/templates/List.js.template
index 8f739e4..01df9c0 100644
--- a/packages/generator/src/frontend/list/templates/List.js.template
+++ b/packages/generator/src/frontend/list/templates/List.js.template
@@ -77,7 +77,7 @@ class <%= name %>List extends Component {
     return (
       <div>
         <Toolbar
-          title=<%= pluralName %>
+          title="<%= pluralName %>"
           primaryActionLabel="New <%= name %>"
           primaryActionOnClick={this._handleNew}
           onRefresh={this._handleRefreshList}
@@ -86,7 +86,7 @@ class <%= name %>List extends Component {
         <Table
           name="<%= name %>"
           columns={this.tableColumns}
-          rows={this.props.viewer.<%= pluralName %>}
+          rows={this.props.viewer.<%= pluralCamelCaseName %>}
           router={this.props.router}
           onLoadMore={this._handleLoadMore}
           isLoading={isLoading}
@@ -103,7 +103,7 @@ export default Relay.createContainer(withRouter(<%= name %>List), {
   fragments: {
     viewer: () => Relay.QL`
       fragment on Viewer {
-        <%= pluralName %>(first: $count) {
+        <%= pluralCamelCaseName %>(first: $count) {
           pageInfo {
             hasNextPage
           }
diff --git a/packages/generator/src/frontend/view/index.js b/packages/generator/src/frontend/view/index.js
new file mode 100644
index 0000000..ff2fa39
--- /dev/null
+++ b/packages/generator/src/frontend/view/index.js
@@ -0,0 +1,63 @@
+import Generator from 'yeoman-generator';
+import pluralize from 'pluralize';
+import {
+  getMongooseModelSchema,
+  getConfigDir,
+  getRelativeConfigDir,
+  camelCaseText,
+  uppercaseFirstLetter,
+} from '../../utils';
+
+class ViewGenerator extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.argument('name', {
+      type: String,
+      required: true,
+    });
+
+    // TODO read schema.json
+
+    this.destinationDir = getConfigDir('add');
+  }
+
+  _getConfigDirectories() {
+    return getRelativeConfigDir('loader', ['model', 'connection']);
+  }
+
+  generateList() {
+    // const schema = this.options.model ?
+    //   getMongooseModelSchema(this.options.model, true)
+    //   : null;
+
+    const name = uppercaseFirstLetter(this.options.name);
+
+    const templatePath = this.templatePath('View.js.template');
+
+    // const templatePath = schema ?
+    //   this.templatePath('LoaderWithSchema.js.template')
+    //   : this.templatePath('Loader.js.template');
+    //
+    // const directories = this._getConfigDirectories();
+
+    const pluralName = pluralize(this.options.name);
+
+    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}View.js`);
+    const templateVars = {
+      name,
+      rawName: this.options.name,
+      camelCaseName: camelCaseText(name),
+      pluralName,
+      pluralCamelCaseName: camelCaseText(pluralName),
+    };
+
+    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+  }
+
+  end() {
+    this.log('🔥 View created!');
+  }
+}
+
+module.exports = ViewGenerator;
diff --git a/packages/generator/src/frontend/view/templates/View.js.template b/packages/generator/src/frontend/view/templates/View.js.template
index 0a81b6b..335133f 100644
--- a/packages/generator/src/frontend/view/templates/View.js.template
+++ b/packages/generator/src/frontend/view/templates/View.js.template
@@ -9,13 +9,13 @@ import Tabs from '../../common/Tabs';
 class <%= name %>View extends Component {
   render() {
     const { viewer } = this.props;
-    const { <%= rawName %> } = viewer;
+    const { <%= camelCaseName %> } = viewer;
 
     const tabs = [{
       label: 'Details',
       component: (
-        <FlightEdit
-          <%= rawName %>={<%= rawName %>}
+        <<%= name %>Edit
+          <%= camelCaseName %>={<%= camelCaseName %>}
           viewer={viewer}
         />
       ),
@@ -24,7 +24,7 @@ class <%= name %>View extends Component {
 
     return (
       <div>
-        <h1 style={styles.title}><%= name %>: {<%= rawName %>.id}</h1>
+        <h1 style={styles.title}><%= name %>: {<%= camelCaseName %>.id}</h1>
 
         <Tabs tabs={tabs} />
       </div>
@@ -46,9 +46,9 @@ export default Relay.createContainer(withRouter(<%= name %>View), {
   fragments: {
     viewer: ({ id }) => Relay.QL`
       fragment on Viewer {
-        <%= rawName %>(id: $id) {
+        <%= camelCaseName %>(id: $id) {
           id
-          ${<%= name %>Edit.getFragment('<%= rawName %>')}
+          ${<%= name %>Edit.getFragment('<%= camelCaseName %>')}
         }
         ${<%= name %>Edit.getFragment('viewer')}
       }

From f7f84b435d6836d0af49d1da6bc6a363083be56b Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Wed, 4 Jan 2017 11:41:03 -0200
Subject: [PATCH 03/14] add frontend options

---
 packages/create-graphql/bin/create-graphql    |  0
 .../create-graphql/src/commands/frontend.js   | 68 +++++++++++++++++++
 packages/create-graphql/src/commands/index.js |  1 +
 packages/create-graphql/src/index.js          | 16 +++++
 4 files changed, 85 insertions(+)
 mode change 100644 => 100755 packages/create-graphql/bin/create-graphql
 create mode 100644 packages/create-graphql/src/commands/frontend.js

diff --git a/packages/create-graphql/bin/create-graphql b/packages/create-graphql/bin/create-graphql
old mode 100644
new mode 100755
diff --git a/packages/create-graphql/src/commands/frontend.js b/packages/create-graphql/src/commands/frontend.js
new file mode 100644
index 0000000..47ac6af
--- /dev/null
+++ b/packages/create-graphql/src/commands/frontend.js
@@ -0,0 +1,68 @@
+import spawn from 'cross-spawn-promise';
+
+function parseOptions(opts) {
+  const availableOptions = ['add', 'edit', 'list', 'view'];
+
+  // Check if any commands was provided
+  const anyCommandsProvided = Object.keys(opts).some(option =>
+    availableOptions.indexOf(option) !== -1,
+  );
+
+  let options = opts;
+
+  // If not, use the default options
+  if (!anyCommandsProvided) {
+    options = {
+      add: true,
+      edit: true,
+      list: true,
+      view: true,
+      ...options,
+    };
+  }
+
+  const {
+    add,
+    edit,
+    list,
+    view,
+    schema,
+  } = options;
+
+  return {
+    add: add || false,
+    edit: edit || false,
+    list: list || false,
+    view: view || false,
+    schema: schema || false,
+  };
+}
+
+function generate(name, options) {
+  // Parse all arguments
+  const parsedOptions = parseOptions(options);
+  // Get only the chose arguments
+  const chosenOptions = Object.keys(parsedOptions).filter(opt => !!parsedOptions[opt]);
+
+  // Check if schema argument has been passed
+  const schemaIndex = chosenOptions.indexOf('schema');
+  chosenOptions.forEach(async (option) => {
+    const payload = [`graphql:${option}`, name];
+
+    // If argument schema exists
+    if (schemaIndex !== -1) {
+      // Remove the next running option because the schema must be used along with this command
+      chosenOptions.splice(schemaIndex, 1);
+
+      // Push schema to the arguments to send to yeoman
+      payload.push(parsedOptions.schema);
+    }
+
+    await spawn('yo', payload, {
+      shell: true,
+      stdio: 'inherit',
+    });
+  });
+}
+
+export default generate;
diff --git a/packages/create-graphql/src/commands/index.js b/packages/create-graphql/src/commands/index.js
index 267fd87..2f5b784 100644
--- a/packages/create-graphql/src/commands/index.js
+++ b/packages/create-graphql/src/commands/index.js
@@ -1,2 +1,3 @@
 export init from './init';
 export generate from './generate';
+export frontend from './frontend';
diff --git a/packages/create-graphql/src/index.js b/packages/create-graphql/src/index.js
index 955633c..8d9382a 100755
--- a/packages/create-graphql/src/index.js
+++ b/packages/create-graphql/src/index.js
@@ -6,6 +6,7 @@ import pkg from '../package.json';
 import {
   init,
   generate,
+  frontend,
 } from './commands';
 import { verifyYeoman } from './utils';
 
@@ -37,6 +38,21 @@ program
     generate(name, options);
   });
 
+program
+  .command('frontend <name>')
+  .alias('f')
+  .option('-a, --add', 'Generate a new Add Form screen')
+  .option('-e, --edit', 'Generate a new Edit Form screen')
+  .option('-l, --list', 'Generate a new List screen')
+  .option('-v, --view', 'Generate a new View for an ObjectType')
+  .option('--schema <schema.json Path>', 'Generate from a schema.json')
+  .description('Generate a new frontend file (Add, Edit, List, View)')
+  .action(async (name, options) => {
+    await verifyYeoman();
+
+    frontend(name, options);
+  });
+
 program.parse(process.argv);
 
 if (process.argv.length <= 2) {

From 8e48ed7ec4c668ef29c6f0319427739a3948d1ee Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Wed, 4 Jan 2017 11:06:08 -0200
Subject: [PATCH 04/14] Templates for Relay frontend

Add.js.template - simple screen with a form with all input fields
of the mutation from schema.json, it commit mutation onSubmit

AddMutation.js.template - simple add mutation template

Edit.js.template - simple screen with a form to edit a graphql object type

EditMutation.js.template - simple edit mutation template

List.js.template - list of objects from relay

View.js.template - tabbed detail view of graphql object type

WIP of #12
---
 .../frontend/add/templates/Add.js.template    | 109 ++++++++++++++++
 .../add/templates/AddMutation.js.template     |  63 +++++++++
 .../frontend/edit/templates/Edit.js.template  | 106 ++++++++++++++++
 .../edit/templates/EditMutation.js.template   |  48 +++++++
 packages/generator/src/frontend/list/index.js |  62 +++++++++
 .../frontend/list/templates/List.js.template  | 120 ++++++++++++++++++
 .../frontend/view/templates/View.js.template  |  57 +++++++++
 7 files changed, 565 insertions(+)
 create mode 100644 packages/generator/src/frontend/add/templates/Add.js.template
 create mode 100644 packages/generator/src/frontend/add/templates/AddMutation.js.template
 create mode 100644 packages/generator/src/frontend/edit/templates/Edit.js.template
 create mode 100644 packages/generator/src/frontend/edit/templates/EditMutation.js.template
 create mode 100644 packages/generator/src/frontend/list/index.js
 create mode 100644 packages/generator/src/frontend/list/templates/List.js.template
 create mode 100644 packages/generator/src/frontend/view/templates/View.js.template

diff --git a/packages/generator/src/frontend/add/templates/Add.js.template b/packages/generator/src/frontend/add/templates/Add.js.template
new file mode 100644
index 0000000..7bbdec1
--- /dev/null
+++ b/packages/generator/src/frontend/add/templates/Add.js.template
@@ -0,0 +1,109 @@
+import React, { Component, PropTypes } from 'react';
+import Relay from 'react-relay';
+import RelayStore from '../../RelayStore';
+import { withRouter } from 'react-router';
+
+import <%= name %>AddMutation from './<%= name %>AddMutation';
+
+import Form from '../common/Form';
+
+class <%= name %>Add extends Component {
+  static contextTypes = {
+    showSnackbar: PropTypes.func,
+  };
+
+  fields = [
+    {
+      name: 'id',
+      placeholder: 'ID',
+      required: true,
+    },
+    // TODO - add ObjectType fields here
+  ];
+
+  onSubmit = (data) => {
+    const mutation = new <%= name %>AddMutation({
+      viewer: this.props.viewer,
+      ...data,
+    });
+
+    RelayStore.commitUpdate(mutation, {
+      onSuccess: ({ <%= name %>Add }) => {
+        this.context.showSnackbar({
+          message: '<%= rawName %> created successfully!',
+        });
+
+        this.props.router.push(`/<%= pluralName %>/view/${<%= name %>Add.<%= rawName %>Edge.node.id}`);
+      },
+      onFailure: (failureResponse) => {
+        this.context.showSnackbar({
+          message: 'There was an error while trying to create a <%= rawName %>.',
+        });
+
+        console.log('FAIL', failureResponse);
+      },
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <h1 style={styles.title}>
+          New <%= name %>
+        </h1>
+        <Form
+          fields={this.fields}
+          onSubmit={this.onSubmit}
+        />
+      </div>
+    );
+  }
+}
+
+const styles = {
+  form: {
+    backgroundColor: 'white',
+    boxShadow: 'rgba(0, 0, 0, 0.056863) 0px 7px 8px, rgba(0, 0, 0, 0.227451) 0px 0px 0px',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#E7ECEA',
+    padding: 20,
+    paddingTop: 50,
+  },
+  formContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  title: {
+    fontSize: 25,
+    fontWeight: 300,
+  },
+  actionsContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: 5,
+    paddingRight: 8,
+    borderTopStyle: 'solid',
+    borderTopWidth: 1,
+    paddingTop: 15,
+    borderColor: '#ECECEC',
+  },
+  formField: {
+    marginRight: 10,
+    flex: '1 0 47%',
+  },
+  selectField: {
+    marginRight: 10,
+    flex: '1 0 48%',
+  },
+};
+
+export default Relay.createContainer(withRouter(<%= name %>Add), {
+  fragments: {
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        ${<%= name %>AddMutation.getFragment('viewer')}
+      }
+    `,
+  },
+});
diff --git a/packages/generator/src/frontend/add/templates/AddMutation.js.template b/packages/generator/src/frontend/add/templates/AddMutation.js.template
new file mode 100644
index 0000000..8365533
--- /dev/null
+++ b/packages/generator/src/frontend/add/templates/AddMutation.js.template
@@ -0,0 +1,63 @@
+import Relay from 'react-relay';
+
+export default class <%= name %>AddMutation extends Relay.Mutation {
+  static fragments = {
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        id
+      }
+    `,
+  };
+
+  getMutation() {
+    return Relay.QL`mutation {
+      <%= name %>Add
+    }`;
+  }
+
+  getVariables() {
+    const {
+      id
+      // TODO - add mutation input fields here
+    } = this.props;
+
+    return {
+      id
+      // TODO - add mutation input fields here
+    };
+  }
+
+  getFatQuery() {
+    return Relay.QL`
+      fragment on <%= name %>AddPayload {
+        <%= rawName %>Edge
+        viewer {
+          <%= pluralName %>
+        }
+      }
+    `;
+  }
+
+  getConfigs() {
+    return [
+      {
+        type: 'RANGE_ADD',
+        parentName: 'viewer',
+        parentID: this.props.viewer.id,
+        connectionName: '<%= pluralName %>',
+        edgeName: '<%= rawName %>Edge',
+        rangeBehaviors: {
+          '': 'prepend',
+        },
+      },
+      {
+        type: 'REQUIRED_CHILDREN',
+        children: [Relay.QL`
+          fragment on <%= name %>AddPayload {
+            <%= rawName %>Edge
+          }
+        `],
+      },
+    ];
+  }
+}
diff --git a/packages/generator/src/frontend/edit/templates/Edit.js.template b/packages/generator/src/frontend/edit/templates/Edit.js.template
new file mode 100644
index 0000000..1e4bd0a
--- /dev/null
+++ b/packages/generator/src/frontend/edit/templates/Edit.js.template
@@ -0,0 +1,106 @@
+import React, { Component, PropTypes } from 'react';
+import Relay from 'react-relay';
+import RelayStore from '../../../RelayStore';
+import { withRouter } from 'react-router';
+
+import <%= name %>EditMutation from './<%= name %>EditMutation.js';
+
+import Form from '../../common/Form';
+
+class <%= name %>Edit extends Component {
+  static contextTypes = {
+    showSnackbar: PropTypes.func,
+  };
+
+  fields = [
+    {
+      name: 'id',
+      placeholder: 'ID',
+      required: true,
+    },
+    // TODO - add ObjectType fields here
+  ];
+
+  onSubmit = (data) => {
+    const { company } = this.props;
+
+    const mutation = new <%= rawName %>EditMutation({
+      ...data,
+    });
+
+    RelayStore.commitUpdate(mutation, {
+      onSuccess: () => {
+        this.context.showSnackbar({
+          message: '<%= name %> edited successfully!',
+        });
+
+        this.props.router.goBack();
+      },
+      onFailure: (failureResponse) => {
+        this.context.showSnackbar({
+          message: 'There was an error while trying to edit this <%= rawName %>.',
+        });
+
+        console.log('FAIL', failureResponse);
+      },
+    });
+  };
+
+  render() {
+    const { <%= rawName %> } = this.props;
+
+    return (
+      <Form
+        fields={this.fields}
+        onSubmit={this.onSubmit}
+        value={<%= rawName %>}
+      />
+    );
+  }
+}
+
+const styles = {
+  formContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    paddingTop: 30,
+    paddingLeft: 10,
+  },
+  actionsContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: 5,
+    paddingRight: 8,
+    borderTopStyle: 'solid',
+    borderTopWidth: 1,
+    paddingTop: 15,
+    borderColor: '#ECECEC',
+  },
+  formField: {
+    marginRight: 10,
+    flex: '1 0 47%',
+  },
+  selectField: {
+    marginRight: 10,
+    flex: '1 0 48%',
+  },
+};
+
+export default Relay.createContainer(withRouter(<%= name %>Edit), {
+  initialVariables: {
+    id: null,
+  },
+  fragments: {
+    <%= rawName %>: () => Relay.QL`
+      fragment on <%= name %> {
+        id
+        ${<%= name %>EditMutation.getFragment('<%= rawName %>')}
+      }
+    `,
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        id
+      }
+    `,
+  },
+});
diff --git a/packages/generator/src/frontend/edit/templates/EditMutation.js.template b/packages/generator/src/frontend/edit/templates/EditMutation.js.template
new file mode 100644
index 0000000..85156de
--- /dev/null
+++ b/packages/generator/src/frontend/edit/templates/EditMutation.js.template
@@ -0,0 +1,48 @@
+import Relay from 'react-relay';
+
+export default class <%= name %>EditMutation extends Relay.Mutation {
+  static fragments = {
+    <%= rawName %>: () => Relay.QL`
+      fragment on <%= name %> {
+        id
+      }
+    `,
+  };
+
+  getMutation() {
+    return Relay.QL`mutation {
+      <%= name %>Edit
+    }`;
+  }
+
+  getVariables() {
+    const {
+      <%= rawName %>: {
+        id,
+      },
+      // Todo add more mutation input fields here
+    } = this.props;
+
+    return {
+      id,
+      // Todo add more mutation input fields here
+    };
+  }
+
+  getFatQuery() {
+    return Relay.QL`
+      fragment on FlightEditPayload {
+        <%= rawName %>
+      }
+    `;
+  }
+
+  getConfigs() {
+    return [{
+      type: 'FIELDS_CHANGE',
+      fieldIDs: {
+      <%= rawName %>: this.props.<%= rawName %>.id,
+      },
+    }];
+  }
+}
diff --git a/packages/generator/src/frontend/list/index.js b/packages/generator/src/frontend/list/index.js
new file mode 100644
index 0000000..532f87f
--- /dev/null
+++ b/packages/generator/src/frontend/list/index.js
@@ -0,0 +1,62 @@
+import Generator from 'yeoman-generator';
+import pluralize from 'pluralize';
+import {
+  getMongooseModelSchema,
+  getConfigDir,
+  getRelativeConfigDir,
+  camelCaseText,
+  uppercaseFirstLetter,
+} from '../../utils';
+
+class ListGenerator extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.argument('name', {
+      type: String,
+      required: true,
+    });
+
+    // TODO read schema.json
+
+    this.destinationDir = getConfigDir('list');
+  }
+
+  _getConfigDirectories() {
+    return getRelativeConfigDir('loader', ['model', 'connection']);
+  }
+
+  generateList() {
+    // const schema = this.options.model ?
+    //   getMongooseModelSchema(this.options.model, true)
+    //   : null;
+
+    const name = uppercaseFirstLetter(this.options.name);
+
+    const templatePath = this.templatePath('List.js.template');
+
+    // const templatePath = schema ?
+    //   this.templatePath('LoaderWithSchema.js.template')
+    //   : this.templatePath('Loader.js.template');
+    //
+    // const directories = this._getConfigDirectories();
+
+    const pluralName = pluralize(this.options.name);
+
+    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}List.js`);
+    const templateVars = {
+      name,
+      rawName: this.options.name,
+      pluralName,
+      pluralCamelCaseName: camelCaseText(pluralName),
+    };
+
+    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+  }
+
+  end() {
+    this.log('🔥 List created!');
+  }
+}
+
+module.exports = ListGenerator;
diff --git a/packages/generator/src/frontend/list/templates/List.js.template b/packages/generator/src/frontend/list/templates/List.js.template
new file mode 100644
index 0000000..8f739e4
--- /dev/null
+++ b/packages/generator/src/frontend/list/templates/List.js.template
@@ -0,0 +1,120 @@
+// @flow
+
+import React, { Component } from 'react';
+import Relay from 'react-relay';
+import { withRouter } from 'react-router';
+
+import Table from '../common/Table';
+import Toolbar from '../common/Toolbar';
+
+class <%= name %>List extends Component {
+  state = {
+    isLoading: true,
+  };
+
+  tableColumns = [
+    {
+      property: '',
+      header: {
+        label: 'Actions',
+      },
+      icon: 'mode_edit',
+      type: 'icon',
+      clickPath: '/<%= pluralName %>/view/:id',
+    },
+    {
+      property: 'id',
+      header: {
+        label: 'ID',
+      },
+    },
+    // TODO - add more fields to table
+  ];
+
+  componentDidMount = () => {
+    this.setState({
+      isLoading: false,
+    });
+  };
+
+  _handleNew = () => this.props.router.push('/<%= pluralName %>/new');
+
+  _handleRefreshList = () => {
+    this.setState({
+      isLoading: true,
+    });
+
+    this.props.relay.forceFetch({}, ({ done }) => {
+      if (done) {
+        this.setState({
+          isLoading: false,
+        });
+      }
+    });
+  };
+
+  _handleLoadMore = () => {
+    const { relay } = this.props;
+
+    this.setState({
+      isLoading: true,
+    });
+
+    relay.setVariables({
+      count: relay.variables.count + 10,
+    }, ({ done }) => {
+      if (done) {
+        this.setState({
+          isLoading: false,
+        });
+      }
+    });
+  };
+
+  render() {
+    const { isLoading } = this.state;
+
+    return (
+      <div>
+        <Toolbar
+          title=<%= pluralName %>
+          primaryActionLabel="New <%= name %>"
+          primaryActionOnClick={this._handleNew}
+          onRefresh={this._handleRefreshList}
+        />
+
+        <Table
+          name="<%= name %>"
+          columns={this.tableColumns}
+          rows={this.props.viewer.<%= pluralName %>}
+          router={this.props.router}
+          onLoadMore={this._handleLoadMore}
+          isLoading={isLoading}
+        />
+      </div>
+    );
+  }
+}
+
+export default Relay.createContainer(withRouter(<%= name %>List), {
+  initialVariables: {
+    count: 20,
+  },
+  fragments: {
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        <%= pluralName %>(first: $count) {
+          pageInfo {
+            hasNextPage
+          }
+          edges {
+            node {
+              id
+              // TODO - add relay fields
+            }
+          }
+        }
+      }
+    `,
+  },
+});
diff --git a/packages/generator/src/frontend/view/templates/View.js.template b/packages/generator/src/frontend/view/templates/View.js.template
new file mode 100644
index 0000000..0a81b6b
--- /dev/null
+++ b/packages/generator/src/frontend/view/templates/View.js.template
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import Relay from 'react-relay';
+import { withRouter } from 'react-router';
+
+import <%= name %>Edit from './<%= name %>Edit';
+
+import Tabs from '../../common/Tabs';
+
+class <%= name %>View extends Component {
+  render() {
+    const { viewer } = this.props;
+    const { <%= rawName %> } = viewer;
+
+    const tabs = [{
+      label: 'Details',
+      component: (
+        <FlightEdit
+          <%= rawName %>={<%= rawName %>}
+          viewer={viewer}
+        />
+      ),
+      icon: 'assignment',
+    }];
+
+    return (
+      <div>
+        <h1 style={styles.title}><%= name %>: {<%= rawName %>.id}</h1>
+
+        <Tabs tabs={tabs} />
+      </div>
+    );
+  }
+}
+
+const styles = {
+  title: {
+    fontSize: 25,
+    fontWeight: 300,
+  },
+};
+
+export default Relay.createContainer(withRouter(<%= name %>View), {
+  initialVariables: {
+    id: null,
+  },
+  fragments: {
+    viewer: ({ id }) => Relay.QL`
+      fragment on Viewer {
+        <%= rawName %>(id: $id) {
+          id
+          ${<%= name %>Edit.getFragment('<%= rawName %>')}
+        }
+        ${<%= name %>Edit.getFragment('viewer')}
+      }
+    `,
+  },
+});

From 0b674c346c778abc9d825c9638a7516cfac38e7d Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Wed, 4 Jan 2017 11:32:59 -0200
Subject: [PATCH 05/14] fix templates issues, add generator v0 code, add them
 to package.json

---
 packages/generator/package.json               |  4 ++
 packages/generator/src/frontend/add/index.js  | 63 +++++++++++++++++++
 packages/generator/src/frontend/edit/index.js | 63 +++++++++++++++++++
 .../frontend/edit/templates/Edit.js.template  | 10 +--
 .../edit/templates/EditMutation.js.template   | 12 ++--
 packages/generator/src/frontend/list/index.js |  1 +
 .../frontend/list/templates/List.js.template  |  6 +-
 packages/generator/src/frontend/view/index.js | 63 +++++++++++++++++++
 .../frontend/view/templates/View.js.template  | 12 ++--
 9 files changed, 214 insertions(+), 20 deletions(-)
 create mode 100644 packages/generator/src/frontend/add/index.js
 create mode 100644 packages/generator/src/frontend/edit/index.js
 create mode 100644 packages/generator/src/frontend/view/index.js

diff --git a/packages/generator/package.json b/packages/generator/package.json
index 01b423a..07518af 100644
--- a/packages/generator/package.json
+++ b/packages/generator/package.json
@@ -32,6 +32,10 @@
     "generators/mutation",
     "generators/test",
     "generators/utils.js",
+    "generators/frontend/add",
+    "generators/frontend/edit",
+    "generators/frontend/list",
+    "generators/frontend/view",
     "generators/graphql-logo.js",
     "generators/graphqlrc.json"
   ],
diff --git a/packages/generator/src/frontend/add/index.js b/packages/generator/src/frontend/add/index.js
new file mode 100644
index 0000000..c7d0614
--- /dev/null
+++ b/packages/generator/src/frontend/add/index.js
@@ -0,0 +1,63 @@
+import Generator from 'yeoman-generator';
+import pluralize from 'pluralize';
+import {
+  getMongooseModelSchema,
+  getConfigDir,
+  getRelativeConfigDir,
+  camelCaseText,
+  uppercaseFirstLetter,
+} from '../../utils';
+
+class AddGenerator extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.argument('name', {
+      type: String,
+      required: true,
+    });
+
+    // TODO read schema.json
+
+    this.destinationDir = getConfigDir('add');
+  }
+
+  _getConfigDirectories() {
+    return getRelativeConfigDir('loader', ['model', 'connection']);
+  }
+
+  generateList() {
+    // const schema = this.options.model ?
+    //   getMongooseModelSchema(this.options.model, true)
+    //   : null;
+
+    const name = uppercaseFirstLetter(this.options.name);
+
+    const templatePath = this.templatePath('Add.js.template');
+
+    // const templatePath = schema ?
+    //   this.templatePath('LoaderWithSchema.js.template')
+    //   : this.templatePath('Loader.js.template');
+    //
+    // const directories = this._getConfigDirectories();
+
+    const pluralName = pluralize(this.options.name);
+
+    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}Add.js`);
+    const templateVars = {
+      name,
+      rawName: this.options.name,
+      camelCaseName: camelCaseText(name),
+      pluralName,
+      pluralCamelCaseName: camelCaseText(pluralName),
+    };
+
+    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+  }
+
+  end() {
+    this.log('🔥 Add created!');
+  }
+}
+
+module.exports = AddGenerator;
diff --git a/packages/generator/src/frontend/edit/index.js b/packages/generator/src/frontend/edit/index.js
new file mode 100644
index 0000000..7d4a222
--- /dev/null
+++ b/packages/generator/src/frontend/edit/index.js
@@ -0,0 +1,63 @@
+import Generator from 'yeoman-generator';
+import pluralize from 'pluralize';
+import {
+  getMongooseModelSchema,
+  getConfigDir,
+  getRelativeConfigDir,
+  camelCaseText,
+  uppercaseFirstLetter,
+} from '../../utils';
+
+class EditGenerator extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.argument('name', {
+      type: String,
+      required: true,
+    });
+
+    // TODO read schema.json
+
+    this.destinationDir = getConfigDir('edit');
+  }
+
+  _getConfigDirectories() {
+    return getRelativeConfigDir('loader', ['model', 'connection']);
+  }
+
+  generateList() {
+    // const schema = this.options.model ?
+    //   getMongooseModelSchema(this.options.model, true)
+    //   : null;
+
+    const name = uppercaseFirstLetter(this.options.name);
+
+    const templatePath = this.templatePath('Edit.js.template');
+
+    // const templatePath = schema ?
+    //   this.templatePath('LoaderWithSchema.js.template')
+    //   : this.templatePath('Loader.js.template');
+    //
+    // const directories = this._getConfigDirectories();
+
+    const pluralName = pluralize(this.options.name);
+
+    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}Edit.js`);
+    const templateVars = {
+      name,
+      rawName: this.options.name,
+      camelCaseName: camelCaseText(name),
+      pluralName,
+      pluralCamelCaseName: camelCaseText(pluralName),
+    };
+
+    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+  }
+
+  end() {
+    this.log('🔥 Edit created!');
+  }
+}
+
+module.exports = EditGenerator;
diff --git a/packages/generator/src/frontend/edit/templates/Edit.js.template b/packages/generator/src/frontend/edit/templates/Edit.js.template
index 1e4bd0a..0eb869f 100644
--- a/packages/generator/src/frontend/edit/templates/Edit.js.template
+++ b/packages/generator/src/frontend/edit/templates/Edit.js.template
@@ -22,9 +22,9 @@ class <%= name %>Edit extends Component {
   ];
 
   onSubmit = (data) => {
-    const { company } = this.props;
+    const { <%= camelCasedName %> } = this.props;
 
-    const mutation = new <%= rawName %>EditMutation({
+    const mutation = new <%= name %>EditMutation({
       ...data,
     });
 
@@ -47,13 +47,13 @@ class <%= name %>Edit extends Component {
   };
 
   render() {
-    const { <%= rawName %> } = this.props;
+    const { <%= camelCasedName %> } = this.props;
 
     return (
       <Form
         fields={this.fields}
         onSubmit={this.onSubmit}
-        value={<%= rawName %>}
+        value={<%= camelCasedName %>}
       />
     );
   }
@@ -91,7 +91,7 @@ export default Relay.createContainer(withRouter(<%= name %>Edit), {
     id: null,
   },
   fragments: {
-    <%= rawName %>: () => Relay.QL`
+    <%= camelCasedName %>: () => Relay.QL`
       fragment on <%= name %> {
         id
         ${<%= name %>EditMutation.getFragment('<%= rawName %>')}
diff --git a/packages/generator/src/frontend/edit/templates/EditMutation.js.template b/packages/generator/src/frontend/edit/templates/EditMutation.js.template
index 85156de..487b40f 100644
--- a/packages/generator/src/frontend/edit/templates/EditMutation.js.template
+++ b/packages/generator/src/frontend/edit/templates/EditMutation.js.template
@@ -2,7 +2,7 @@ import Relay from 'react-relay';
 
 export default class <%= name %>EditMutation extends Relay.Mutation {
   static fragments = {
-    <%= rawName %>: () => Relay.QL`
+    <%= camelCasedName %>: () => Relay.QL`
       fragment on <%= name %> {
         id
       }
@@ -17,7 +17,7 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
 
   getVariables() {
     const {
-      <%= rawName %>: {
+      <%= camelCasedName %>: {
         id,
       },
       // Todo add more mutation input fields here
@@ -25,14 +25,14 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
 
     return {
       id,
-      // Todo add more mutation input fields here
+      // TODO add more mutation input fields here
     };
   }
 
   getFatQuery() {
     return Relay.QL`
-      fragment on FlightEditPayload {
-        <%= rawName %>
+      fragment on <%= name %>EditPayload {
+        <%= camelCasedName %>
       }
     `;
   }
@@ -41,7 +41,7 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
     return [{
       type: 'FIELDS_CHANGE',
       fieldIDs: {
-      <%= rawName %>: this.props.<%= rawName %>.id,
+      <%= camelCasedName %>: this.props.<%= camelCasedName %>.id,
       },
     }];
   }
diff --git a/packages/generator/src/frontend/list/index.js b/packages/generator/src/frontend/list/index.js
index 532f87f..4566187 100644
--- a/packages/generator/src/frontend/list/index.js
+++ b/packages/generator/src/frontend/list/index.js
@@ -47,6 +47,7 @@ class ListGenerator extends Generator {
     const templateVars = {
       name,
       rawName: this.options.name,
+      camelCaseName: camelCaseText(name),
       pluralName,
       pluralCamelCaseName: camelCaseText(pluralName),
     };
diff --git a/packages/generator/src/frontend/list/templates/List.js.template b/packages/generator/src/frontend/list/templates/List.js.template
index 8f739e4..01df9c0 100644
--- a/packages/generator/src/frontend/list/templates/List.js.template
+++ b/packages/generator/src/frontend/list/templates/List.js.template
@@ -77,7 +77,7 @@ class <%= name %>List extends Component {
     return (
       <div>
         <Toolbar
-          title=<%= pluralName %>
+          title="<%= pluralName %>"
           primaryActionLabel="New <%= name %>"
           primaryActionOnClick={this._handleNew}
           onRefresh={this._handleRefreshList}
@@ -86,7 +86,7 @@ class <%= name %>List extends Component {
         <Table
           name="<%= name %>"
           columns={this.tableColumns}
-          rows={this.props.viewer.<%= pluralName %>}
+          rows={this.props.viewer.<%= pluralCamelCaseName %>}
           router={this.props.router}
           onLoadMore={this._handleLoadMore}
           isLoading={isLoading}
@@ -103,7 +103,7 @@ export default Relay.createContainer(withRouter(<%= name %>List), {
   fragments: {
     viewer: () => Relay.QL`
       fragment on Viewer {
-        <%= pluralName %>(first: $count) {
+        <%= pluralCamelCaseName %>(first: $count) {
           pageInfo {
             hasNextPage
           }
diff --git a/packages/generator/src/frontend/view/index.js b/packages/generator/src/frontend/view/index.js
new file mode 100644
index 0000000..ff2fa39
--- /dev/null
+++ b/packages/generator/src/frontend/view/index.js
@@ -0,0 +1,63 @@
+import Generator from 'yeoman-generator';
+import pluralize from 'pluralize';
+import {
+  getMongooseModelSchema,
+  getConfigDir,
+  getRelativeConfigDir,
+  camelCaseText,
+  uppercaseFirstLetter,
+} from '../../utils';
+
+class ViewGenerator extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.argument('name', {
+      type: String,
+      required: true,
+    });
+
+    // TODO read schema.json
+
+    this.destinationDir = getConfigDir('add');
+  }
+
+  _getConfigDirectories() {
+    return getRelativeConfigDir('loader', ['model', 'connection']);
+  }
+
+  generateList() {
+    // const schema = this.options.model ?
+    //   getMongooseModelSchema(this.options.model, true)
+    //   : null;
+
+    const name = uppercaseFirstLetter(this.options.name);
+
+    const templatePath = this.templatePath('View.js.template');
+
+    // const templatePath = schema ?
+    //   this.templatePath('LoaderWithSchema.js.template')
+    //   : this.templatePath('Loader.js.template');
+    //
+    // const directories = this._getConfigDirectories();
+
+    const pluralName = pluralize(this.options.name);
+
+    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}View.js`);
+    const templateVars = {
+      name,
+      rawName: this.options.name,
+      camelCaseName: camelCaseText(name),
+      pluralName,
+      pluralCamelCaseName: camelCaseText(pluralName),
+    };
+
+    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+  }
+
+  end() {
+    this.log('🔥 View created!');
+  }
+}
+
+module.exports = ViewGenerator;
diff --git a/packages/generator/src/frontend/view/templates/View.js.template b/packages/generator/src/frontend/view/templates/View.js.template
index 0a81b6b..335133f 100644
--- a/packages/generator/src/frontend/view/templates/View.js.template
+++ b/packages/generator/src/frontend/view/templates/View.js.template
@@ -9,13 +9,13 @@ import Tabs from '../../common/Tabs';
 class <%= name %>View extends Component {
   render() {
     const { viewer } = this.props;
-    const { <%= rawName %> } = viewer;
+    const { <%= camelCaseName %> } = viewer;
 
     const tabs = [{
       label: 'Details',
       component: (
-        <FlightEdit
-          <%= rawName %>={<%= rawName %>}
+        <<%= name %>Edit
+          <%= camelCaseName %>={<%= camelCaseName %>}
           viewer={viewer}
         />
       ),
@@ -24,7 +24,7 @@ class <%= name %>View extends Component {
 
     return (
       <div>
-        <h1 style={styles.title}><%= name %>: {<%= rawName %>.id}</h1>
+        <h1 style={styles.title}><%= name %>: {<%= camelCaseName %>.id}</h1>
 
         <Tabs tabs={tabs} />
       </div>
@@ -46,9 +46,9 @@ export default Relay.createContainer(withRouter(<%= name %>View), {
   fragments: {
     viewer: ({ id }) => Relay.QL`
       fragment on Viewer {
-        <%= rawName %>(id: $id) {
+        <%= camelCaseName %>(id: $id) {
           id
-          ${<%= name %>Edit.getFragment('<%= rawName %>')}
+          ${<%= name %>Edit.getFragment('<%= camelCaseName %>')}
         }
         ${<%= name %>Edit.getFragment('viewer')}
       }

From 06e87401d67fe0de286b4f5e15ac9dbb1f6debce Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Wed, 4 Jan 2017 11:41:03 -0200
Subject: [PATCH 06/14] add frontend options

---
 packages/create-graphql/bin/create-graphql    |  0
 .../create-graphql/src/commands/frontend.js   | 68 +++++++++++++++++++
 packages/create-graphql/src/commands/index.js |  1 +
 packages/create-graphql/src/index.js          | 16 +++++
 4 files changed, 85 insertions(+)
 mode change 100644 => 100755 packages/create-graphql/bin/create-graphql
 create mode 100644 packages/create-graphql/src/commands/frontend.js

diff --git a/packages/create-graphql/bin/create-graphql b/packages/create-graphql/bin/create-graphql
old mode 100644
new mode 100755
diff --git a/packages/create-graphql/src/commands/frontend.js b/packages/create-graphql/src/commands/frontend.js
new file mode 100644
index 0000000..47ac6af
--- /dev/null
+++ b/packages/create-graphql/src/commands/frontend.js
@@ -0,0 +1,68 @@
+import spawn from 'cross-spawn-promise';
+
+function parseOptions(opts) {
+  const availableOptions = ['add', 'edit', 'list', 'view'];
+
+  // Check if any commands was provided
+  const anyCommandsProvided = Object.keys(opts).some(option =>
+    availableOptions.indexOf(option) !== -1,
+  );
+
+  let options = opts;
+
+  // If not, use the default options
+  if (!anyCommandsProvided) {
+    options = {
+      add: true,
+      edit: true,
+      list: true,
+      view: true,
+      ...options,
+    };
+  }
+
+  const {
+    add,
+    edit,
+    list,
+    view,
+    schema,
+  } = options;
+
+  return {
+    add: add || false,
+    edit: edit || false,
+    list: list || false,
+    view: view || false,
+    schema: schema || false,
+  };
+}
+
+function generate(name, options) {
+  // Parse all arguments
+  const parsedOptions = parseOptions(options);
+  // Get only the chose arguments
+  const chosenOptions = Object.keys(parsedOptions).filter(opt => !!parsedOptions[opt]);
+
+  // Check if schema argument has been passed
+  const schemaIndex = chosenOptions.indexOf('schema');
+  chosenOptions.forEach(async (option) => {
+    const payload = [`graphql:${option}`, name];
+
+    // If argument schema exists
+    if (schemaIndex !== -1) {
+      // Remove the next running option because the schema must be used along with this command
+      chosenOptions.splice(schemaIndex, 1);
+
+      // Push schema to the arguments to send to yeoman
+      payload.push(parsedOptions.schema);
+    }
+
+    await spawn('yo', payload, {
+      shell: true,
+      stdio: 'inherit',
+    });
+  });
+}
+
+export default generate;
diff --git a/packages/create-graphql/src/commands/index.js b/packages/create-graphql/src/commands/index.js
index 267fd87..2f5b784 100644
--- a/packages/create-graphql/src/commands/index.js
+++ b/packages/create-graphql/src/commands/index.js
@@ -1,2 +1,3 @@
 export init from './init';
 export generate from './generate';
+export frontend from './frontend';
diff --git a/packages/create-graphql/src/index.js b/packages/create-graphql/src/index.js
index 955633c..8d9382a 100755
--- a/packages/create-graphql/src/index.js
+++ b/packages/create-graphql/src/index.js
@@ -6,6 +6,7 @@ import pkg from '../package.json';
 import {
   init,
   generate,
+  frontend,
 } from './commands';
 import { verifyYeoman } from './utils';
 
@@ -37,6 +38,21 @@ program
     generate(name, options);
   });
 
+program
+  .command('frontend <name>')
+  .alias('f')
+  .option('-a, --add', 'Generate a new Add Form screen')
+  .option('-e, --edit', 'Generate a new Edit Form screen')
+  .option('-l, --list', 'Generate a new List screen')
+  .option('-v, --view', 'Generate a new View for an ObjectType')
+  .option('--schema <schema.json Path>', 'Generate from a schema.json')
+  .description('Generate a new frontend file (Add, Edit, List, View)')
+  .action(async (name, options) => {
+    await verifyYeoman();
+
+    frontend(name, options);
+  });
+
 program.parse(process.argv);
 
 if (process.argv.length <= 2) {

From e38bef19a47985d8afa7470dc93e42c64cddb494 Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Mon, 6 Feb 2017 11:12:42 -0200
Subject: [PATCH 07/14] fix frontend generators

---
 .../generator/src/{frontend => }/add/index.js | 25 +++++++++++++-----
 .../add/templates/Add.js.template             |  0
 .../add/templates/AddMutation.js.template     |  0
 .../src/{frontend => }/edit/index.js          | 26 ++++++++++++++-----
 .../edit/templates/Edit.js.template           |  8 +++---
 .../edit/templates/EditMutation.js.template   |  8 +++---
 .../src/{frontend => }/list/index.js          |  3 +--
 .../list/templates/List.js.template           |  0
 .../src/{frontend => }/view/index.js          |  3 +--
 .../view/templates/View.js.template           |  0
 10 files changed, 48 insertions(+), 25 deletions(-)
 rename packages/generator/src/{frontend => }/add/index.js (72%)
 rename packages/generator/src/{frontend => }/add/templates/Add.js.template (100%)
 rename packages/generator/src/{frontend => }/add/templates/AddMutation.js.template (100%)
 rename packages/generator/src/{frontend => }/edit/index.js (72%)
 rename packages/generator/src/{frontend => }/edit/templates/Edit.js.template (91%)
 rename packages/generator/src/{frontend => }/edit/templates/EditMutation.js.template (80%)
 rename packages/generator/src/{frontend => }/list/index.js (96%)
 rename packages/generator/src/{frontend => }/list/templates/List.js.template (100%)
 rename packages/generator/src/{frontend => }/view/index.js (96%)
 rename packages/generator/src/{frontend => }/view/templates/View.js.template (100%)

diff --git a/packages/generator/src/frontend/add/index.js b/packages/generator/src/add/index.js
similarity index 72%
rename from packages/generator/src/frontend/add/index.js
rename to packages/generator/src/add/index.js
index c7d0614..32ec61f 100644
--- a/packages/generator/src/frontend/add/index.js
+++ b/packages/generator/src/add/index.js
@@ -1,12 +1,11 @@
 import Generator from 'yeoman-generator';
 import pluralize from 'pluralize';
 import {
-  getMongooseModelSchema,
   getConfigDir,
   getRelativeConfigDir,
   camelCaseText,
   uppercaseFirstLetter,
-} from '../../utils';
+} from '../utils';
 
 class AddGenerator extends Generator {
   constructor(args, options) {
@@ -33,8 +32,6 @@ class AddGenerator extends Generator {
 
     const name = uppercaseFirstLetter(this.options.name);
 
-    const templatePath = this.templatePath('Add.js.template');
-
     // const templatePath = schema ?
     //   this.templatePath('LoaderWithSchema.js.template')
     //   : this.templatePath('Loader.js.template');
@@ -43,7 +40,6 @@ class AddGenerator extends Generator {
 
     const pluralName = pluralize(this.options.name);
 
-    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}Add.js`);
     const templateVars = {
       name,
       rawName: this.options.name,
@@ -52,7 +48,24 @@ class AddGenerator extends Generator {
       pluralCamelCaseName: camelCaseText(pluralName),
     };
 
-    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+    const files = {
+      add: {
+        filename: `${name}Add.js`,
+        template: 'Add.js.template',
+      },
+      addMutation: {
+        filename: `${name}AddMutation.js`,
+        template: 'AddMutation.js.template',
+      },
+    };
+
+    Object.keys(files).forEach((file) => {
+      const { filename, template } = files[file];
+
+      this.fs.copyTpl(
+        this.templatePath(template), `${this.destinationDir}/${filename}`, templateVars,
+      );
+    });
   }
 
   end() {
diff --git a/packages/generator/src/frontend/add/templates/Add.js.template b/packages/generator/src/add/templates/Add.js.template
similarity index 100%
rename from packages/generator/src/frontend/add/templates/Add.js.template
rename to packages/generator/src/add/templates/Add.js.template
diff --git a/packages/generator/src/frontend/add/templates/AddMutation.js.template b/packages/generator/src/add/templates/AddMutation.js.template
similarity index 100%
rename from packages/generator/src/frontend/add/templates/AddMutation.js.template
rename to packages/generator/src/add/templates/AddMutation.js.template
diff --git a/packages/generator/src/frontend/edit/index.js b/packages/generator/src/edit/index.js
similarity index 72%
rename from packages/generator/src/frontend/edit/index.js
rename to packages/generator/src/edit/index.js
index 7d4a222..5301c61 100644
--- a/packages/generator/src/frontend/edit/index.js
+++ b/packages/generator/src/edit/index.js
@@ -1,12 +1,11 @@
 import Generator from 'yeoman-generator';
 import pluralize from 'pluralize';
 import {
-  getMongooseModelSchema,
   getConfigDir,
   getRelativeConfigDir,
   camelCaseText,
   uppercaseFirstLetter,
-} from '../../utils';
+} from '../utils';
 
 class EditGenerator extends Generator {
   constructor(args, options) {
@@ -18,7 +17,6 @@ class EditGenerator extends Generator {
     });
 
     // TODO read schema.json
-
     this.destinationDir = getConfigDir('edit');
   }
 
@@ -33,8 +31,6 @@ class EditGenerator extends Generator {
 
     const name = uppercaseFirstLetter(this.options.name);
 
-    const templatePath = this.templatePath('Edit.js.template');
-
     // const templatePath = schema ?
     //   this.templatePath('LoaderWithSchema.js.template')
     //   : this.templatePath('Loader.js.template');
@@ -43,7 +39,6 @@ class EditGenerator extends Generator {
 
     const pluralName = pluralize(this.options.name);
 
-    const destinationPath = this.destinationPath(`${this.destinationDir}/${name}Edit.js`);
     const templateVars = {
       name,
       rawName: this.options.name,
@@ -52,7 +47,24 @@ class EditGenerator extends Generator {
       pluralCamelCaseName: camelCaseText(pluralName),
     };
 
-    this.fs.copyTpl(templatePath, destinationPath, templateVars);
+    const files = {
+      edit: {
+        filename: `${name}Edit.js`,
+        template: 'Edit.js.template',
+      },
+      editMutation: {
+        filename: `${name}EditMutation.js`,
+        template: 'EditMutation.js.template',
+      },
+    };
+
+    Object.keys(files).forEach((file) => {
+      const { filename, template } = files[file];
+
+      this.fs.copyTpl(
+        this.templatePath(template), `${this.destinationDir}/${filename}`, templateVars,
+      );
+    });
   }
 
   end() {
diff --git a/packages/generator/src/frontend/edit/templates/Edit.js.template b/packages/generator/src/edit/templates/Edit.js.template
similarity index 91%
rename from packages/generator/src/frontend/edit/templates/Edit.js.template
rename to packages/generator/src/edit/templates/Edit.js.template
index 0eb869f..c0792cd 100644
--- a/packages/generator/src/frontend/edit/templates/Edit.js.template
+++ b/packages/generator/src/edit/templates/Edit.js.template
@@ -22,7 +22,7 @@ class <%= name %>Edit extends Component {
   ];
 
   onSubmit = (data) => {
-    const { <%= camelCasedName %> } = this.props;
+    const { <%= camelCaseName %> } = this.props;
 
     const mutation = new <%= name %>EditMutation({
       ...data,
@@ -47,13 +47,13 @@ class <%= name %>Edit extends Component {
   };
 
   render() {
-    const { <%= camelCasedName %> } = this.props;
+    const { <%= camelCaseName %> } = this.props;
 
     return (
       <Form
         fields={this.fields}
         onSubmit={this.onSubmit}
-        value={<%= camelCasedName %>}
+        value={<%= camelCaseName %>}
       />
     );
   }
@@ -91,7 +91,7 @@ export default Relay.createContainer(withRouter(<%= name %>Edit), {
     id: null,
   },
   fragments: {
-    <%= camelCasedName %>: () => Relay.QL`
+    <%= camelCaseName %>: () => Relay.QL`
       fragment on <%= name %> {
         id
         ${<%= name %>EditMutation.getFragment('<%= rawName %>')}
diff --git a/packages/generator/src/frontend/edit/templates/EditMutation.js.template b/packages/generator/src/edit/templates/EditMutation.js.template
similarity index 80%
rename from packages/generator/src/frontend/edit/templates/EditMutation.js.template
rename to packages/generator/src/edit/templates/EditMutation.js.template
index 487b40f..db4fde4 100644
--- a/packages/generator/src/frontend/edit/templates/EditMutation.js.template
+++ b/packages/generator/src/edit/templates/EditMutation.js.template
@@ -2,7 +2,7 @@ import Relay from 'react-relay';
 
 export default class <%= name %>EditMutation extends Relay.Mutation {
   static fragments = {
-    <%= camelCasedName %>: () => Relay.QL`
+    <%= camelCaseName %>: () => Relay.QL`
       fragment on <%= name %> {
         id
       }
@@ -17,7 +17,7 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
 
   getVariables() {
     const {
-      <%= camelCasedName %>: {
+      <%= camelCaseName %>: {
         id,
       },
       // Todo add more mutation input fields here
@@ -32,7 +32,7 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
   getFatQuery() {
     return Relay.QL`
       fragment on <%= name %>EditPayload {
-        <%= camelCasedName %>
+        <%= camelCaseName %>
       }
     `;
   }
@@ -41,7 +41,7 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
     return [{
       type: 'FIELDS_CHANGE',
       fieldIDs: {
-      <%= camelCasedName %>: this.props.<%= camelCasedName %>.id,
+      <%= camelCaseName %>: this.props.<%= camelCaseName %>.id,
       },
     }];
   }
diff --git a/packages/generator/src/frontend/list/index.js b/packages/generator/src/list/index.js
similarity index 96%
rename from packages/generator/src/frontend/list/index.js
rename to packages/generator/src/list/index.js
index 4566187..520ccaf 100644
--- a/packages/generator/src/frontend/list/index.js
+++ b/packages/generator/src/list/index.js
@@ -1,12 +1,11 @@
 import Generator from 'yeoman-generator';
 import pluralize from 'pluralize';
 import {
-  getMongooseModelSchema,
   getConfigDir,
   getRelativeConfigDir,
   camelCaseText,
   uppercaseFirstLetter,
-} from '../../utils';
+} from '../utils';
 
 class ListGenerator extends Generator {
   constructor(args, options) {
diff --git a/packages/generator/src/frontend/list/templates/List.js.template b/packages/generator/src/list/templates/List.js.template
similarity index 100%
rename from packages/generator/src/frontend/list/templates/List.js.template
rename to packages/generator/src/list/templates/List.js.template
diff --git a/packages/generator/src/frontend/view/index.js b/packages/generator/src/view/index.js
similarity index 96%
rename from packages/generator/src/frontend/view/index.js
rename to packages/generator/src/view/index.js
index ff2fa39..da0e9a5 100644
--- a/packages/generator/src/frontend/view/index.js
+++ b/packages/generator/src/view/index.js
@@ -1,12 +1,11 @@
 import Generator from 'yeoman-generator';
 import pluralize from 'pluralize';
 import {
-  getMongooseModelSchema,
   getConfigDir,
   getRelativeConfigDir,
   camelCaseText,
   uppercaseFirstLetter,
-} from '../../utils';
+} from '../utils';
 
 class ViewGenerator extends Generator {
   constructor(args, options) {
diff --git a/packages/generator/src/frontend/view/templates/View.js.template b/packages/generator/src/view/templates/View.js.template
similarity index 100%
rename from packages/generator/src/frontend/view/templates/View.js.template
rename to packages/generator/src/view/templates/View.js.template

From 3645e6d56fa9277bfe0624557095aff19d987593 Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Mon, 6 Feb 2017 11:19:35 -0200
Subject: [PATCH 08/14] fix view config

---
 packages/generator/src/view/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/generator/src/view/index.js b/packages/generator/src/view/index.js
index da0e9a5..d76dbcc 100644
--- a/packages/generator/src/view/index.js
+++ b/packages/generator/src/view/index.js
@@ -18,7 +18,7 @@ class ViewGenerator extends Generator {
 
     // TODO read schema.json
 
-    this.destinationDir = getConfigDir('add');
+    this.destinationDir = getConfigDir('view');
   }
 
   _getConfigDirectories() {

From a0e49b56a16c4aa417d6951c0d4d12a550f2a11b Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Mon, 6 Feb 2017 13:16:09 -0200
Subject: [PATCH 09/14] fix edit template

---
 packages/generator/src/edit/templates/Edit.js.template | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/generator/src/edit/templates/Edit.js.template b/packages/generator/src/edit/templates/Edit.js.template
index c0792cd..c47ea2c 100644
--- a/packages/generator/src/edit/templates/Edit.js.template
+++ b/packages/generator/src/edit/templates/Edit.js.template
@@ -94,7 +94,7 @@ export default Relay.createContainer(withRouter(<%= name %>Edit), {
     <%= camelCaseName %>: () => Relay.QL`
       fragment on <%= name %> {
         id
-        ${<%= name %>EditMutation.getFragment('<%= rawName %>')}
+        ${<%= name %>EditMutation.getFragment('<%= camelCaseName %>')}
       }
     `,
     viewer: () => Relay.QL`

From 9eed463f78c848aa221d463146babc076a8e5705 Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Mon, 6 Feb 2017 15:05:38 -0200
Subject: [PATCH 10/14] more fixes to add and edit templates

---
 packages/generator/src/add/templates/Add.js.template        | 2 +-
 .../generator/src/add/templates/AddMutation.js.template     | 6 +++---
 packages/generator/src/edit/templates/Edit.js.template      | 1 +
 .../generator/src/edit/templates/EditMutation.js.template   | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/generator/src/add/templates/Add.js.template b/packages/generator/src/add/templates/Add.js.template
index 7bbdec1..d2fd72a 100644
--- a/packages/generator/src/add/templates/Add.js.template
+++ b/packages/generator/src/add/templates/Add.js.template
@@ -33,7 +33,7 @@ class <%= name %>Add extends Component {
           message: '<%= rawName %> created successfully!',
         });
 
-        this.props.router.push(`/<%= pluralName %>/view/${<%= name %>Add.<%= rawName %>Edge.node.id}`);
+        this.props.router.push(`/<%= pluralCamelCaseName %>/view/${<%= name %>Add.<%= camelCaseName %>Edge.node.id}`);
       },
       onFailure: (failureResponse) => {
         this.context.showSnackbar({
diff --git a/packages/generator/src/add/templates/AddMutation.js.template b/packages/generator/src/add/templates/AddMutation.js.template
index 8365533..416dec3 100644
--- a/packages/generator/src/add/templates/AddMutation.js.template
+++ b/packages/generator/src/add/templates/AddMutation.js.template
@@ -30,9 +30,9 @@ export default class <%= name %>AddMutation extends Relay.Mutation {
   getFatQuery() {
     return Relay.QL`
       fragment on <%= name %>AddPayload {
-        <%= rawName %>Edge
+        <%= camelCaseName %>Edge
         viewer {
-          <%= pluralName %>
+          <%= pluralCamelCaseName %>
         }
       }
     `;
@@ -54,7 +54,7 @@ export default class <%= name %>AddMutation extends Relay.Mutation {
         type: 'REQUIRED_CHILDREN',
         children: [Relay.QL`
           fragment on <%= name %>AddPayload {
-            <%= rawName %>Edge
+            <%= camelCaseName %>Edge
           }
         `],
       },
diff --git a/packages/generator/src/edit/templates/Edit.js.template b/packages/generator/src/edit/templates/Edit.js.template
index c47ea2c..765aaba 100644
--- a/packages/generator/src/edit/templates/Edit.js.template
+++ b/packages/generator/src/edit/templates/Edit.js.template
@@ -25,6 +25,7 @@ class <%= name %>Edit extends Component {
     const { <%= camelCaseName %> } = this.props;
 
     const mutation = new <%= name %>EditMutation({
+      <%= camelCaseName %>,
       ...data,
     });
 
diff --git a/packages/generator/src/edit/templates/EditMutation.js.template b/packages/generator/src/edit/templates/EditMutation.js.template
index db4fde4..b1d77f1 100644
--- a/packages/generator/src/edit/templates/EditMutation.js.template
+++ b/packages/generator/src/edit/templates/EditMutation.js.template
@@ -41,7 +41,7 @@ export default class <%= name %>EditMutation extends Relay.Mutation {
     return [{
       type: 'FIELDS_CHANGE',
       fieldIDs: {
-      <%= camelCaseName %>: this.props.<%= camelCaseName %>.id,
+        <%= camelCaseName %>: this.props.<%= camelCaseName %>.id,
       },
     }];
   }

From 6a854c23c748d658550db2fde20f79082e967eab Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Mon, 6 Feb 2017 15:09:12 -0200
Subject: [PATCH 11/14] small fixes to List template

---
 packages/generator/src/list/templates/List.js.template | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/generator/src/list/templates/List.js.template b/packages/generator/src/list/templates/List.js.template
index 01df9c0..311f371 100644
--- a/packages/generator/src/list/templates/List.js.template
+++ b/packages/generator/src/list/templates/List.js.template
@@ -20,7 +20,7 @@ class <%= name %>List extends Component {
       },
       icon: 'mode_edit',
       type: 'icon',
-      clickPath: '/<%= pluralName %>/view/:id',
+      clickPath: '/<%= pluralCamelCaseName %>/view/:id',
     },
     {
       property: 'id',

From 679f90620ecb151c74d86132429af3042ef0588e Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Mon, 6 Feb 2017 16:27:52 -0200
Subject: [PATCH 12/14] fix graphql config for frontend

---
 packages/generator/src/graphqlrc.json | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/generator/src/graphqlrc.json b/packages/generator/src/graphqlrc.json
index 2b51f5e..2b4f089 100644
--- a/packages/generator/src/graphqlrc.json
+++ b/packages/generator/src/graphqlrc.json
@@ -8,7 +8,11 @@
     "mutation_test": "mutation/__tests__",
     "type": "type",
     "type_test": "type/__tests__",
-    "interface": "interface"
+    "interface": "interface",
+    "add": "new",
+    "edit": "new/view",
+    "list": "new",
+    "view": "new/view"
   },
   "files": {
     "schema": "schema"

From 32d190b89799d7ab82210309b2538ab6489e57bd Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Mon, 6 Feb 2017 18:22:42 -0200
Subject: [PATCH 13/14] add tests

---
 .../src/add/__tests__/AddGenerator.spec.js    |  30 +++
 .../__snapshots__/AddGenerator.spec.js.snap   | 178 ++++++++++++++++++
 .../src/edit/__tests__/EditGenerator.spec.js  |  30 +++
 .../__snapshots__/EditGenerator.spec.js.snap  | 161 ++++++++++++++++
 .../src/list/__tests__/ListGenerator.spec.js  |  29 +++
 .../__snapshots__/ListGenerator.spec.js.snap  | 125 ++++++++++++
 .../src/view/__tests__/ViewGenerator.spec.js  |  29 +++
 .../__snapshots__/ViewGenerator.spec.js.snap  |  62 ++++++
 8 files changed, 644 insertions(+)
 create mode 100644 packages/generator/src/add/__tests__/AddGenerator.spec.js
 create mode 100644 packages/generator/src/add/__tests__/__snapshots__/AddGenerator.spec.js.snap
 create mode 100644 packages/generator/src/edit/__tests__/EditGenerator.spec.js
 create mode 100644 packages/generator/src/edit/__tests__/__snapshots__/EditGenerator.spec.js.snap
 create mode 100644 packages/generator/src/list/__tests__/ListGenerator.spec.js
 create mode 100644 packages/generator/src/list/__tests__/__snapshots__/ListGenerator.spec.js.snap
 create mode 100644 packages/generator/src/view/__tests__/ViewGenerator.spec.js
 create mode 100644 packages/generator/src/view/__tests__/__snapshots__/ViewGenerator.spec.js.snap

diff --git a/packages/generator/src/add/__tests__/AddGenerator.spec.js b/packages/generator/src/add/__tests__/AddGenerator.spec.js
new file mode 100644
index 0000000..7a0b16e
--- /dev/null
+++ b/packages/generator/src/add/__tests__/AddGenerator.spec.js
@@ -0,0 +1,30 @@
+import helper from 'yeoman-test';
+import assert from 'yeoman-assert';
+import path from 'path';
+
+import {
+  getFileContent,
+} from '../../../test/helpers';
+
+import { getConfigDir } from '../../utils';
+
+const addGenerator = path.join(__dirname, '..');
+
+it('generate add and add mutation files', async () => {
+  const folder = await helper.run(addGenerator)
+    .withArguments('Example')
+    .toPromise();
+
+  const destinationDir = getConfigDir('add');
+
+  assert.file([
+    `${destinationDir}/ExampleAdd.js`, `${destinationDir}/ExampleAddMutation.js`,
+  ]);
+
+  const files = {
+    add: getFileContent(`${folder}/${destinationDir}/ExampleAdd.js`),
+    addMutation: getFileContent(`${folder}/${destinationDir}/ExampleAddMutation.js`),
+  };
+
+  expect(files).toMatchSnapshot();
+});
diff --git a/packages/generator/src/add/__tests__/__snapshots__/AddGenerator.spec.js.snap b/packages/generator/src/add/__tests__/__snapshots__/AddGenerator.spec.js.snap
new file mode 100644
index 0000000..3615eb0
--- /dev/null
+++ b/packages/generator/src/add/__tests__/__snapshots__/AddGenerator.spec.js.snap
@@ -0,0 +1,178 @@
+exports[`test generate add and add mutation files 1`] = `
+Object {
+  "add": "import React, { Component, PropTypes } from \'react\';
+import Relay from \'react-relay\';
+import RelayStore from \'../../RelayStore\';
+import { withRouter } from \'react-router\';
+
+import ExampleAddMutation from \'./ExampleAddMutation\';
+
+import Form from \'../common/Form\';
+
+class ExampleAdd extends Component {
+  static contextTypes = {
+    showSnackbar: PropTypes.func,
+  };
+
+  fields = [
+    {
+      name: \'id\',
+      placeholder: \'ID\',
+      required: true,
+    },
+    // TODO - add ObjectType fields here
+  ];
+
+  onSubmit = (data) => {
+    const mutation = new ExampleAddMutation({
+      viewer: this.props.viewer,
+      ...data,
+    });
+
+    RelayStore.commitUpdate(mutation, {
+      onSuccess: ({ ExampleAdd }) => {
+        this.context.showSnackbar({
+          message: \'Example created successfully!\',
+        });
+
+        this.props.router.push(\`/examples/view/\${ExampleAdd.exampleEdge.node.id}\`);
+      },
+      onFailure: (failureResponse) => {
+        this.context.showSnackbar({
+          message: \'There was an error while trying to create a Example.\',
+        });
+
+        console.log(\'FAIL\', failureResponse);
+      },
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <h1 style={styles.title}>
+          New Example
+        </h1>
+        <Form
+          fields={this.fields}
+          onSubmit={this.onSubmit}
+        />
+      </div>
+    );
+  }
+}
+
+const styles = {
+  form: {
+    backgroundColor: \'white\',
+    boxShadow: \'rgba(0, 0, 0, 0.056863) 0px 7px 8px, rgba(0, 0, 0, 0.227451) 0px 0px 0px\',
+    borderWidth: 1,
+    borderStyle: \'solid\',
+    borderColor: \'#E7ECEA\',
+    padding: 20,
+    paddingTop: 50,
+  },
+  formContainer: {
+    display: \'flex\',
+    flexWrap: \'wrap\',
+  },
+  title: {
+    fontSize: 25,
+    fontWeight: 300,
+  },
+  actionsContainer: {
+    display: \'flex\',
+    justifyContent: \'flex-end\',
+    marginTop: 5,
+    paddingRight: 8,
+    borderTopStyle: \'solid\',
+    borderTopWidth: 1,
+    paddingTop: 15,
+    borderColor: \'#ECECEC\',
+  },
+  formField: {
+    marginRight: 10,
+    flex: \'1 0 47%\',
+  },
+  selectField: {
+    marginRight: 10,
+    flex: \'1 0 48%\',
+  },
+};
+
+export default Relay.createContainer(withRouter(ExampleAdd), {
+  fragments: {
+    viewer: () => Relay.QL\`
+      fragment on Viewer {
+        \${ExampleAddMutation.getFragment(\'viewer\')}
+      }
+    \`,
+  },
+});
+",
+  "addMutation": "import Relay from \'react-relay\';
+
+export default class ExampleAddMutation extends Relay.Mutation {
+  static fragments = {
+    viewer: () => Relay.QL\`
+      fragment on Viewer {
+        id
+      }
+    \`,
+  };
+
+  getMutation() {
+    return Relay.QL\`mutation {
+      ExampleAdd
+    }\`;
+  }
+
+  getVariables() {
+    const {
+      id
+      // TODO - add mutation input fields here
+    } = this.props;
+
+    return {
+      id
+      // TODO - add mutation input fields here
+    };
+  }
+
+  getFatQuery() {
+    return Relay.QL\`
+      fragment on ExampleAddPayload {
+        exampleEdge
+        viewer {
+          examples
+        }
+      }
+    \`;
+  }
+
+  getConfigs() {
+    return [
+      {
+        type: \'RANGE_ADD\',
+        parentName: \'viewer\',
+        parentID: this.props.viewer.id,
+        connectionName: \'Examples\',
+        edgeName: \'ExampleEdge\',
+        rangeBehaviors: {
+          \'\': \'prepend\',
+        },
+      },
+      {
+        type: \'REQUIRED_CHILDREN\',
+        children: [Relay.QL\`
+          fragment on ExampleAddPayload {
+            exampleEdge
+          }
+        \`],
+      },
+    ];
+  }
+}
+",
+}
+`;
diff --git a/packages/generator/src/edit/__tests__/EditGenerator.spec.js b/packages/generator/src/edit/__tests__/EditGenerator.spec.js
new file mode 100644
index 0000000..6fe1906
--- /dev/null
+++ b/packages/generator/src/edit/__tests__/EditGenerator.spec.js
@@ -0,0 +1,30 @@
+import helper from 'yeoman-test';
+import assert from 'yeoman-assert';
+import path from 'path';
+
+import {
+  getFileContent,
+} from '../../../test/helpers';
+
+import { getConfigDir } from '../../utils';
+
+const editGenerator = path.join(__dirname, '..');
+
+it('generate edit and edit mutation files', async () => {
+  const folder = await helper.run(editGenerator)
+    .withArguments('Example')
+    .toPromise();
+
+  const destinationDir = getConfigDir('edit');
+
+  assert.file([
+    `${destinationDir}/ExampleEdit.js`, `${destinationDir}/ExampleEditMutation.js`,
+  ]);
+
+  const files = {
+    edit: getFileContent(`${folder}/${destinationDir}/ExampleEdit.js`),
+    editMutation: getFileContent(`${folder}/${destinationDir}/ExampleEditMutation.js`),
+  };
+
+  expect(files).toMatchSnapshot();
+});
diff --git a/packages/generator/src/edit/__tests__/__snapshots__/EditGenerator.spec.js.snap b/packages/generator/src/edit/__tests__/__snapshots__/EditGenerator.spec.js.snap
new file mode 100644
index 0000000..1c45165
--- /dev/null
+++ b/packages/generator/src/edit/__tests__/__snapshots__/EditGenerator.spec.js.snap
@@ -0,0 +1,161 @@
+exports[`test generate edit and edit mutation files 1`] = `
+Object {
+  "edit": "import React, { Component, PropTypes } from \'react\';
+import Relay from \'react-relay\';
+import RelayStore from \'../../../RelayStore\';
+import { withRouter } from \'react-router\';
+
+import ExampleEditMutation from \'./ExampleEditMutation.js\';
+
+import Form from \'../../common/Form\';
+
+class ExampleEdit extends Component {
+  static contextTypes = {
+    showSnackbar: PropTypes.func,
+  };
+
+  fields = [
+    {
+      name: \'id\',
+      placeholder: \'ID\',
+      required: true,
+    },
+    // TODO - add ObjectType fields here
+  ];
+
+  onSubmit = (data) => {
+    const { example } = this.props;
+
+    const mutation = new ExampleEditMutation({
+      example,
+      ...data,
+    });
+
+    RelayStore.commitUpdate(mutation, {
+      onSuccess: () => {
+        this.context.showSnackbar({
+          message: \'Example edited successfully!\',
+        });
+
+        this.props.router.goBack();
+      },
+      onFailure: (failureResponse) => {
+        this.context.showSnackbar({
+          message: \'There was an error while trying to edit this Example.\',
+        });
+
+        console.log(\'FAIL\', failureResponse);
+      },
+    });
+  };
+
+  render() {
+    const { example } = this.props;
+
+    return (
+      <Form
+        fields={this.fields}
+        onSubmit={this.onSubmit}
+        value={example}
+      />
+    );
+  }
+}
+
+const styles = {
+  formContainer: {
+    display: \'flex\',
+    flexWrap: \'wrap\',
+    paddingTop: 30,
+    paddingLeft: 10,
+  },
+  actionsContainer: {
+    display: \'flex\',
+    justifyContent: \'flex-end\',
+    marginTop: 5,
+    paddingRight: 8,
+    borderTopStyle: \'solid\',
+    borderTopWidth: 1,
+    paddingTop: 15,
+    borderColor: \'#ECECEC\',
+  },
+  formField: {
+    marginRight: 10,
+    flex: \'1 0 47%\',
+  },
+  selectField: {
+    marginRight: 10,
+    flex: \'1 0 48%\',
+  },
+};
+
+export default Relay.createContainer(withRouter(ExampleEdit), {
+  initialVariables: {
+    id: null,
+  },
+  fragments: {
+    example: () => Relay.QL\`
+      fragment on Example {
+        id
+        \${ExampleEditMutation.getFragment(\'example\')}
+      }
+    \`,
+    viewer: () => Relay.QL\`
+      fragment on Viewer {
+        id
+      }
+    \`,
+  },
+});
+",
+  "editMutation": "import Relay from \'react-relay\';
+
+export default class ExampleEditMutation extends Relay.Mutation {
+  static fragments = {
+    example: () => Relay.QL\`
+      fragment on Example {
+        id
+      }
+    \`,
+  };
+
+  getMutation() {
+    return Relay.QL\`mutation {
+      ExampleEdit
+    }\`;
+  }
+
+  getVariables() {
+    const {
+      example: {
+        id,
+      },
+      // Todo add more mutation input fields here
+    } = this.props;
+
+    return {
+      id,
+      // TODO add more mutation input fields here
+    };
+  }
+
+  getFatQuery() {
+    return Relay.QL\`
+      fragment on ExampleEditPayload {
+        example
+      }
+    \`;
+  }
+
+  getConfigs() {
+    return [{
+      type: \'FIELDS_CHANGE\',
+      fieldIDs: {
+        example: this.props.example.id,
+      },
+    }];
+  }
+}
+",
+}
+`;
diff --git a/packages/generator/src/list/__tests__/ListGenerator.spec.js b/packages/generator/src/list/__tests__/ListGenerator.spec.js
new file mode 100644
index 0000000..d52611a
--- /dev/null
+++ b/packages/generator/src/list/__tests__/ListGenerator.spec.js
@@ -0,0 +1,29 @@
+import helper from 'yeoman-test';
+import assert from 'yeoman-assert';
+import path from 'path';
+
+import {
+  getFileContent,
+} from '../../../test/helpers';
+
+import { getConfigDir } from '../../utils';
+
+const listGenerator = path.join(__dirname, '..');
+
+it('generate list files', async () => {
+  const folder = await helper.run(listGenerator)
+    .withArguments('Example')
+    .toPromise();
+
+  const destinationDir = getConfigDir('list');
+
+  assert.file([
+    `${destinationDir}/ExampleList.js`,
+  ]);
+
+  const files = {
+    list: getFileContent(`${folder}/${destinationDir}/ExampleList.js`),
+  };
+
+  expect(files).toMatchSnapshot();
+});
diff --git a/packages/generator/src/list/__tests__/__snapshots__/ListGenerator.spec.js.snap b/packages/generator/src/list/__tests__/__snapshots__/ListGenerator.spec.js.snap
new file mode 100644
index 0000000..e545a4e
--- /dev/null
+++ b/packages/generator/src/list/__tests__/__snapshots__/ListGenerator.spec.js.snap
@@ -0,0 +1,125 @@
+exports[`test generate list files 1`] = `
+Object {
+  "list": "// @flow
+
+import React, { Component } from \'react\';
+import Relay from \'react-relay\';
+import { withRouter } from \'react-router\';
+
+import Table from \'../common/Table\';
+import Toolbar from \'../common/Toolbar\';
+
+class ExampleList extends Component {
+  state = {
+    isLoading: true,
+  };
+
+  tableColumns = [
+    {
+      property: \'\',
+      header: {
+        label: \'Actions\',
+      },
+      icon: \'mode_edit\',
+      type: \'icon\',
+      clickPath: \'/examples/view/:id\',
+    },
+    {
+      property: \'id\',
+      header: {
+        label: \'ID\',
+      },
+    },
+    // TODO - add more fields to table
+  ];
+
+  componentDidMount = () => {
+    this.setState({
+      isLoading: false,
+    });
+  };
+
+  _handleNew = () => this.props.router.push(\'/Examples/new\');
+
+  _handleRefreshList = () => {
+    this.setState({
+      isLoading: true,
+    });
+
+    this.props.relay.forceFetch({}, ({ done }) => {
+      if (done) {
+        this.setState({
+          isLoading: false,
+        });
+      }
+    });
+  };
+
+  _handleLoadMore = () => {
+    const { relay } = this.props;
+
+    this.setState({
+      isLoading: true,
+    });
+
+    relay.setVariables({
+      count: relay.variables.count + 10,
+    }, ({ done }) => {
+      if (done) {
+        this.setState({
+          isLoading: false,
+        });
+      }
+    });
+  };
+
+  render() {
+    const { isLoading } = this.state;
+
+    return (
+      <div>
+        <Toolbar
+          title=\"Examples\"
+          primaryActionLabel=\"New Example\"
+          primaryActionOnClick={this._handleNew}
+          onRefresh={this._handleRefreshList}
+        />
+
+        <Table
+          name=\"Example\"
+          columns={this.tableColumns}
+          rows={this.props.viewer.examples}
+          router={this.props.router}
+          onLoadMore={this._handleLoadMore}
+          isLoading={isLoading}
+        />
+      </div>
+    );
+  }
+}
+
+export default Relay.createContainer(withRouter(ExampleList), {
+  initialVariables: {
+    count: 20,
+  },
+  fragments: {
+    viewer: () => Relay.QL\`
+      fragment on Viewer {
+        examples(first: $count) {
+          pageInfo {
+            hasNextPage
+          }
+          edges {
+            node {
+              id
+              // TODO - add relay fields
+            }
+          }
+        }
+      }
+    \`,
+  },
+});
+",
+}
+`;
diff --git a/packages/generator/src/view/__tests__/ViewGenerator.spec.js b/packages/generator/src/view/__tests__/ViewGenerator.spec.js
new file mode 100644
index 0000000..99ab23d
--- /dev/null
+++ b/packages/generator/src/view/__tests__/ViewGenerator.spec.js
@@ -0,0 +1,29 @@
+import helper from 'yeoman-test';
+import assert from 'yeoman-assert';
+import path from 'path';
+
+import {
+  getFileContent,
+} from '../../../test/helpers';
+
+import { getConfigDir } from '../../utils';
+
+const viewGenerator = path.join(__dirname, '..');
+
+it('generate view files', async () => {
+  const folder = await helper.run(viewGenerator)
+    .withArguments('Example')
+    .toPromise();
+
+  const destinationDir = getConfigDir('view');
+
+  assert.file([
+    `${destinationDir}/ExampleView.js`,
+  ]);
+
+  const files = {
+    view: getFileContent(`${folder}/${destinationDir}/ExampleView.js`),
+  };
+
+  expect(files).toMatchSnapshot();
+});
diff --git a/packages/generator/src/view/__tests__/__snapshots__/ViewGenerator.spec.js.snap b/packages/generator/src/view/__tests__/__snapshots__/ViewGenerator.spec.js.snap
new file mode 100644
index 0000000..5eb8c15
--- /dev/null
+++ b/packages/generator/src/view/__tests__/__snapshots__/ViewGenerator.spec.js.snap
@@ -0,0 +1,62 @@
+exports[`test generate view files 1`] = `
+Object {
+  "view": "import React, { Component } from \'react\';
+import Relay from \'react-relay\';
+import { withRouter } from \'react-router\';
+
+import ExampleEdit from \'./ExampleEdit\';
+
+import Tabs from \'../../common/Tabs\';
+
+class ExampleView extends Component {
+  render() {
+    const { viewer } = this.props;
+    const { example } = viewer;
+
+    const tabs = [{
+      label: \'Details\',
+      component: (
+        <ExampleEdit
+          example={example}
+          viewer={viewer}
+        />
+      ),
+      icon: \'assignment\',
+    }];
+
+    return (
+      <div>
+        <h1 style={styles.title}>Example: {example.id}</h1>
+
+        <Tabs tabs={tabs} />
+      </div>
+    );
+  }
+}
+
+const styles = {
+  title: {
+    fontSize: 25,
+    fontWeight: 300,
+  },
+};
+
+export default Relay.createContainer(withRouter(ExampleView), {
+  initialVariables: {
+    id: null,
+  },
+  fragments: {
+    viewer: ({ id }) => Relay.QL\`
+      fragment on Viewer {
+        example(id: $id) {
+          id
+          \${ExampleEdit.getFragment(\'example\')}
+        }
+        \${ExampleEdit.getFragment(\'viewer\')}
+      }
+    \`,
+  },
+});
+",
+}
+`;

From 9830d5da9db37124100d007887c3d26e17beba56 Mon Sep 17 00:00:00 2001
From: Sibelius Seraphini <sibeliusseraphini@gmail.com>
Date: Thu, 27 Apr 2017 22:12:24 -0300
Subject: [PATCH 14/14] upgrade snapshots to jest 19

---
 .../__snapshots__/AddGenerator.spec.js.snap   | 66 ++++++++++---------
 .../__snapshots__/EditGenerator.spec.js.snap  | 48 +++++++-------
 .../__snapshots__/ListGenerator.spec.js.snap  | 36 +++++-----
 .../__snapshots__/ViewGenerator.spec.js.snap  | 22 ++++---
 4 files changed, 90 insertions(+), 82 deletions(-)

diff --git a/packages/generator/src/add/__tests__/__snapshots__/AddGenerator.spec.js.snap b/packages/generator/src/add/__tests__/__snapshots__/AddGenerator.spec.js.snap
index 3615eb0..f6b712c 100644
--- a/packages/generator/src/add/__tests__/__snapshots__/AddGenerator.spec.js.snap
+++ b/packages/generator/src/add/__tests__/__snapshots__/AddGenerator.spec.js.snap
@@ -1,13 +1,15 @@
-exports[`test generate add and add mutation files 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`generate add and add mutation files 1`] = `
 Object {
-  "add": "import React, { Component, PropTypes } from \'react\';
-import Relay from \'react-relay\';
-import RelayStore from \'../../RelayStore\';
-import { withRouter } from \'react-router\';
+  "add": "import React, { Component, PropTypes } from 'react';
+import Relay from 'react-relay';
+import RelayStore from '../../RelayStore';
+import { withRouter } from 'react-router';
 
-import ExampleAddMutation from \'./ExampleAddMutation\';
+import ExampleAddMutation from './ExampleAddMutation';
 
-import Form from \'../common/Form\';
+import Form from '../common/Form';
 
 class ExampleAdd extends Component {
   static contextTypes = {
@@ -16,8 +18,8 @@ class ExampleAdd extends Component {
 
   fields = [
     {
-      name: \'id\',
-      placeholder: \'ID\',
+      name: 'id',
+      placeholder: 'ID',
       required: true,
     },
     // TODO - add ObjectType fields here
@@ -32,17 +34,17 @@ class ExampleAdd extends Component {
     RelayStore.commitUpdate(mutation, {
       onSuccess: ({ ExampleAdd }) => {
         this.context.showSnackbar({
-          message: \'Example created successfully!\',
+          message: 'Example created successfully!',
         });
 
         this.props.router.push(\`/examples/view/\${ExampleAdd.exampleEdge.node.id}\`);
       },
       onFailure: (failureResponse) => {
         this.context.showSnackbar({
-          message: \'There was an error while trying to create a Example.\',
+          message: 'There was an error while trying to create a Example.',
         });
 
-        console.log(\'FAIL\', failureResponse);
+        console.log('FAIL', failureResponse);
       },
     });
   };
@@ -64,39 +66,39 @@ class ExampleAdd extends Component {
 
 const styles = {
   form: {
-    backgroundColor: \'white\',
-    boxShadow: \'rgba(0, 0, 0, 0.056863) 0px 7px 8px, rgba(0, 0, 0, 0.227451) 0px 0px 0px\',
+    backgroundColor: 'white',
+    boxShadow: 'rgba(0, 0, 0, 0.056863) 0px 7px 8px, rgba(0, 0, 0, 0.227451) 0px 0px 0px',
     borderWidth: 1,
-    borderStyle: \'solid\',
-    borderColor: \'#E7ECEA\',
+    borderStyle: 'solid',
+    borderColor: '#E7ECEA',
     padding: 20,
     paddingTop: 50,
   },
   formContainer: {
-    display: \'flex\',
-    flexWrap: \'wrap\',
+    display: 'flex',
+    flexWrap: 'wrap',
   },
   title: {
     fontSize: 25,
     fontWeight: 300,
   },
   actionsContainer: {
-    display: \'flex\',
-    justifyContent: \'flex-end\',
+    display: 'flex',
+    justifyContent: 'flex-end',
     marginTop: 5,
     paddingRight: 8,
-    borderTopStyle: \'solid\',
+    borderTopStyle: 'solid',
     borderTopWidth: 1,
     paddingTop: 15,
-    borderColor: \'#ECECEC\',
+    borderColor: '#ECECEC',
   },
   formField: {
     marginRight: 10,
-    flex: \'1 0 47%\',
+    flex: '1 0 47%',
   },
   selectField: {
     marginRight: 10,
-    flex: \'1 0 48%\',
+    flex: '1 0 48%',
   },
 };
 
@@ -104,13 +106,13 @@ export default Relay.createContainer(withRouter(ExampleAdd), {
   fragments: {
     viewer: () => Relay.QL\`
       fragment on Viewer {
-        \${ExampleAddMutation.getFragment(\'viewer\')}
+        \${ExampleAddMutation.getFragment('viewer')}
       }
     \`,
   },
 });
 ",
-  "addMutation": "import Relay from \'react-relay\';
+  "addMutation": "import Relay from 'react-relay';
 
 export default class ExampleAddMutation extends Relay.Mutation {
   static fragments = {
@@ -153,17 +155,17 @@ export default class ExampleAddMutation extends Relay.Mutation {
   getConfigs() {
     return [
       {
-        type: \'RANGE_ADD\',
-        parentName: \'viewer\',
+        type: 'RANGE_ADD',
+        parentName: 'viewer',
         parentID: this.props.viewer.id,
-        connectionName: \'Examples\',
-        edgeName: \'ExampleEdge\',
+        connectionName: 'Examples',
+        edgeName: 'ExampleEdge',
         rangeBehaviors: {
-          \'\': \'prepend\',
+          '': 'prepend',
         },
       },
       {
-        type: \'REQUIRED_CHILDREN\',
+        type: 'REQUIRED_CHILDREN',
         children: [Relay.QL\`
           fragment on ExampleAddPayload {
             exampleEdge
diff --git a/packages/generator/src/edit/__tests__/__snapshots__/EditGenerator.spec.js.snap b/packages/generator/src/edit/__tests__/__snapshots__/EditGenerator.spec.js.snap
index 1c45165..5762d02 100644
--- a/packages/generator/src/edit/__tests__/__snapshots__/EditGenerator.spec.js.snap
+++ b/packages/generator/src/edit/__tests__/__snapshots__/EditGenerator.spec.js.snap
@@ -1,13 +1,15 @@
-exports[`test generate edit and edit mutation files 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`generate edit and edit mutation files 1`] = `
 Object {
-  "edit": "import React, { Component, PropTypes } from \'react\';
-import Relay from \'react-relay\';
-import RelayStore from \'../../../RelayStore\';
-import { withRouter } from \'react-router\';
+  "edit": "import React, { Component, PropTypes } from 'react';
+import Relay from 'react-relay';
+import RelayStore from '../../../RelayStore';
+import { withRouter } from 'react-router';
 
-import ExampleEditMutation from \'./ExampleEditMutation.js\';
+import ExampleEditMutation from './ExampleEditMutation.js';
 
-import Form from \'../../common/Form\';
+import Form from '../../common/Form';
 
 class ExampleEdit extends Component {
   static contextTypes = {
@@ -16,8 +18,8 @@ class ExampleEdit extends Component {
 
   fields = [
     {
-      name: \'id\',
-      placeholder: \'ID\',
+      name: 'id',
+      placeholder: 'ID',
       required: true,
     },
     // TODO - add ObjectType fields here
@@ -34,17 +36,17 @@ class ExampleEdit extends Component {
     RelayStore.commitUpdate(mutation, {
       onSuccess: () => {
         this.context.showSnackbar({
-          message: \'Example edited successfully!\',
+          message: 'Example edited successfully!',
         });
 
         this.props.router.goBack();
       },
       onFailure: (failureResponse) => {
         this.context.showSnackbar({
-          message: \'There was an error while trying to edit this Example.\',
+          message: 'There was an error while trying to edit this Example.',
         });
 
-        console.log(\'FAIL\', failureResponse);
+        console.log('FAIL', failureResponse);
       },
     });
   };
@@ -64,28 +66,28 @@ class ExampleEdit extends Component {
 
 const styles = {
   formContainer: {
-    display: \'flex\',
-    flexWrap: \'wrap\',
+    display: 'flex',
+    flexWrap: 'wrap',
     paddingTop: 30,
     paddingLeft: 10,
   },
   actionsContainer: {
-    display: \'flex\',
-    justifyContent: \'flex-end\',
+    display: 'flex',
+    justifyContent: 'flex-end',
     marginTop: 5,
     paddingRight: 8,
-    borderTopStyle: \'solid\',
+    borderTopStyle: 'solid',
     borderTopWidth: 1,
     paddingTop: 15,
-    borderColor: \'#ECECEC\',
+    borderColor: '#ECECEC',
   },
   formField: {
     marginRight: 10,
-    flex: \'1 0 47%\',
+    flex: '1 0 47%',
   },
   selectField: {
     marginRight: 10,
-    flex: \'1 0 48%\',
+    flex: '1 0 48%',
   },
 };
 
@@ -97,7 +99,7 @@ export default Relay.createContainer(withRouter(ExampleEdit), {
     example: () => Relay.QL\`
       fragment on Example {
         id
-        \${ExampleEditMutation.getFragment(\'example\')}
+        \${ExampleEditMutation.getFragment('example')}
       }
     \`,
     viewer: () => Relay.QL\`
@@ -108,7 +110,7 @@ export default Relay.createContainer(withRouter(ExampleEdit), {
   },
 });
 ",
-  "editMutation": "import Relay from \'react-relay\';
+  "editMutation": "import Relay from 'react-relay';
 
 export default class ExampleEditMutation extends Relay.Mutation {
   static fragments = {
@@ -149,7 +151,7 @@ export default class ExampleEditMutation extends Relay.Mutation {
 
   getConfigs() {
     return [{
-      type: \'FIELDS_CHANGE\',
+      type: 'FIELDS_CHANGE',
       fieldIDs: {
         example: this.props.example.id,
       },
diff --git a/packages/generator/src/list/__tests__/__snapshots__/ListGenerator.spec.js.snap b/packages/generator/src/list/__tests__/__snapshots__/ListGenerator.spec.js.snap
index e545a4e..45ff861 100644
--- a/packages/generator/src/list/__tests__/__snapshots__/ListGenerator.spec.js.snap
+++ b/packages/generator/src/list/__tests__/__snapshots__/ListGenerator.spec.js.snap
@@ -1,13 +1,15 @@
-exports[`test generate list files 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`generate list files 1`] = `
 Object {
   "list": "// @flow
 
-import React, { Component } from \'react\';
-import Relay from \'react-relay\';
-import { withRouter } from \'react-router\';
+import React, { Component } from 'react';
+import Relay from 'react-relay';
+import { withRouter } from 'react-router';
 
-import Table from \'../common/Table\';
-import Toolbar from \'../common/Toolbar\';
+import Table from '../common/Table';
+import Toolbar from '../common/Toolbar';
 
 class ExampleList extends Component {
   state = {
@@ -16,18 +18,18 @@ class ExampleList extends Component {
 
   tableColumns = [
     {
-      property: \'\',
+      property: '',
       header: {
-        label: \'Actions\',
+        label: 'Actions',
       },
-      icon: \'mode_edit\',
-      type: \'icon\',
-      clickPath: \'/examples/view/:id\',
+      icon: 'mode_edit',
+      type: 'icon',
+      clickPath: '/examples/view/:id',
     },
     {
-      property: \'id\',
+      property: 'id',
       header: {
-        label: \'ID\',
+        label: 'ID',
       },
     },
     // TODO - add more fields to table
@@ -39,7 +41,7 @@ class ExampleList extends Component {
     });
   };
 
-  _handleNew = () => this.props.router.push(\'/Examples/new\');
+  _handleNew = () => this.props.router.push('/Examples/new');
 
   _handleRefreshList = () => {
     this.setState({
@@ -79,14 +81,14 @@ class ExampleList extends Component {
     return (
       <div>
         <Toolbar
-          title=\"Examples\"
-          primaryActionLabel=\"New Example\"
+          title=\\"Examples\\"
+          primaryActionLabel=\\"New Example\\"
           primaryActionOnClick={this._handleNew}
           onRefresh={this._handleRefreshList}
         />
 
         <Table
-          name=\"Example\"
+          name=\\"Example\\"
           columns={this.tableColumns}
           rows={this.props.viewer.examples}
           router={this.props.router}
diff --git a/packages/generator/src/view/__tests__/__snapshots__/ViewGenerator.spec.js.snap b/packages/generator/src/view/__tests__/__snapshots__/ViewGenerator.spec.js.snap
index 5eb8c15..748fd4f 100644
--- a/packages/generator/src/view/__tests__/__snapshots__/ViewGenerator.spec.js.snap
+++ b/packages/generator/src/view/__tests__/__snapshots__/ViewGenerator.spec.js.snap
@@ -1,12 +1,14 @@
-exports[`test generate view files 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`generate view files 1`] = `
 Object {
-  "view": "import React, { Component } from \'react\';
-import Relay from \'react-relay\';
-import { withRouter } from \'react-router\';
+  "view": "import React, { Component } from 'react';
+import Relay from 'react-relay';
+import { withRouter } from 'react-router';
 
-import ExampleEdit from \'./ExampleEdit\';
+import ExampleEdit from './ExampleEdit';
 
-import Tabs from \'../../common/Tabs\';
+import Tabs from '../../common/Tabs';
 
 class ExampleView extends Component {
   render() {
@@ -14,14 +16,14 @@ class ExampleView extends Component {
     const { example } = viewer;
 
     const tabs = [{
-      label: \'Details\',
+      label: 'Details',
       component: (
         <ExampleEdit
           example={example}
           viewer={viewer}
         />
       ),
-      icon: \'assignment\',
+      icon: 'assignment',
     }];
 
     return (
@@ -50,9 +52,9 @@ export default Relay.createContainer(withRouter(ExampleView), {
       fragment on Viewer {
         example(id: $id) {
           id
-          \${ExampleEdit.getFragment(\'example\')}
+          \${ExampleEdit.getFragment('example')}
         }
-        \${ExampleEdit.getFragment(\'viewer\')}
+        \${ExampleEdit.getFragment('viewer')}
       }
     \`,
   },