diff --git a/src/pages/organizers/[organizerId]/ownerships/index.page.tsx b/src/pages/organizers/[organizerId]/ownerships/index.page.tsx index 8e6d1e97a..26c18fe4d 100644 --- a/src/pages/organizers/[organizerId]/ownerships/index.page.tsx +++ b/src/pages/organizers/[organizerId]/ownerships/index.page.tsx @@ -1,21 +1,26 @@ import groupBy from 'lodash/groupBy'; import { useRouter } from 'next/router'; -import { useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { dehydrate } from 'react-query'; +import { useMemo, useState } from 'react'; +import { Trans, useTranslation } from 'react-i18next'; +import { dehydrate, useQueryClient } from 'react-query'; import { useGetOrganizerByIdQuery } from '@/hooks/api/organizers'; import { OwnershipRequest, RequestState, + useApproveOwnershipRequestMutation, useGetOwnershipRequestsQuery, + useRejectOwnershipRequestMutation, } from '@/hooks/api/ownerships'; import { Organizer } from '@/types/Organizer'; +import { Values } from '@/types/Values'; import { Alert, AlertVariants } from '@/ui/Alert'; +import { Box } from '@/ui/Box'; import { Button, ButtonVariants } from '@/ui/Button'; import { Icon } from '@/ui/Icon'; import { Icons } from '@/ui/Icon'; import { Inline } from '@/ui/Inline'; +import { Modal, ModalSizes, ModalVariants } from '@/ui/Modal'; import { Page } from '@/ui/Page'; import { Stack } from '@/ui/Stack'; import { Title } from '@/ui/Title'; @@ -23,9 +28,20 @@ import { getApplicationServerSideProps } from '@/utils/getApplicationServerSideP import { OwnershipsTable } from './OwnershipsTable'; +const ActionType = { + APPROVE: 'approve', + REJECT: 'reject', +} as const; + +type ActionType = Values; + const Ownership = () => { const router = useRouter(); const { t, i18n } = useTranslation(); + const queryClient = useQueryClient(); + const [selectedRequest, setSelectedRequest] = useState(); + const [actionType, setActionType] = useState(); + const isApproveAction = actionType === ActionType.APPROVE; const organizerId = useMemo( () => router.query.organizerId as string, @@ -55,6 +71,35 @@ const Ownership = () => { const approvedRequests = requestsByState[RequestState.APPROVED] ?? []; const pendingRequests = requestsByState[RequestState.REQUESTED] ?? []; + const approveOwnershipRequestMutation = useApproveOwnershipRequestMutation(); + + const rejectOwnershipRequestMutation = useRejectOwnershipRequestMutation(); + + const isMutationSuccesful = + approveOwnershipRequestMutation.isSuccess || + rejectOwnershipRequestMutation.isSuccess; + + const handleConfirm = () => { + if (isApproveAction) { + approveOwnershipRequestMutation.mutate({ + ownershipId: selectedRequest.id, + }); + } else { + rejectOwnershipRequestMutation.mutate({ + ownershipId: selectedRequest.id, + }); + } + }; + + const handleClose = async () => { + if (isMutationSuccesful) { + await queryClient.invalidateQueries('ownership-requests'); + setSelectedRequest(undefined); + } else { + setSelectedRequest(undefined); + } + }; + return ( @@ -90,6 +135,10 @@ const Ownership = () => { variant={ButtonVariants.SUCCESS} iconName={Icons.CHECK_CIRCLE} spacing={3} + onClick={() => { + setSelectedRequest(request); + setActionType(ActionType.APPROVE); + }} > {t('organizers.ownerships.table.actions.approve')} @@ -97,12 +146,59 @@ const Ownership = () => { variant={ButtonVariants.DANGER} iconName={Icons.TIMES_CIRCLE} spacing={3} + onClick={() => { + setSelectedRequest(request); + setActionType(ActionType.REJECT); + }} > {t('organizers.ownerships.table.actions.reject')} )} /> + + + + + )}