DEAR-122 wip

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

Hide file tree

Showing 8 changed files with 115 additions and 140 deletions.
diff --git a/app/(main)/(home)/page.tsx b/app/(main)/(home)/page.tsx
@@ -6,23 +6,49 @@ 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, Megaphone } from 'lucide-react';
+import { DollarSign, Laugh, Megaphone } from 'lucide-react';
 import WorkKindSurvey from '@components/Surveys/WorkKindSurvey';
 import HappinessSurvey from '@components/Surveys/HappinessSurvey';
 import Feedback from '@components/Surveys/Feedback';
-import HappinessWeatherSurvey from '@components/Surveys/HappinessWeatherSurvey';
 import BasicSmallCard from '@components/Cards/Basic';
+import { SubmitHappinessScoreDTO } from '@/types/SurveyType';
+import useSurveyClient from '@hooks/useSurveyClient';
+import { toast } from '@components/ui/Toast/use-toast';
+import { Button } from '@components/ui/Buttons/Button';
 
 const Home: React.FC = () => {
   const { user, isLoading, error } = useAuth();
   const router = useRouter();
+  const { submitHappinessScore } = useSurveyClient();
 
   React.useEffect(() => {
     if (!isLoading && user && !user.hasTeam) {
       router.push('/onboarding');
     }
   }, [isLoading, user, router]);
 
+  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`,
+        });
+      });
+    } catch (error: any) {
+      toast({
+        title: 'Error!',
+        description: `Something went wrong. Please try again: ` + error.message,
+        variant: 'destructive',
+      });
+    }
+  };
+
   if (isLoading) return <Loading />;
   if (error) return <Error errorMessage="It seems there was a problem loading your account." action="/" showContact />;
 
@@ -33,17 +59,24 @@ const Home: React.FC = () => {
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
             <BasicSmallCard
               header={{
-                title: 'Overall Happiness',
-                icon: <DollarSign />,
+                title: 'Your Overall Happiness',
               }}
               content={{
-                mainContent: 'dfsdfsdfdfsdf',
-                subContent: 'sdfsdfsdf',
+                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>
+                ),
               }}
             />
             <BasicSmallCard
               header={{
-                title: 'Next Week',
+                title: 'Current Sprint',
                 icon: <DollarSign />,
               }}
               content={{
@@ -63,8 +96,20 @@ const Home: React.FC = () => {
           </div>
 
           <div className="grid grid-cols-2 gap-4">
-            <HappinessSurvey />
-            <HappinessWeatherSurvey />
+            <HappinessSurvey onSubmit={handleHappinessSubmit} />
+            <BasicSmallCard
+              header={{
+                title: 'Next Week',
+                icon: <DollarSign />,
+              }}
+              content={{
+                mainContent: 'dfsdfdfsadsasddf',
+                subContent: 'sdfsdfsdf',
+              }}
+            />
+          </div>
+          <div className="grid grid-cols-1 gap-4">
+            <WorkKindSurvey />
           </div>
           <div className="grid grid-cols-2 gap-4">
             <WorkKindSurvey />

diff --git a/components/Surveys/HappinessSurvey.tsx b/components/Surveys/HappinessSurvey.tsx
@@ -1,101 +1,43 @@
 'use client';
 
 import * as React from 'react';
-import { useForm, SubmitHandler } from 'react-hook-form';
-import Label from '@components/ui/Label/Label';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@components/ui/Card/Card';
-import { toast } from '@components/ui/Toast/use-toast';
-import SmiliesRadioButton from '@components/Surveys/SmiliesRadioButton';
-import getTodayDate from '@/lib/dateUtils';
+import { Button } from '@components/ui/Buttons/Button';
+import { Annoyed, Frown, Laugh, Smile } from 'lucide-react';
 
-type FormValues = {
-  question1: string;
-};
-
-const HappinessSurvey: React.FC = () => {
-  const {
-    setValue,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm<FormValues>({
-    defaultValues: {
-      question1: '',
-    },
-  });
-
-  const [submitted, setSubmitted] = React.useState(false);
-  const [randomGif, setRandomGif] = React.useState<string | null>(null);
-
-  const gifUrls = [
-    'https://media.giphy.com/media/11oNXSmmBzNLA4/giphy.gif?cid=ecf05e474o12q9h24ceio3i36zhcxlar1q4xki0tqlh7g2pz&ep=v1_gifs_search&rid=giphy.gif&ct=g',
-    'https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExd2JqM201NHcyYm52d3d2eXl1ZHdpYzVzdXgyOHFkeWF5bWpwenVwZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/yoJC2GnSClbPOkV0eA/giphy.gif',
-    'https://media.giphy.com/media/10FwycrnAkpshW/giphy.gif?cid=790b761194bph79kow9cj0q110zhbrux3q811kx6uqb9h5lz&ep=v1_gifs_search&rid=giphy.gif&ct=g',
-  ];
+interface HappinessSurveyProps {
+  onSubmit: (score: number) => void;
+}
 
-  const onSubmit: SubmitHandler<FormValues> = (data) => {
-    toast({
-      title: 'Success!',
-      description: `Overall Happiness Survey Submitted: ${data.question1}, ${getTodayDate()}`,
-    });
-    setRandomGif(gifUrls[Math.floor(Math.random() * gifUrls.length)]);
-    setSubmitted(true);
-    reset();
+const HappinessSurvey: React.FC<HappinessSurveyProps> = ({ onSubmit }) => {
+  const handleClick = (score: number) => {
+    onSubmit(score);
   };
-
-  const handleChange = async (value: string) => {
-    try {
-      setValue('question1', value);
-      await handleSubmit(onSubmit)();
-    } catch (error) {
-      console.error('Error handling change:', error);
-    }
-  };
-
   return (
     <Card>
-      {!submitted && (
-        <CardHeader>
-          <CardTitle>How happy are you with your working day?</CardTitle>
-          <CardDescription>
-            Submit your overall happiness survey to track your happiness with your work day.
-          </CardDescription>
-        </CardHeader>
-      )}
-
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <CardContent>
-          {submitted ? (
-            <div className="text-center">
-              <h2 className="mb-4 mt-8 text-2xl font-bold">Time for some rest!</h2>
-              {randomGif && (
-                <div className="mt-4">
-                  <img src={randomGif} alt="Random GIF" className="mx-auto" width={500} />
-                </div>
-              )}
-            </div>
-          ) : (
-            <div className="mb-4">
-              <Label>{getTodayDate()}</Label>
-              <div className="flex justify-center">
-                <div className="grid grid-cols-6 gap-4 pt-12">
-                  {['5', '4', '2', '3', '6', '1'].map((value, index) => (
-                    <SmiliesRadioButton
-                      key={value}
-                      value={value}
-                      size={130}
-                      handleChange={handleChange}
-                      altText={['Very Unhappy', 'Neutral', 'Happy', 'Very Happy', 'Very Happy', 'Very Unhappy'][index]}
-                      imagePath={`/assets/Smilies/${['smily', 'shock', 'cry', 'sick', 'very-happy', 'angry'][index]}.png`}
-                    />
-                  ))}
-                </div>
-              </div>
-              {errors.question1 && <span className="text-red-500">This field is required</span>}
-            </div>
-          )}
-        </CardContent>
-      </form>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">Survey</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">How happy are you with your working day?</div>
+        <p className="text-muted-foreground text-s mb-7">
+          Submit your overall happiness survey to track your happiness with your work day.
+        </p>
+        <div className="margin flex flex-row items-center justify-between">
+          <Button onClick={() => handleClick(1)} variant="mood" size="mood" className="bg-tertiaryBG-light">
+            <Frown className="h-12 w-12 text-black" />
+          </Button>
+          <Button onClick={() => handleClick(2)} variant="mood" size="mood" className="bg-primaryRed-light">
+            <Annoyed className="h-12 w-12 text-primaryRed-main" />
+          </Button>
+          <Button onClick={() => handleClick(3)} variant="mood" size="mood" className="bg-primaryBlue-light">
+            <Smile className="h-12 w-12 text-primaryBlue-main" />
+          </Button>
+          <Button onClick={() => handleClick(4)} variant="mood" size="mood" className="bg-primaryGreen-light">
+            <Laugh className="h-12 w-12 text-primaryGreen-main" />
+          </Button>
+        </div>
+      </CardContent>
     </Card>
   );
 };

diff --git a/components/Surveys/HappinessWeatherSurvey.tsx b/components/Surveys/HappinessWeatherSurvey.tsx
diff --git a/components/ui/Buttons/Button.tsx b/components/ui/Buttons/Button.tsx
@@ -20,7 +20,7 @@ const buttonVariants = cva(
         link: 'text-slate-900 underline-offset-4 hover:underline dark:text-slate-50',
         selected: 'bg-tertiaryBG-light dark:bg-secondaryBG-dark',
         icon: 'dark:hover:bg-secondaryBG-dark hover:bg-tertiaryBG-light',
-        mood: 'rounded-2xl',
+        mood: 'rounded-2xl hover:bg-secondaryBG-light focus-visible:bg-secondaryBG-light',
       },
       size: {
         default: 'h-10 px-4 py-2',

diff --git a/components/ui/Toast/toast.tsx b/components/ui/Toast/toast.tsx
@@ -30,7 +30,7 @@ const toastVariants = cva(
       variant: {
         default: 'border bg-white text-slate-950  dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
         destructive:
-          'destructive group border-red-500 bg-red-500 text-slate-50 dark:border-red-900 dark:bg-red-900 dark:text-slate-50',
+          'destructive group bg-primaryRed-main border-primaryRed-main text-slate-50 dark:border-primaryRed-main dark:bg-primaryRed-main dark:text-slate-50',
       },
     },
     defaultVariants: {

diff --git a/components/ui/Toast/use-toast.ts b/components/ui/Toast/use-toast.ts
@@ -5,8 +5,8 @@ import * as React from 'react';
 
 import type { ToastActionElement, ToastProps } from '@components/ui/Toast/toast';
 
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
+const TOAST_LIMIT = 3;
+const TOAST_REMOVE_DELAY = 500;
 
 type ToasterToast = ToastProps & {
   id: string;

diff --git a/hooks/useSurveyClient.ts b/hooks/useSurveyClient.ts
@@ -0,0 +1,22 @@
+import axios, { AxiosResponse } from 'axios';
+import { useAuth } from '@providers/AuthProvider';
+import { API_BASE_URL } from '@/lib/api/apiClient';
+import { SubmitHappinessScoreDTO } from '@/types/SurveyType';
+import useTeamClient from '@hooks/useTeamClient';
+
+const client = axios.create({ withCredentials: true, baseURL: API_BASE_URL });
+
+const useSurveyClient = () => {
+  const { accessToken } = useAuth();
+
+  client.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
+
+  const submitHappinessScore = async (body: SubmitHappinessScoreDTO): Promise<AxiosResponse<SubmitHappinessScoreDTO>> =>
+    client.post('/v1/survey/happiness', body);
+
+  return {
+    submitHappinessScore,
+  };
+};
+
+export default useSurveyClient;
diff --git a/types/SurveyType.ts b/types/SurveyType.ts
@@ -0,0 +1,4 @@
+export interface SubmitHappinessScoreDTO {
+  userId: string | undefined;
+  score: number;
+}