diff --git a/src/components/pages/statistics/ActiveMembersComposition.tsx b/src/components/pages/statistics/ActiveMembersComposition.tsx index b84fdfc9..db9e692f 100644 --- 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: ( <> Interactions are all messages that: @@ -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 ( <>
@@ -208,7 +227,11 @@ export default function ActiveMembersComposition({
- +
diff --git a/src/components/pages/statistics/DisengagedMembersComposition.tsx b/src/components/pages/statistics/DisengagedMembersComposition.tsx index c46da10b..3fc36a41 100644 --- 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 ( <>
@@ -195,7 +212,11 @@ export default function DisengagedMembersComposition({
- +
diff --git a/src/components/pages/statistics/Onboarding.tsx b/src/components/pages/statistics/Onboarding.tsx index 9145e32d..c22b6ba9 100644 --- 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 ( <>
@@ -172,7 +189,11 @@ export default function Onboarding({
- +
diff --git a/src/components/pages/statistics/StatisticalData.tsx b/src/components/pages/statistics/StatisticalData.tsx index 31280250..ef8838be 100644 --- 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 = ({ statistics, + overviewType, hideInformationText, + handleSelectedOption, }) => { + const [activeState, setActiveState] = useState(); + + 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 ( <>
= ({ statistics.length > 3 ? 'justify-between' : 'justify-start' )} > - {statistics.map((stat) => ( + {statistics.map((stat, index) => (
{ + if (handleSelectedOption) { + handleSelectedOption(stat.label); + } + }} key={stat.label} > void; handleActivityOptionSelectionChange: (selectedRoles: string[]) => void; @@ -51,6 +53,7 @@ const CustomTable: React.FC = ({ data, columns, isLoading, + breakdownName, handleRoleSelectionChange, handleActivityOptionSelectionChange, handleJoinedAtChange, @@ -126,11 +129,11 @@ const CustomTable: React.FC = ({ useEffect(() => { handleRoleSelectionChange(selectedRoles); - }, [selectedRoles, handleRoleSelectionChange]); + }, [selectedRoles]); useEffect(() => { handleActivityOptionSelectionChange(selectedActivityOptions); - }, [selectedActivityOptions, handleActivityOptionSelectionChange]); + }, [selectedActivityOptions]); const handleSelectAllActivityOptions = ( event: React.ChangeEvent @@ -143,6 +146,7 @@ const CustomTable: React.FC = ({ setSelectedActivityOptions([]); } setSelectAllActivityOptions(event.target.checked); + router.replace(router.pathname, undefined, { shallow: true }); }; const handleSelectActivityOption = ( @@ -157,6 +161,7 @@ const CustomTable: React.FC = ({ setSelectAllActivityOptions( updatedSelectedOptions.length === activityCompositionOptions.length ); + router.replace(router.pathname, undefined, { shallow: true }); }; const formatDate = (date: string) => { @@ -205,6 +210,21 @@ const CustomTable: React.FC = ({ 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 ( <> diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx index e681917e..f0d468e9 100644 --- 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(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" /> diff --git a/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx index ed8b8cbb..c11af620 100644 --- a/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx +++ b/src/components/pages/statistics/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" /> diff --git a/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx index dd0237b5..805d0732 100644 --- a/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx +++ b/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx @@ -16,6 +16,7 @@ import { convertToCSV, downloadCSVFile, } from '../../../../../helpers/csvHelper'; +import router from 'next/router'; const columns: Column[] = [ { id: 'username', label: 'Name' }, @@ -95,6 +96,20 @@ export default function OnboardingMembersBreakdown() { setPage(1); }, [onboardingComposition, 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); }; @@ -189,6 +204,7 @@ export default function OnboardingMembersBreakdown() { handleUsernameChange={handleUsernameChange} isLoading={loading} activityCompositionOptions={options} + breakdownName="onboardingMemberComposition" />