basic structure

Author: alexeuler

mobile/ReactNativeTutorial/android/app/build.gradle

@@ -126,6 +126,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-vector-icons')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules

mobile/ReactNativeTutorial/android/app/src/main/assets/fonts/Entypo.ttf

@@ -4,6 +4,7 @@
 import android.util.Log;
 
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -23,7 +24,8 @@ protected boolean getUseDeveloperSupport() {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+            new VectorIconsPackage()
       );
     }
   };

mobile/ReactNativeTutorial/android/app/src/main/assets/fonts/EvilIcons.ttf

@@ -1,3 +1,5 @@
 rootProject.name = 'ReactNativeTutorial'
 
 include ':app'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

mobile/ReactNativeTutorial/android/app/src/main/assets/fonts/FontAwesome.ttf

@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+import { Provider } from 'react-redux';
+import store from './setup/store';
+import Comments from './bundles/comments/Comments';
+
+type PropsType = {
+
+}
+
+const App = (props: PropsType) => (
+  <Provider store={store}>
+    <Comments />
+  </Provider>
+);
+
+export default App;

mobile/ReactNativeTutorial/android/app/src/main/assets/fonts/Foundation.ttf

@@ -0,0 +1,14 @@
+// @flow
+import React from 'react';
+import Add from './components/Add/Add';
+
+type PropsType = {
+
+}
+
+const Comments = (props: PropsType) => (
+  <Add />
+);
+
+export default Comments;
+

mobile/ReactNativeTutorial/android/app/src/main/assets/fonts/Ionicons.ttf

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+import { View, Text } from 'react-native';
+import { FormLabel, FormInput } from 'react-native-elements'
+
+import withAddProps from '../../hocs/withAddProps'
+
+import styles from './AddStyle';
+
+type PropsType = {
+
+}
+
+const Add = (props: PropsType) => (
+  <View style={styles.container}>
+    <FormLabel>Author name</FormLabel>
+    <FormInput onChangeText={(text) => {props.actions.updateForm({name: text})}}/>
+    <FormLabel>Comment</FormLabel>
+    <FormInput onChangeText={(text) => {props.actions.updateForm({comment: text})}}/>
+  </View>
+);
+
+export default withAddProps(Add);

mobile/ReactNativeTutorial/android/app/src/main/assets/fonts/MaterialIcons.ttf

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+  },
+});
+
+export default styles;

mobile/ReactNativeTutorial/android/app/src/main/assets/fonts/Octicons.ttf

@@ -0,0 +1,16 @@
+// @flow
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import commentFormSelector from '../../../selectors/commentFormSelector';
+import { actions } from '../sagas';
+
+const mapStateToProps = createSelector(commentFormSelector, commentForm => commentForm.toJS());
+
+const mapDispatchToProps = (dispatch: Function) => ({
+  actions: bindActionCreators(actions, dispatch),
+});
+
+export default (Component: ReactClass<any>): ReactClass<{}> =>
+  connect(mapStateToProps, mapDispatchToProps)(Component);

mobile/ReactNativeTutorial/android/app/src/main/assets/fonts/SimpleLineIcons.ttf

@@ -0,0 +1,13 @@
+// @flow
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import commentsStoreSelector from '../../../selectors/commentsStoreSelector';
+import * as actions from '../sagas';
+
+const mapDispatchToProps = (dispatch: Function) => ({
+  actions: bindActionCreators(actions, dispatch),
+});
+
+export default (Component: ReactClass<any>): ReactClass<{}> =>
+  connect(commentsStoreSelector, mapDispatchToProps)(Component);

mobile/ReactNativeTutorial/android/app/src/main/assets/fonts/Zocial.ttf

@@ -0,0 +1,42 @@
+import { takeLatest } from 'redux-saga';
+import { call, put } from 'redux-saga/effects';
+
+import { actions as reduxActions } from '../../../reducers'
+
+const FETCH = 'COMMENTS:FETCH';
+const UPDATE_FORM = 'COMMENTS:UPDATE_FORM';
+
+function* fetchHandler() {
+  // try {
+  //   const responsePromise = yield call(api.fetchEntities);
+  //   const { comments } = yield call(() => responsePromise.json());
+  //   yield put({ type: actionTypes.FETCH_COMMENTS_SUCCESS, comments });
+  // } catch (e) {
+  //   yield put({ type: actionTypes.FETCH_COMMENTS_FAILURE, error: e.message });
+  // }
+}
+
+function* fetchSaga () {
+  yield* takeLatest(FETCH, fetchHandler);
+}
+
+function* updateFormHandler(action) {
+  yield put(reduxActions.updateCommentForm(action.payload));
+}
+
+function* updateFormSaga () {
+  yield* takeLatest(UPDATE_FORM, updateFormHandler);
+}
+
+export default [
+  fetchSaga,
+  updateFormSaga,
+];
+
+const fetch = () => ({ type: FETCH });
+const updateForm = (payload) => ({ type: UPDATE_FORM, payload });
+
+export const actions = {
+  fetch,
+  updateForm,
+};

mobile/ReactNativeTutorial/android/app/src/main/java/com/reactnativetutorial/MainApplication.java

@@ -0,0 +1,39 @@
+import { fromJS } from 'immutable';
+
+const UPDATE = 'COMMENT_FORM:UPDATE';
+const RESET = 'COMMENT_FORM:RESET';
+
+export const initialState = fromJS({
+  meta: {}
+});
+
+const update = (state, action) => {
+  return state.merge(action.payload);
+};
+
+export default (state, action) => {
+  if (!state) {
+    return initialState;
+  }
+
+  switch (action.type) {
+    case UPDATE:
+      return update(state, action);
+    case RESET: return initialState;
+    default:
+      return state;
+  }
+};
+
+const updateCommentForm = (payload) => {
+  return {type: UPDATE, payload};
+};
+
+const resetCommentForm = () => {
+  return {type: RESET};
+};
+
+export const actions = {
+  updateCommentForm,
+  resetCommentForm
+};

mobile/ReactNativeTutorial/android/settings.gradle

@@ -0,0 +1,32 @@
+import { fromJS } from 'immutable';
+
+const CREATE = 'COMMENTS_STORE:CREATE';
+
+export const initialState = fromJS({
+  meta: {}
+});
+
+const create = (state, action) => {
+  return state.merge(action.entities);
+};
+
+export default (state, action) => {
+  if (!state) {
+    return initialState;
+  }
+
+  switch (action.type) {
+    case CREATE:
+      return create(state, action);
+    default:
+      return state;
+  }
+};
+
+const createComments = (entities) => {
+  return {type: CREATE, entities};
+};
+
+export const actions = {
+  createComments,
+};

mobile/ReactNativeTutorial/app/App.js

@@ -0,0 +1,27 @@
+import { Map } from 'immutable';
+import { combineReducers } from 'redux-immutable';
+import commentsStoreReducer, {
+  initialState as commentsStoreInitialState,
+  actions as commentsStoreActions
+} from './commentsStoreReducer';
+
+import commentFormReducer, {
+  initialState as commentFormInitialState,
+  actions as commentFormActions
+} from './commentFormReducer';
+
+
+export default combineReducers({
+  comments: commentsStoreReducer,
+  commentForm: commentFormReducer
+});
+
+export const initialState = Map({
+  comments: commentsStoreInitialState,
+  commentForm: commentFormInitialState
+});
+
+export const actions = {
+  ...commentsStoreActions,
+  ...commentFormActions
+};

mobile/ReactNativeTutorial/app/bundles/comments/Comments.js

@@ -0,0 +1 @@
+export default state => state.get('commentForm')

mobile/ReactNativeTutorial/app/bundles/comments/components/Add/Add.js

@@ -0,0 +1 @@
+export default state => state.get('commentsStore')

mobile/ReactNativeTutorial/app/bundles/comments/components/Add/AddStyle.js

@@ -0,0 +1,9 @@
+export default function logger({ getState }) {
+  return next => action => {
+    console.info('will dispatch action', action);
+    const result = next(action);
+    const state = getState();
+    console.info('state after dispatch', state.toJS());
+    return result;
+  };
+}

mobile/ReactNativeTutorial/app/bundles/comments/hocs/withAddProps.js

@@ -0,0 +1,15 @@
+import _ from 'lodash/fp';
+
+import commentsSagas from '../bundles/comments/sagas';
+
+const sagas = [
+  ...commentsSagas,
+];
+
+const sagaIterators = _.map(saga => saga && saga(), sagas);
+
+function* appSaga() {
+  yield sagaIterators;
+}
+
+export default appSaga;

mobile/ReactNativeTutorial/app/bundles/comments/hocs/withListProps.js

@@ -0,0 +1,20 @@
+import { applyMiddleware, compose, createStore } from 'redux';
+import createSagaMiddleware from 'redux-saga';
+
+import loggerMiddleware from './loggerMiddleware';
+import appReducer, { initialState } from '../reducers';
+import appSaga from './sagas';
+
+const sagaMiddleware = createSagaMiddleware();
+
+let composedStore;
+if (__DEV__) {
+  composedStore = compose(applyMiddleware(sagaMiddleware, loggerMiddleware));
+} else {
+  composedStore = compose(applyMiddleware(sagaMiddleware));
+}
+const store = composedStore(createStore)(appReducer, initialState);
+
+sagaMiddleware.run(appSaga);
+
+export default store;

mobile/ReactNativeTutorial/app/bundles/comments/sagas/index.js

@@ -1,53 +1,4 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
+import { AppRegistry } from 'react-native';
+import App from './app/App';
 
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class ReactNativeTutorial extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('ReactNativeTutorial', () => ReactNativeTutorial);
+AppRegistry.registerComponent('ReactNativeTutorial', () => App);