feat: ok

src/api/action-groups/delete-yesterday-action-by-action-group-id.api.ts

@@ -0,0 +1,15 @@
+import axios from 'axios'
+import { CustomizedAxiosResponse } from '../index.interface'
+import { GetActionGroupRes } from './index.interface'
+
+/**
+ * Delete Yesterday's actions by action group id
+ * this will delete EVERY yesterday's action.
+ */
+export const deleteYesterdayActionsByActionGroupId = async (
+  actionGroupId: string,
+): Promise<CustomizedAxiosResponse<GetActionGroupRes>> => {
+  const url = `/v1/action-groups/${actionGroupId}/actions/yesterday`
+  const res = await axios.delete(url)
+  return [res.data, res]
+}

src/api/action-groups/index.interface.ts

@@ -49,6 +49,7 @@ interface ActionGroupDerivedState {
   isDummyCommittable: boolean
   isLateCommittable: boolean
   isDeletable: boolean
+  isYesterdayDeletable: boolean
 }
 
 export interface GetActionGroupRes {

src/components/molecule_action_group_card/index.more-options.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, useMemo } from 'react'
+import { act, FC, Fragment, useMemo } from 'react'
 import MoreIcon from '@mui/icons-material/MoreVert'
 import StyledIconButtonWithMenuAtom from '@/atoms/StyledIconButtonWithMenu'
 import {
@@ -8,8 +8,8 @@ import {
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { ActionGroupFixedId } from '@/constants/action-group.constant'
 import { usePostActionByActionGroupId } from '@/hooks/action-group/use-post-action-by-action-group-id.hook'
-import { useDeleteTodayActionsByActionGroupId } from '@/hooks/action-group/use-delete-today-actions-by-action-group-id.hook'
 import { usePostDummyActionByActionGroupId } from '@/hooks/action-group/use-post-dummy-action-by-action-group-id.hook'
+import { useDeleteActionsByActionGroupId } from '@/hooks/action-group/use-delete-actions-by-action-group-id.hook'
 
 interface Props {
   id: string // action group id
@@ -20,7 +20,9 @@ const ActionGroupCardMoreOptions: FC<Props> = ({ id, nickname }) => {
   const [loadingLatePost, onPostActionByActionGroupId] =
     usePostActionByActionGroupId(id)
   const [loadingDelete, onDeleteTodayActionsByActionGroupId] =
-    useDeleteTodayActionsByActionGroupId(id)
+    useDeleteActionsByActionGroupId(id, `today`)
+  const [loadingDeleteYesterday, onDeleteYesterdayActionsByActionGroupId] =
+    useDeleteActionsByActionGroupId(id, `yesterday`)
   const [loadingDummyPost, onPostDummyActionByActionGroupId] =
     usePostDummyActionByActionGroupId(id)
 
@@ -50,48 +52,64 @@ const ActionGroupCardMoreOptions: FC<Props> = ({ id, nickname }) => {
     return !actionGroup.derivedState.isDeletable
   }, [actionGroup])
 
+  const isDeleteYesterdayActionsDisabled: boolean = useMemo(() => {
+    if (!actionGroup) return true // disabled
+    if (actionGroup.props.id === ActionGroupFixedId.DailyPostWordChallenge)
+      return true // disabled
+
+    return !actionGroup.derivedState.isYesterdayDeletable
+  }, [actionGroup])
+
   const setArchivingActionGroupId = useSetRecoilState(
     archivingActionGroupIdState,
   )
 
   // contains every loading state of a function:
-  const everyLoading = loadingLatePost || loadingDelete || loadingDummyPost
+  const everyLoading =
+    loadingLatePost ||
+    loadingDelete ||
+    loadingDeleteYesterday ||
+    loadingDummyPost
 
   if (nickname) return null // if it is shared mode (or has nickname), do not show the button
 
   return (
-    <Fragment>
-      <StyledIconButtonWithMenuAtom
-        menus={[
-          {
-            id: `today_not_committable`,
-            title: `Today Not Committable`,
-            isDisabled: isDummyCommittableDisabled || everyLoading,
-            onClick: onPostDummyActionByActionGroupId,
-          },
-          {
-            id: `commit_late`,
-            title: `Commit Late`,
-            isDisabled: isOnClickCommitLateDisabled || everyLoading,
-            onClick: onPostActionByActionGroupId,
-          },
-          {
-            id: `delete_today_actions`,
-            title: `Delete Today's Action`, // not actions (has "s") because API only allows one action per day atm in Mar 2024
-            isDisabled: isDeleteTodayActionsDisabled || everyLoading,
-            onClick: onDeleteTodayActionsByActionGroupId,
-          },
-          {
-            id: `archive_action_group`,
-            title: `Archive This Action Group`,
-            isDisabled:
-              everyLoading || id === ActionGroupFixedId.DailyPostWordChallenge,
-            onClick: () => setArchivingActionGroupId(id),
-          },
-        ]}
-        jsxElementButton={<MoreIcon />}
-      />
-    </Fragment>
+    <StyledIconButtonWithMenuAtom
+      menus={[
+        {
+          id: `today_not_committable`,
+          title: `Today Not Committable`,
+          isDisabled: isDummyCommittableDisabled || everyLoading,
+          onClick: onPostDummyActionByActionGroupId,
+        },
+        {
+          id: `commit_late`,
+          title: `Commit Late`,
+          isDisabled: isOnClickCommitLateDisabled || everyLoading,
+          onClick: onPostActionByActionGroupId,
+        },
+        {
+          id: `delete_today_actions`,
+          title: `Delete Today's Action`, // not actions (has "s") because API only allows one action per day atm in Mar 2024
+          isDisabled: isDeleteTodayActionsDisabled || everyLoading,
+          onClick: onDeleteTodayActionsByActionGroupId,
+        },
+        {
+          id: `delete yesterday action`,
+          title: `Delete Yesterday's Action`, // not actions (has "s") because API only allows one action per day atm in Mar 2024
+          isDisabled: isDeleteYesterdayActionsDisabled || everyLoading,
+          onClick: onDeleteYesterdayActionsByActionGroupId,
+        },
+        {
+          id: `archive_action_group`,
+          title: `Archive This Action Group`,
+          isDisabled:
+            everyLoading || id === ActionGroupFixedId.DailyPostWordChallenge,
+          onClick: () => setArchivingActionGroupId(id),
+        },
+      ]}
+      jsxElementButton={<MoreIcon />}
+    />
   )
 }
 

src/hooks/action-group/use-delete-actions-by-action-group-id.hook.ts

@@ -0,0 +1,37 @@
+import { useRecoilCallback } from 'recoil'
+import { useState } from 'react'
+import { actionGroupFamily } from '@/recoil/action-groups/action-groups.state'
+import { deleteTodayActionsByActionGroupId } from '@/api/action-groups/delete-today-actions-by-action-group-id.api'
+import { GetActionGroupRes } from '@/api/action-groups/index.interface'
+import { deleteYesterdayActionsByActionGroupId } from '@/api/action-groups/delete-yesterday-action-by-action-group-id.api'
+
+type UseDeleteActionsByActionGroupId = [boolean, () => Promise<void>]
+export const useDeleteActionsByActionGroupId = (
+  actionGroupId: string,
+  which: 'today' | 'yesterday', // only two options
+): UseDeleteActionsByActionGroupId => {
+  const [loading, setLoading] = useState(false)
+
+  const onDeleteActionsByActionGroupId = useRecoilCallback(
+    ({ set }) =>
+      async () => {
+        try {
+          setLoading(true)
+          let data: GetActionGroupRes | null = null
+          if (which === `today`) {
+            data = (await deleteTodayActionsByActionGroupId(actionGroupId))[0]
+          } else {
+            data = (
+              await deleteYesterdayActionsByActionGroupId(actionGroupId)
+            )[0]
+          }
+          if (data === null) throw new Error(`data is null`)
+          set(actionGroupFamily(data.props.id), data)
+        } finally {
+          setLoading(false)
+        }
+      },
+    [actionGroupId, which, setLoading],
+  )
+  return [loading, onDeleteActionsByActionGroupId]
+}