js_react_native__egghead/app.js

import React, { Component } from "react";
import {
  ActivityIndicator,
  AsyncStorage,
  Keyboard,
  ListView,
  Platform,
  StyleSheet,
  Text,
  View
} from "react-native";
import Header from "./header";
import Footer from "./footer";
import Row from "./row";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F5F5",
    ...Platform.select({
      ios: {
        paddingTop: 30
      }
    })
  },
  content: {
    flex: 1
  },
  list: {
    backgroundColor: "#fff"
  },
  loading: {
    backgroundColor: "rgba(0, 0, 0, 0.2)",
    bottom: 0,
    justifyContent: "center",
    left: 0,
    position: "absolute",
    right: 0,
    top: 0
  },
  separator: {
    borderWidth: 2,
    borderColor: "#eee"
  }
});

const filterItems = (filter, items) => {
  return items.filter((item) => {
    if ((filter === 'ACTIVE' && item.complete) || (filter === 'COMPLETED' && !item.complete)) {
      return false;
    }
    return true;
  });
};

class App extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      allComplete: false,
      dataSource: ds.cloneWithRows([]),
      filter: "ALL",
      items: [],
      loading: true,
      value: ""
    };
    this.handleAddItem = this.handleAddItem.bind(this);
    this.handleClearComplete = this.handleClearComplete.bind(this);
    this.handleFilter = this.handleFilter.bind(this);
    this.handleRemoveItem = this.handleRemoveItem.bind(this);
    this.handleToggleAllComplete = this.handleToggleAllComplete.bind(this);
    this.handleToggleComplete = this.handleToggleComplete.bind(this);
    this.handleToggleEditing = this.handleToggleEditing.bind(this);
    this.handleUpdateText = this.handleUpdateText.bind(this);
    this.setSource = this.setSource.bind(this);
  }

  componentWillMount() {
    AsyncStorage.getItem("items").then((json) => {
      try {
        const items = JSON.parse(json);
        this.setSource(items, items, { loading: false });
      }
      catch (e) {
        this.setState({ loading: false });
      }
    });
  }

  handleAddItem() {
    if (!this.state.value) {
      return;
    }
    const newItems = [
      ...this.state.items,
      {
        key: Date.now(),
        text: this.state.value,
        complete: false
      }
    ];
    this.setSource(newItems, newItems, { value: "" });
  }

  handleClearComplete() {
    const newItems = filterItems('ACTIVE', this.state.items);
    this.setSource(newItems, filterItems(this.state.filter, newItems));
  }

  handleFilter(filter) {
    this.setSource(this.state.items, filterItems(filter, this.state.items), { filter });
  }

  handleRemoveItem(key) {
    const newItems = this.state.items.filter((item) => item.key !== key);
    this.setSource(newItems, filterItems(this.state.filter, newItems));
  }

  handleToggleAllComplete() {
    const complete = !this.state.allComplete;
    const newItems = this.state.items.map((item) => ({
      ...item,
      complete
    }));
    // console.table(newItems);
    this.setSource(newItems, filterItems(this.state.filter, newItems), { allComplete: complete });
  }

  handleToggleComplete(key, complete) {
    const newItems = this.state.items.map((item) => {
      if (item.key !== key) {
        return item;
      }
      return {
        ...item,
        complete
      };
    });
    this.setSource(newItems, filterItems(this.state.filter, newItems));
  }

  handleToggleEditing(key, editing) {
    const newItems = this.state.items.map((item) => {
      if (item.key !== key) {
        return item;
      }
      return {
        ...item,
        editing
      };
    });
    this.setSource(newItems, filterItems(this.state.filter, newItems));
  }

  handleUpdateText(key, text) {
    const newItems = this.state.items.map((item) => {
      if (item.key !== key) {
        return item;
      }
      return {
        ...item,
        text
      };
    });
    this.setSource(newItems, filterItems(this.state.filter, newItems));
  }

  render() {
    // console.log("App state", this.state);
    return (
      <View style={styles.container}>
        <Header
          onAddItem={this.handleAddItem}
          onChange={(value) => this.setState({ value })}
          onToggleAllComplete={this.handleToggleAllComplete}
          value={this.state.value}
        />
        <View style={styles.content}>
          <ListView
            enableEmptySections
            dataSource={this.state.dataSource}
            onScroll={() => Keyboard.dismiss()}
            renderRow={({ key, ...value }) => {
              // console.log("renderRow", key, value);
              return (
                <Row
                  key={key}
                  onComplete={(complete) => this.handleToggleComplete(key, complete)}
                  onRemove={() => this.handleRemoveItem(key)}
                  onToggleEdit={(editing) => this.handleToggleEditing(key, editing)}
                  onUpdate={(text) => this.handleUpdateText(key, text)}
                  { ...value }
                />
              );
            }}
            renderSeparator={(sectionId, rowId) => {
              // console.log('renderSeparator', sectionId, rowId);
              return <View key={rowId} style={styles.separator} />;
            }}
            style={styles.list}
          />
        </View>
        <Footer
          count={filterItems("ACTIVE", this.state.items).length}
          filter={this.state.filter}
          onClearComplete={this.handleClearComplete}
          onFilter={this.handleFilter}
        />
        {this.state.loading && <View style={styles.loading}>
          <ActivityIndicator
            animating
            size="large"
          />
        </View>}
      </View>
    );
  }

  setSource(items, itemsDataSource, otherState = {}) {
    this.setState({
      items,
      dataSource: this.state.dataSource.cloneWithRows(itemsDataSource),
      ...otherState
    });
    AsyncStorage.setItem("items", JSON.stringify(items));
  }
}

export default App;