<|start_filename|>ReactApp/data/Actions/index.js<|end_filename|>
import ActionKeys from './ActionKeys';
import SampleActions from './SampleActions';

const Actions = {
  ActionKeys,
  SampleActions
};


export default Actions;


<|start_filename|>ReactApp/components/index.js<|end_filename|>
/****
components
==========

This is a utility package to simplify import statements in your project
It helps you go from something like this:
```js
import React from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
const {Image, Navigator, StyleSheet} = React;
```
To this:
```js
import {React, Icon, Image, Navigator, StyleSheet} from 'components';
```

**/

import React from 'react-native';
import PureComponent from 'lib/PureComponent';
import Icon from 'react-native-vector-icons/Ionicons';
import {StoreComponent} from 'lib/flux';

const {
  // Components
  ActivityIndicatorIOS,
  DatePickerIOS,
  Image,
  ListView,
  MapView,
  Navigator,
  NavigatorIOS,
  PickerIOS,
  ProgressViewIOS,
  ScrollView,
  SegmentedControlIOS,
  SliderIOS,
  SwitchIOS,
  TabBarIOS,
  Text,
  TextInput,
  TouchableHighlight,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
  WebView,

  // APIs
  ActionSheetIOS,
  AdSupportIOS,
  AlertIOS,
  Animated,
  AppRegistry,
  AppStateIOS,
  AsyncStorage,
  CameraRoll,
  Dimensions,
  Easing,
  ImagePickerIOS,
  InteractionManager,
  LayoutAnimation,
  LinkingIOS,
  NetInfo,
  PanResponder,
  PixelRatio,
  PushNotificationIOS,
  Settings,
  StatusBarIOS,
  StyleSheet,
  VibrationIOS,

  // Plugins
  DeviceEventEmitter,
  NativeAppEventEmitter,
  NativeModules,
  Platform,
  requireNativeComponent,
} = React;

const components = {
  // React
  // Components
  ActivityIndicatorIOS,
  DatePickerIOS,
  Image,
  ListView,
  MapView,
  Navigator,
  NavigatorIOS,
  PickerIOS,
  ProgressViewIOS,
  ScrollView,
  SegmentedControlIOS,
  SliderIOS,
  SwitchIOS,
  TabBarIOS,
  Text,
  TextInput,
  TouchableHighlight,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
  WebView,

  // APIs
  ActionSheetIOS,
  AdSupportIOS,
  AlertIOS,
  Animated,
  AppRegistry,
  AppStateIOS,
  AsyncStorage,
  CameraRoll,
  Dimensions,
  Easing,
  ImagePickerIOS,
  InteractionManager,
  LayoutAnimation,
  LinkingIOS,
  NetInfo,
  PanResponder,
  PixelRatio,
  PushNotificationIOS,
  Settings,
  StatusBarIOS,
  StyleSheet,
  VibrationIOS,

  // Plugins
  DeviceEventEmitter,
  NativeAppEventEmitter,
  NativeModules,
  Platform,
  requireNativeComponent,

  React, // So we won't need to import React separately
  Component: PureComponent, // Override React's default compoment to use PureComponent

  // Globals
  Icons: require('./Icons'), // Global icons const
  Colors: require('./Colors'), // Global colors const

  // Additional components
  Icon,
  StoreComponent
};

export default components;


<|start_filename|>ReactApp/data/index.js<|end_filename|>
/***
  data
  ====
  Data package, used for managing stores, actions and models
*/

import Actions from './Actions';
import Stores from './Stores';
import Models from './Models';

export default {
  ...Actions,
  ...Stores,
  ...Models
};


<|start_filename|>ReactApp/components/Icons.js<|end_filename|>
/****
 * A mapping from app-specific icon names to Ionicons
 *
 * You can find all the icons we support at:
 * http://ionicons.com/
 *
 * @type {{}}
 */
const Icons = {
  Back: 'ios-arrow-back',
  Search: 'ios-search-strong',
  ChevronRight: 'chevron-right',
  Compose: 'compose',
  Menu: 'navicon-round',
  More: 'ios-more',
  Welcome: 'trophy'
};


export default Icons;


<|start_filename|>ReactApp/data/Models/index.js<|end_filename|>


const Models = {

};


export default Models;


<|start_filename|>ReactApp/lib/PureComponent.js<|end_filename|>
import React from 'react-native';
import shallowEqual from 'react-pure-render/shallowEqual';

/***
 * Pure Component
 * ==============
 *
 * Pure components are components that their rendering depends *only* on their state and
 * their props.
 *
 * As a result, we can provide a basic `shouldComponentUpdate` method, that only test the state and
 * props objects for change.
 *
 */
class PureComponent extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
  }

}

export default PureComponent;


<|start_filename|>ReactApp/data/Stores/index.js<|end_filename|>
import SampleStore from './SampleStore';

const Stores = {
  SampleStore
};


export default Stores;


<|start_filename|>ReactApp/lib/flux/Store.js<|end_filename|>
import _ from 'underscore';
import EventEmitter from 'eventemitter3';
import Dispatcher from './Dispatcher';

/****
 BaseStore
 ============
 **/

const CHANGE_EVENT = 'change';

class Store {

  constructor() {
    this.emitter = new EventEmitter();
    this._registerStore();
  }

  _registerStore() {
    if (_.isFunction(this.handleAction)) {
      this.disptachToken = Dispatcher.register(this.handleAction.bind(this));
    } else {
      //console.log(`Store ${this.constructor.name} must define a 'handleAction' function`);
    }
  }

  emitChange() {
    this._emit(CHANGE_EVENT);
  }

  addChangeListener(callback, context) {
    this._on(CHANGE_EVENT, callback, context);
  }

  removeChangeListener(callback, context) {
    this._removeListener(CHANGE_EVENT, callback, context);
  }

  _emit(event, options) {
    this.emitter.emit(event, options);
  }

  _on(event, callback, context) {
    this.emitter.on(event, callback, context);
  }

  _removeListener(event, callback, context) {
    this.emitter.removeListener(event, callback, context);
  }

}

export default Store;


<|start_filename|>ReactApp/data/Stores/SampleStore.js<|end_filename|>
import {Store} from 'lib/flux';
import {ActionKeys} from '../Actions';

class SampleStore extends Store{

  constructor(){
    super();
    // Set initial value
    this._value = 0;
  }

  handleAction(action) {
    switch (action.actionType) {
      case ActionKeys.SET_SAMPLE_VALUE:
        this.setValue(action.value);
      break;
    }
  }

  setValue(newValue){
    this._value = newValue;
    this.emitChange();
  }

  getValue(){
    return this._value;
  }
}


export default new SampleStore();


<|start_filename|>index.ios.js<|end_filename|>
/***
 This file is a placeholder file, to fix an issue with the react-native bundler command

 shlomiatar 24/7/15
 */

require('./ReactApp/index.ios');


<|start_filename|>package.json<|end_filename|>
{
  "name": "HackApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh",
    "test": "node_modules/.bin/jest",
    "lint": "node_modules/.bin/gulp lint;",
    "test-ci": "node_modules/.bin/jest --testEnvData=\"{\\\"circleTestFolder\\\":\\\"${CIRCLE_TEST_REPORTS}\\\"}\"",
    "lint-ci": "node_modules/.bin/gulp lint-ci;"
  },
  "dependencies": {
    "react-native": "0.9.0-rc",
    "eventemitter3": "^1.1.1",
    "flux": "^2.0.3",
    "immutable": "^3.7.4",
    "keymirror": "^0.1.1",
    "moment": "^2.10.3",
    "object-assign": "^3.0.0",
    "react-native-side-menu": "0.9.5",
    "react-native-vector-icons": "0.6.8",
    "react-pure-render": "^1.0.2",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "gulp-shell": "^0.4.2",
    "babel-eslint": "^3.1.20",
    "eslint": "^0.24.0",
    "eslint-plugin-react": "^2.6.4",
    "gulp": "^3.9.0",
    "gulp-eslint": "^0.15.0",
    "jasmine-reporters": "^1.0.0",
    "jest-cli": "facebook/jest#0.5.x"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/react-native/jestSupport/scriptPreprocess.js",
    "setupEnvScriptFile": "<rootDir>/node_modules/react-native/jestSupport/env.js",
    "setupTestFrameworkScriptFile": "<rootDir>/node_modules/react-native/jestSupport/setupJasmineEnv.js",
    "testFileExtensions": [
      "js"
    ],
    "testPathDirs": [
      "<rootDir>/ReactApp"
    ],
    "unmockedModulePathPatterns": [
      "source-map"
    ]
  }
}


<|start_filename|>ReactApp/data/Actions/SampleActions.js<|end_filename|>
import ActionKeys from './ActionKeys';
import {Actions} from 'lib/flux';


class SampleActions extends Actions{
  /***
  Set the sample value for SampleStore
  **/
  setSampleValue(newValue){
    this._dispatch(ActionKeys.SET_SAMPLE_VALUE, {
      value: newValue
    });
  }
}

// Export singleton
export default new SampleActions();


<|start_filename|>ReactApp/lib/flux/index.js<|end_filename|>
export default {
  Store: require('./Store'),
  Dispatcher: require('./Dispatcher'),
  Actions: require('./Actions'),
  StoreComponent: require('./StoreComponent')
};


<|start_filename|>ReactApp/lib/flux/Actions.js<|end_filename|>
import Dispatcher from './Dispatcher';

class Actions {
  _dispatch(actionKey, payload) {
    Dispatcher.handleAction(actionKey, payload);
  }
}

export default Actions;


<|start_filename|>ReactApp/data/Actions/ActionKeys.js<|end_filename|>
import keyMirror from 'keyMirror';


const ActionKeys = keyMirror({
  // Sample Actions
  SET_SAMPLE_VALUE: 1
});

export default ActionKeys;


<|start_filename|>ReactApp/StoreComponentDemo.js<|end_filename|>
/****
* StoreComponentDemo
* ==================
*
* A simple component for demonstrating flux
*
*/

import {React, StoreComponent, View, Text, StyleSheet, TouchableOpacity, Colors} from 'components';
import {SampleStore, SampleActions} from 'data';


class StoreComponentDemo extends StoreComponent{

  static propTypes = {
    title: React.PropTypes.string.isRequired
  }

  static getStoresToSubscribe(){
    return [SampleStore];
  }

  static getStateFromStores(props){
    return {
      currentValue: SampleStore.getValue()
    };
  }

  render(){
    return (
      <TouchableOpacity onPress={(e) => this._onPress(e)}  style={styles.container}>
        <View style={styles.inner}>
          <Text style={styles.title}>{this.props.title}</Text>
          <Text>{this.state.currentValue}</Text>
        </View>
      </TouchableOpacity>
    );
  }

  _onPress(e){
    SampleActions.setSampleValue(Number(new Date()));
  }
}

const styles = StyleSheet.create({
  container: {
    borderColor: Colors.Link,
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
    margin: 5,
    flex:1
  },

  inner: {
    flex:1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },

  title: {
    flex:1,
    fontWeight: 'bold',
    color: Colors.Title
  }

});


export default StoreComponentDemo;


<|start_filename|>ReactApp/lib/flux/StoreComponent.js<|end_filename|>
import shallowEqual from 'react-pure-render/shallowEqual';
import objectAssign from 'object-assign';
import Component from '../PureComponent';


/****
 *  StoreComponent
 *  ==============
 *
 *  A self updating store-listening base component
 *
 *  This component ease the development flow using Flux and stores.
 *
 *  Notes:
 *  -----
 *
 *  1. This component is implementing "pure rendering" so it will only render if state / props has changed
 *  2. If you decide to override the `constructor`, `componentWillMount`, `componentWillUnmount` or `componentWillReceiveProps` you must
 *      Call the `super()` method, or you will experience an unexpected behavior.
 *
 *
 *  Usage Example:
 *
 *  class MessageView extends StoreComponent{
 *
 *    static getStoresToSubscribe(){
 *      return [MessageStore, ConversationStore];
 *    }
 *
 *    static getStateFromStores(state, props){
 *      return {
 *        message: MessageStore.getById(props.id)
 *        conversationCount: ConversationStore.getConversationCountForMessage(props.id)
 *      };
 *    }
 *
 *    render(){
 *      return (
 *        <View>
 *          <Text>{this.state.message.title}</Text>
 *          <Text>{this.state.conversationCount} conversations</Text>
 *        </View>
 *      );
 *    }
 *  }
 */
class StoreComponent extends Component {

  constructor(props) {
    super(props);

    this._setupStoreSubscription();
  }

  componentWillMount() {
    // Setup initial state
    this.state = objectAssign({}, this.state, this.constructor.getStateFromStores(this.state, this.props));
  }

  /****
   * Another lifecycle method.
   * Removes all the change events from the stores when the component is removed
   */
  componentWillUnmount() {
    this.constructor.getStoresToSubscribe().forEach((store) => this._unregisterFromStore(store));
  }

  /***
   * A function called when the component is mounted, the props change or one of the stores has changed.
   * It is used for querying the stores for new information, and the component's state is updated with the
   * result.
   *
   * @param {Object} state the current state
   * @param {Object} props the current props
   * @returns {Object}
   */
  static getStateFromStores(state, props) {
    // Default
    return {};
  }

  /***
  * Get a list of stores to subscribe to
  **/
  static getStoresToSubscribe() {
    return [];
  }

  _setupStoreSubscription() {
    if (!this.constructor.getStoresToSubscribe().length) {
      throw new Error(`No stores were specified in the getStoresToSubscribe() for ${this.constructor.name}`);
    }

    this.constructor.getStoresToSubscribe().forEach((store) => this._registerToStore(store));
  }

  /***
   * Register to a given store's change event
   * @param {Store} store
   * @private
   */
  _registerToStore(store) {
    store.addChangeListener(this._onStoreChanged, this);
  }

  /***
   * De-register from a store
   * @param {Store} store
   * @private
   */
  _unregisterFromStore(store) {
    store.removeChangeListener(this._onStoreChanged, this);
  }

  _onStoreChanged(store) {
    // Update the state
    this._updateStateFromStores(this.props);
  }

  _updateStateFromStores(props) {
    this.setState(this.constructor.getStateFromStores(this.state, props));
  }

  /***
   * Called when the props of the components have changed
   *
   * We test that the props actually changed, and if so, we update the state from the stores
   *
   * @param {Object} nextProps
   */
  componentWillReceiveProps(nextProps) {
    if (!shallowEqual(this.props, nextProps)) {
      this._updateStateFromStores(nextProps);
    }
  }

}

export default StoreComponent;


<|start_filename|>ReactApp/components/Colors.js<|end_filename|>
/***
Colors
======
A const for app global colors

**/
const Colors = {
  Link: '#009cea',
  Title: '#222',
  Border: '#ddd',
  LightBackground: '#fffcf4',
};

export default Colors;


<|start_filename|>ReactApp/lib/flux/Dispatcher.js<|end_filename|>
import {Dispatcher as BaseDispatcher} from 'flux';


class Dispatcher extends BaseDispatcher {

  /***
   * Dispatch an action with a specific action type
   *
   *
   * @param actionType
   * @param payload
   */
  handleAction(actionType, payload) {
    this.dispatch({
      ...payload,
      actionType
    });
  }
}

const dispatcher = new Dispatcher();

export default dispatcher;


<|start_filename|>gulpfile.js<|end_filename|>
const gulp = require('gulp'),
  eslint = require('gulp-eslint'),
  shell = require('gulp-shell'),
  fs = require('fs'),
  path = require('path'),
  os = require('os');


gulp.task('lint-ci', function () {

  const testReportFolder = process.env.CIRCLE_TEST_REPORTS || 'test_output';
  const outputStream = fs.createWriteStream(path.join(testReportFolder, 'eslint', 'eslint.xml'));


  return gulp.src(['ReactApp/**/*.js'])
    // eslint() attaches the lint output to the eslint property
    // of the file object so it can be used by other modules.
    .pipe(eslint())
    // eslint.format() outputs the lint results to the console.
    // Alternatively use eslint.formatEach() (see Docs).
    .pipe(eslint.format('junit', outputStream))
    // To have the process exit with an error code (1) on
    // lint error, return the stream and pipe to failOnError last.
    .pipe(eslint.failAfterError());
});


gulp.task('lint', function () {
  return gulp.src(['ReactApp/**/*.js'])
    // eslint() attaches the lint output to the eslint property
    // of the file object so it can be used by other modules.
    .pipe(eslint())
    // eslint.format() outputs the lint results to the console.
    // Alternatively use eslint.formatEach() (see Docs).
    .pipe(eslint.format())
    // To have the process exit with an error code (1) on
    // lint error, return the stream and pipe to failOnError last.
    .pipe(eslint.failAfterError());
});


gulp.task('clear-cache', function () {
  // Clear react-packager cache

  const tempDir = os.tmpdir();

  const cacheFiles = fs.readdirSync(tempDir).filter(function (fileName) {
    return fileName.indexOf('react-packager-cache') === 0;
  });

  cacheFiles.forEach(function (cacheFile) {
    const cacheFilePath = path.join(tempDir, cacheFile);
    fs.unlinkSync(cacheFilePath);
    console.log('Deleted cache: ', cacheFilePath);
  });

  if (!cacheFiles.length) {
    console.log('No cache files found!');
  }
});


gulp.task('bundle', shell.task([
  'react-native bundle'
]));
