80 lines
No EOL
2.6 KiB
JavaScript
80 lines
No EOL
2.6 KiB
JavaScript
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import React, { useEffect, useState } from 'react';
|
|
import moment from 'moment';
|
|
import {Calendar} from "react-native-calendars";
|
|
import axios from "axios"
|
|
import { Feather } from '@expo/vector-icons';
|
|
import { Buffer } from 'buffer';
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
|
|
|
|
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 index = () => {
|
|
const today = moment().format("YYYY-MM-DD");
|
|
const [selectedDate, setSelectedDate] = useState(today);
|
|
const [todos, setTodos] = useState([]);
|
|
|
|
const fetchCompletedTodos = () => {
|
|
try {
|
|
getToken().then( async (resp) => {
|
|
let userId = resp;
|
|
|
|
const res = await axios.get(`http://localhost:3030/users/${userId}/todos/completed/${selectedDate}`);
|
|
const completedTodos = res.data.completedTodos || [];
|
|
|
|
setTodos(completedTodos);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.log("Error", error)
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
fetchCompletedTodos();
|
|
|
|
}, [selectedDate]);
|
|
//Daypress
|
|
const handleDayPress = (day) => {
|
|
setSelectedDate(day.dateString)
|
|
}
|
|
|
|
|
|
return (
|
|
<View style={{flex:1, backgroundColor: "white"}}>
|
|
<Calendar onDayPress={handleDayPress}
|
|
theme = {{calendarBackground: "white", todayTextColor: 'red', arrowColor: "black",}}
|
|
markedDates={{[selectedDate]: {selected: true, selectedColor: "red"}}}
|
|
/>
|
|
{todos?.length > 0 && (
|
|
<View style={{marginTop: 20, marginHorizontal: 10}}>
|
|
<View style={{flexDirection:"row", alignItems: "center", gap: 10}}>
|
|
<Text style={{marginBottom: 20, fontSize: 16}}>You completed <Text style={{fontWeight: 600, color: "#61677A"}}>{todos.length}</Text> tasks</Text>
|
|
</View>
|
|
{todos.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>
|
|
)
|
|
}
|
|
|
|
export default index
|
|
|
|
const styles = StyleSheet.create({}) |