diff --git a/src/api/action-groups/delete-yesterday-action-by-action-group-id.api.ts b/src/api/action-groups/delete-yesterday-action-by-action-group-id.api.ts new file mode 100644 index 0000000..c9b90bf --- /dev/null +++ b/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> => { + const url = `/v1/action-groups/${actionGroupId}/actions/yesterday` + const res = await axios.delete(url) + return [res.data, res] +} diff --git a/src/api/action-groups/index.interface.ts b/src/api/action-groups/index.interface.ts index 7d412ad..1b14b1e 100644 --- a/src/api/action-groups/index.interface.ts +++ b/src/api/action-groups/index.interface.ts @@ -49,6 +49,7 @@ interface ActionGroupDerivedState { isDummyCommittable: boolean isLateCommittable: boolean isDeletable: boolean + isYesterdayDeletable: boolean } export interface GetActionGroupRes { diff --git a/src/components/molecule_action_group_card/index.more-options.tsx b/src/components/molecule_action_group_card/index.more-options.tsx index d71439a..c96b05d 100644 --- a/src/components/molecule_action_group_card/index.more-options.tsx +++ b/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 = ({ 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 = ({ 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 ( - - setArchivingActionGroupId(id), - }, - ]} - jsxElementButton={} - /> - + setArchivingActionGroupId(id), + }, + ]} + jsxElementButton={} + /> ) } diff --git a/src/hooks/action-group/use-delete-actions-by-action-group-id.hook.ts b/src/hooks/action-group/use-delete-actions-by-action-group-id.hook.ts new file mode 100644 index 0000000..84b9196 --- /dev/null +++ b/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] +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] +} diff --git a/src/hooks/action-group/use-delete-today-actions-by-action-group-id.hook.ts b/src/hooks/action-group/use-delete-today-actions-by-action-group-id.hook.ts deleted file mode 100644 index 6018690..0000000 --- a/src/hooks/action-group/use-delete-today-actions-by-action-group-id.hook.ts +++ /dev/null @@ -1,26 +0,0 @@ -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' - -type UsePostActionByActionGroupId = [boolean, () => Promise] -export const useDeleteTodayActionsByActionGroupId = ( - actionGroupId: string, -): UsePostActionByActionGroupId => { - const [loading, setLoading] = useState(false) - - const onDeleteTodayActionsByActionGroupId = useRecoilCallback( - ({ set }) => - async () => { - try { - setLoading(true) - const [data] = await deleteTodayActionsByActionGroupId(actionGroupId) - set(actionGroupFamily(data.props.id), data) - } finally { - setLoading(false) - } - }, - [actionGroupId, setLoading], - ) - return [loading, onDeleteTodayActionsByActionGroupId] -}