Fix fetch data before component is mouted

frontend/src/components/authentication/LoginPage.jsx

@@ -1,18 +1,17 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+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"] =
+        axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access;
-          "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
+    <div data-theme="night" className="h-screen flex items-center justify-center">
-      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
+          <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
-            className="btn btn-outline btn-secondary w-full "
+            <FcGoogle className="rounded-full bg-white" />
-            onClick={() => googleLoginImplicit()}
+            Login with Google
-          >
-            <FcGoogle className="rounded-full bg-white"/>Login with Google
           </button>
           {/* Forgot Password Link */}
           <div className="justify-left">

frontend/src/components/dashboard/Areachart.jsx

@@ -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
       />
     </>

frontend/src/components/dashboard/Barchart.jsx

@@ -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
       />
     </>

frontend/src/components/dashboard/DonutChart.jsx

@@ -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}
     />

frontend/src/components/dashboard/KpiCard.jsx

@@ -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>
   );
 }

frontend/src/components/dashboard/ProgressCircle.jsx

@@ -1,29 +1,35 @@
-import { Card, Flex, ProgressCircle, Text } from "@tremor/react";
+import { Card, Flex, ProgressCircle } from "@tremor/react";
-import React from "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">

frontend/src/components/navigations/Navbar.jsx

@@ -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',
+  Profile: "/profile",
-  Account: '/account',
+  Account: "/account",
 };
 
 function NavBar() {
   const Navigate = useNavigate();
-
   const { isAuthenticated, setIsAuthenticated } = useAuth();
 
+  console.log(isAuthenticated);
   const logout = () => {
     axiosapi.apiUserLogout();
     setIsAuthenticated(false);