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

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')}
+      }
+    `,
+  },
+});

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
+          }
+        `],
+      },
+    ];
+  }
+}

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
+      }
+    `,
+  },
+});

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,
+      },
+    }];
+  }
+}

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;