DEAR-122 wip

24FSIIT16 · Jul 19, 2024 · d33b3ca · d33b3ca
1 parent d10694e
commit d33b3ca
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 19 deletions.
diff --git a/app/(main)/(home)/page.tsx b/app/(main)/(home)/page.tsx
@@ -6,49 +6,70 @@ import Loading from '@components/Loading/Loading';
 import Error from '@components/Error/Error';
 import { useAuth } from '@providers/AuthProvider';
 import { Alert, AlertDescription, AlertTitle } from '@components/ui/Alert/Alert';
-import { DollarSign, Laugh, Megaphone } from 'lucide-react';
+import { DollarSign, Megaphone } from 'lucide-react';
 import WorkKindSurvey from '@components/Surveys/WorkKindSurvey';
 import HappinessSurvey from '@components/Surveys/HappinessSurvey';
 import Feedback from '@components/Surveys/Feedback';
 import BasicSmallCard from '@components/Cards/Basic';
-import { SubmitHappinessScoreDTO } from '@/types/SurveyType';
+import { AverageScoreResponse, SubmitHappinessScoreDTO } from '@/types/SurveyType';
 import useSurveyClient from '@hooks/useSurveyClient';
 import { toast } from '@components/ui/Toast/use-toast';
-import { Button } from '@components/ui/Buttons/Button';
+import { useState } from 'react';
+import HappinessButton from '@components/Surveys/HappinessButton';
 
 const Home: React.FC = () => {
   const { user, isLoading, error } = useAuth();
   const router = useRouter();
-  const { submitHappinessScore } = useSurveyClient();
+  const { submitHappinessScore, getAverageScore } = useSurveyClient();
+  const [averageScore, setAverageScore] = useState<AverageScoreResponse>();
 
   React.useEffect(() => {
     if (!isLoading && user && !user.hasTeam) {
       router.push('/onboarding');
     }
   }, [isLoading, user, router]);
 
+  const fetchAverageScore = async () => {
+    if (!user) return;
+    try {
+      const response = await getAverageScore(user.id);
+      setAverageScore(response.data);
+    } catch (error) {
+      toast({
+        title: 'Error!',
+        description: `Fetching average score `,
+        variant: 'destructive',
+      });
+    }
+  };
+
   const handleHappinessSubmit = async (score: number) => {
     const happinessScore: SubmitHappinessScoreDTO = {
       score,
       userId: user?.id,
     };
     try {
       await submitHappinessScore(happinessScore).then(() => {
-        router.refresh();
         toast({
           title: 'Success!',
           description: `Survey Submitted`,
         });
       });
+      await fetchAverageScore();
+      // @typescript-eslint/no-explicit-any
     } catch (error: any) {
       toast({
         title: 'Error!',
-        description: `Something went wrong. Please try again: ` + error.message,
+        description: `Something went wrong. Please try again: ${error.message} `,
         variant: 'destructive',
       });
     }
   };
 
+  React.useEffect(() => {
+    fetchAverageScore().then((r) => r);
+  }, [user, getAverageScore]);
+
   if (isLoading) return <Loading />;
   if (error) return <Error errorMessage="It seems there was a problem loading your account." action="/" showContact />;
 
@@ -62,16 +83,7 @@ const Home: React.FC = () => {
                 title: 'Your Overall Happiness',
               }}
               content={{
-                mainContent: (
-                  <Button
-                    variant="mood"
-                    disabled={true}
-                    size="mood"
-                    className="bg-primaryGreen-dark flex items-center justify-center"
-                  >
-                    <Laugh className="h-12 w-12 text-primaryGreen-main" />
-                  </Button>
-                ),
+                mainContent: <HappinessButton score={averageScore ? averageScore : 0} />,
               }}
             />
             <BasicSmallCard
@@ -99,7 +111,7 @@ const Home: React.FC = () => {
             <HappinessSurvey onSubmit={handleHappinessSubmit} />
             <BasicSmallCard
               header={{
-                title: 'Next Week',
+                title: 'Emotions',
                 icon: <DollarSign />,
               }}
               content={{

diff --git a/components/Surveys/HappinessButton.tsx b/components/Surveys/HappinessButton.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button } from '@components/ui/Buttons/Button';
+import { Frown, Annoyed, Smile, Laugh } from 'lucide-react';
+import { AverageScoreResponse } from '@/types/SurveyType';
+
+interface HappinessButtonProps {
+  score: AverageScoreResponse | number;
+}
+
+const HappinessButton: React.FC<HappinessButtonProps> = ({ score }) => {
+  if (score === null) return null;
+
+  if (score === 1) {
+    return (
+      <Button variant="mood" disabled size="mood" className="flex items-center justify-center bg-tertiaryBG-light">
+        <Frown className="h-12 w-12 text-black" />
+      </Button>
+    );
+  }
+  if (score === 2) {
+    return (
+      <Button variant="mood" disabled size="mood" className="flex items-center justify-center bg-primaryRed-light">
+        <Annoyed className="h-12 w-12 text-primaryRed-main" />
+      </Button>
+    );
+  } else if (score === 3) {
+    return (
+      <Button variant="mood" disabled size="mood" className="flex items-center justify-center bg-primaryBlue-light">
+        <Smile className="h-12 w-12 text-primaryBlue-main" />
+      </Button>
+    );
+  } else {
+    return (
+      <Button variant="mood" disabled size="mood" className="flex items-center justify-center bg-primaryGreen-light">
+        <Laugh className="h-12 w-12 text-primaryGreen-main" />
+      </Button>
+    );
+  }
+};
+
+export default HappinessButton;
diff --git a/components/Surveys/HappinessSurvey.tsx b/components/Surveys/HappinessSurvey.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@components/ui/Card/Card';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/Card/Card';
 import { Button } from '@components/ui/Buttons/Button';
 import { Annoyed, Frown, Laugh, Smile } from 'lucide-react';
 

diff --git a/hooks/useSurveyClient.ts b/hooks/useSurveyClient.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosResponse } from 'axios';
 import { useAuth } from '@providers/AuthProvider';
 import { API_BASE_URL } from '@/lib/api/apiClient';
-import { SubmitHappinessScoreDTO } from '@/types/SurveyType';
+import { AverageScoreResponse, SubmitHappinessScoreDTO } from '@/types/SurveyType';
 import useTeamClient from '@hooks/useTeamClient';
 
 const client = axios.create({ withCredentials: true, baseURL: API_BASE_URL });
@@ -14,8 +14,12 @@ const useSurveyClient = () => {
   const submitHappinessScore = async (body: SubmitHappinessScoreDTO): Promise<AxiosResponse<SubmitHappinessScoreDTO>> =>
     client.post('/v1/survey/happiness', body);
 
+  const getAverageScore = async (userId: string): Promise<AxiosResponse<AverageScoreResponse>> =>
+    client.get(`/v1/survey/happiness/average/${userId}`);
+
   return {
     submitHappinessScore,
+    getAverageScore,
   };
 };
 

diff --git a/types/SurveyType.ts b/types/SurveyType.ts
@@ -2,3 +2,7 @@ export interface SubmitHappinessScoreDTO {
   userId: string | undefined;
   score: number;
 }
+
+export interface AverageScoreResponse {
+  averageScore: number;
+}