Adds automatic polling and update when team or repository calculation… (#87)

* Adds automatic polling and update when team or repository calculation is created

* Fixes linter issues

* Fixes linter

* Fixes typo on repositories flow calculation button and linter

Author: sudoFerraz

src/app/(dashboard)/repositories/[repositoryId]/page.tsx

@@ -53,6 +53,7 @@ export default function TeamDetailsPage({ params }: PageProps) {
   const [hasContributionRequest, setHasContributionRequest] = useState(false);
   const [contributionCalculation, setContributionCalculation] =
     useState<ContributionCalculation>();
+  const [pollingCount, setPollingCount] = useState<number>(0);
 
   const router = useRouter();
 
@@ -141,6 +142,22 @@ export default function TeamDetailsPage({ params }: PageProps) {
     }
   };
 
+  useEffect(() => {
+    if (hasContributionRequest) {
+      const delayDebounceFn = setTimeout(() => {
+        handleFetchContributionRequest();
+        setPollingCount(pollingCount + 1);
+      }, 5000);
+      return () => clearTimeout(delayDebounceFn);
+    } else if (pollingCount > 0 && !hasContributionRequest) {
+      handleFetchTeams();
+      handleFetchUserCreds();
+      handleFetchRegisteredRepos();
+      handleFetchContributionCalculation();
+      handleFetchTeamOverview();
+    }
+  }, [hasContributionRequest, pollingCount]);
+
   return (
     <>
       <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
@@ -162,10 +179,10 @@ export default function TeamDetailsPage({ params }: PageProps) {
               <Button
                 variant="default"
                 onClick={() => {
-                  router.push("/teams");
+                  router.push("/repositories");
                 }}
               >
-                Return to teams
+                Return to repositories
               </Button>
             </div>
           </div>

src/app/(dashboard)/teams/[teamId]/page.tsx

@@ -22,14 +22,7 @@ import { LoadingCircle } from "@/components/navigation/loading";
 import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
 import { TeamContributionTable } from "./teamContributionTable";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 interface PageProps {
   params: { teamId: string };
@@ -60,6 +53,7 @@ export default function TeamDetailsPage({ params }: PageProps) {
   const [hasContributionRequest, setHasContributionRequest] = useState(false);
   const [contributionCalculation, setContributionCalculation] =
     useState<ContributionCalculation>();
+  const [pollingCount, setPollingCount] = useState<number>(0);
 
   const router = useRouter();
 
@@ -81,6 +75,13 @@ export default function TeamDetailsPage({ params }: PageProps) {
     }
   }, [registeredGitRepos, team, userCredDtos]);
 
+  const handleFetchUserCreds = async () => {
+    const { data } = await axios.get(`/api/cred?team_id=${teamId}`);
+    if (data.success) {
+      setUserCredDtos(data.userCreds);
+    }
+  };
+
   const handleFetchContributionRequest = async () => {
     const { data } = await axios.get(
       `/api/contribution-request?team_id=${teamId}`,
@@ -141,12 +142,21 @@ export default function TeamDetailsPage({ params }: PageProps) {
     }
   }, [userCredDtos]);
 
-  const handleFetchUserCreds = async () => {
-    const { data } = await axios.get(`/api/cred?team_id=${teamId}`);
-    if (data.success) {
-      setUserCredDtos(data.userCreds);
+  useEffect(() => {
+    if (hasContributionRequest) {
+      const delayDebounceFn = setTimeout(() => {
+        handleFetchContributionRequest();
+        setPollingCount(pollingCount + 1);
+      }, 5000);
+      return () => clearTimeout(delayDebounceFn);
+    } else if (pollingCount > 0 && !hasContributionRequest) {
+      handleFetchTeams();
+      handleFetchUserCreds();
+      handleFetchRegisteredRepos();
+      handleFetchContributionCalculation();
+      handleFetchTeamOverview();
     }
-  };
+  }, [hasContributionRequest, pollingCount]);
 
   return (
     <>

src/app/(dashboard)/teams/[teamId]/teamInsights.tsx

@@ -17,11 +17,11 @@ export function TeamInsights({ overview }: TeamInsightsProps) {
         </CardHeader>
         <CardContent>
           <div className="text-2xl font-bold">
-            {overview?.totalScore.toFixed(2)}
+            {overview?.totalScore?.toFixed(2) || 0}
           </div>
           <div className="flex justify-between">
             <p className="pt-1 text-xs text-muted-foreground">
-              +{overview?.weekGrowth.toFixed(2)}% impact this week
+              +{overview?.weekGrowth?.toFixed(2) || 0}% impact this week
             </p>
             <HoverExplainer
               title="How the current week compares to the total engagement and impact"
@@ -42,12 +42,12 @@ export function TeamInsights({ overview }: TeamInsightsProps) {
         </CardHeader>
         <CardContent>
           <div className="text-2xl font-bold">
-            {overview?.weekScore.toFixed(2)}
+            {overview?.weekScore?.toFixed(2) || 0}
           </div>
+
           <div className="flex justify-between">
             <p className="pt-1 text-xs text-muted-foreground">
-              {overview?.wowScore ? (overview?.wowScore > 0 ? "+" : "-") : ""}{" "}
-              {overview?.wowScore.toFixed(2)}% over last week
+              {overview?.wowScore?.toFixed(2) || 0}% over last week
             </p>
             <HoverExplainer
               title="How the current week compares to the previous week"

src/app/(dashboard)/teams/new/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import axios from "axios";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import BreadCrumb from "@/components/breadcrumbs";
 import { CreateTeamStepper } from "@/components/createTeamSteps";
 import { CreateTeamCard } from "@/components/teams/createTeam";
@@ -11,7 +11,7 @@ import { Team } from "@/app/api/teams/fetchUserTeams";
 import { LoadingCircle } from "@/components/navigation/loading";
 import { Button } from "@/components/ui/button";
 import { TeamCalculationCreated } from "@/components/teams/teamCalculationCreated";
-import { useRouter } from "next/navigation";
+import { redirect, useRouter } from "next/navigation";
 import { toast } from "sonner";
 import TeamGithubRepositoriesTable from "@/components/teams/teamGithubRepositoriesTable";
 
@@ -61,6 +61,12 @@ export default function CreateTeamPage() {
     }
   };
 
+  useEffect(() => {
+    if (currentStep === 2) {
+      redirect(`/teams/${selectedTeam?.id}`);
+    }
+  }, [currentStep]);
+
   return (
     <>
       <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">

src/components/teams/teamCalculationCreated.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { EvervaultCard, Icon } from "../ui/evervault-card";