React Native generator (#86)

* template fix

* test fix

* templates update

* working but still in progress

* list fixed

* list fixed

* finished

* dependencies update

Author: potik1

package.json

@@ -16,29 +16,29 @@
   "author": "Kévin Dunglas",
   "license": "MIT",
   "devDependencies": {
-    "babel-cli": "^6.24.0",
-    "babel-core": "^6.24.0",
-    "babel-eslint": "^7.2.0",
-    "babel-jest": "^19.0.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.0",
+    "babel-jest": "^23.6.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.0",
-    "babel-preset-stage-0": "^6.22.0",
-    "eslint": "^3.18.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-prettier": "^2.6.0",
-    "jest": "^23",
-    "prettier": "^1.13.2",
-    "tmp": "^0.0.31"
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "eslint": "^5.6.0",
+    "eslint-config-prettier": "^3.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-prettier": "^2.6.2",
+    "jest": "^23.6.0",
+    "prettier": "^1.14.3",
+    "tmp": "^0.0.33"
   },
   "dependencies": {
     "@api-platform/api-doc-parser": "^0.5.0",
-    "babel-runtime": "^6.23.0",
-    "chalk": "^2.1.0",
-    "commander": "^2.9.0",
-    "handlebars": "^4.0.6",
-    "handlebars-helpers": "^0.9.8",
+    "babel-runtime": "^6.26.0",
+    "chalk": "^2.4.1",
+    "commander": "^2.18.0",
+    "handlebars": "^4.0.12",
+    "handlebars-helpers": "^0.10.0",
     "isomorphic-fetch": "^2.2.1",
     "mkdirp": "^0.5.1",
     "sprintf-js": "^1.1.1"

src/generators/ReactNativeGenerator.js

@@ -1,10 +1,18 @@
 import chalk from "chalk";
+import handlebars from "handlebars";
 import BaseGenerator from "./BaseGenerator";
 
 export default class extends BaseGenerator {
   constructor(params) {
     super(params);
 
+    handlebars.registerHelper("ifNotResource", function(item, options) {
+      if (item === null) {
+        return options.fn(this);
+      }
+      return options.inverse(this);
+    });
+
     this.registerTemplates(`react-common/`, [
       // actions
       "actions/foo/create.js",
@@ -25,14 +33,22 @@ export default class extends BaseGenerator {
       "reducers/foo/show.js"
     ]);
 
-    this.registerTemplates(`react/`, [
+    this.registerTemplates(`react-native/`, [
       // components
       "components/foo/Create.js",
       "components/foo/Form.js",
       "components/foo/index.js",
       "components/foo/List.js",
       "components/foo/Update.js",
-      "components/foo/Show.js"
+      "components/foo/Show.js",
+      "components/Spinner.js",
+      "components/Confirm.js",
+
+      // routes
+      "routes/foo.js",
+
+      // helpers
+      "utils/helpers.js"
     ]);
   }
 
@@ -75,7 +91,7 @@ combineReducers(${titleLc},{/* ... */}),
 
     // Create directories
     // These directories may already exist
-    for (let dir of [`${dir}/utils`, `${dir}/config`]) {
+    for (let dir of [`${dir}/utils`, `${dir}/config`, `${dir}/routes`]) {
       this.createDir(dir, false);
     }
 
@@ -109,12 +125,23 @@ combineReducers(${titleLc},{/* ... */}),
       "reducers/%s/index.js",
       "reducers/%s/list.js",
       "reducers/%s/update.js",
-      "reducers/%s/show.js"
+      "reducers/%s/show.js",
+
+      // routes
+      "routes/%s.js"
     ]) {
       this.createFileFromPattern(pattern, dir, lc, context);
     }
 
-    this.createFile("utils/fetch.js", `${dir}/utils/fetch.js`, context, false);
+    for (let file of [
+      "utils/fetch.js",
+      "utils/helpers.js",
+      "components/Spinner.js",
+      "components/Confirm.js"
+    ]) {
+      this.createFile(file, `${dir}/${file}`);
+    }
+
     this.createEntrypoint(api.entrypoint, `${dir}/config/_entrypoint.js`);
   }
 }

src/generators/ReactNativeGenerator.test.js

@@ -45,6 +45,10 @@ test("Generate a React app", () => {
     "/actions/abc/update.js",
 
     "/components/abc/Create.js",
+    "/components/abc/Form.js",
+    "/components/abc/index.js",
+    "/components/abc/List.js",
+    "/components/abc/Show.js",
     "/components/abc/Update.js",
 
     "/reducers/abc/create.js",
@@ -55,14 +59,5 @@ test("Generate a React app", () => {
     "/reducers/abc/update.js"
   ].forEach(file => expect(fs.existsSync(tmpobj.name + file)).toBe(true));
 
-  [
-    "/components/abc/Form.js",
-    "/components/abc/List.js",
-    "/components/abc/Show.js"
-  ].forEach(file => {
-    expect(fs.existsSync(tmpobj.name + file)).toBe(true);
-    expect(fs.readFileSync(tmpobj.name + file, "utf8")).toMatch(/bar/);
-  });
-
   tmpobj.removeCallback();
 });

templates/react-native/components/Confirm.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Text, View, Modal, TouchableOpacity } from 'react-native';
+import PropTypes from 'prop-types';
+
+
+const Confirm = ({children, visible, onAccept, onDecline}) => {
+
+  const {textStyle, containerStyle, viewStyle, buttonStyle, textButtonStyle} = styles;
+
+  return (
+
+      <Modal
+          visible={visible}
+          transparent
+          animationType="slide"
+          onRequestClose={() => {}}
+      >
+        <View style={containerStyle}>
+          <View style={viewStyle}>
+            <Text style={textStyle}>{children}</Text>
+          </View>
+
+          <View style={viewStyle}>
+            <TouchableOpacity onPress={onAccept} style={ buttonStyle }>
+              <Text style={ textButtonStyle }>Yes
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={onDecline} style={ buttonStyle }>
+              <Text style={ textButtonStyle }>No
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+  );
+};
+
+const styles = {
+  textStyle: {
+    flex: 1,
+    fontSize: 18,
+    textAlign: 'center',
+    lineHeight: 40,
+  },
+  containerStyle: {
+    backgroundColor: 'rgba(0,0,0,0.75)',
+    position: 'relative',
+    flex: 1,
+    justifyContent: 'center',
+
+  },
+  viewStyle:{
+    borderBottomWidth:1,
+    padding:10,
+    backgroundColor: '#fff',
+    justifyContent: 'flex-start',
+    flexDirection:'row',
+    borderColor:'#ddd',
+    position: 'relative',
+  },
+  buttonStyle:{
+    flex: 1,
+    alignSelf: 'stretch',
+    backgroundColor: '#fff',
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#3faab4',
+    marginRight: 5,
+    marginLeft: 5,
+  },
+  textButtonStyle: {
+    alignSelf: 'center',
+    color: '#3faab4',
+    fontSize:16,
+    fontWeight:'600',
+    paddingTop:10,
+    paddingBottom:10,
+  },
+};
+
+Confirm.propTypes = {
+  onDecline: PropTypes.func,
+  onAccept: PropTypes.func,
+  visible: PropTypes.bool,
+  children: PropTypes.string,
+};
+
+export { Confirm };

templates/react-native/components/Spinner.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import PropTypes from 'prop-types';
+
+const Spinner = ({size}) => {
+  return (
+    <View style={styles.spinnerStyle} >
+       <ActivityIndicator size={size || 'large'} />
+    </View>
+  );
+};
+
+const styles = {
+  spinnerStyle: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+};
+
+Spinner.propTypes={
+  size: PropTypes.string.isRequired
+};
+
+export default Spinner;

templates/react-native/components/foo/Create.js

@@ -1,41 +1,51 @@
-import React, {Component} from 'react';
-import {ScrollView, Text} from 'react-native';
-import {connect} from 'react-redux';
+import React, { Component } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Form from './Form';
-import { create, loading, error } from '../../actions/{{{ lc }}}/create';
+import { create, loading, error } from '../../actions/{{{lc}}}/create';
+import { Actions } from 'react-native-router-flux';
+import { delayRefresh } from '../../utils/helpers';
 
 class Create extends Component {
-  static propTypes = {
-    error: PropTypes.string,
-    loading: PropTypes.bool.isRequired,
-    created: PropTypes.object,
-    create: PropTypes.func.isRequired,
-    reset: PropTypes.func.isRequired,
-  };
 
   componentWillUnmount() {
     this.props.reset();
   }
 
+  onSubmit = values => {
+    this.props.create(values);
+    Actions.{{{lc}}}List();
+    delayRefresh();
+  };
+
   render() {
+
+    if (this.props.created) return Actions.pop();
+
+    const {viewStyle, textStyle} = styles;
+
     return (
-      <ScrollView>
-        <Text>Create component {{lc}}</Text>
-      </ScrollView>
+        <View>
+          <ScrollView keyboardShouldPersistTaps='always'>
+            {this.props.error && <View style={viewStyle}><Text
+                style={textStyle}>{this.props.error}</Text></View>}
+            <Form mySubmit={values => this.onSubmit(values)}/>
+          </ScrollView>
+        </View>
     );
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
-    created: state.{{{ lc }}}.create.created,
-    error: state.{{{ lc }}}.create.error,
-    loading: state.{{{ lc }}}.create.loading,
-};
+    created: state.{{{lc}}}.create.created,
+    error: state.{{{lc}}}.create.error,
+    loading: state.{{{lc}}}.create.loading,
+  };
 };
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = dispatch => {
   return {
     create: values => dispatch(create(values)),
     reset: () => {
@@ -45,4 +55,28 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
+const styles = {
+  viewStyle: {
+    borderBottomWidth: 1,
+    padding: 5,
+    backgroundColor: '#fff',
+    justifyContent: 'flex-start',
+    flexDirection: 'row',
+    borderColor: '#ddd',
+    position: 'relative',
+  },
+  textStyle: {
+    color: 'red',
+    textAlign: 'center',
+  },
+};
+
+Create.propTypes = {
+  error: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+  created: PropTypes.object,
+  create: PropTypes.func.isRequired,
+  reset: PropTypes.func.isRequired
+};
+
 export default connect(mapStateToProps, mapDispatchToProps)(Create);