diff --git a/README.md b/README.md
index 6c7f9bf..6aa79fc 100644
--- a/README.md
+++ b/README.md
@@ -10,11 +10,8 @@ Generate React Code
This project utilises a scaffolding framework which generates React or React-Native code along with all the essential
test code... Because who likes writing that themselves?!
-Additionally, it can be used to generate Redux code conforming to the [Redux ducks pattern](https://github.com/erikras/ducks-modular-redux) - and it can also be used to
-generate the Redux core files needed for React-Redux projects (`store`, `root-reducer`, and `action-utilities`).
-
-This generated code conforms to the [Air BnB style guide's](https://github.com/airbnb/javascript) naming and coding-style
-conventions, and it is thus highly recommended to make use of this tool when creating new React or React-Redux components.
+Additionally, it can be used to generate Redux code and it can also be used to
+generate the Redux core files needed for React-Redux projects (`store` and `root-reducer`).
This package also allows users to add a configuration file containing default parameters. That way users would not have to specify these parameters every time they wish to generate code.
@@ -27,7 +24,7 @@ _IMPORTANT NOTE:_
To install and save this npm package, navigate to your project's root directory in console and execute the following command:
```shell
-npm install generate-react-code --save-dev
+npm install https://github.com/BoTreeConsultingTeam/Generate-React-Code
```
Then add the following script to your `packages.json` file:
@@ -56,8 +53,9 @@ npm run gen-react-code -- -n example-component -d src/example/dir -r
| **`-N`** OR/src/test/?(*.)(spec|test).js?(x)"],
- "testEnvironment": "node",
- "testURL": "http://localhost",
- "transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"]
+ "escapedName": "generate-react-code",
+ "rawSpec": "",
+ "saveSpec": null,
+ "fetchSpec": "latest"
+ },
+ "_requiredBy": [
+ "#DEV:/",
+ "#USER"
+ ],
+ "_resolved": "https://registry.npmjs.org/generate-react-code/-/generate-react-code-2.0.0.tgz",
+ "_shasum": "453ec26201eefb42d4978476a693b932bdb7a82a",
+ "_spec": "generate-react-code",
+ "_where": "/home/klaus/React Practice/test-react-code-library",
+ "author": {
+ "name": "JP Strydom",
+ "email": "jpstrydom8@gmail.com"
+ },
+ "bin": {
+ "generate-react-code": "./index.js"
+ },
+ "bugs": {
+ "url": "https://github.com/JPStrydom/Generate-React-Code/issues"
+ },
+ "bundleDependencies": false,
+ "contributors": [
+ {
+ "name": "Muzikayise Flynn Buthelezi",
+ "email": "muzi@mfbproject.co.za",
+ "url": "zuluCoda"
}
+ ],
+ "dependencies": {
+ "chalk": "2.3.1",
+ "commander": "2.14.1",
+ "lodash": "4.17.5",
+ "prettier": "1.10.2",
+ "shelljs": "0.8.1"
+ },
+ "deprecated": false,
+ "description": "An automated React code generation tool for React web, React-Native, and/or Redux in the ducks modular pattern.",
+ "devDependencies": {
+ "coveralls": "3.0.0",
+ "husky": "0.14.3",
+ "jest": "22.2.2",
+ "lint-staged": "6.1.0"
+ },
+ "homepage": "https://github.com/JPStrydom/Generate-React-Code#readme",
+ "jest": {
+ "collectCoverageFrom": [
+ "src/**/*.{js,jsx}",
+ "!**/assets/**",
+ "!**/templates/**"
+ ],
+ "testMatch": [
+ "/src/test/?(*.)(spec|test).js?(x)"
+ ],
+ "testEnvironment": "node",
+ "testURL": "http://localhost",
+ "transformIgnorePatterns": [
+ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
+ ]
+ },
+ "keywords": [
+ "React",
+ "React-Native",
+ "Redux",
+ "Ducks",
+ "code generator"
+ ],
+ "license": "ISC",
+ "lint-staged": {
+ "*.js": [
+ "node_modules/.bin/prettier --write",
+ "git add"
+ ]
+ },
+ "main": "index.js",
+ "name": "generate-react-code",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/JPStrydom/Generate-React-Code.git"
+ },
+ "scripts": {
+ "gen-react-code": "node index.js",
+ "precommit": "lint-staged",
+ "prettier": "prettier --write \"**/*.{js,scss}\"",
+ "test": "jest --coverage",
+ "test-watch": "jest --watch --verbose"
+ },
+ "version": "2.0.0"
}
diff --git a/src/apply-config-file.js b/src/apply-config-file.js
index 3aab47b..0caef47 100644
--- a/src/apply-config-file.js
+++ b/src/apply-config-file.js
@@ -1,52 +1,55 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const chalk = require('chalk');
-
-const { getRootPath } = require('./generator-utilities');
-
-const GRCC = 'grcc.json';
-
-function applyConfig(params, callback) {
- const configDirectory = path.join(getRootPath(), GRCC);
-
- if (fs.existsSync(configDirectory)) {
- fs.readFile(configDirectory, 'utf8', (err, data) => {
- if (err) throw err;
-
- let configData;
- try {
- configData = JSON.parse(data);
- } catch (error) {
- console.log(
- chalk.red('Error reading config file at'),
- chalk.gray(configDirectory),
- '\nMake sure your file has the correct format'
- );
- return callback(params);
- }
-
- params.native = Boolean(params.native || configData.native);
- params.redux = Boolean(params.redux || configData.redux);
- params.omitComments = Boolean(params.omitComments || configData.omitComments);
-
- console.log(
- chalk.bold.underline.cyan('Config Loaded:'),
- chalk.bold.magenta('\nnative:\t\t'),
- chalk.yellow(params.native),
- chalk.bold.magenta('\nredux:\t\t'),
- chalk.yellow(params.redux),
- chalk.bold.magenta('\nomitComments:\t'),
- chalk.yellow(params.omitComments),
- '\n'
- );
-
- return callback(params);
- });
- } else {
- return callback(params);
- }
-}
-
-module.exports = applyConfig;
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+const { getRootPath } = require('./generator-utilities');
+
+const GRCC = 'grcc.json';
+
+function applyConfig(params, callback) {
+ const configDirectory = path.join(getRootPath(), GRCC);
+
+ if (fs.existsSync(configDirectory)) {
+ fs.readFile(configDirectory, 'utf8', (err, data) => {
+ if (err) throw err;
+
+ let configData;
+ try {
+ configData = JSON.parse(data);
+ } catch (error) {
+ console.log(
+ chalk.red('Error reading config file at'),
+ chalk.gray(configDirectory),
+ '\nMake sure your file has the correct format'
+ );
+ return callback(params);
+ }
+
+ params.native = Boolean(params.native || configData.native);
+ params.redux = Boolean(params.redux || configData.redux);
+ params.omitComments = Boolean(params.omitComments || configData.omitComments);
+ params.functional = Boolean(params.functional || configData.functional);
+
+ console.log(
+ chalk.bold.underline.cyan('Config Loaded:'),
+ chalk.bold.magenta('\nnative:\t\t'),
+ chalk.yellow(params.native),
+ chalk.bold.magenta('\nredux:\t\t'),
+ chalk.yellow(params.redux),
+ chalk.bold.magenta('\nomitComments:\t'),
+ chalk.yellow(params.omitComments),
+ chalk.bold.magenta('\nfunctional:\t'),
+ chalk.yellow(params.functional),
+ '\n'
+ );
+
+ return callback(params);
+ });
+ } else {
+ return callback(params);
+ }
+}
+
+module.exports = applyConfig;
diff --git a/src/create-all-templates.js b/src/create-all-templates.js
index 1d1e69b..ff0777f 100644
--- a/src/create-all-templates.js
+++ b/src/create-all-templates.js
@@ -16,7 +16,8 @@ function createAllTemplates(
redux,
omitComments,
reduxCore,
- reduxCoreDirectory
+ reduxCoreDirectory,
+ functional
) {
const directories = getAllDirectories(
name,
@@ -24,7 +25,8 @@ function createAllTemplates(
native,
redux,
reduxCore,
- reduxCoreDirectory
+ reduxCoreDirectory,
+ functional
);
const placeholderNames = getAllPlaceholderNames(name);
diff --git a/src/generator-utilities.js b/src/generator-utilities.js
index 411b665..779123a 100644
--- a/src/generator-utilities.js
+++ b/src/generator-utilities.js
@@ -15,21 +15,17 @@ const PRETTIER_CONFIG = {
printWidth: 100
};
-function getAllDirectories(name, directory, native, redux, reduxCore, reduxCoreDirectory) {
+function getAllDirectories(name, directory, native, redux, reduxCore, reduxCoreDirectory, functional) {
if (reduxCore) {
return getReduxCoreDirs(reduxCoreDirectory);
}
- return getReactComponentDirs(name, directory, native, redux);
+ return getReactComponentDirs(name, directory, native, redux, functional);
}
function getReduxCoreDirs(reduxCoreDirectory) {
const templateDirectory = path.join(__dirname, '..', 'templates', 'redux-core');
const generatedDirectory = path.join(ROOT_PATH, reduxCoreDirectory);
- if (!fs.existsSync(generatedDirectory)) {
- shell.mkdir('-p', path.join(generatedDirectory, 'action-utilities', 'test'));
- }
-
return {
store: {
template: path.join(templateDirectory, 'store.js'),
@@ -38,47 +34,11 @@ function getReduxCoreDirs(reduxCoreDirectory) {
rootReducer: {
template: path.join(templateDirectory, 'root-reducer.js'),
generated: path.join(generatedDirectory, 'root-reducer.js')
- },
- createAction: {
- template: path.join(templateDirectory, 'action-utilities', 'action-creator.js'),
- generated: path.join(generatedDirectory, 'action-utilities', 'action-creator.js')
- },
- createActionType: {
- template: path.join(templateDirectory, 'action-utilities', 'action-type-creator.js'),
- generated: path.join(generatedDirectory, 'action-utilities', 'action-type-creator.js')
- },
- createActionTest: {
- template: path.join(
- templateDirectory,
- 'action-utilities',
- 'test',
- 'action-creator.spec.js'
- ),
- generated: path.join(
- generatedDirectory,
- 'action-utilities',
- 'test',
- 'action-creator.spec.js'
- )
- },
- createActionTypeTest: {
- template: path.join(
- templateDirectory,
- 'action-utilities',
- 'test',
- 'action-type-creator.spec.js'
- ),
- generated: path.join(
- generatedDirectory,
- 'action-utilities',
- 'test',
- 'action-type-creator.spec.js'
- )
}
};
}
-function getReactComponentDirs(name, directory, native, redux) {
+function getReactComponentDirs(name, directory, native, redux, functional) {
const subDir = native ? 'native' : 'web';
const subSubDir = redux ? 'react-redux' : 'react';
@@ -89,16 +49,22 @@ function getReactComponentDirs(name, directory, native, redux) {
shell.mkdir('-p', path.join(generatedDirectory, 'test'));
}
- const reactDirs = {
- view: {
- template: path.join(templateDirectory, 'template.view.js'),
- generated: path.join(generatedDirectory, `${name}.view.js`)
- },
- viewTest: {
- template: path.join(templateDirectory, 'test', 'template.view.spec.js'),
- generated: path.join(generatedDirectory, 'test', `${name}.view.spec.js`)
+ const reactDirs = (functional === true) ?
+ {
+ functional: {
+ template: path.join(templateDirectory, 'template.view.functional.js'),
+ generated: path.join(generatedDirectory, `${name}.view.funcational.js`)
+ }
+ } : {
+ view: {
+ template: path.join(templateDirectory, 'template.view.js'),
+ generated: path.join(generatedDirectory, `${name}.view.js`)
+ },
+ viewTest: {
+ template: path.join(templateDirectory, 'test', 'template.view.spec.js'),
+ generated: path.join(generatedDirectory, 'test', `${name}.view.spec.js`)
+ }
}
- };
if (!native) {
reactDirs.stylesheet = {
@@ -120,6 +86,10 @@ function getReactComponentDirs(name, directory, native, redux) {
template: path.join(templateDirectory, 'test', 'template.container.spec.js'),
generated: path.join(generatedDirectory, 'test', `${name}.container.spec.js`)
},
+ action: {
+ template: path.join(templateDirectory, 'template.action.js'),
+ generated: path.join(generatedDirectory, `${name}.action.js`)
+ },
reducer: {
template: path.join(templateDirectory, 'template.reducer.js'),
generated: path.join(generatedDirectory, `${name}.reducer.js`)
diff --git a/src/test/apply-config-file.spec.js b/src/test/apply-config-file.spec.js
index d016dc4..120045b 100644
--- a/src/test/apply-config-file.spec.js
+++ b/src/test/apply-config-file.spec.js
@@ -1,83 +1,83 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const shell = require('shelljs');
-
-const { getRootPath } = require('../generator-utilities');
-
-const applyConfig = require('../apply-config-file');
-
-const ROOT_PATH = getRootPath();
-
-describe('Apply config file - Unit Test', () => {
- describe('applyConfig', () => {
- it('should apply config file parameters to passed in parameters', done => {
- const passedIn = {
- name: 'some-name'
- };
- const expected = {
- name: 'some-name',
- native: true,
- redux: true,
- omitComments: true
- };
- fs.writeFile(
- path.join(ROOT_PATH, 'grcc.json'),
- '{ "native": true, "redux": true, "omitComments": true }',
- () =>
- applyConfig(passedIn, params => {
- expect(params).toEqual(expected);
- shell.rm('-rf', path.join(ROOT_PATH, 'grcc.json'));
- done();
- })
- );
- });
-
- it('should not overwrite passed in parameters when a user specifies them', done => {
- const passedIn = {
- name: 'some-name',
- native: true,
- redux: true,
- omitComments: true
- };
- fs.writeFile(
- path.join(ROOT_PATH, 'grcc.json'),
- '{ "native": false, "redux": false, "omitComments": false }',
- () =>
- applyConfig(passedIn, params => {
- expect(params).toEqual(passedIn);
- shell.rm('-rf', path.join(ROOT_PATH, 'grcc.json'));
- done();
- })
- );
- });
-
- it('should return unaltered parameters when the config file does not exist', done => {
- const passedIn = {
- name: 'some-name',
- native: false,
- redux: false
- };
-
- applyConfig(passedIn, params => {
- expect(params).toEqual(passedIn);
- done();
- });
- });
-
- it('should return unaltered parameters when the config file exists but is not in the correct format', done => {
- const passedIn = {
- name: 'some-name',
- native: false
- };
- fs.writeFile(path.join(ROOT_PATH, 'grcc.json'), '{ oops it aint json }', () =>
- applyConfig(passedIn, params => {
- expect(params).toEqual(passedIn);
- shell.rm('-rf', path.join(ROOT_PATH, 'grcc.json'));
- done();
- })
- );
- });
- });
-});
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const shell = require('shelljs');
+
+const { getRootPath } = require('../generator-utilities');
+
+const applyConfig = require('../apply-config-file');
+
+const ROOT_PATH = getRootPath();
+
+describe('Apply config file - Unit Test', () => {
+ describe('applyConfig', () => {
+ it('should apply config file parameters to passed in parameters', done => {
+ const passedIn = {
+ name: 'some-name'
+ };
+ const expected = {
+ name: 'some-name',
+ native: true,
+ redux: true,
+ omitComments: true
+ };
+ fs.writeFile(
+ path.join(ROOT_PATH, 'grcc.json'),
+ '{ "native": true, "redux": true, "omitComments": true }',
+ () =>
+ applyConfig(passedIn, params => {
+ expect(params).toEqual(expected);
+ shell.rm('-rf', path.join(ROOT_PATH, 'grcc.json'));
+ done();
+ })
+ );
+ });
+
+ it('should not overwrite passed in parameters when a user specifies them', done => {
+ const passedIn = {
+ name: 'some-name',
+ native: true,
+ redux: true,
+ omitComments: true
+ };
+ fs.writeFile(
+ path.join(ROOT_PATH, 'grcc.json'),
+ '{ "native": false, "redux": false, "omitComments": false }',
+ () =>
+ applyConfig(passedIn, params => {
+ expect(params).toEqual(passedIn);
+ shell.rm('-rf', path.join(ROOT_PATH, 'grcc.json'));
+ done();
+ })
+ );
+ });
+
+ it('should return unaltered parameters when the config file does not exist', done => {
+ const passedIn = {
+ name: 'some-name',
+ native: false,
+ redux: false
+ };
+
+ applyConfig(passedIn, params => {
+ expect(params).toEqual(passedIn);
+ done();
+ });
+ });
+
+ it('should return unaltered parameters when the config file exists but is not in the correct format', done => {
+ const passedIn = {
+ name: 'some-name',
+ native: false
+ };
+ fs.writeFile(path.join(ROOT_PATH, 'grcc.json'), '{ oops it aint json }', () =>
+ applyConfig(passedIn, params => {
+ expect(params).toEqual(passedIn);
+ shell.rm('-rf', path.join(ROOT_PATH, 'grcc.json'));
+ done();
+ })
+ );
+ });
+ });
+});
diff --git a/src/test/create-all-templates.spec.js b/src/test/create-all-templates.spec.js
index c716da6..f2f1a90 100644
--- a/src/test/create-all-templates.spec.js
+++ b/src/test/create-all-templates.spec.js
@@ -1,33 +1,33 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const shell = require('shelljs');
-
-const { getRootPath } = require('../generator-utilities');
-const createAllTemplates = require('../create-all-templates');
-
-const ROOT_PATH = getRootPath();
-
-describe('Create All Templates - Unit Test', () => {
- describe('createAllTemplates', () => {
- it('should create all template', done => {
- const name = 'some-complete-template';
- const directory = 'some-complete-template';
-
- createAllTemplates(name, directory);
-
- setTimeout(() => {
- expect(fs.existsSync(path.join(ROOT_PATH, directory))).toBeTruthy();
- expect(
- fs.existsSync(path.join(ROOT_PATH, directory, name, `${name}.view.js`))
- ).toBeTruthy();
- done();
- }, 500);
- });
- });
-
- afterAll(() => {
- shell.rm('-rf', path.join(ROOT_PATH, 'some-complete-template'));
- });
-});
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const shell = require('shelljs');
+
+const { getRootPath } = require('../generator-utilities');
+const createAllTemplates = require('../create-all-templates');
+
+const ROOT_PATH = getRootPath();
+
+describe('Create All Templates - Unit Test', () => {
+ describe('createAllTemplates', () => {
+ it('should create all template', done => {
+ const name = 'some-complete-template';
+ const directory = 'some-complete-template';
+
+ createAllTemplates(name, directory);
+
+ setTimeout(() => {
+ expect(fs.existsSync(path.join(ROOT_PATH, directory))).toBeTruthy();
+ expect(
+ fs.existsSync(path.join(ROOT_PATH, directory, name, `${name}.view.js`))
+ ).toBeTruthy();
+ done();
+ }, 500);
+ });
+ });
+
+ afterAll(() => {
+ shell.rm('-rf', path.join(ROOT_PATH, 'some-complete-template'));
+ });
+});
diff --git a/templates/native/react-redux/template.action.js b/templates/native/react-redux/template.action.js
new file mode 100644
index 0000000..fb97748
--- /dev/null
+++ b/templates/native/react-redux/template.action.js
@@ -0,0 +1,27 @@
+/*
+Import all local modules here.
+*/
+
+export const actionType = 'TEMPLATE_UPPER_CAMEL_CASE_NAME';
+
+export const exampleAction = (payload) => {
+ return {
+ type: actionType,
+ payload
+ }
+}
+
+/*
+Add all Asynchronous actions here. These are used when the action needs to access state or when multiple
+actions need to be dispatched (See example below).
+
+NOTE: It's important to note that 'getState()' returns a shallow copy of state - so if you mutate it,
+your state will change along with it. Be careful of this!
+*/
+
+export const exampleAsyncAction = () => {
+ return (dispatch, getState) => {
+ const { TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer } = getState();
+ dispatch(exampleAction(!TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer.exampleVariable));
+ };
+}
\ No newline at end of file
diff --git a/templates/native/react-redux/template.container.js b/templates/native/react-redux/template.container.js
index 1e8a2e4..6e78529 100644
--- a/templates/native/react-redux/template.container.js
+++ b/templates/native/react-redux/template.container.js
@@ -1,35 +1,35 @@
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-
-import TEMPLATE_UPPER_CAMEL_CASE_NAMEView from './TEMPLATE_KEBAB_CASE_NAME.view';
-import {
- exampleAction,
- exampleAsyncAction
- /*
- Import all the actions you wish to expose to the view here.
- */
-} from './TEMPLATE_KEBAB_CASE_NAME.reducer';
-
-export function mapStateToProps({ TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer }) {
- return {
- exampleVariable: TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer.exampleVariable
- /*
- Add all the state variables you wish to expose to the view here.
- */
- };
-}
-
-export function mapDispatchToProps(dispatch) {
- return bindActionCreators(
- {
- exampleAction,
- exampleAsyncAction
- /*
- Add all the actions you wish to expose to the view here.
- */
- },
- dispatch
- );
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(TEMPLATE_UPPER_CAMEL_CASE_NAMEView);
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import TEMPLATE_UPPER_CAMEL_CASE_NAMEView from './TEMPLATE_KEBAB_CASE_NAME.view';
+import {
+ exampleAction,
+ exampleAsyncAction
+ /*
+ Import all the actions you wish to expose to the view here.
+ */
+} from './TEMPLATE_KEBAB_CASE_NAME.action';
+
+export const mapStateToProps = ({ TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer }) => {
+ return {
+ exampleVariable: TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer.exampleVariable
+ /*
+ Add all the state variables you wish to expose to the view here.
+ */
+ };
+}
+
+export const mapDispatchToProps = dispatch => {
+ return bindActionCreators(
+ {
+ exampleAction,
+ exampleAsyncAction
+ /*
+ Add all the actions you wish to expose to the view here.
+ */
+ },
+ dispatch
+ );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TEMPLATE_UPPER_CAMEL_CASE_NAMEView);
diff --git a/templates/native/react-redux/template.reducer.js b/templates/native/react-redux/template.reducer.js
index c935dfe..7943f5a 100644
--- a/templates/native/react-redux/template.reducer.js
+++ b/templates/native/react-redux/template.reducer.js
@@ -1,52 +1,23 @@
-/*
-NOTE: Remember to add this reducer to the root reducer found in 'src/redux/root-reducer.js'.
-*/
-
-/*
-NOTE: The CreateAction directory my change based on your module's desired location.
-*/
-import CreateAction from '../../redux/action-utilities/action-creator';
-/*
-Import all local modules here.
-*/
-
-const reducerName = 'TEMPLATE_KEBAB_CASE_NAME';
+import { actionType } from './TEMPLATE_KEBAB_CASE_NAME.action';
/*
-Here you can create all your actions with the CreateAction action factory (See example below).
-
-NOTE: It's important to use this factory to create standard actions so that all actions will be
-consistent - this will also eliminate duplicate code.
-*/
-const example = new CreateAction(reducerName, 'EXAMPLE_ACTION');
-export const exampleAction = example.action;
-
-/*
-Add all Asynchronous actions here. These are used when the action needs to access state or when multiple
-actions need to be dispatched (See example below).
-
-NOTE: It's important to note that 'getState()' returns a shallow copy of state - so if you mutate it,
-your state will change along with it. Be careful of this!
+NOTE: Remember to add this reducer to the root reducer found in 'src/redux/root-reducer.js'.
*/
-export function exampleAsyncAction() {
- return (dispatch, getState) => {
- const { TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer } = getState();
- dispatch(exampleAction(!TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer.exampleVariable));
- };
-}
export const initialState = {
- exampleVariable: true
+ exampleVariable: false
/*
Add your reducer's initial state here.
*/
};
-export default function TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer(state = initialState, action) {
+const TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer = (state = initialState, action) => {
switch (action.type) {
- case example.actionType:
+ case actionType:
return { ...state, exampleVariable: action.payload };
default:
return state;
}
}
+
+export default TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer;
\ No newline at end of file
diff --git a/templates/native/react-redux/template.view.js b/templates/native/react-redux/template.view.js
index 11878a2..7df215b 100644
--- a/templates/native/react-redux/template.view.js
+++ b/templates/native/react-redux/template.view.js
@@ -16,7 +16,6 @@ export default class TEMPLATE_UPPER_CAMEL_CASE_NAMEView extends Component {
/*
Add all required function binding here. If no binding is required, the constructor may be omitted.
*/
- this.exampleHelper = this.exampleHelper.bind(this);
/*
NOTE: Do NOT use 'this.state'! State management is wat Redux is used for.
@@ -40,7 +39,7 @@ export default class TEMPLATE_UPPER_CAMEL_CASE_NAMEView extends Component {
Add all helper functions here. Remember to 'bind' functions where 'this'
needs to be used (See example below).
*/
- exampleHelper() {
+ exampleHelper = () => {
this.props.exampleAction(true);
if (!this.props.exampleVariable) {
return {'My template has been fiddled with'} ;
diff --git a/templates/native/react-redux/test/template.container.spec.js b/templates/native/react-redux/test/template.container.spec.js
index b3f0879..1e4e556 100644
--- a/templates/native/react-redux/test/template.container.spec.js
+++ b/templates/native/react-redux/test/template.container.spec.js
@@ -12,7 +12,7 @@ import {
} from '../TEMPLATE_KEBAB_CASE_NAME.reducer';
describe('TEMPLATE_LOWER_CAMEL_CASE_NAMEContainer - Unit test', () => {
- function stateBefore() {
+ stateBefore = () => {
return {
TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer: {
...initialState
diff --git a/templates/native/react-redux/test/template.reducer.spec.js b/templates/native/react-redux/test/template.reducer.spec.js
index 5397d1e..68685b9 100644
--- a/templates/native/react-redux/test/template.reducer.spec.js
+++ b/templates/native/react-redux/test/template.reducer.spec.js
@@ -15,7 +15,7 @@ import TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer, {
} from '../TEMPLATE_KEBAB_CASE_NAME.reducer';
describe('TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer - Unit Test', () => {
- function stateBefore() {
+ stateBefore = () => {
return {
...initialState
/*
diff --git a/templates/native/react/template.view.functional.js b/templates/native/react/template.view.functional.js
new file mode 100644
index 0000000..14da4a3
--- /dev/null
+++ b/templates/native/react/template.view.functional.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+/*
+Import all external modules here.
+*/
+
+/*
+Import all local modules here.
+*/
+
+const renderTextExample = () => {
+ const message = "Welcome to our template view '( ͡° ͜ʖ ͡°)'";
+ return {message} ;
+}
+
+const TEMPLATE_UPPER_CAMEL_CASE_NAMEView = (props) => {
+
+ return {renderTextExample()}
;
+
+}
+
+/*
+Add all the props (variables and functions) being passe through to this component (by redux or inline).
+This will make code completion and IDE inspection possible, and will make it easy to see what data is relevant
+in this module.
+*/
+
+export default TEMPLATE_UPPER_CAMEL_CASE_NAMEView;
\ No newline at end of file
diff --git a/templates/native/react/template.view.js b/templates/native/react/template.view.js
index fbc4203..6142db9 100644
--- a/templates/native/react/template.view.js
+++ b/templates/native/react/template.view.js
@@ -1,61 +1,60 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { StyleSheet, View, Text /*Add other React Native components here*/ } from 'react-native';
-/*
-Import all external modules here.
-*/
-
-/*
-Import all local modules here.
-*/
-
-export default class TEMPLATE_UPPER_CAMEL_CASE_NAMEView extends Component {
- constructor(props) {
- super(props);
-
- /*
- Add all required function binding here. If no binding is required, the constructor may be omitted.
- */
- this.renderTextExample = this.renderTextExample.bind(this);
- }
-
- componentDidMount() {
- /*
- If your screen needs to load data via the API immediately after rendering,
- call the load functions here in the `componentDidMount` function (See example below) -
- else, the `componentDidMount` function may be omitted.
- */
- }
-
- render() {
- return {this.renderTextExample()} ;
- }
-
- /*
- Add all helper functions here. Remember to 'bind' functions where 'this'
- needs to be used (See example below).
- */
- renderTextExample() {
- const message = `Welcome to our template view ${this.props.exampleVariable || '( ͡° ͜ʖ ͡°)'}`;
- return {message} ;
- }
-}
-
-/*
-Add all the props (variables and functions) being passe through to this component (by redux or inline).
-This will make code completion and IDE inspection possible, and will make it easy to see what data is relevant
-in this module.
-*/
-TEMPLATE_UPPER_CAMEL_CASE_NAMEView.propTypes = {
- exampleVariable: PropTypes.string
-};
-
-/*
-Add all the component styling here.
-*/
-const styles = StyleSheet.create({
- text: {
- fontSize: 20,
- textAlign: 'center'
- }
-});
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, View, Text /*Add other React Native components here*/ } from 'react-native';
+/*
+Import all external modules here.
+*/
+
+/*
+Import all local modules here.
+*/
+
+export default class TEMPLATE_UPPER_CAMEL_CASE_NAMEView extends Component {
+ constructor(props) {
+ super(props);
+
+ /*
+ Add all required function binding here. If no binding is required, the constructor may be omitted.
+ */
+ }
+
+ componentDidMount() {
+ /*
+ If your screen needs to load data via the API immediately after rendering,
+ call the load functions here in the `componentDidMount` function (See example below) -
+ else, the `componentDidMount` function may be omitted.
+ */
+ }
+
+ render() {
+ return {this.renderTextExample()} ;
+ }
+
+ /*
+ Add all helper functions here. Remember to 'bind' functions where 'this'
+ needs to be used (See example below).
+ */
+ renderTextExample = () => {
+ const message = `Welcome to our template view ${this.props.exampleVariable || '( ͡° ͜ʖ ͡°)'}`;
+ return {message} ;
+ }
+}
+
+/*
+Add all the props (variables and functions) being passe through to this component (by redux or inline).
+This will make code completion and IDE inspection possible, and will make it easy to see what data is relevant
+in this module.
+*/
+TEMPLATE_UPPER_CAMEL_CASE_NAMEView.propTypes = {
+ exampleVariable: PropTypes.string
+};
+
+/*
+Add all the component styling here.
+*/
+const styles = StyleSheet.create({
+ text: {
+ fontSize: 20,
+ textAlign: 'center'
+ }
+});
diff --git a/templates/native/react/test/template.view.spec.js b/templates/native/react/test/template.view.spec.js
index f919d21..bc2e79e 100644
--- a/templates/native/react/test/template.view.spec.js
+++ b/templates/native/react/test/template.view.spec.js
@@ -1,18 +1,18 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import TEMPLATE_UPPER_CAMEL_CASE_NAMEView from '../TEMPLATE_KEBAB_CASE_NAME.view';
-
-describe('TEMPLATE_UPPER_CAMEL_CASE_NAMEView - DOES IT RENDER', () => {
- /*
- Here you can mock out any view function props not needed for rendering
- (i.e. state read/write functions from the reducer) so as to only test the view.
-
- These mocks may be omitted if no function props need to be mocked.
- */
- const exampleVariableMock = 'some string';
-
- it('should render without crashing', () => {
- shallow({"You've now fiddled with the template ( ͡° ͜ʖ ͡°)"} ;
}
return {'Welcome to our template (ง •̀_•́)ง'} ;
}
- renderButtonExample() {
+ renderButtonExample = () => {
return (
{'Click Me'}
diff --git a/templates/web/react-redux/test/template.container.spec.js b/templates/web/react-redux/test/template.container.spec.js
index b3f0879..1e4e556 100644
--- a/templates/web/react-redux/test/template.container.spec.js
+++ b/templates/web/react-redux/test/template.container.spec.js
@@ -12,7 +12,7 @@ import {
} from '../TEMPLATE_KEBAB_CASE_NAME.reducer';
describe('TEMPLATE_LOWER_CAMEL_CASE_NAMEContainer - Unit test', () => {
- function stateBefore() {
+ stateBefore = () => {
return {
TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer: {
...initialState
diff --git a/templates/web/react-redux/test/template.reducer.spec.js b/templates/web/react-redux/test/template.reducer.spec.js
index 1e585bf..91dec0a 100644
--- a/templates/web/react-redux/test/template.reducer.spec.js
+++ b/templates/web/react-redux/test/template.reducer.spec.js
@@ -15,7 +15,7 @@ import TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer, {
} from '../TEMPLATE_KEBAB_CASE_NAME.reducer';
describe('TEMPLATE_LOWER_CAMEL_CASE_NAMEReducer - Unit Test', () => {
- function stateBefore() {
+ stateBefore = () => {
return {
...initialState
/*
diff --git a/templates/web/react/template.view.functional.js b/templates/web/react/template.view.functional.js
new file mode 100644
index 0000000..14da4a3
--- /dev/null
+++ b/templates/web/react/template.view.functional.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+/*
+Import all external modules here.
+*/
+
+/*
+Import all local modules here.
+*/
+
+const renderTextExample = () => {
+ const message = "Welcome to our template view '( ͡° ͜ʖ ͡°)'";
+ return {message} ;
+}
+
+const TEMPLATE_UPPER_CAMEL_CASE_NAMEView = (props) => {
+
+ return {renderTextExample()}
;
+
+}
+
+/*
+Add all the props (variables and functions) being passe through to this component (by redux or inline).
+This will make code completion and IDE inspection possible, and will make it easy to see what data is relevant
+in this module.
+*/
+
+export default TEMPLATE_UPPER_CAMEL_CASE_NAMEView;
\ No newline at end of file
diff --git a/templates/web/react/template.view.js b/templates/web/react/template.view.js
index ad5e179..848cacb 100644
--- a/templates/web/react/template.view.js
+++ b/templates/web/react/template.view.js
@@ -15,7 +15,6 @@ export default class TEMPLATE_UPPER_CAMEL_CASE_NAMEView extends Component {
/*
Add all required function binding here. If no binding is required, the constructor may be omitted.
*/
- this.renderTextExample = this.renderTextExample.bind(this);
}
componentDidMount() {
@@ -35,7 +34,7 @@ export default class TEMPLATE_UPPER_CAMEL_CASE_NAMEView extends Component {
needs to be used (See examples below). If 'this' does not need to be accessed,
the function may be made static.
*/
- renderTextExample() {
+ renderTextExample = () => {
const message = `Welcome to our template view ${this.props.exampleVariable || '( ͡° ͜ʖ ͡°)'}`;
return {message} ;
}
diff --git a/templates/web/react/test/template.view.spec.js b/templates/web/react/test/template.view.spec.js
index 96300c5..536cd05 100644
--- a/templates/web/react/test/template.view.spec.js
+++ b/templates/web/react/test/template.view.spec.js
@@ -1,17 +1,17 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import TEMPLATE_UPPER_CAMEL_CASE_NAMEView from '../TEMPLATE_KEBAB_CASE_NAME.view';
-
-describe('TEMPLATE_UPPER_CAMEL_CASE_NAMEView - Unit Test', () => {
- /*
- Here you can mock out any view function props not needed for rendering
- (i.e. state read/write functions passed in as props) so as to only test the view.
-
- These mocks may be omitted if no function props need to be mocked.
- */
-
- it('should render without crashing', () => {
- shallow(