From 4c04963a4971f081b31a355ad6ba57cdecb8f8e0 Mon Sep 17 00:00:00 2001
From: Daniel Ku <danielku97@gmail.com>
Date: Sat, 3 Feb 2018 15:45:24 -0500
Subject: [PATCH] Daniel- Async February 3

---
 index.js                              | 30 +++++-----
 src/components/TasksList/TasksList.js | 83 +++++++++++++++++++++++++++
 src/components/TasksList/index.js     |  3 +
 src/components/TasksList/style.js     |  7 +++
 4 files changed, 108 insertions(+), 15 deletions(-)
 create mode 100644 src/components/TasksList/TasksList.js
 create mode 100644 src/components/TasksList/index.js
 create mode 100644 src/components/TasksList/style.js

diff --git a/index.js b/index.js
index 8a0b52b..655b388 100644
--- a/index.js
+++ b/index.js
@@ -1,20 +1,20 @@
 import React, { Component } from 'react';
-import { AppRegistry, Text, View, Button, TouchableOpacity } from 'react-native';
-import styles from './style'
+import { AppRegistry, Text, View, Button, TouchableOpacity, StyleSheet } from 'react-native';
+import TasksList from './src/components/TasksList';
 
-export default class AvalonApp extends Component {
-    render() {
-        return (
-            <View style={styles.main_container}>
-                <Text style={styles.title}>Avalon Mobile</Text>
-                
-                <TouchableOpacity style={styles.button}>
-                    <Text>Play</Text>
-                </TouchableOpacity>
-
-            </View>
-        );
-    }
+export default class AvalonApp extends Component { 
+  render () { 
+    return ( 
+      <View style={styles.container}>
+        <TasksList />
+      </View> 
+    ); 
+  } 
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+});
 AppRegistry.registerComponent('AvalonMobile', () => AvalonApp);
diff --git a/src/components/TasksList/TasksList.js b/src/components/TasksList/TasksList.js
new file mode 100644
index 0000000..d71a60e
--- /dev/null
+++ b/src/components/TasksList/TasksList.js
@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import { ListView, Text, TextInput, View, AsyncStorage } from 'react-native';
+import styles from './style'
+
+/*
+ Created by DK, remove this comment block later
+ -Referenced from this tutorial : https://www.packtpub.com/mapt/book/application_development/9781786464750/1
+ At this point, it has a basic text input into a list.
+ These lists are persisted using basic async storage functions
+*/
+export default class TasksList extends Component {
+  constructor (props) {
+    super (props);
+    const ds = new ListView.DataSource({
+      rowHasChanged: (r1, r2) => r1 !== r2
+    });
+
+    this.state = {
+      ds: new ListView.DataSource({
+        rowHasChanged: (r1, r2) => r1 !== r2
+      }),
+      listOfTasks: [],
+      text: ''
+    };
+  }
+
+  componentDidMount() {
+    this._updateList();
+  }
+
+  async _addTask () {
+    const listOfTasks = [...this.state.listOfTasks, this.state.text];
+
+    await AsyncStorage.setItem('listOfTasks', JSON.stringify(listOfTasks));
+    this._updateList();
+  }
+
+  async _updateList () {
+    let response = await AsyncStorage.getItem('listOfTasks');
+    let listOfTasks = await JSON.parse(response) || [];
+
+    this.setState({
+      listOfTasks
+    });
+
+    this._changeTextInputValue('');
+  }
+
+  _changeTextInputValue (text) {
+    this.setState({
+      text
+    });
+  }
+
+  _renderRowData (rowData) {
+    return (
+      <Text>{ rowData }</Text>
+    )
+  }
+
+  render () {
+    const dataSource =
+      this.state.ds.cloneWithRows(this.state.listOfTasks);
+    return (
+      <View style={ styles.container }>
+        <TextInput
+          autoCorrect={ false }
+          onChangeText={ (text) => this._changeTextInputValue(text) }
+          onSubmitEditing={ () => this._addTask() }
+          returnKeyType={ 'done' }
+          style={ styles.textInput }
+          value={ this.state.text }
+        />
+        <ListView
+          dataSource={ dataSource }
+          enableEmptySections={ true }
+          renderRow={ (rowData) => this._renderRowData(rowData) }
+        />
+      </View>
+    );
+  }
+
+}
\ No newline at end of file
diff --git a/src/components/TasksList/index.js b/src/components/TasksList/index.js
new file mode 100644
index 0000000..03074a8
--- /dev/null
+++ b/src/components/TasksList/index.js
@@ -0,0 +1,3 @@
+import TasksList from "./TasksList";
+
+export default TasksList
\ No newline at end of file
diff --git a/src/components/TasksList/style.js b/src/components/TasksList/style.js
new file mode 100644
index 0000000..15b5633
--- /dev/null
+++ b/src/components/TasksList/style.js
@@ -0,0 +1,7 @@
+import React, { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+ container: { 
+    flex: 1, 
+  } 
+});
\ No newline at end of file