All files / src/components/pages/schedule/schedule-list/schedule-list-content/schedule-card card.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

import { useRouter } from 'next/navigation';

import { useQuery } from '@tanstack/react-query';

import { API } from '@/api';
import { GroupModal } from '@/components/pages/group/group-modal';
import CardComponent from '@/components/shared/card';
import { useModal } from '@/components/ui';
import { formatDateTime } from '@/lib/formatDateTime';
import { groupKeys } from '@/lib/query-key/query-key-group';
import { GroupListItemResponse } from '@/types/service/group';

type TabType = 'current' | 'myPost' | 'past';

interface Props {
  createdBy: GroupListItemResponse['createdBy'];
  groupId: string;
  isFinished: boolean;
  isHost: boolean;
  isPending: boolean;
  joinPolicy: GroupListItemResponse['joinPolicy'];
  group: GroupListItemResponse;
  modalType: 'pending' | 'leave' | 'delete';
  shouldFetchChatRoomId: boolean;
  showActions: boolean;
  tabType: TabType;
}

export const ScheduleCard = ({
  createdBy,
  groupId,
  isFinished,
  isHost,
  isPending,
  joinPolicy,
  group,
  modalType,
  shouldFetchChatRoomId,
  showActions,
  tabType,
}: Props) => {
  const router = useRouter();
  const { open } = useModal();

  const { data: groupDetails } = useQuery({
    queryKey: groupKeys.detail(groupId),
    queryFn: () => API.groupService.getGroupDetails({ groupId }),
    enabled: shouldFetchChatRoomId,
  });

  const handleChatClick = () => {
    if (!groupDetails?.chatRoomId) return;
    router.push(`/message/chat/${groupDetails.chatRoomId}`);
  };

  const handleLeaveClick = () => {
    open(<GroupModal groupId={groupId} type={modalType} />);
  };

  const handleCardClick = () => {
    router.push(`/group/${groupId}`);
  };

  return (
    <CardComponent
      dateTime={formatDateTime(group.startTime)}
      images={group.images}
      isFinished={isFinished}
      isHost={isHost}
      isPending={isPending}
      joinPolicy={joinPolicy}
      leaveAndChatActions={
        showActions
          ? {
              onLeave: handleLeaveClick,
              onChat: handleChatClick,
            }
          : undefined
      }
      location={group.location}
      maxParticipants={group.maxParticipants}
      nickName={createdBy.nickName}
      participantCount={group.participantCount}
      profileImage={createdBy.profileImage}
      tabType={tabType}
      tags={group.tags}
      title={group.title}
      onClick={handleCardClick}
    />
  );
};