TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-18 21:44:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix fetch data before component is mouted

Browse Source
This commit is contained in:
sosokker 2023-11-22 20:00:20 +07:00
parent 107a3d23f2
commit da2dc5eff8
7 changed files with 143 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/authentication/LoginPage.jsx
View File

@ -1,18 +1,17 @@
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { useNavigate, redirect } from "react-router-dom";
import { useGoogleLogin } from "@react-oauth/google";
import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import refreshAccessToken from "./refreshAcesstoken";
import axiosapi from "../../api/AuthenticationApi";
import { useAuth } from "../../hooks/authentication/IsAuthenticated";
import { FcGoogle } from "react-icons/fc";
import { useAuth } from "src/hooks/AuthHooks";
function LoginPage() {
const { setIsAuthenticated } = useAuth();
const Navigate = useNavigate();
const { isAuthenticated, setIsAuthenticated } = useAuth();
useEffect(() => {
if (!refreshAccessToken()) {
@ -43,15 +42,13 @@ function LoginPage() {
// On successful login, store tokens and set the authorization header
localStorage.setItem("access_token", res.data.access);
localStorage.setItem("refresh_token", res.data.refresh);
axiosapi.axiosInstance.defaults.headers["Authorization"] =
"Bearer " + res.data.access;
axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access;
setIsAuthenticated(true);
Navigate("/");
redirect("/");
})
.catch((err) => {
console.log("Login failed");
console.log(err);
setIsAuthenticated(false);
});
};
@ -71,7 +68,6 @@ function LoginPage() {
}
} catch (error) {
console.error("Error with the POST request:", error);
setIsAuthenticated(false);
}
},
onError: (errorResponse) => console.log(errorResponse),
@ -89,10 +85,7 @@ function LoginPage() {
}, []);
return (
<div
data-theme="night"
className="h-screen flex items-center justify-center"
>
<div data-theme="night" className="h-screen flex items-center justify-center">
{/* Particles Container */}
<div style={{ width: "0%", height: "100vh" }}>
<Particles
@ -206,11 +199,9 @@ function LoginPage() {
</button>
<div className="divider">OR</div>
{/* Login with Google Button */}
<button
className="btn btn-outline btn-secondary w-full "
onClick={() => googleLoginImplicit()}
>
<FcGoogle className="rounded-full bg-white"/>Login with Google
<button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
<FcGoogle className="rounded-full bg-white" />
Login with Google
</button>
{/* Forgot Password Link */}
<div className="justify-left">

101
frontend/src/components/dashboard/Areachart.jsx
View File

@ -1,90 +1,24 @@
import { AreaChart, Title } from "@tremor/react";
import React from "react";
import { useState, useEffect } from "react";
import axiosInstance from "src/api/AxiosConfig";
const fetchAreaChartData = async () => {
let res = await axiosInstance.get("/dashboard/weekly/");
console.log(res.data);
// const areaChartData = [
// {
// date: "Mon",
// "This Week": res.data[0]["This Week"],
// "Last Week": res.data[0]["Last Week"],
// },
// {
// date: "Tue",
// "This Week": res.data[1]["This Week"],
// "Last Week": res.data[1]["Last Week"],
// },
// {
// date: "Wed",
// "This Week": res.data[2]["This Week"],
// "Last Week": res.data[2]["Last Week"],
// },
// {
// date: "Th",
// "This Week": res.data[3]["This Week"],
// "Last Week": res.data[3]["Last Week"],
// },
// {
// date: "Fri",
// "This Week": res.data[4]["This Week"],
// "Last Week": res.data[4]["Last Week"],
// },
// {
// date: "Sat",
// "This Week": res.data[5]["This Week"],
// "Last Week": res.data[5]["Last Week"],
// },
// {
// date: "Sun",
// "This Week": res.data[6]["This Week"],
// "Last Week": res.data[6]["Last Week"],
// },
// ];
const areaChartData = [
{
date: "Mon",
"This Week": 1,
"Last Week": 2,
},
{
date: "Tue",
"This Week": 5,
"Last Week": 2,
},
{
date: "Wed",
"This Week": 7,
"Last Week": 9,
},
{
date: "Th",
"This Week": 10,
"Last Week": 3,
},
{
date: "Fri",
"This Week": 5,
"Last Week": 1,
},
{
date: "Sat",
"This Week": 7,
"Last Week": 8,
},
{
date: "Sun",
"This Week": 3,
"Last Week": 8,
},
];
return areaChartData;
};
const areaChartDataArray = await fetchAreaChartData();
export const AreaChartGraph = () => {
const [value, setValue] = React.useState(null);
const [areaChartDataArray, setAreaChartDataArray] = useState([]);
useEffect(() => {
const fetchAreaChartData = async () => {
try {
const response = await axiosInstance.get("/dashboard/weekly/");
const areaChartData = response.data;
setAreaChartDataArray(areaChartData);
} catch (error) {
console.error("Error fetching area chart data:", error);
}
};
fetchAreaChartData();
}, []);
return (
<>
<Title>Number of tasks statistics vs. last week</Title>
@ -95,7 +29,6 @@ export const AreaChartGraph = () => {
categories={["This Week", "Last Week"]}
colors={["neutral", "indigo"]}
yAxisWidth={30}
onValueChange={(v) => setValue(v)}
showAnimation
/>
</>

100
frontend/src/components/dashboard/Barchart.jsx
View File

@ -1,89 +1,24 @@
import { BarChart, Title } from "@tremor/react";
import React from "react";
import { useState, useEffect } from "react";
import axiosInstance from "src/api/AxiosConfig";
const fetchBarChartData = async () => {
let res = await axiosInstance.get("/dashboard/weekly/");
console.log(res.data);
// const barchartData = [
// {
// date: "Mon",
// "This Week": res.data[0]["Completed This Week"],
// "Last Week": res.data[0]["Completed Last Week"],
// },
// {
// date: "Tue",
// "This Week": res.data[1]["Completed This Week"],
// "Last Week": res.data[1]["Completed Last Week"],
// },
// {
// date: "Wed",
// "This Week": res.data[2]["Completed This Week"],
// "Last Week": res.data[2]["Completed Last Week"],
// },
// {
// date: "Th",
// "This Week": res.data[3]["Completed This Week"],
// "Last Week": res.data[3]["Completed Last Week"],
// },
// {
// date: "Fri",
// "This Week": res.data[4]["Completed This Week"],
// "Last Week": res.data[4]["Completed Last Week"],
// },
// {
// date: "Sat",
// "This Week": res.data[5]["Completed This Week"],
// "Last Week": res.data[5]["Completed Last Week"],
// },
// {
// date: "Sun",
// "This Week": res.data[6]["Completed This Week"],
// "Last Week": res.data[6]["Completed Last Week"],
// },
// ];
const barchartData = [
{
date: "Mon",
"This Week": 1,
"Last Week": 2,
},
{
date: "Tue",
"This Week": 5,
"Last Week": 2,
},
{
date: "Wed",
"This Week": 7,
"Last Week": 9,
},
{
date: "Th",
"This Week": 10,
"Last Week": 3,
},
{
date: "Fri",
"This Week": 5,
"Last Week": 1,
},
{
date: "Sat",
"This Week": 7,
"Last Week": 8,
},
{
date: "Sun",
"This Week": 3,
"Last Week": 8,
},
];
return barchartData;
};
const barchartDataArray = await fetchBarChartData();
export const BarChartGraph = () => {
const [value, setValue] = React.useState(null);
const [barchartDataArray, setBarChartDataArray] = useState([]);
useEffect(() => {
const fetchAreaChartData = async () => {
try {
const response = await axiosInstance.get("/dashboard/weekly/");
const barchartDataArray = response.data;
setBarChartDataArray(barchartDataArray);
} catch (error) {
console.error("Error fetching area chart data:", error);
}
};
fetchAreaChartData();
}, []);
return (
<>
<Title>Task completed statistics vs. last week</Title>
@ -94,7 +29,6 @@ export const BarChartGraph = () => {
categories={["This Week", "Last Week"]}
colors={["neutral", "indigo"]}
yAxisWidth={30}
onValueChange={(v) => setValue(v)}
showAnimation
/>
</>

51
frontend/src/components/dashboard/DonutChart.jsx
View File

@ -1,40 +1,37 @@
import { DonutChart } from "@tremor/react";
import axiosInstance from "src/api/AxiosConfig";
import { useState, useEffect } from "react";
const fetchDonutData = async () => {
try {
let res = await axiosInstance.get("/dashboard/stats/");
// let todoCount = res.data.todo_count;
// let recurrenceCount = res.data.recurrence_count;
let todoCount = 10;
let recurrenceCount = 15;
if (todoCount === undefined) {
todoCount = 0;
}
if (recurrenceCount === undefined) {
recurrenceCount = 0;
}
const donutData = [
{ name: "Todo", count: todoCount },
{ name: "Recurrence", count: recurrenceCount },
];
return donutData;
} catch (error) {
console.error("Error fetching donut data:", error);
return [];
}
};
const donutDataArray = await fetchDonutData();
export default function DonutChartGraph() {
const [donutData, setDonutData] = useState([]);
useEffect(() => {
const fetchDonutData = async () => {
try {
const response = await axiosInstance.get("/dashboard/stats/");
const todoCount = response.data.todo_count || 0;
const recurrenceCount = response.data.recurrence_count || 0;
const donutData = [
{ name: "Todo", count: todoCount },
{ name: "Recurrence", count: recurrenceCount },
];
setDonutData(donutData);
} catch (error) {
console.error("Error fetching donut data:", error);
}
};
fetchDonutData();
}, []);
return (
<DonutChart
className="mt-6"
data={donutDataArray}
data={donutData}
category="count"
index="name"
colors={["rose", "yellow", "orange"]}
onValueChange={(v) => setValue(v)}
showAnimation
radius={25}
/>

66
frontend/src/components/dashboard/KpiCard.jsx
View File

@ -1,39 +1,57 @@
import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react";
import React from "react";
import { useEffect, useState } from "react";
import axiosInstance from "src/api/AxiosConfig";
const fetchKpiCardData = async () => {
let res = await axiosInstance.get("/dashboard/stats/");
// let completedThisWeek = res.data["completed_this_week"];
// let completedLastWeek = res.data["completed_last_week"];
let completedThisWeek = 4;
let completedLastWeek = 23;
let percentage = (completedThisWeek / completedLastWeek) * 100;
let incOrdec = undefined;
if (completedThisWeek <= completedLastWeek) {
incOrdec = "moderateDecrease";
}
if (completedThisWeek > completedLastWeek) {
incOrdec = "moderateIncrease";
}
return { completedThisWeek, completedLastWeek, incOrdec, percentage };
};
const { kpiCardDataArray, completedThisWeek, completedLastWeek, incOrdec, percentage } = await fetchKpiCardData();
export default function KpiCard() {
const [kpiCardData, setKpiCardData] = useState({
completedThisWeek: 0,
completedLastWeek: 0,
incOrdec: undefined,
percentage: 0,
});
useEffect(() => {
const fetchKpiCardData = async () => {
try {
const response = await axiosInstance.get("/dashboard/stats/");
const completedThisWeek = response.data.completed_this_week || 0;
const completedLastWeek = response.data.completed_last_week || 0;
const percentage = (completedThisWeek / completedLastWeek) * 100;
let incOrdec = undefined;
if (completedThisWeek <= completedLastWeek) {
incOrdec = "moderateDecrease";
}
if (completedThisWeek > completedLastWeek) {
incOrdec = "moderateIncrease";
}
setKpiCardData({
completedThisWeek,
completedLastWeek,
incOrdec,
percentage,
});
} catch (error) {
console.error("Error fetching KPI card data:", error);
}
};
fetchKpiCardData();
}, []);
return (
<Card className="max-w-lg mx-auto">
<Flex alignItems="start">
<div>
<Metric>{completedThisWeek}</Metric>
<Metric>{kpiCardData.completedThisWeek}</Metric>
</div>
<BadgeDelta deltaType={incOrdec}>{percentage.toFixed(0)}%</BadgeDelta>
<BadgeDelta deltaType={kpiCardData.incOrdec}>{kpiCardData.percentage.toFixed(0)}%</BadgeDelta>
</Flex>
<Flex className="mt-4">
<Text className="truncate">vs. {completedLastWeek} (last week)</Text>
<Text className="truncate">vs. {kpiCardData.completedLastWeek} (last week)</Text>
</Flex>
<ProgressBar value={percentage} className="mt-2" />
<ProgressBar value={kpiCardData.percentage} className="mt-2" />
</Card>
);
}

52
frontend/src/components/dashboard/ProgressCircle.jsx
View File

@ -1,29 +1,35 @@
import { Card, Flex, ProgressCircle, Text } from "@tremor/react";
import React from "react";
import { Card, Flex, ProgressCircle } from "@tremor/react";
import { useState, useEffect } from "react";
import axiosInstance from "src/api/AxiosConfig";
const fetchProgressData = async () => {
try {
let res = await axiosInstance.get("/dashboard/stats/");
// let completedLastWeek = res.data.completed_last_week;
// let assignLastWeek = res.data.tasks_assigned_last_week;
let completedLastWeek = 15;
let assignLastWeek = 35;
if (completedLastWeek === undefined) {
completedLastWeek = 0;
}
if (assignLastWeek === undefined) {
assignLastWeek = 0;
}
return (completedLastWeek / assignLastWeek) * 100;
} catch (error) {
console.error("Error fetching progress data:", error);
return 0;
}
};
const progressData = await fetchProgressData();
export default function ProgressCircleChart() {
const [progressData, setProgressData] = useState(0);
useEffect(() => {
const fetchProgressData = async () => {
try {
const response = await axiosInstance.get("/dashboard/stats/");
let completedLastWeek = response.data.completed_last_week || 0;
let assignLastWeek = response.data.tasks_assigned_last_week || 0;
if (completedLastWeek === undefined) {
completedLastWeek = 0;
}
if (assignLastWeek === undefined) {
assignLastWeek = 0;
}
const progress = (completedLastWeek / assignLastWeek) * 100;
setProgressData(progress);
} catch (error) {
console.error("Error fetching progress data:", error);
}
};
fetchProgressData();
}, []);
return (
<Card className="max-w-lg mx-auto">
<Flex className="flex-col items-center">

9
frontend/src/components/navigations/Navbar.jsx
View File

@ -1,18 +1,17 @@
import * as React from "react";
import { useNavigate } from "react-router-dom";
import axiosapi from "../../api/AuthenticationApi";
import { useAuth } from "../../hooks/authentication/IsAuthenticated";
import { useAuth } from "src/hooks/AuthHooks";
const settings = {
Profile: '/profile',
Account: '/account',
Profile: "/profile",
Account: "/account",
};
function NavBar() {
const Navigate = useNavigate();
const { isAuthenticated, setIsAuthenticated } = useAuth();
console.log(isAuthenticated);
const logout = () => {
axiosapi.apiUserLogout();
setIsAuthenticated(false);