240 lines
No EOL
9.6 KiB
JavaScript
240 lines
No EOL
9.6 KiB
JavaScript
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 [todos, setTodos] = useState([]);
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
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 (
|
|
<>
|
|
<View style={{marginHorizontal:20, marginVertical:20, alignItems: "center", flexDirection: "row", gap: 10}}>
|
|
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
|
|
<Text style={{color: "white", textAlign: "center"}}>All</Text>
|
|
</Pressable>
|
|
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
|
|
<Text style={{color: "white", textAlign: "center"}}>Work</Text>
|
|
</Pressable>
|
|
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center", marginRight: "auto"}}>
|
|
<Text style={{color: "white", textAlign: "center"}}>Personal</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => setModalVisible(!modalVisible)}>
|
|
<AntDesign name="plus" size={24} color="black" />
|
|
</Pressable>
|
|
</View>
|
|
<ScrollView style={{flex:1, backgroundColor: "white"}}>
|
|
<View style={{padding: 10}}>
|
|
{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
|
|
style={{width: 100, height: 100, resizeMode: "containe"}}
|
|
source={{
|
|
uri:"./assets/images/to-do.png",
|
|
}}
|
|
/>
|
|
<Text style={{fontSize:16, fontWeight:600, marginTop: 20, textAlign:"center"}}>Hooray! There is no tasks</Text>
|
|
<Pressable onPress={() => setModalVisible(!modalVisible)} style={{backgroundColor: "black", marginTop: 20, padding:5, borderRadius: 5}}>
|
|
<Text style={{fontSize:14, fontWeight:600, textAlign:"center", color: "white"}}>Add task <AntDesign name="plus" size={16} color="white" /></Text>
|
|
</Pressable>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<BottomModal
|
|
onBackdropPress={() => setModalVisible(!modalVisible)}
|
|
onHardwareBackPress={() => setModalVisible(!modalVisible)}
|
|
swipeDirection={['up', 'down']}
|
|
swipeThreshold={200}
|
|
modalTitle={<ModalTitle title="Add Task"/>}
|
|
modalAnimation={
|
|
new SlideAnimation({
|
|
slideFrom: 'bottom',
|
|
})
|
|
}
|
|
visible={modalVisible}
|
|
onTouchOutside={() => setModalVisible(!modalVisible)}
|
|
>
|
|
<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>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default index
|
|
|
|
const styles = StyleSheet.create({}) |