Skip to content

Commit 30356ab

Browse files
sibeliussibelius
committed
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
1 parent 00595d1 commit 30356ab

File tree

7 files changed

+565
-0
lines changed

7 files changed

+565
-0
lines changed

‎packages/generator/src/frontend/add/templates/Add.js.template

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import Relay from 'react-relay';
3+
import RelayStore from '../../RelayStore';
4+
import { withRouter } from 'react-router';
5+
6+
import <%= name %>AddMutation from './<%= name %>AddMutation';
7+
8+
import Form from '../common/Form';
9+
10+
class <%= name %>Add extends Component {
11+
static contextTypes = {
12+
showSnackbar: PropTypes.func,
13+
};
14+
15+
fields = [
16+
{
17+
name: 'id',
18+
placeholder: 'ID',
19+
required: true,
20+
},
21+
// TODO - add ObjectType fields here
22+
];
23+
24+
onSubmit = (data) => {
25+
const mutation = new <%= name %>AddMutation({
26+
viewer: this.props.viewer,
27+
...data,
28+
});
29+
30+
RelayStore.commitUpdate(mutation, {
31+
onSuccess: ({ <%= name %>Add }) => {
32+
this.context.showSnackbar({
33+
message: '<%= rawName %> created successfully!',
34+
});
35+
36+
this.props.router.push(`/<%= pluralName %>/view/${<%= name %>Add.<%= rawName %>Edge.node.id}`);
37+
},
38+
onFailure: (failureResponse) => {
39+
this.context.showSnackbar({
40+
message: 'There was an error while trying to create a <%= rawName %>.',
41+
});
42+
43+
console.log('FAIL', failureResponse);
44+
},
45+
});
46+
};
47+
48+
render() {
49+
return (
50+
<div>
51+
<h1 style={styles.title}>
52+
New <%= name %>
53+
</h1>
54+
<Form
55+
fields={this.fields}
56+
onSubmit={this.onSubmit}
57+
/>
58+
</div>
59+
);
60+
}
61+
}
62+
63+
const styles = {
64+
form: {
65+
backgroundColor: 'white',
66+
boxShadow: 'rgba(0, 0, 0, 0.056863) 0px 7px 8px, rgba(0, 0, 0, 0.227451) 0px 0px 0px',
67+
borderWidth: 1,
68+
borderStyle: 'solid',
69+
borderColor: '#E7ECEA',
70+
padding: 20,
71+
paddingTop: 50,
72+
},
73+
formContainer: {
74+
display: 'flex',
75+
flexWrap: 'wrap',
76+
},
77+
title: {
78+
fontSize: 25,
79+
fontWeight: 300,
80+
},
81+
actionsContainer: {
82+
display: 'flex',
83+
justifyContent: 'flex-end',
84+
marginTop: 5,
85+
paddingRight: 8,
86+
borderTopStyle: 'solid',
87+
borderTopWidth: 1,
88+
paddingTop: 15,
89+
borderColor: '#ECECEC',
90+
},
91+
formField: {
92+
marginRight: 10,
93+
flex: '1 0 47%',
94+
},
95+
selectField: {
96+
marginRight: 10,
97+
flex: '1 0 48%',
98+
},
99+
};
100+
101+
export default Relay.createContainer(withRouter(<%= name %>Add), {
102+
fragments: {
103+
viewer: () => Relay.QL`
104+
fragment on Viewer {
105+
${<%= name %>AddMutation.getFragment('viewer')}
106+
}
107+
`,
108+
},
109+
});

‎packages/generator/src/frontend/add/templates/AddMutation.js.template

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import Relay from 'react-relay';
2+
3+
export default class <%= name %>AddMutation extends Relay.Mutation {
4+
static fragments = {
5+
viewer: () => Relay.QL`
6+
fragment on Viewer {
7+
id
8+
}
9+
`,
10+
};
11+
12+
getMutation() {
13+
return Relay.QL`mutation {
14+
<%= name %>Add
15+
}`;
16+
}
17+
18+
getVariables() {
19+
const {
20+
id
21+
// TODO - add mutation input fields here
22+
} = this.props;
23+
24+
return {
25+
id
26+
// TODO - add mutation input fields here
27+
};
28+
}
29+
30+
getFatQuery() {
31+
return Relay.QL`
32+
fragment on <%= name %>AddPayload {
33+
<%= rawName %>Edge
34+
viewer {
35+
<%= pluralName %>
36+
}
37+
}
38+
`;
39+
}
40+
41+
getConfigs() {
42+
return [
43+
{
44+
type: 'RANGE_ADD',
45+
parentName: 'viewer',
46+
parentID: this.props.viewer.id,
47+
connectionName: '<%= pluralName %>',
48+
edgeName: '<%= rawName %>Edge',
49+
rangeBehaviors: {
50+
'': 'prepend',
51+
},
52+
},
53+
{
54+
type: 'REQUIRED_CHILDREN',
55+
children: [Relay.QL`
56+
fragment on <%= name %>AddPayload {
57+
<%= rawName %>Edge
58+
}
59+
`],
60+
},
61+
];
62+
}
63+
}

‎packages/generator/src/frontend/edit/templates/Edit.js.template

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import Relay from 'react-relay';
3+
import RelayStore from '../../../RelayStore';
4+
import { withRouter } from 'react-router';
5+
6+
import <%= name %>EditMutation from './<%= name %>EditMutation.js';
7+
8+
import Form from '../../common/Form';
9+
10+
class <%= name %>Edit extends Component {
11+
static contextTypes = {
12+
showSnackbar: PropTypes.func,
13+
};
14+
15+
fields = [
16+
{
17+
name: 'id',
18+
placeholder: 'ID',
19+
required: true,
20+
},
21+
// TODO - add ObjectType fields here
22+
];
23+
24+
onSubmit = (data) => {
25+
const { company } = this.props;
26+
27+
const mutation = new <%= rawName %>EditMutation({
28+
...data,
29+
});
30+
31+
RelayStore.commitUpdate(mutation, {
32+
onSuccess: () => {
33+
this.context.showSnackbar({
34+
message: '<%= name %> edited successfully!',
35+
});
36+
37+
this.props.router.goBack();
38+
},
39+
onFailure: (failureResponse) => {
40+
this.context.showSnackbar({
41+
message: 'There was an error while trying to edit this <%= rawName %>.',
42+
});
43+
44+
console.log('FAIL', failureResponse);
45+
},
46+
});
47+
};
48+
49+
render() {
50+
const { <%= rawName %> } = this.props;
51+
52+
return (
53+
<Form
54+
fields={this.fields}
55+
onSubmit={this.onSubmit}
56+
value={<%= rawName %>}
57+
/>
58+
);
59+
}
60+
}
61+
62+
const styles = {
63+
formContainer: {
64+
display: 'flex',
65+
flexWrap: 'wrap',
66+
paddingTop: 30,
67+
paddingLeft: 10,
68+
},
69+
actionsContainer: {
70+
display: 'flex',
71+
justifyContent: 'flex-end',
72+
marginTop: 5,
73+
paddingRight: 8,
74+
borderTopStyle: 'solid',
75+
borderTopWidth: 1,
76+
paddingTop: 15,
77+
borderColor: '#ECECEC',
78+
},
79+
formField: {
80+
marginRight: 10,
81+
flex: '1 0 47%',
82+
},
83+
selectField: {
84+
marginRight: 10,
85+
flex: '1 0 48%',
86+
},
87+
};
88+
89+
export default Relay.createContainer(withRouter(<%= name %>Edit), {
90+
initialVariables: {
91+
id: null,
92+
},
93+
fragments: {
94+
<%= rawName %>: () => Relay.QL`
95+
fragment on <%= name %> {
96+
id
97+
${<%= name %>EditMutation.getFragment('<%= rawName %>')}
98+
}
99+
`,
100+
viewer: () => Relay.QL`
101+
fragment on Viewer {
102+
id
103+
}
104+
`,
105+
},
106+
});

‎packages/generator/src/frontend/edit/templates/EditMutation.js.template

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import Relay from 'react-relay';
2+
3+
export default class <%= name %>EditMutation extends Relay.Mutation {
4+
static fragments = {
5+
<%= rawName %>: () => Relay.QL`
6+
fragment on <%= name %> {
7+
id
8+
}
9+
`,
10+
};
11+
12+
getMutation() {
13+
return Relay.QL`mutation {
14+
<%= name %>Edit
15+
}`;
16+
}
17+
18+
getVariables() {
19+
const {
20+
<%= rawName %>: {
21+
id,
22+
},
23+
// Todo add more mutation input fields here
24+
} = this.props;
25+
26+
return {
27+
id,
28+
// Todo add more mutation input fields here
29+
};
30+
}
31+
32+
getFatQuery() {
33+
return Relay.QL`
34+
fragment on FlightEditPayload {
35+
<%= rawName %>
36+
}
37+
`;
38+
}
39+
40+
getConfigs() {
41+
return [{
42+
type: 'FIELDS_CHANGE',
43+
fieldIDs: {
44+
<%= rawName %>: this.props.<%= rawName %>.id,
45+
},
46+
}];
47+
}
48+
}

‎packages/generator/src/frontend/list/index.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import Generator from 'yeoman-generator';
2+
import pluralize from 'pluralize';
3+
import {
4+
getMongooseModelSchema,
5+
getConfigDir,
6+
getRelativeConfigDir,
7+
camelCaseText,
8+
uppercaseFirstLetter,
9+
} from '../../utils';
10+
11+
class ListGenerator extends Generator {
12+
constructor(args, options) {
13+
super(args, options);
14+
15+
this.argument('name', {
16+
type: String,
17+
required: true,
18+
});
19+
20+
// TODO read schema.json
21+
22+
this.destinationDir = getConfigDir('list');
23+
}
24+
25+
_getConfigDirectories() {
26+
return getRelativeConfigDir('loader', ['model', 'connection']);
27+
}
28+
29+
generateList() {
30+
// const schema = this.options.model ?
31+
// getMongooseModelSchema(this.options.model, true)
32+
// : null;
33+
34+
const name = uppercaseFirstLetter(this.options.name);
35+
36+
const templatePath = this.templatePath('List.js.template');
37+
38+
// const templatePath = schema ?
39+
// this.templatePath('LoaderWithSchema.js.template')
40+
// : this.templatePath('Loader.js.template');
41+
//
42+
// const directories = this._getConfigDirectories();
43+
44+
const pluralName = pluralize(this.options.name);
45+
46+
const destinationPath = this.destinationPath(`${this.destinationDir}/${name}List.js`);
47+
const templateVars = {
48+
name,
49+
rawName: this.options.name,
50+
pluralName,
51+
pluralCamelCaseName: camelCaseText(pluralName),
52+
};
53+
54+
this.fs.copyTpl(templatePath, destinationPath, templateVars);
55+
}
56+
57+
end() {
58+
this.log('🔥 List created!');
59+
}
60+
}
61+
62+
module.exports = ListGenerator;

0 commit comments

Comments
 (0)