updated home page and functionality

todo_app/app/(tabs)/home/index.js

@@ -1,12 +1,118 @@
-import { Image, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
+import { Image, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react';
 import { AntDesign } from '@expo/vector-icons';
 import { BottomModal, ModalContent, ModalTitle, SlideAnimation } from 'react-native-modals';
+import { Entypo } from '@expo/vector-icons';
+import { Feather } from '@expo/vector-icons';
+import axios from "axios"
+import moment from 'moment';
+import { Buffer } from 'buffer';
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+
 
 const index = () => {
-  const todo = [];
+  const [todos, setTodos] = useState([]);
   const [modalVisible, setModalVisible] = useState(false);
-  const [addToDo, setAddToDo] = useState('');
+  const [todo, setTodo] = useState('');
+  const [category, setCategory] = useState('all');
+  const [pendingTodos, setPendingTodos] = useState([]);
+  const [compledTodos, setCompletedTodos] = useState([]);
+  const [markCompleted, setMarkCompleted] = useState(false);
+  const todayDate = moment().format("MMM Do YYYY");
+
+  const getToken = async () => {
+    try {
+      let token = await AsyncStorage.getItem('authToken'); // get the authToken stored in AsyncStorage from login.js
+      let decodeToken = JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
+      let userId = decodeToken.userId;
+      return userId;
+    } catch (e) {
+      // error reading value
+      console.log(e);
+    }
+  };
+
+  const addTodo = async() => {
+    try {
+      const todoData = {
+        title:todo,
+        category:category,
+      }
+
+      getToken().then((resp) => {
+        let userId = resp;
+        axios.post(`http://localhost:3030/todos/${userId}`, todoData).then((res) => {
+      })
+
+      }).catch((error) => {
+        console.log("Error", error);
+      })  
+      await getUserTodos();
+      setModalVisible(false);
+      setTodo('');
+
+    } catch (error) {
+      console.log("Error", error)
+    }
+  }
+  
+  useEffect(() => {
+    getUserTodos();
+  }, [markCompleted, modalVisible])
+
+  const getUserTodos = () => {
+    try {
+      getToken().then( async(resp) => {
+        let userId = resp;
+        const res = await axios.get(`http://localhost:3030/users/${userId}/todos`);
+        setTodos(res.data.todos);
+
+        const fetchTodos = res.data.todos || [];
+        const pending = fetchTodos.filter((todo) => todo.status !== "completed");
+        const completed = fetchTodos.filter((todo) => todo.status === "completed");
+  
+        setPendingTodos(pending);
+        setCompletedTodos(completed);
+      })
+
+    } catch (error) {
+      console.log("Error", error)
+    }
+  };
+  
+  const markTodocompleted = async (todoId) => {
+    try {
+      setMarkCompleted(true);
+
+      const res = await axios.patch(`http://localhost:3030/todos/${todoId}/complete`);
+    } catch (error) {
+      console.log("Error", error)
+    }
+  }
+  //data
+  const suggestion = [
+    {
+      id: 1,
+      todo: "Walk the dog"
+    },
+    {
+      id: 2,
+      todo: "Go to the gym"
+    },
+    {
+      id: 3,
+      todo: "Call mom"
+    },
+    {
+      id: 4,
+      todo: "Get goceries"
+    },
+    {
+      id: 5,
+      todo: "5 minute meditation"
+    },
+  ]
 
   return (
     <>
@@ -26,8 +132,39 @@ const index = () => {
       </View>
       <ScrollView style={{flex:1, backgroundColor: "white"}}>
           <View style={{padding: 10}}>
-            {todo?.length > 0 ? (
+            {todos?.length > 0 ? (
-              <View></View>
+              <View>
+                {pendingTodos?.length > 0 && 
+                  <>
+                    <Text style={{fontSize: 20, fontWeight: 600, marginBottom: 10}}>{todayDate}</Text>
+                    <Text style={{marginBottom: 20, fontSize: 16}}>You have <Text style={{fontWeight: 600, color: "#61677A"}}>{pendingTodos.length}</Text> tasks to do!</Text>
+                  </>
+                } 
+                  {pendingTodos.map((item, index) => (
+                    <Pressable key={index} style={{backgroundColor: "#EEEEEE", marginBottom: 10, padding: 5, borderRadius: 5}}>
+                      <View style={{flexDirection:"row", alignItems: "center", gap: 10}}>
+                        <Entypo onPress={() => markTodocompleted(item?._id)} name="circle" size={15} color="black" />
+                        <Text style={{flex: 1}}>{item.title}</Text>
+                      </View>
+                    </Pressable>
+                  ))}
+                  
+                  {compledTodos?.length > 0 && (
+                    <View style={{marginTop: 20}}>
+                      <View style={{flexDirection:"row", alignItems: "center", gap: 10}}>
+                        <Text style={{marginBottom: 20, fontSize: 16}}>You have completed <Text style={{fontWeight: 600, color: "#61677A"}}>{compledTodos.length}</Text> tasks</Text>
+                      </View>
+                      {compledTodos.map((item, index) => (
+                        <Pressable key={index} style={{backgroundColor: "#EEEEEE", marginBottom: 10, padding: 5, borderRadius: 5}}>
+                          <View style={{flexDirection:"row", alignItems: "center", gap: 10}}>
+                            <Feather name="check-circle" size={15} color="#1A5319" />
+                            <Text style={{flex: 1, textDecorationLine: "line-through", color: "#1A5319"}}>{item.title}</Text>
+                          </View>
+                        </Pressable>
+                      ))}
+                    </View>
+                  )}               
+              </View>
             ) : (
               <View style={{flex:1, justifyContent:"center", alignItems:"center", marginTop:150, marginLeft:"auto", marginRight:"auto"}}>
                 <Image 
@@ -59,9 +196,38 @@ const index = () => {
       visible={modalVisible}
       onTouchOutside={() => setModalVisible(!modalVisible)}
       >
-        <ModalContent style={{width:"100%", height:200}}>
+        <ModalContent style={{width:"100%", height:280}}>
-          <View style={{marginTop: 10}}>
+          <View style={{marginTop: 10, flexDirection: "row", alignItems: "center", gap: 10}}>
-            <TextInput value={addToDo} onChangeText={(text) => setAddToDo(text)} style={{padding:10, borderColor: "#61677A", borderRadius:5, borderWidth:1, flex:1, outlineStyle: 'none', color: "#31363F"}} placeholder='Add your new task'/>
+            <TextInput value={todo} onChangeText={(text) => setTodo(text)} style={{padding:10, borderColor: "#61677A", borderRadius:5, borderWidth:1, flex:1, outlineStyle: 'none', color: "#31363F"}} placeholder='Add your new task'/>
+            <Entypo onPress={addTodo} name="add-to-list" size={24} color="black" />
+          </View>
+
+          <Text style={{marginTop: 10, fontWeight: 600}}>Category:</Text>
+          <View style={{flexDirection: "row", alignItems: "center", gap: 10, marginVertical: 10}}>
+            <Pressable onPress={() => setCategory('personal')} style={{backgroundColor: "#D8D9DA", padding: 5, borderRadius: 5,}}>
+              <Text>Personal</Text>
+            </Pressable>
+
+            <Pressable onPress={() => setCategory('work')} style={{backgroundColor: "#D8D9DA", padding: 5, borderRadius: 5}}>
+              <Text>Work</Text>
+            </Pressable>
+
+            <Pressable onPress={() => setCategory('house')} style={{backgroundColor: "#D8D9DA", padding: 5, borderRadius: 5}}>
+              <Text>House</Text>
+            </Pressable>
+
+            <Pressable onPress={() => setCategory('social')} style={{backgroundColor: "#D8D9DA", padding: 5, borderRadius: 5}}>
+              <Text>Social</Text>
+            </Pressable>
+          </View>
+
+          <Text style={{marginTop: 10, fontWeight: 600}}>Suggestions:</Text>
+          <View style={{flexDirection: "row", alignItems: "center", gap: 10, marginVertical: 10, flexWrap: "wrap"}}>
+            {suggestion?.map((item, index) => 
+            <Pressable onPress={() => setTodo(item?.todo)} key={index} style={{backgroundColor: "#EEEEEE", padding: 5, borderRadius: 5}}>
+              <Text>{item.todo}</Text>
+            </Pressable>
+            )}
           </View>
         </ModalContent>
       </BottomModal>