react-native meetup code samples

todolist-mobx.js

// -----------------------
// Store.js
import {observable, action, computed} from "mobx";

class Store {
  @observable
  todos = [
    {title: "Skapa gdocs presentation", status: "active"},
    {title: "Koda meetup-exempel", status: "active"},
    {title: "Koda meetup-exempel #2", status: "active"},
    {title: "Uppgradera XCode", status: "active"},
  ];

  // Transaktion - Förhindrar 2 renderingar om state modifiers 2 ggr
  @action
  addTodo() {
    this.todos.push({title: Math.random().toString()});
  }

  @action
  deleteTodo(title) {
    const index = this.todos.findIndex(todo => todo.title === title);
    this.todos.splice(index, 1);
  }

  @action
  doneTodo(title) {
    const index = this.todos.findIndex(todo => todo.title === title);

    // Gotcha !!
    // this.todos[index].status = "done";
    this.todos[index] = {title: title, status: "done"};
  }

  filter = "";
  @computed
  get filteredTodos() {
    return this.todos.filter(todo => todo.title.includes(this.filter));
  } // MobX optimerar med cachade värden
}

export default new Store();


// -----------------------
// App.js
import React from "react";
import {StyleSheet, Text, View, Button} from "react-native";
import {observer} from "mobx-react";
import Store from "./Store";

@observer
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        {Store.todos.map(todo =>
          <View key={todo.title} style={[styles.todo, styles[todo.status]]}>
            <Text>
              {todo.title}
            </Text>
            <Button title="Ta bort" onPress={() => Store.deleteTodo(todo.title)} />
            <Button title="Klar" onPress={() => Store.doneTodo(todo.title)} />
          </View>
        )}

        <Button title="Skapa TODO" onPress={() => Store.addTodo()} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 10,
    marginTop: 50,
    backgroundColor: "#ffffff",
  },
  todo: {
    padding: 10,
    margin: 5,
    height: 110,
    borderRadius: 5,
    alignItems: "center",
    backgroundColor: "#C4D2DC",
  },
  done: {
    backgroundColor: "#B4A09F",
  },
});