refactor: into selector

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<Props> = () => {
-  const value = useRecoilValue(actionGroupAchievedPercent)
+  const value = useRecoilValue(actionGroupAchievedPercentSelector)
 
   return (
     <Box minWidth={200} alignItems={`center`}>

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<number>({
+  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)
+  },
+})

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<string[]>({
   default: [],
 })
 
-/**
- * actionGroupAchievedPercent contains 0~100 data to show
- * how much user has achieved today
- */
-// TODO: move me to the selector
-export const actionGroupAchievedPercent = selector<number>({
-  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<string>({