DEAR-122 wip

24FSIIT16 · Jul 20, 2024 · b9682d2 · b9682d2
1 parent d33b3ca
commit b9682d2
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 86 deletions.
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
@@ -2,9 +2,9 @@ name: CI / CD yappi
 
 on:
   push:
-    branches: [ '*' ]
+    branches: ['*']
   pull_request:
-    branches: [ 'main' ]
+    branches: ['main']
 
   workflow_dispatch:
 

diff --git a/app/(main)/(home)/page.tsx b/app/(main)/(home)/page.tsx
@@ -5,23 +5,21 @@ import { useRouter } from 'next/navigation';
 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 { Bike, CircleSlash, DollarSign, Megaphone, ShipWheel } 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 { AverageScoreResponse, SubmitHappinessScoreDTO } from '@/types/SurveyType';
 import useSurveyClient from '@hooks/useSurveyClient';
 import { toast } from '@components/ui/Toast/use-toast';
-import { useState } from 'react';
-import HappinessButton from '@components/Surveys/HappinessButton';
+import AverageHappinessButton from '@components/Buttons/AverageHappinessButton';
 
 const Home: React.FC = () => {
   const { user, isLoading, error } = useAuth();
   const router = useRouter();
   const { submitHappinessScore, getAverageScore } = useSurveyClient();
-  const [averageScore, setAverageScore] = useState<AverageScoreResponse>();
+  const [averageScore, setAverageScore] = React.useState<AverageScoreResponse>();
 
   React.useEffect(() => {
     if (!isLoading && user && !user.hasTeam) {
@@ -34,7 +32,7 @@ const Home: React.FC = () => {
     try {
       const response = await getAverageScore(user.id);
       setAverageScore(response.data);
-    } catch (error) {
+    } catch (authError) {
       toast({
         title: 'Error!',
         description: `Fetching average score `,
@@ -56,11 +54,11 @@ const Home: React.FC = () => {
         });
       });
       await fetchAverageScore();
-      // @typescript-eslint/no-explicit-any
-    } catch (error: any) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (submitError: any) {
       toast({
         title: 'Error!',
-        description: `Something went wrong. Please try again: ${error.message} `,
+        description: `Something went wrong. Please try again: ${submitError.message} `,
         variant: 'destructive',
       });
     }
@@ -80,31 +78,44 @@ const Home: React.FC = () => {
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
             <BasicSmallCard
               header={{
-                title: 'Your Overall Happiness',
+                title: 'Average Happiness',
+                icon: <CircleSlash />,
               }}
               content={{
-                mainContent: <HappinessButton score={averageScore ? averageScore : 0} />,
+                mainContent: <AverageHappinessButton score={averageScore ?? 0} />,
               }}
             />
             <BasicSmallCard
               header={{
                 title: 'Current Sprint',
-                icon: <DollarSign />,
+                icon: <ShipWheel />,
+              }}
+              content={{
+                mainContent: '17 days left',
+                subContent: 'sdfsdfsdf',
+              }}
+            />
+            <BasicSmallCard
+              header={{
+                title: 'Team   Velocity',
+                icon: <Bike />,
               }}
               content={{
-                mainContent: 'dfsdfdfsdf',
+                mainContent: '53 story points',
                 subContent: 'sdfsdfsdf',
               }}
             />
-            <div className="col-span-2">
-              <div className="flex h-full">
-                <Alert variant="informative">
-                  <Megaphone />
-                  <AlertTitle>We think you forgot something?</AlertTitle>
-                  <AlertDescription>You have not tracked your Happiness since 2 days.</AlertDescription>
-                </Alert>
-              </div>
-            </div>
+            <BasicSmallCard
+              header={{
+                title: 'We think you forgot something?!',
+                icon: <Megaphone />,
+              }}
+              content={{
+                mainContent: 'No Happiness tracking since 2 days.',
+              }}
+              borderColor="border-primaryBlue-main"
+              fontColor="text-primaryBlue-main"
+            />
           </div>
 
           <div className="grid grid-cols-2 gap-4">

diff --git a/components/Buttons/AverageHappinessButton.tsx b/components/Buttons/AverageHappinessButton.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Frown, Annoyed, Smile, Laugh, BoxSelect } from 'lucide-react';
+import { AverageScoreResponse } from '@/types/SurveyType';
+
+interface HappinessButtonProps {
+  score: AverageScoreResponse | number;
+}
+
+const AverageHappinessButton: React.FC<HappinessButtonProps> = ({ score }) => {
+  const scoreValue = typeof score === 'number' ? score : score.averageScore;
+
+  if (scoreValue > 0 && scoreValue < 5) {
+    return <Frown className="rotate-360 h-20 w-20 text-black" />;
+  }
+  if (scoreValue >= 5 && scoreValue < 11) {
+    return <Annoyed className="rotate-360 h-20 w-20 text-primaryRed-main" />;
+  }
+  if (scoreValue >= 11 && scoreValue < 17) {
+    return <Smile className="rotate-360 h-20 w-20 text-primaryBlue-main" />;
+  }
+  if (scoreValue >= 17 && scoreValue <= 21) {
+    return <Laugh className="rotate-360 h-20 w-20 text-primaryGreen-main" />;
+  }
+  return <BoxSelect className="h-20 w-20 text-black" />;
+};
+
+export default AverageHappinessButton;
diff --git a/components/Surveys/SmiliesRadioButton.tsx → components/Buttons/SmiliesRadioButton.tsx b/components/Surveys/SmiliesRadioButton.tsx → components/Buttons/SmiliesRadioButton.tsx
diff --git a/components/Buttons/SurveyHappinessButton.tsx b/components/Buttons/SurveyHappinessButton.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button } from '@components/ui/Buttons/Button';
+
+interface SurveyButtonProps {
+  score: number;
+  onClick: (score: number) => void;
+  className: string;
+  icon: React.ReactNode;
+}
+
+const SurveyHappinessButton: React.FC<SurveyButtonProps> = ({ score, onClick, className, icon }) => (
+  <Button onClick={() => onClick(score)} variant="mood" size="mood" className={className}>
+    {icon}
+  </Button>
+);
+
+export default SurveyHappinessButton;
diff --git a/components/Cards/Basic.tsx b/components/Cards/Basic.tsx
@@ -10,15 +10,17 @@ interface CardProps {
     mainContent: React.ReactNode;
     subContent?: React.ReactNode;
   };
+  borderColor?: string;
+  fontColor?: string;
 }
 
-const BasicSmallCard: React.FC<CardProps> = ({ header, content }) => (
-  <Card>
+const BasicSmallCard: React.FC<CardProps> = ({ header, content, borderColor, fontColor }) => (
+  <Card className={borderColor}>
     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium">{header.title}</CardTitle>
-      {header.icon && <div className="text-muted-foreground h-4 w-4">{header.icon}</div>}
+      <CardTitle className="space-x-2 text-sm font-medium">{header.title}</CardTitle>
+      {header.icon && <div className="text-muted-foreground h-2 w-4">{header.icon}</div>}
     </CardHeader>
-    <CardContent>
+    <CardContent className={fontColor}>
       <div className="text-2xl font-bold">{content.mainContent}</div>
       {content.subContent && <p className="text-muted-foreground text-xs">{content.subContent}</p>}
     </CardContent>

diff --git a/components/Surveys/HappinessButton.tsx b/components/Surveys/HappinessButton.tsx
diff --git a/components/Surveys/HappinessSurvey.tsx b/components/Surveys/HappinessSurvey.tsx
@@ -2,17 +2,24 @@
 
 import * as React from 'react';
 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';
+import SurveyHappinessButton from '@components/Buttons/SurveyHappinessButton';
 
 interface HappinessSurveyProps {
   onSubmit: (score: number) => void;
 }
 
 const HappinessSurvey: React.FC<HappinessSurveyProps> = ({ onSubmit }) => {
+  const [rotateButton, setRotateButton] = React.useState<number | null>(null);
+
   const handleClick = (score: number) => {
+    setRotateButton(score);
+    setTimeout(() => setRotateButton(null), 1000);
     onSubmit(score);
   };
+
+  const iconClasses = (score: number) => `h-12 w-12 ${rotateButton === score ? 'rotate-360' : ''}`;
+
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -23,19 +30,31 @@ const HappinessSurvey: React.FC<HappinessSurveyProps> = ({ onSubmit }) => {
         <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 className="flex flex-row items-center justify-between">
+          <SurveyHappinessButton
+            score={2}
+            onClick={handleClick}
+            className="bg-tertiaryBG-light"
+            icon={<Frown className={iconClasses(2)} />}
+          />
+          <SurveyHappinessButton
+            score={8}
+            onClick={handleClick}
+            className="bg-primaryRed-light text-primaryRed-main"
+            icon={<Annoyed className={iconClasses(8)} />}
+          />
+          <SurveyHappinessButton
+            score={14}
+            onClick={handleClick}
+            className="bg-primaryBlue-light text-primaryBlue-main"
+            icon={<Smile className={iconClasses(14)} />}
+          />
+          <SurveyHappinessButton
+            score={20}
+            onClick={handleClick}
+            className="bg-primaryGreen-light text-primaryGreen-main"
+            icon={<Laugh className={iconClasses(20)} />}
+          />
         </div>
       </CardContent>
     </Card>

diff --git a/components/Surveys/TaskPopover.tsx b/components/Surveys/TaskPopover.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Popover, PopoverTrigger, PopoverContent } from '@components/ui/Popover/Popover';
-import SmiliesRadioButton from '@components/Surveys/SmiliesRadioButton';
+import SmiliesRadioButton from '@components/Buttons/SmiliesRadioButton';
 import { Button } from '@components/ui/Buttons/Button';
 
 type TaskPopoverProps = {

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

diff --git a/styles/globals.css b/styles/globals.css
@@ -24,9 +24,11 @@ body {
   h1 {
     @apply text-2xl font-extrabold;
   }
+
   h2 {
     @apply text-xl font-medium;
   }
+
   h3 {
     @apply text-sm font-medium;
   }
@@ -49,3 +51,16 @@ body {
     --chart-5: 340 75% 55%;
   }
 }
+
+.rotate-360 {
+  animation: rotate 0.4s linear;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}