Merge pull request #1 from ArthurCottey/Arthur-COTTEY

Arthur cottey

App.js

@@ -1,20 +1,104 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React, {useState} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  KeyboardAvoidingView,
+  TextInput,
+  TouchableOpacity,
+  Platform,
+  Keyboard, ScrollView
+} from 'react-native';
+import Task from './components/Task';
 
 export default function App() {
+  const [task, setTask] = useState();
+  const [taskItems, setTaskItems] = useState([])
+
+  const handleAddTask = () => {
+    Keyboard.dismiss()
+    setTaskItems([...taskItems, task])
+    setTask(null);
+  }
+
+  const completeTask = index => {
+    let itemsCopy = [...taskItems]
+    itemsCopy.splice(index, 1)
+    setTaskItems(itemsCopy)
+  }
+
   return (
     <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
+      <View style={styles.tasksWrapper}>
+        <Text style={styles.sectionTitle}>Today's tasks</Text>
+        <ScrollView style={styles.items}>
+          {
+            taskItems.map((item, index) => {
+              return (
+                  <TouchableOpacity key={index} onPress={() => completeTask(index)}>
+                    <Task text={item} />
+                  </TouchableOpacity>
+              )
+            })
+          }
+        </ScrollView>
+      </View>
+
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.writeTaskWrapper}>
+        <TextInput style={styles.input} placeholder={'Write a task'} value={task} onChangeText={text => setTask(text)}/>
+        <TouchableOpacity onPress={() => handleAddTask()}>
+          <View style={styles.addWrapper}>
+            <Text style={styles.addText}>+</Text>
+          </View>
+        </TouchableOpacity>
+      </KeyboardAvoidingView>
+
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: '#E8EAED'
+  },
+  tasksWrapper: {
+    paddingTop: 80,
+    paddingHorizontal: 20
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: 'Bold'
+  },
+  items: {
+    marginTop: 30
+  },
+  writeTaskWrapper: {
+    position: "absolute",
+    bottom: 50,
+    width: '100%',
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center"
+  },
+  input: {
+    padding: 15,
+    backgroundColor: '#fff',
+    width: 250,
+    borderRadius: 60,
+    borderColor: '#C0C0C0',
+    borderWidth: 1
+  },
+  addWrapper: {
+    height: 60,
+    width: 60,
     backgroundColor: '#fff',
-    alignItems: 'center',
+    borderRadius: 60,
     justifyContent: 'center',
+    alignItems: "center",
+    borderColor: '#C0C0C0',
+    borderWidth: 1
   },
+  addText: {},
 });

components/Task.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+
+const Task = (props) => {
+  return (
+      <View style={styles.item}>
+          <View style={styles.itemLeft}>
+            <View style={styles.square}></View>
+              <Text style={styles.itemText}>{props.text}</Text>
+          </View>
+          <View style={styles.circular}>
+
+          </View>
+      </View>
+  )
+}
+
+const styles = StyleSheet.create({
+    item: {
+        backgroundColor: '#fff',
+        padding: 15,
+        borderRadius: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 20
+    },
+    itemLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap'
+    },
+    square: {
+        width: 24,
+        height: 24,
+        backgroundColor: '#55BCF6',
+        opacity: 0.4,
+        borderRadius: 5,
+        marginRight: 15
+    },
+    itemText: {
+        maxWidth: '80%'
+    },
+    circular: {
+        width: 12,
+        height: 12,
+        borderColor: '#55BCF6',
+        borderWidth: 2,
+        borderRadius: 12
+    }
+});
+
+export default Task;