VSCODESNIPPETS

{
/*
	// Place your snippets for JavaScript React here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
*/

/* React JS*/

	"rjsComponent": {
		"prefix": "rjsComponent",
		"body": [
			"/* Core */",
			"import React, { Component } from 'react';",
			"//import PropTypes from 'prop-types';",
			"",
			"import styles from './styles';",
			"",
			"export default class ${1:MyComponent} extends Component {",
			"  static propTypes = {};",
			"",
			"  static defaultProps = {};",
			"",
			"  static state = {}",
			"",
			"  render() {",
			"    return (",
			"      <div style={styles.${2:container}}>${3:Hello}</div>",
			"    );",
			"  }",
			"}",
			""
		],
		"description": "Create react stateful component"
	},

	"rjsComponentStateless": {
		"prefix": "rjsComponentStateless",
		"body": [
			"/* Core */",
			"import React from 'react';",
			"",
			"import styles from './styles';",
			"",
			"const ${1:MyComponent} = () => (",
			"  <div style={styles.${2:container}}>${3:Hello}</div>",
			");",
			"",
			"export default ${1:MyComponent};",
			""
		],
		"description": "Create react stateless component"
	},	

	"rjsReduxComponentStateless": {
		"prefix": "rjsReduxComponentStateless",
		"body": [
			"/* Core */",
			"import React from 'react';",
			"",
			"/* Redux */",
			"import { connect } from 'react-redux';",
			"",
			"// import styles from './styles';",
			"",
			"const ${1:MyComponent}} = () => (",
			"  <View />",
			");",
			"const mapStateToProps = state => ({",
			"",
			"});",
			"",
			"const mapDispatchToProps = dispatch => ({",
			"",
			"});",
			"",
			"export default connect(mapStateToProps, mapDispatchToProps)(${1:MyComponent}});"
		],
		"description": "Create react-native stateless Redux component"
	},		

	"rjsReduxComponent": {
		"prefix": "rjsReduxComponent",
		"body": [
			"/* Core */",
			"import React, { Component } from 'react';",
			"",
			"/* Redux */",
			"import { connect } from 'react-redux';",
			"",
			"// import styles from './styles';",
			"",
			"class ${1:MyComponent} extends Component {",
			"  render() {",
			"    return (",
			"      <View />",
			"    );",
			"  }",
			"}",
			"",
			"const mapStateToProps = state => ({",
			"",
			"});",
			"",
			"const mapDispatchToProps = dispatch => ({",
			"",
			"});",
			"",
			"export default connect(mapStateToProps, mapDispatchToProps)(${1:MyComponent});",
			""
		],
		"description": "Create react-native Redux component"
	},


	"rjsStyles": {
		"prefix": "rjsStyles",
		"body": [
			"const styles = {",
			"  ${1}",
			"};",
			"",
			"export default styles;",
			""
		],
		"description": "Create react-native Style file"
	},

	/* React Native */

	"rnComponent": {
		"prefix": "rnComponent",
		"body": [
			"/* Core */",
			"import React, { Component } from 'react';",
			"import PropTypes from 'prop-types';",
			"",
			"/* Presentational */",
			"import { View } from 'react-native';",
			"",
			"// import styles from './styles';",
			"",
			"export default class ${1:MyComponent} extends Component {",
			"  static propTypes = {};",
			"",
			"  static defaultProps = {};",
			"",
			"  static state = {}",
			"",
			"  render() {",
			"    return (",
			"      <View />",
			"    );",
			"  }",
			"}",
			""
		],
		"description": "Create react-native component"
	},

	"rnComponentStateless": {
		"prefix": "rnComponentStateless",
		"body": [
			"/* Core */",
			"import React from 'react';",
			"",
			"/* Presentational */",
			"import { View } from 'react-native';",
			"",
			"// import styles from './styles';",
			"const ${1:MyComponent} = () => (",
			"  <View />",
			");",
			"",
			"export default ${1:MyComponent};",
			""
		],
		"description": "Create react-native stateless component"
	},	

	"rnReduxComponentStateless": {
		"prefix": "rnReduxComponentStateless",
		"body": [
			"/* Core */",
			"import React from 'react';",
			"",
			"/* Presentational */",
			"import { View } from 'react-native';",
			"",
			"/* Redux */",
			"import { connect } from 'react-redux';",
			"",
			"// import styles from './styles';",
			"",
			"const ${1:MyComponent}} = () => (",
			"  <View />",
			");",
			"const mapStateToProps = state => ({",
			"",
			"});",
			"",
			"const mapDispatchToProps = dispatch => ({",
			"",
			"});",
			"",
			"export default connect(mapStateToProps, mapDispatchToProps)(${1:MyComponent}});"
		],
		"description": "Create react-native stateless Redux component"
	},		

	"rnReduxComponent": {
		"prefix": "rnReduxComponent",
		"body": [
			"/* Core */",
			"import React, { Component } from 'react';",
			"",
			"/* Presentational */",
			"import { View } from 'react-native';",
			"",
			"/* Redux */",
			"import { connect } from 'react-redux';",
			"",
			"// import styles from './styles';",
			"",
			"class ${1:MyComponent} extends Component {",
			"  render() {",
			"    return (",
			"      <View />",
			"    );",
			"  }",
			"}",
			"",
			"const mapStateToProps = state => ({",
			"",
			"});",
			"",
			"const mapDispatchToProps = dispatch => ({",
			"",
			"});",
			"",
			"export default connect(mapStateToProps, mapDispatchToProps)(${1:MyComponent});",
			""
		],
		"description": "Create react-native Redux component"
	},

	"rnNavReducer": {
		"prefix": "rnNavReducer",
		"body": [
			"import { NavigationActions } from 'react-navigation';",
			"import Routes from './routes';",
			"",
			"const initialState = Routes.router.getStateForAction(NavigationActions.init());",
			"",
			"const navReduce = (state = initialState, action) => {",
			"  const nextState = Routes.router.getStateForAction(action, state);",
			"  return nextState || state;",
			"};",
			"",
			"export default navReduce;",
			""
		],
		"description": "Create Navigation Reducer Router"
	},	
	

	"rnStyles": {
		"prefix": "rnStyles",
		"body": [
			"import { StyleSheet } from 'react-native';",
			"",
			"const styles = StyleSheet.create({",
			"  ${1}",
			"});",
			"",
			"export default styles;",
			""
		],
		"description": "Create react-native Style file"
	},

	"rnView": {
		"prefix": "rnview",
		"body": [
			"<View style={styles.${1:container}}>",
			"  ${2}",
			"</View>"
		],
		"description": "View auto complete"
	},

	"rnFlatList": {
		"prefix": "rnflat",
		"body": [
			"<FlatList",
			"refreshControl={",
			"  <RefreshControl",
			"    refreshing={this.state.refreshing}",
			"    onRefresh={this.loadRepositories}",
			"  />",
			"}",
			"data={this.state.repositories}",
			"keyExtractor={respository => respository.id}",
			"renderItem={({ item }) => <Repository repository={item} />}"
		],
		"description": "FlatList auto complete"
	},

	"rnText": {
		"prefix": "rntext",
		"body": [
			"<Text style={styles.${1:title}}>${2}</Text>"
		],
		"description": "Text auto complete"
	},

	"rnScrollView": {
		"prefix": "rnscroll",
		"body": [
			"<ScrollView",
			" style={styles.container}",
			" contentContainerStyle={styles.contentContainer}",
			">",
			" { this.state.loading",
			"   ? <ActivityIndicator size=\"small\" color=\"#999\" style={styles.loading} />",
			"   : this.renderList() }",
			"</ScrollView>"
		],
		"description": "Scroll auto complete"
	},

	"rnstylesimport": {
		"prefix": "rndefaultstyles",
		"body": [
			"import { metrics, colors, fonts } from 'styles';"
		],
		"description": "Import default styles"
	},	



	/* React and React Native snippets */

	"apisauce": {
		"prefix": "apisauce",
		"body": [
			"import { create } from 'apisauce';",
			"",
			"const api = create({",
			"  baseURL: '${1:http://localhost:3000}',",
			"  headers: {",
			"    Accept: 'application/vnd.github.v3+json',",
			"    'User-Agent': 'Githuber',",
			"  },",
			"});",
			"",
			"export default api;"
		],
		"description": "Create APISauce Config"
	},

	"proptypes": {
		"prefix": "proptypes",
		"body": [
			"static propTypes = {",
			"  ${1}",
			"};"
		],
		"description": "Create component propTypes"
	},

	"defaultprops": {
		"prefix": "defaultprops",
		"body": [
			"static defaultProps = {",
			"  ${1}",
			"};"
		],
		"description": "Create component defaultProps"
	},

	"reactotronconfig": {
		"prefix": "reactotronconfig",
		"body": [
			"import Reactotron from 'reactotron-react-native';",
			"",
			"if (__DEV__) {",
			"  const tron = Reactotron",
			"    .configure()",
			"    .useReactNative()",
			"    .connect();",
			"",
			"  tron.clear();",
			"",
			"  console.tron = tron;",
			"}"
		],
		"description": "Create Reactotron Config"
	},

	"reactotronredux": {
		"prefix": "reactotronredux",
		"body": [
			"import Reactotron from 'reactotron-react-native';",
			"import { reactotronRedux } from 'reactotron-redux';",
			"import sagaPlugin from 'reactotron-redux-saga';",
			"",
			"if (__DEV__) {",
			"  const tron = Reactotron",
			"    .configure()",
			"    .useReactNative()",
			"    .use(reactotronRedux())",
			"    .use(sagaPlugin())",
			"    .connect();",
			"",
			"  tron.clear();",
			"",
			"  console.tron = tron;",
			"}"
		],
		"description": "Create Reactotron Config"
	},

	"duck": {
		"prefix": "duck",
		"body": [
			"import { createReducer, createActions } from 'reduxsauce';",
			"import Immutable from 'seamless-immutable';",
			"",
			"/* Types & Action Creators */",
			"",
			"const { Types, Creators } = createActions({",
			"// actionType: ['dataPassed'],",
			"});",
			"",
			"export const ${1:name}}Types = Types;",
			"export default Creators;",
			"",
			"/* Initial State */",
			"",
			"export const INITIAL_STATE = Immutable({",
			"// data: [],",
			"});",
			"",
			"/* Reducers */",
			"",
			"// export const reducer = state =>",
			"//   state.merge({ data: [] });",
			"",
			"/* Reducers to types */",
			"",
			"export const reducer = createReducer(INITIAL_STATE, {",
			"// [Types.ACTION_TYPE]: reducer,",
			"});"
		],
		"description": "Create react-native duck module"
	},

	"render": {
		"prefix": "render",
		"body": [
			"render() {",
			"  return (",
			"    ${1:<View />}",
			"  );",
			"}"
		],
		"description": "Create render method"
	},

	"mapDispatchToProps": {
		"prefix": "mapDispatchToProps",
		"body": [
			"const mapDispatchToProps = dispatch => ({",
			"  ${1}",
			"});"
		],
		"description": "Create redux mapDispatchToProps"
	},

	"mapStateToProps": {
		"prefix": "mapStateToProps",
		"body": [
			"const mapStateToProps = state => ({",
			"  ${1}",
			"});"
		],
		"description": "Create redux mapStateToProps"
	},

	"configureStore": {
		"prefix": "configureStore",
		"body": [
			"import { createStore, applyMiddleware, compose } from 'redux';",
			"//import createSagaMiddleware from 'redux-saga';",
			"",
			"export default (rootReducer) => {",
			"  const middleware = [];",
			"  const enhancers = [];",
			"",
			"  /* Saga */",
			"  // const sagaMonitor = __DEV__ ? console.tron.createSagaMonitor() : null;",
			"  // const sagaMiddleware = createSagaMiddleware({ sagaMonitor });",
			"  // middleware.push(sagaMiddleware);",
			"",
			"  enhancers.push(applyMiddleware(...middleware));",
			"",
			"  /* Store */",
			"  const createAppropriateStore = __DEV__ ? console.tron.createStore : createStore;",
			"  const store = createAppropriateStore(rootReducer, compose(...enhancers));",
			"",
			"  /* Run Saga */",
			"  // sagaMiddleware.run(rootSaga);",
			"",
			"  return store;",
			"};",
			""
		],
		"description": "Create configureStore file"
	},

	"storeWithSaga": {
		"prefix": "storeWithSaga",
		"body": [
			"import { createStore, applyMiddleware } from 'redux';",
			"import createSagaMiddleware from 'redux-saga';",
			"import { persistStore, persistCombineReducers } from 'redux-persist';",
			"import storage from 'redux-persist/es/storage';",
			"import sagas from './sagas';",
			"",
			"import reducers from './ducks';",
			"",
			"const rootReducer = persistCombineReducers({",
			"  key: 'root',",
			"  storage,",
			"}, reducers);",
			"",
			"const sagaMonitor = __DEV__ ? console.tron.createSagaMonitor() : null;",
			"const sagaMiddleware = createSagaMiddleware({ sagaMonitor });",
			"",
			"const middleware = [sagaMiddleware];",
			"",
			"const createApropriateStore = __DEV__ ? console.tron.createStore : createStore;",
			"export const store = createApropriateStore(rootReducer, applyMiddleware(...middleware));",
			"export const persistor = persistStore(store);",
			"",
			"sagaMiddleware.run(sagas);",
			""
		],
		"description": "Create configureStore file with Saga"
	},

	"reduxSetup": {
		"prefix": "reduxSetup",
		"body": [
			"import { combineReducers } from 'redux';",
			"",
			"/* Reducers */",
			"// import navReducer from 'navigation/reducer';",
			"",
			"import configureStore from './configureStore';",
			"// import rootSaga from './sagas';",
			"",
			"export default () => {",
			"  const rootReducer = combineReducers({",
			"    // nav: navReducer,",
			"  });",
			"",
			"  return configureStore(rootReducer, rootSaga);",
			"};"
		],
		"description": "Create Redux Setup file"
	},

}