diff --git a/src/components/organism_rituals_frame/index.gauge.tsx b/src/components/organism_rituals_frame/index.gauge.tsx index 5dbf598..19d3d89 100644 --- a/src/components/organism_rituals_frame/index.gauge.tsx +++ b/src/components/organism_rituals_frame/index.gauge.tsx @@ -5,7 +5,7 @@ import LinearProgress, { } from '@mui/material/LinearProgress' import { Box, Typography } from '@mui/material' import { useRecoilValue } from 'recoil' -import { actionGroupAchievedPercent } from '@/recoil/action-groups/action-groups.state' +import { actionGroupAchievedPercentSelector } from '@/recoil/action-groups/action-groups.selectors' interface Props {} // TODO: Move me somewhere else? @@ -33,7 +33,7 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({ * @returns */ const RitualsFrameGauge: FC = () => { - const value = useRecoilValue(actionGroupAchievedPercent) + const value = useRecoilValue(actionGroupAchievedPercentSelector) return ( diff --git a/src/recoil/action-groups/action-groups.selectors.ts b/src/recoil/action-groups/action-groups.selectors.ts new file mode 100644 index 0000000..6081bd8 --- /dev/null +++ b/src/recoil/action-groups/action-groups.selectors.ts @@ -0,0 +1,32 @@ +import { selector } from 'recoil' +import { Rkp, Rks } from '../index.keys' +import { actionGroupFamily, actionGroupIdsState } from './action-groups.state' + +/** Private Recoil Key */ +enum Prk { + ActionGroupAchievedPercentSelector = `actionGroupAchievedPercentSelector`, +} + +/** + * actionGroupAchievedPercent contains 0~100 data to show + * how much user has achieved today + */ +export const actionGroupAchievedPercentSelector = selector({ + key: Rkp.ActionGroups + Prk.ActionGroupAchievedPercentSelector + Rks.Selector, + get: ({ get }) => { + let totalCounts = 0 + let achievedCount = 0 + + const ids = get(actionGroupIdsState) + for (const id of ids) { + const actionGroup = get(actionGroupFamily(id)) + if (!actionGroup) continue // empty action groups are not counted + + totalCounts++ + if (actionGroup.isTodayHandled) achievedCount++ + } + + if (totalCounts === 0) return 0 + return Math.floor((achievedCount / totalCounts) * 100) + }, +}) diff --git a/src/recoil/action-groups/action-groups.state.ts b/src/recoil/action-groups/action-groups.state.ts index b6b7a77..5d0f0fc 100644 --- a/src/recoil/action-groups/action-groups.state.ts +++ b/src/recoil/action-groups/action-groups.state.ts @@ -1,4 +1,4 @@ -import { atom, atomFamily, selector } from 'recoil' +import { atom, atomFamily } from 'recoil' import { Rkp, Rks } from '../index.keys' import { GetActionGroupRes } from '@/api/action-groups/index.interface' @@ -20,30 +20,6 @@ export const actionGroupIdsState = atom({ default: [], }) -/** - * actionGroupAchievedPercent contains 0~100 data to show - * how much user has achieved today - */ -// TODO: move me to the selector -export const actionGroupAchievedPercent = selector({ - key: Rkp.ActionGroups + Prk.ActionGroupIdsState + Rks.Selector, - get: ({ get }) => { - let totalCounts = 0 - let achievedCount = 0 - - const ids = get(actionGroupIdsState) - for (const id of ids) { - const actionGroup = get(actionGroupFamily(id)) - if (!actionGroup) continue // empty action groups are not counted - - totalCounts++ - if (actionGroup.isTodayHandled) achievedCount++ - } - - return Math.floor((achievedCount / totalCounts) * 100) - }, -}) - // if empty string, dialog does not show up // if not empty string, dialog shows up, trying to archive the action group export const archivingActionGroupIdState = atom({