Dear 138 readd insights tests refactor a bit (#55)

* DEAR-138 clean up, add darkmode * DEAR-138 fix darkmode
24FSIIT16 · Aug 10, 2024 · 8940971 · 8940971
1 parent 9abd88d
commit 8940971
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 28 deletions.
diff --git a/app/(main)/insights/components/ContributionChart.tsx b/app/(main)/insights/components/ContributionChart.tsx
@@ -9,6 +9,7 @@ import { toast } from 'sonner';
 import { Siren } from 'lucide-react';
 import fetchGitHubContributions from '@/(main)/insights/utils/fetchContributions';
 import filterContributionsByDate from '@/(main)/insights/utils/filterContributionsByDate';
+import ContributionToolTip from '@/(main)/insights/components/CustomChartComponents/ContributionToolTip';
 
 interface ContributionsInsightProps {
   happinessInsights?: HappinessInsightsDTO[];
@@ -144,7 +145,7 @@ const ContributionChart: React.FC<ContributionsInsightProps> = ({
                 ticks={[2, 20]}
                 tick={CustomYAxisTick as never}
               />
-              <ChartTooltip cursor />
+              <ChartTooltip cursor content={<ContributionToolTip />} />
               <ChartLegend content={<ChartLegendContent />} verticalAlign="bottom" />
               <Line
                 dataKey="userAverage"

diff --git a/app/(main)/insights/components/CustomChartComponents/ContributionToolTip.tsx b/app/(main)/insights/components/CustomChartComponents/ContributionToolTip.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Annoyed, Frown, Laugh, Smile } from 'lucide-react';
+import { TooltipProps } from 'recharts';
+
+interface CustomToolTipProps extends TooltipProps<number, string> {
+  payload?: { value: number }[];
+}
+
+const ContributionToolTip: React.FC<CustomToolTipProps> = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    const userAverage = payload[0] ? payload[0].value : 0;
+    const contributions = payload[1] ? payload[1].value : 0;
+
+    const getIcon = (value: number) => {
+      if (value >= 17) {
+        return <Laugh className="h-6 w-6" />;
+      }
+      if (value >= 11) {
+        return <Smile className="h-6 w-6" />;
+      }
+      if (value >= 6) {
+        return <Annoyed className="h-6 w-6" />;
+      }
+      if (value >= 2) {
+        return <Frown className="h-6 w-6" />;
+      }
+      return null;
+    };
+
+    return (
+      <div className="custom-tooltip rounded border bg-white p-2 shadow-lg dark:bg-primaryBG-dark">
+        <p className="label font-bold">{`${label}`}</p>
+        {userAverage > 0 && (
+          <div className="tooltip-item mt-2 flex items-center">
+            <span className="icon mr-2">{getIcon(userAverage)}</span>
+            <span className="value">{`Personal (${userAverage})`}</span>
+          </div>
+        )}
+        <div className="tooltip-item mt-2 flex items-center">
+          <span className="value">{`Contributions: ${contributions}`}</span>
+        </div>
+      </div>
+    );
+  }
+  return null;
+};
+
+export default ContributionToolTip;
diff --git a/app/(main)/insights/components/CustomChartComponents/CustomToolTip.tsx b/app/(main)/insights/components/CustomChartComponents/CustomToolTip.tsx
@@ -28,16 +28,20 @@ const CustomToolTip: React.FC<CustomToolTipProps> = ({ active, payload, label })
     };
 
     return (
-      <div className="custom-tooltip rounded border bg-white p-2 shadow-lg">
+      <div className="custom-tooltip rounded border bg-white p-2 shadow-lg dark:bg-primaryBG-dark">
         <p className="label font-bold">{`${label}`}</p>
-        <div className="tooltip-item mt-2 flex items-center">
-          <span className="icon mr-2">{getIcon(userAverage)}</span>
-          <span className="value">{`Personal: ${userAverage}`}</span>
-        </div>
-        <div className="tooltip-item mt-2 flex items-center">
-          <span className="icon mr-2">{getIcon(teamAverage)}</span>
-          <span className="value">{`Team: ${teamAverage}`}</span>
-        </div>
+        {userAverage > 0 && (
+          <div className="tooltip-item mt-2 flex items-center">
+            <span className="icon mr-2">{getIcon(userAverage)}</span>
+            <span className="value">{`Personal (${userAverage})`}</span>
+          </div>
+        )}
+        {teamAverage > 0 && (
+          <div className="tooltip-item mt-2 flex items-center">
+            <span className="icon mr-2">{getIcon(teamAverage)}</span>
+            <span className="value">{`Team (${teamAverage})`}</span>
+          </div>
+        )}
       </div>
     );
   }

diff --git a/app/(main)/insights/page.tsx b/app/(main)/insights/page.tsx
@@ -47,6 +47,9 @@ const InsightsPage: React.FC = () => {
   const [workKindCountPerDayInsights, setWorkKindCountPerDayInsights] = React.useState<WorkKindCountPerDayInsightDTO[]>(
     []
   );
+  const [selectedTeam, setSelectedTeam] = React.useState<TeamWithSprintsDTO | null>(null);
+  const [currentUser, setcurrentUser] = React.useState<User | null>(null);
+  const [selectedSprint, setSelectedSprint] = React.useState<SprintDTO | null>(null);
 
   const { data: userData, isLoading: isLoadingUserData, error } = useSWRClient<User>(`/v1/user/${user?.id}`);
   const {
@@ -55,10 +58,6 @@ const InsightsPage: React.FC = () => {
     error: errorLoadingTeamWithSprints,
   } = useSWRClient<TeamWithSprintsDTO[]>(`/v1/team/user/${user?.id}/sprints`);
 
-  const [selectedTeam, setSelectedTeam] = React.useState<TeamWithSprintsDTO | null>(null);
-  const [currentUser, setcurrentUser] = React.useState<User | null>(null);
-  const [selectedSprint, setSelectedSprint] = React.useState<SprintDTO | null>(null);
-
   const defaultSprint: SprintDTO = {
     id: 0,
     sprintName: 'All-Time',
@@ -81,15 +80,12 @@ const InsightsPage: React.FC = () => {
     }
   };
 
-  React.useEffect(() => {
-    fetchInsights();
-  }, [selectedTeam, selectedSprint, userData]);
-
   React.useEffect(() => {
     if (userData) {
       setcurrentUser(userData);
     }
-  }, [userData]);
+    fetchInsights();
+  }, [selectedTeam, selectedSprint, userData]);
 
   React.useEffect(() => {
     if (teamWithSprints && teamWithSprints.length > 0) {

diff --git a/components/NavigationMenu/ListItem.tsx b/components/NavigationMenu/ListItem.tsx
@@ -8,7 +8,7 @@ const ListItem = React.forwardRef<React.ElementRef<'a'>, React.ComponentPropsWit
       <NavigationMenuLink asChild>
         <a
           ref={ref}
-          className={`focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-slate-50 ${className}`}
+          className={`focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-secondaryBG-light dark:hover:bg-secondaryBG-dark dark:hover:text-primaryBG-light ${className}`}
           target={external ? '_blank' : '_self'}
           rel={external ? 'noopener noreferrer' : undefined}
           {...props}

diff --git a/components/ui/Chart/Chart.tsx b/components/ui/Chart/Chart.tsx
@@ -157,7 +157,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-slate-200 border-slate-200/50 bg-white px-2.5 py-1.5 text-xs shadow-xl dark:border-slate-800 dark:border-slate-800/50 dark:bg-slate-950',
+          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-slate-200 border-slate-200/50 bg-white px-2.5 py-1.5 text-xs shadow-xl dark:bg-primaryBG-dark',
           className
         )}
       >

diff --git a/components/ui/NavigationMenu/Navigation-menu.tsx b/components/ui/NavigationMenu/Navigation-menu.tsx
@@ -37,7 +37,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium transition-colors hover:bg-slate-100 hover:text-slate-900 focus:bg-slate-100 focus:text-slate-900 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-slate-100/50 data-[state=open]:bg-slate-100/50 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:focus:bg-slate-800 dark:focus:text-slate-50 dark:data-[active]:bg-slate-800/50 dark:data-[state=open]:bg-slate-800/50'
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium transition-colors hover:bg-slate-100 hover:text-slate-900  focus:bg-slate-100 focus:text-slate-900 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-slate-100/50 data-[state=open]:bg-slate-100/50 dark:bg-slate-950 dark:hover:bg-secondaryBG-dark dark:hover:text-slate-50 dark:focus:bg-secondaryBG-dark dark:focus:text-slate-50 dark:data-[active]:dark:bg-primaryBG-dark dark:bg-primaryBG-dark dark:data-[state=open]:bg-slate-800/50'
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -65,7 +65,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 right-0 top-0 w-full md:absolute md:w-auto',
+      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 right-0 top-0 w-full dark:text-primaryBG-light dark:hover:bg-primaryBG-dark dark:hover:text-primaryBG-light md:absolute md:w-auto',
       className
     )}
     {...props}
@@ -82,7 +82,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn('absolute right-0 top-full flex justify-center')}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        'origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-lg dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        'origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-lg dark:bg-primaryBG-dark dark:text-primaryBG-dark md:w-[var(--radix-navigation-menu-viewport-width)]',
         className
       )}
       ref={ref}
@@ -104,7 +104,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-slate-200 shadow-md dark:bg-slate-800" />
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-slate-200 shadow-md dark:bg-primaryBG-dark dark:text-primaryBG-dark" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;

diff --git a/components/ui/Select/Select.tsx b/components/ui/Select/Select.tsx
@@ -20,7 +20,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-primaryBG-dark dark:text-slate-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -69,7 +69,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md dark:border-slate-800 dark:bg-primaryBG-dark dark:text-slate-50',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
@@ -108,7 +108,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50',
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:bg-primaryBG-dark dark:text-slate-50',
       className
     )}
     {...props}