Exemple using Sinux with React Native

index.ios.js

/**
 * Sample React Native App with Sinux
 * https://github.com/jbpin/sinux
 */
'use strict';

import React, {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableHighlight,
  TextInput,
  PropTypes
} from 'react-native'

import {Store, Command} from 'sinux'

// todo Store

const todoStore = new Store({todos:[]}, 'add', 'remove', 'update', 'complete', 'load');
new Command(todoStore.add, (state, todo) => {
  return {...state, todos : [...state.todos, {text: todo, completed: false}]}
})
new Command(todoStore.remove, (state, id) => {
  return {...state, todos : [...state.todos.slice(0, id), ...state.todos.slice(id + 1)]}
})
new Command(todoStore.update, (state, id, todo) => {
  return {...state, todos : [...state.todos.slice(0, id), {...todo}, ...state.todos.slice(id + 1)]}
})
new Command(todoStore.complete, (state, id) => {
  let todo = {...state.todos[id]}
  todo.completed = true;
  return {...state, todos : [...state.todos.slice(0, id), {...todo}, ...state.todos.slice(id + 1)]}
})
new Command(todoStore.load, (state) => {
  var dummyData = {
    todos: [
      { text: "Learn how to use Sinux", completed: false }
    ]
  }
  return new Promise((resolve, reject) => {
    setTimeout(()=> resolve({...state, todos : [...state.todos, ...dummyData.todos]}), 1000)
  })
})

// Components

const TodoList = React.createClass({
  render : function() {
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    const dataSource = ds.cloneWithRows(this.props.allTodos)
    return (
      <ListView
        dataSource={dataSource}
        renderRow={(rowData, sectionID, rowId) => { return (
            <TodoItem
              todo={rowData}
              todoId={rowId}
              onTodoClick={this.props.onTodoClick}
              onRemoveClick={this.props.onRemoveClick}
              todoStyle={this.props.todoStyle}
              todoCompletedStyle={this.props.todoCompletedStyle}
            />
          )}}
      />
    );
  }
})

const TodoItem = React.createClass({
  render: function() {
    let todo = this.props.todo;
    return(
      <View style={{flexDirection: 'row'}}>
      <TouchableHighlight onPress={() => this.props.onTodoClick(this.props.todoId)} style={{flex:3}}>
        <Text style={[this.props.todoStyle, todo.completed && this.props.todoCompletedStyle]}>{todo.text}</Text>
      </TouchableHighlight>
      <TouchableHighlight onPress={() => this.props.onRemoveClick(this.props.todoId)} style={{flex:1}}>
        <Text style={[styles.remove, {padding:10}]}>Remove</Text>
      </TouchableHighlight>
      </View>
    )
  }

})

const TodoForm = React.createClass({
  render : function (){
    return (
      <TextInput
        ref={component => this._textInput = component}
        style={this.props.style}
        onSubmitEditing={(e) => this.addTodo()}
        onChangeText={(text) => this.setState({text:text})}
        enablesReturnKeyAutomatically={true}
        returnKeyType='done'
        clearButtonMode="while-editing"
        placeholder="Add a todo"
        blurOnSubmit={false} />
    )
  },

  addTodo : function(e) {
    this.props.onAddTodo(this.state.text);
    this._textInput.setNativeProps({text: ''});
  }
})

TodoForm.propTypes = {
  onAddTodo : PropTypes.func.isRequired
}

// Container

const todoSinux = React.createClass({

  getInitialState : function(){
    return todoStore.getState();
  },

  componentDidMount: function() {
    todoStore.load();
    todoStore.changed.add(this._onChange);
  },

  componentWillUnmount: function() {
    todoStore.changed.remove(this._onChange);
  },

  _onChange: function(value) {
    this.setState(value);
  },

  render: function() {
    return (
      <View style={styles.container}>
        <TodoForm onAddTodo={this.addTodo} style={styles.form} />
        <TodoList
          allTodos={this.state.todos}
          todoStyle={styles.todoItem}
          todoCompletedStyle={styles.todoItemCompleted}
          onTodoClick={this.onTodoClick}
          onRemoveClick={this.onRemoveClick}
          />
      </View>
    );
  },

  addTodo : function(text){
    todoStore.add(text);
  },

  onTodoClick : function(id) {
    todoStore.complete(parseInt(id));
  },

  onRemoveClick : function(id) {
    todoStore.remove(parseInt(id));
  }
});

// Style

var styles = StyleSheet.create({
  form : {
    height: 35,
    justifyContent: 'center',
    alignItems: 'stretch',
    margin:5
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
    paddingTop: 20
  },
  todoItem : {
    flex:1,
    height:40,
    padding: 10
  },
  todoItemCompleted : {
    textDecorationLine : 'line-through'
  },
  remove : {
    color: '#da0000'
  }
});

AppRegistry.registerComponent('todoSinux', () => todoSinux);

package.json

{
  "name": "todoSinux",
  "version": "0.0.1",
  "scripts": {
    "start": "react-native start"
  },
  "dependencies": {
    "react-native": "^0.17.0",
    "sinux": "0.0.4"
  },
  "devDependencies": {
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13"
  }
}