106 lines
No EOL
3.5 KiB
JavaScript
106 lines
No EOL
3.5 KiB
JavaScript
import { Dimensions, Image, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import React, { useEffect, useState } from 'react';
|
|
import axios from "axios";
|
|
import {BarChart} from "react-native-chart-kit";
|
|
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 [completedTasks, setCompletedTasks] = useState(0);
|
|
const [pendingTasks, setPendingTasks] = useState(0);
|
|
|
|
const fetchTaskData = () => {
|
|
try {
|
|
|
|
getToken().then( async (resp) => {
|
|
let userId = resp;
|
|
|
|
const res = await axios.get(`http://localhost:3030/users/${userId}/todos/count`);
|
|
const {totalCompletedTodos, totalPendingTodos} = res.data;
|
|
|
|
setCompletedTasks(totalCompletedTodos);
|
|
setPendingTasks(totalPendingTodos);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.log("Error", error)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchTaskData();
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<View style={{marginHorizontal:20, marginVertical:20, alignItems: "center", flexDirection: "row", gap: 10}}>
|
|
<Pressable style={{marginRight: "auto"}}>
|
|
<Text style={{color: "black", textAlign: "center", fontSize: 20, fontWeight: 600}}>Keep Tracking</Text>
|
|
</Pressable>
|
|
</View>
|
|
<View style={{padding: 10, flex: 1, backgroundColor: "white"}}>
|
|
<View style={{marginTop: 10, marginHorizontal:10}}>
|
|
<Text style={{fontSize: 16, fontWeight: 600}}>Overview</Text>
|
|
<View style={{flexDirection: "row", alignItems: "center", gap: 10, marginVertical: 10}}>
|
|
<View style={{padding:10, backgroundColor: "#E8C4C4", borderRadius: 5, flex:1, justifyContent: "center", alignItems: "center"}}>
|
|
<Text style={{color: "#CE7777", fontWeight: 600}}>{pendingTasks}</Text>
|
|
<Text style={{color: "#CE7777", fontWeight: 600}}>Pending Tasks</Text>
|
|
</View>
|
|
|
|
<View style={{padding:10, backgroundColor: "#C8DBBE", borderRadius: 5, flex:1, justifyContent: "center", alignItems: "center"}}>
|
|
<Text style={{color: "#829460", fontWeight: 600}}>{completedTasks}</Text>
|
|
<Text style={{color: "#829460", fontWeight: 600}}>Completed Tasks</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{/*========== chart =========*/}
|
|
<BarChart
|
|
data={{
|
|
labels: ["Pending", "Completed"],
|
|
datasets: [
|
|
{
|
|
data: [pendingTasks, completedTasks],
|
|
},
|
|
],
|
|
}}
|
|
width={Dimensions.get("window").width - 20}
|
|
height={200}
|
|
yAxisInterval={2}
|
|
chartConfig={{
|
|
backgroundColor: "#BFACE2",
|
|
backgroundGradientFrom: "#BCCEF8",
|
|
backgroundGradientTo: "#F3E8FF",
|
|
decimalPlaces: 2,
|
|
color: (opacity = 1) => `rgba(106, 90, 205, ${opacity})`,
|
|
labelColor: (opacity = 1) => `rgba(108, 56, 172, ${opacity})`,
|
|
style: {
|
|
borderRadius: 5
|
|
},
|
|
}}
|
|
style={{
|
|
borderRadius: 10,
|
|
marginTop: 10
|
|
}}
|
|
/>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default index
|
|
|
|
const styles = StyleSheet.create({}) |