updated home page and functionality
This commit is contained in:
parent
858aa31c03
commit
463e890e88
1 changed files with 175 additions and 9 deletions
|
|
@ -1,12 +1,118 @@
|
|||
import { Image, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
|
||||
import React, { useState } from 'react'
|
||||
import { Image, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
|
||||
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 ? (
|
||||
<View></View>
|
||||
{todos?.length > 0 ? (
|
||||
<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}}>
|
||||
<View style={{marginTop: 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'/>
|
||||
<ModalContent style={{width:"100%", height:280}}>
|
||||
<View style={{marginTop: 10, flexDirection: "row", alignItems: "center", gap: 10}}>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue