filter breakdowns based on overview boxes

TogetherCrew · Sep 13, 2023 · d9e202e · d9e202e
1 parent 8aea424
commit d9e202e
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 15 deletions.
diff --git a/src/components/pages/statistics/ActiveMembersComposition.tsx b/src/components/pages/statistics/ActiveMembersComposition.tsx
@@ -8,6 +8,7 @@ import { SeriesData, StatisticsProps } from '../../../utils/interfaces';
 import { communityActiveDates } from '../../../lib/data/dateRangeValues';
 import ActiveMemberBreakdown from './memberBreakdowns/activeMembers/ActiveMemberBreakdown';
 import Loading from '../../global/Loading';
+import { useRouter } from 'next/router';
 
 export interface ActiveMembersComposition {
   activePeriod: number;
@@ -60,6 +61,8 @@ export default function ActiveMembersComposition({
   activePeriod,
   handleDateRange,
 }: ActiveMembersComposition) {
+  const router = useRouter();
+
   const { activeMembers, activeMembersLoading } = useAppStore();
 
   const [options, setOptions] = useState(defaultOptions);
@@ -130,7 +133,7 @@ export default function ActiveMembersComposition({
         value: activeMembers.totActiveMembers,
         colorBadge: 'bg-green',
         hasTooltip: true,
-        customBackground: true,
+        customBackground: false,
         tooltipText: (
           <>
             <span>Interactions are all messages that:</span>
@@ -195,6 +198,22 @@ export default function ActiveMembersComposition({
     ]);
   }, [activeMembers]);
 
+  const handleSelectedOption = (label: string) => {
+    const currentPath = router.pathname;
+
+    router.replace(
+      {
+        pathname: currentPath,
+        query: {
+          overview: 'activeMemberComposition',
+          filterType: label,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
   return (
     <>
       <div className="flex flex-row justify-between">
@@ -208,7 +227,11 @@ export default function ActiveMembersComposition({
         </div>
       </div>
       <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
-        <StatisticalData statistics={[...statistics]} />
+        <StatisticalData
+          overviewType="activeMemberComposition"
+          statistics={[...statistics]}
+          handleSelectedOption={handleSelectedOption}
+        />
       </div>
 
       <ActiveMemberBreakdown />

diff --git a/src/components/pages/statistics/DisengagedMembersComposition.tsx b/src/components/pages/statistics/DisengagedMembersComposition.tsx
@@ -8,6 +8,7 @@ import { SeriesData, StatisticsProps } from '../../../utils/interfaces';
 import { communityActiveDates } from '../../../lib/data/dateRangeValues';
 import DisengagedMembersCompositionBreakdown from './memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown';
 import Loading from '../../global/Loading';
+import router from 'next/router';
 
 export interface DisengagedMembersComposition {
   activePeriod: number;
@@ -125,7 +126,7 @@ export default function DisengagedMembersComposition({
         value: disengagedMembers.becameDisengaged,
         colorBadge: 'bg-error-500',
         hasTooltip: false,
-        customBackground: true,
+        customBackground: false,
       },
       {
         label: 'Were Newly Active',
@@ -182,6 +183,22 @@ export default function DisengagedMembersComposition({
     ]);
   }, [disengagedMembers]);
 
+  const handleSelectedOption = (label: string) => {
+    const currentPath = router.pathname;
+
+    router.replace(
+      {
+        pathname: currentPath,
+        query: {
+          overview: 'disengagedMemberComposition',
+          filterType: label,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
   return (
     <>
       <div className="flex flex-row justify-between">
@@ -195,7 +212,11 @@ export default function DisengagedMembersComposition({
         </div>
       </div>
       <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
-        <StatisticalData statistics={[...statistics]} />
+        <StatisticalData
+          overviewType="disengagedMemberComposition"
+          statistics={[...statistics]}
+          handleSelectedOption={handleSelectedOption}
+        />
       </div>
 
       <DisengagedMembersCompositionBreakdown />

diff --git a/src/components/pages/statistics/Onboarding.tsx b/src/components/pages/statistics/Onboarding.tsx
@@ -8,6 +8,7 @@ import { SeriesData, StatisticsProps } from '../../../utils/interfaces';
 import RangeSelect from '../../global/RangeSelect';
 import OnboardingMembersBreakdown from './memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown';
 import Loading from '../../global/Loading';
+import router from 'next/router';
 
 export interface OnboardingProps {
   activePeriod: number;
@@ -127,7 +128,7 @@ export default function Onboarding({
         value: onboardingMembers.joined,
         colorBadge: 'bg-info',
         hasTooltip: false,
-        customBackground: true,
+        customBackground: false,
       },
       {
         label: 'Newly Active',
@@ -159,6 +160,22 @@ export default function Onboarding({
     ]);
   }, [onboardingMembers]);
 
+  const handleSelectedOption = (label: string) => {
+    const currentPath = router.pathname;
+
+    router.replace(
+      {
+        pathname: currentPath,
+        query: {
+          overview: 'onboardingMemberComposition',
+          filterType: label,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
   return (
     <>
       <div className="flex flex-row justify-between">
@@ -172,7 +189,11 @@ export default function Onboarding({
         </div>
       </div>
       <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
-        <StatisticalData statistics={[...statistics]} />
+        <StatisticalData
+          overviewType="onboardingMemberComposition"
+          statistics={[...statistics]}
+          handleSelectedOption={handleSelectedOption}
+        />
       </div>
 
       <OnboardingMembersBreakdown />

diff --git a/src/components/pages/statistics/StatisticalData.tsx b/src/components/pages/statistics/StatisticalData.tsx
@@ -1,19 +1,38 @@
 import { Tooltip } from '@mui/material';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { RxArrowTopRight, RxArrowBottomRight } from 'react-icons/rx';
 import { AiOutlineExclamationCircle } from 'react-icons/ai';
 import { StatisticsProps } from '../../../utils/interfaces';
+import router from 'next/router';
 
 type StatisticalDataProps = {
   statistics: StatisticsProps[];
+  overviewType?:
+    | 'activeMemberComposition'
+    | 'onboardingMemberComposition'
+    | 'disengagedMemberComposition';
   hideInformationText?: boolean;
+  handleSelectedOption?: (label: string) => void;
 };
 
 const StatisticalData: React.FC<StatisticalDataProps> = ({
   statistics,
+  overviewType,
   hideInformationText,
+  handleSelectedOption,
 }) => {
+  const [activeState, setActiveState] = useState<string | string[]>();
+
+  useEffect(() => {
+    console.log(router.query);
+    if (overviewType === router.query.overview) {
+      setActiveState(router.query.filterType);
+    } else if (Object.keys(router.query).length === 0) {
+      setActiveState('');
+    }
+    console.log({ activeState });
+  }, [router.query]);
   return (
     <>
       <div
@@ -22,15 +41,22 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
           statistics.length > 3 ? 'justify-between' : 'justify-start'
         )}
       >
-        {statistics.map((stat) => (
+        {statistics.map((stat, index) => (
           <div
             className={clsx(
-              'flex flex-col flex-1 text-center justify-center relative rounded-2xl',
+              'flex flex-col flex-1 text-center justify-center relative rounded-2xl hover:bg-gray-background ease-in delay-75 cursor-pointer',
               stat.description
                 ? 'min-w-full h-[200px] md:min-w-[100px] xl:min-w-[220px] md:max-w-[280px] md:h-[200px]'
                 : 'min-w-full h-[170px] md:min-w-[100px] xl:min-w-[280px] md:max-w-[280px] md:h-[180px]',
-              stat.customBackground ? 'bg-gray-hover' : ''
+              stat.customBackground || stat.label === activeState
+                ? 'bg-gray-hover'
+                : ''
             )}
+            onClick={() => {
+              if (handleSelectedOption) {
+                handleSelectedOption(stat.label);
+              }
+            }}
             key={stat.label}
           >
             <span

diff --git a/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx b/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
@@ -35,11 +35,13 @@ import Loading from '../../../global/Loading';
 import useAppStore from '../../../../store/useStore';
 import { StorageService } from '../../../../services/StorageService';
 import CustomDialogDetail from './CustomDialogDetail';
+import router from 'next/router';
 
 interface CustomTableProps {
   data: Row[];
   columns: Column[];
   isLoading: boolean;
+  breakdownName?: string;
   activityCompositionOptions: IActivityCompositionOptions[];
   handleRoleSelectionChange: (selectedRoles: string[]) => void;
   handleActivityOptionSelectionChange: (selectedRoles: string[]) => void;
@@ -51,6 +53,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
   data,
   columns,
   isLoading,
+  breakdownName,
   handleRoleSelectionChange,
   handleActivityOptionSelectionChange,
   handleJoinedAtChange,
@@ -126,11 +129,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
 
   useEffect(() => {
     handleRoleSelectionChange(selectedRoles);
-  }, [selectedRoles, handleRoleSelectionChange]);
+  }, [selectedRoles]);
 
   useEffect(() => {
     handleActivityOptionSelectionChange(selectedActivityOptions);
-  }, [selectedActivityOptions, handleActivityOptionSelectionChange]);
+  }, [selectedActivityOptions]);
 
   const handleSelectAllActivityOptions = (
     event: React.ChangeEvent<HTMLInputElement>
@@ -143,6 +146,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
       setSelectedActivityOptions([]);
     }
     setSelectAllActivityOptions(event.target.checked);
+    router.replace(router.pathname, undefined, { shallow: true });
   };
 
   const handleSelectActivityOption = (
@@ -157,6 +161,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
     setSelectAllActivityOptions(
       updatedSelectedOptions.length === activityCompositionOptions.length
     );
+    router.replace(router.pathname, undefined, { shallow: true });
   };
 
   const formatDate = (date: string) => {
@@ -205,6 +210,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
     setOpen(false);
   };
 
+  useEffect(() => {
+    const filterType = router.query.filterType as string;
+    const overview = router.query.overview as string;
+    if (overview && breakdownName === overview) {
+      const matchedOptions = activityCompositionOptions.filter(
+        (option) => option.name.toLowerCase() === filterType.toLowerCase()
+      );
+      if (matchedOptions.length) {
+        const v = matchedOptions[0].value;
+        setSelectedActivityOptions([v]);
+      }
+      setSelectAllActivityOptions(false);
+    }
+  }, [router.query]);
+
   return (
     <>
       <Table className="border-separate border-spacing-y-2">

diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
@@ -16,6 +16,7 @@ import {
   convertToCSV,
   downloadCSVFile,
 } from '../../../../../helpers/csvHelper';
+import router from 'next/router';
 
 const columns: Column[] = [
   { id: 'username', label: 'Name' },
@@ -28,14 +29,13 @@ const options: IActivityCompositionOptions[] = [
   { name: 'Active members', value: 'all_active', color: '#3AAE2B' },
   { name: 'Newly active', value: 'all_new_active', color: '#FF9022' },
   { name: 'Consistently active', value: 'all_consistent', color: '#804EE1' },
-  { name: 'Vital member', value: 'all_vital', color: '#313671' },
+  { name: 'Vital members', value: 'all_vital', color: '#313671' },
   { name: 'Became disengaged', value: 'all_new_disengaged', color: '#EB3E56' },
   { name: 'Others', value: 'others', color: '#AAAAAA' },
 ];
 
 export default function ActiveMemberBreakdown() {
-  const { getActiveMemberCompositionTable, isActiveMembersBreakdownLoading } =
-    useAppStore();
+  const { getActiveMemberCompositionTable } = useAppStore();
 
   const tableTopRef = useRef<HTMLDivElement>(null);
 
@@ -94,6 +94,20 @@ export default function ActiveMemberBreakdown() {
     setPage(1);
   }, [activityComposition, roles, username, sortBy]);
 
+  useEffect(() => {
+    const filterType = router.query.filterType as string;
+
+    if (filterType) {
+      const matchedOptions = options.filter(
+        (option) => option.name.toLowerCase() === filterType.toLowerCase()
+      );
+      if (matchedOptions.length) {
+        const v = matchedOptions[0].value;
+        handleActivityOptionSelectionChange([v]);
+      }
+    }
+  }, [router.query]);
+
   const handleRoleSelectionChange = (selectedRoles: string[]) => {
     setRoles(selectedRoles);
   };
@@ -188,6 +202,7 @@ export default function ActiveMemberBreakdown() {
             handleUsernameChange={handleUsernameChange}
             isLoading={loading}
             activityCompositionOptions={options}
+            breakdownName="activeMemberComposition"
           />
         </div>
       </div>

diff --git a/...s/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx b/...s/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx
@@ -16,6 +16,7 @@ import {
   convertToCSV,
   downloadCSVFile,
 } from '../../../../../helpers/csvHelper';
+import router from 'next/router';
 
 const columns: Column[] = [
   { id: 'username', label: 'Name' },
@@ -107,6 +108,20 @@ export default function DisengagedMembersCompositionBreakdown() {
     setPage(1);
   }, [disengagedComposition, roles, username, sortBy]);
 
+  useEffect(() => {
+    const filterType = router.query.filterType as string;
+
+    if (filterType) {
+      const matchedOptions = options.filter(
+        (option) => option.name.toLowerCase() === filterType.toLowerCase()
+      );
+      if (matchedOptions.length) {
+        const v = matchedOptions[0].value;
+        handleActivityOptionSelectionChange([v]);
+      }
+    }
+  }, [router.query]);
+
   const handleRoleSelectionChange = (selectedRoles: string[]) => {
     setRoles(selectedRoles);
   };
@@ -201,6 +216,7 @@ export default function DisengagedMembersCompositionBreakdown() {
             handleUsernameChange={handleUsernameChange}
             isLoading={loading}
             activityCompositionOptions={options}
+            breakdownName="disengagedMemberComposition"
           />
         </div>
       </div>