app-todo-react-native/App.js at master · aledgar/app-todo-react-native · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React from 'react';
import { StyleSheet, Text, View, AsyncStorage, Button } from 'react-native';
import Header from './Header';
import Body from './Body';
import { setTimeout } from 'core-js';

export default class App extends React.Component {

  constructor(){
    super();
    this.state = {
      tarea:[],
      nombreTarea:"",
      estado:true
    }
  }


  componentDidMount(){

    this.getTareas();
  }

  setNombreTarea = (value) =>{
    console.log(":"+value);
    this.setState({
      nombreTarea:value
    });
  }

  setTarea = () =>{
    // console.log("Enviado tarea "+this.state.nombreTarea);
    const tareaNueva = [...this.state.tarea, {texto:this.state.nombreTarea, key:Date.now()}];
    this.saveTareas(tareaNueva);
    this.setState({
      tarea: tareaNueva,
      nombreTarea:""
    });
  }

  deleteTarea = (id) =>{
    const nuevasTareas = this.state.tarea.filter((elemento)=>{
      return elemento.key!==id;
    });
    this.saveTareas(nuevasTareas);
    this.setState({
      tarea:nuevasTareas
    });
  }

  saveTareas = (tareas) =>{
    AsyncStorage.setItem('@appToDo:tareas',JSON.stringify(tareas))
    .then((valor)=>{
      console.log(valor);
    })
    .catch((e)=>{
      console.log(e);
    })
  }

  getTareas = () =>{
    AsyncStorage.getItem('@appToDo:tareas')
    .then((valor)=>{
      if(valor!==null){
        const nuevasTareas = JSON.parse(valor);
        setTimeout(()=>{
          this.setState({
            estado:false
          })
        },5000)
        this.setState({
          tarea:nuevasTareas
        })
      }
    })
    .catch((e)=>{
      console.log(e);
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Header
          nombreTarea={this.setNombreTarea}
          agregarTarea={this.setTarea}
          limpiarTarea={this.state.nombreTarea}
          />
        <Body
          datos={this.state.tarea}
          eliminar={this.deleteTarea}
          estado={this.state.estado}
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  txt:{
    paddingHorizontal:16,
    fontSize:24,
    color:"green"
  }
});