All files / src/components/pages/group/group-modal index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

import { useParams, usePathname, useRouter } from 'next/navigation';

import { revalidateGroupAction } from '@/app/group/[groupId]/actions';
import { GroupModalApprovalContent } from '@/components/pages/group/group-modal/approval-content';
import { GroupModalCommonContent } from '@/components/pages/group/group-modal/common-content';
import { Toast } from '@/components/ui';
import { ModalContent } from '@/components/ui/modal';
import { useToast } from '@/components/ui/toast/core';
import { useAttendGroup } from '@/hooks/use-group/use-group-attend';
import { useDeleteGroup } from '@/hooks/use-group/use-group-delete';
import { useKickGroupMember } from '@/hooks/use-group/use-group-kick';
import { useLeaveGroup } from '@/hooks/use-group/use-group-leave';
import { AttendGroupPayload } from '@/types/service/group';

type ModalType = 'attend' | 'approval' | 'pending' | 'leave' | 'delete' | 'kick';

interface BaseProps {
  type: Exclude<ModalType, 'kick'>;
  groupId?: string;
}

interface KickProps {
  type: 'kick';
  targetInfo: {
    targetUserId: string;
    targetUserName: string;
  };
}

type Props = BaseProps | KickProps;

export const GroupModal = (props: Props) => {
  const { type } = props;

  const params = useParams();
  const groupId = (type !== 'kick' && props.groupId) || (params as { groupId: string }).groupId;
  const pathname = usePathname();

  const { replace } = useRouter();
  const { run } = useToast();

  const { mutateAsync: attendMutate, isPending: isAttending } = useAttendGroup({ groupId });
  const { mutateAsync: leaveMutate, isPending: isCanceling } = useLeaveGroup({ groupId });
  const { mutateAsync: deleteMutate, isPending: isDeleting } = useDeleteGroup({ groupId });
  const { mutateAsync: kickMutate, isPending: isKicking } = useKickGroupMember({
    groupId,
    targetUserId: type === 'kick' ? props.targetInfo.targetUserId : '',
  });

  const isPending = isAttending || isCanceling || isDeleting || isKicking;

  const mutateByType = {
    attend: async () => {
      await attendMutate(undefined);
      run(
        <Toast offset='button' type='success'>
          모임 신청 완료! Share the fun
        </Toast>,
      );
    },
    approval: (message: AttendGroupPayload) => attendMutate(message),
    pending: () => leaveMutate(),
    leave: () => leaveMutate(),
    delete: async () => {
      await deleteMutate();
      await revalidateGroupAction(groupId);

      if (!pathname.startsWith('/schedule')) {
        replace('/');
      }
    },
    kick: () => kickMutate(),
  };

  return (
    <ModalContent className='max-w-80'>
      {type === 'approval' ? (
        <GroupModalApprovalContent
          isPending={isPending}
          modalContent={MODAL_CONTENTS['approval']()}
          onConfirmClick={mutateByType['approval']}
        />
      ) : (
        <GroupModalCommonContent
          isPending={isPending}
          modalContent={
            type === 'kick'
              ? MODAL_CONTENTS['kick'](props.targetInfo.targetUserName)
              : MODAL_CONTENTS[type]()
          }
          onConfirmClick={mutateByType[type]}
        />
      )}
    </ModalContent>
  );
};

const MODAL_CONTENTS = {
  attend: () => ({
    title: '모임에 참여하시겠어요?',
    description: '참여 후 바로 그룹채팅에 참여할 수 있어요!',
    confirmMessage: '참여하기',
  }),
  approval: () => ({
    title: '참여 신청하기',
    description: '참여 신청 메세지',
    confirmMessage: '신청하기',
  }),
  pending: () => ({
    title: '참여 신청을 취소하시겠어요?',
    description: '조금만 더 기다려 보는건 어떨까요?',
    confirmMessage: '취소하기',
  }),
  leave: () => ({
    title: '모임을 정말 탈퇴하시겠어요?',
    description: '탈퇴 시 그룹채팅과 모임 활동이 종료돼요.',
    confirmMessage: '탈퇴하기',
  }),
  delete: () => ({
    title: '모임을 정말 취소하시겠어요?',
    description: '취소 후에는 다시 복구할 수 없어요.',
    confirmMessage: '취소하기',
  }),
  kick: (targetUserName: string) => ({
    title: `${targetUserName} 님을 내보내시겠어요?`,
    description: '이 작업은 취소할 수 없습니다.',
    confirmMessage: '내보내기',
  }),
} as const;