【M2】Trip Delete & Trip_Tags Delete

app/components/modal/confirm-modal.tsx

@@ -4,42 +4,41 @@ import {
   ModalContent,
   ModalFooter,
   ModalBody,
-  ModalCloseButton,
-  Text
+  ModalCloseButton
 } from '@chakra-ui/react'
 import { SecondaryButton, AlertButton } from '../button'
 
 type ConfirmModalProps = {
   isOpen: boolean
   onClose: () => void
-  confirmText: string
+  confirmBody: React.ReactNode
   submitLabel: string
   onClick: () => void
+  isMutating?: boolean
 }
 
 export const ConfirmModal = ({
   isOpen,
   onClose,
-  confirmText,
+  confirmBody,
   submitLabel,
-  onClick
+  onClick,
+  isMutating
 }: ConfirmModalProps) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered>
       <ModalOverlay />
       <ModalContent maxW={'30rem'}>
         <ModalCloseButton />
-        <ModalBody pt="48px">
-          <Text fontSize="xl" fontWeight="semibold">
-            Are you sure you want to {confirmText}?
-          </Text>
-        </ModalBody>
+        <ModalBody pt="48px">{confirmBody}</ModalBody>
 
         <ModalFooter>
-          <SecondaryButton mr={3} onClick={onClose}>
+          <SecondaryButton mr={3} onClick={onClose} isDisabled={isMutating}>
             Close
           </SecondaryButton>
-          <AlertButton onClick={onClick}>{submitLabel}</AlertButton>
+          <AlertButton onClick={onClick} isLoading={isMutating}>
+            {submitLabel}
+          </AlertButton>
         </ModalFooter>
       </ModalContent>
     </Modal>

app/components/modal/stories/confirm-model.stories.tsx

@@ -1,4 +1,4 @@
-import { useDisclosure } from '@chakra-ui/react'
+import { useDisclosure, Text } from '@chakra-ui/react'
 import { ConfirmModal } from '@/components/modal'
 import type { Meta, StoryObj } from '@storybook/react'
 
@@ -11,7 +11,11 @@ const WrapperComponent = () => {
       <ConfirmModal
         isOpen={isOpen}
         onClose={onClose}
-        confirmText="delete this activity"
+        confirmBody={
+          <Text fontSize="lg" fontWeight="semibold">
+            Are you sure you want to delete this tag?
+          </Text>
+        }
         onClick={() => {}}
         submitLabel="Delete"
       />

app/trip/[id]/components/activity-card.tsx

@@ -170,7 +170,11 @@ export const ActivityCard = ({ activity, selectedDate }: ActivityCardProps) => {
       <ConfirmModal
         isOpen={isDeleteModalOpen}
         onClose={onDeleteModalClose}
-        confirmText="delete this activity"
+        confirmBody={
+          <Text fontSize="lg" fontWeight="semibold">
+            Are you sure you want to delete this activity?
+          </Text>
+        }
         onClick={() => {}}
         submitLabel="Delete"
       />

app/trip/[id]/components/trip-details-header.tsx

@@ -6,13 +6,17 @@ import {
   useColorModeValue,
   Image as ChakraImage,
   Link,
-  IconButton
+  IconButton,
+  useDisclosure,
+  Text
 } from '@chakra-ui/react'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import { FiEdit3, FiShare2, FiTrash2 } from 'react-icons/fi'
 import { MdManageAccounts, MdAccountCircle } from 'react-icons/md'
+import { ConfirmModal } from '@/components/modal'
 import { formatDateToSlash } from '@/libs/utils'
+import { useTripDelete } from '../../hooks'
 
 type TripDetailsHeaderProps = {
   id: string
@@ -50,6 +54,14 @@ export const TripDetailsHeader = ({
   const color = useColorModeValue('black', 'gray.300')
   const tagBgColor = useColorModeValue('primary.700', 'primary.800')
 
+  const {
+    isOpen: isDeleteModalOpen,
+    onOpen: onDeleteModalOpen,
+    onClose: onDeleteModalClose
+  } = useDisclosure()
+
+  const { deleteTrip, isTripDeleting } = useTripDelete(id)
+
   return (
     <Box>
       <Box
@@ -122,10 +134,9 @@ export const TripDetailsHeader = ({
             >
               <FiEdit3 size="100%" />
             </IconButton>
-            {/* TODO Change to modal */}
             <IconButton
               aria-label="Delete this trip"
-              onClick={() => {}}
+              onClick={onDeleteModalOpen}
               variant="roundIcon"
               p={{ base: '6px', md: '10px' }}
             >
@@ -205,6 +216,20 @@ export const TripDetailsHeader = ({
           )}
         </Flex>
       </Box>
+
+      {/* Delete Trip Modal */}
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        onClose={onDeleteModalClose}
+        confirmBody={
+          <Text fontSize="lg" fontWeight="semibold">
+            Are you sure you want to delete this trip?
+          </Text>
+        }
+        onClick={deleteTrip}
+        isMutating={isTripDeleting}
+        submitLabel="Delete"
+      />
     </Box>
   )
 }

app/trip/[id]/page.tsx

@@ -6,9 +6,9 @@ import { createClient } from '@supabase/supabase-js'
 import { useRouter } from 'next/navigation'
 import { PrimaryButton } from '@/components/button'
 import { Loading } from '@/components/loading'
+import { useTripDetailsGet } from '../hooks'
 import { updateImageMetadataAction } from './action/update-image-metadata'
 import { TripDetailsHeader, TripDetailsTabs } from './components'
-import { useTripDetailsQuery } from '@generated/api'
 
 export default function TripDetailsPage({
   params
@@ -19,20 +19,13 @@ export default function TripDetailsPage({
   const color = useColorModeValue('black', 'gray.300')
 
   const router = useRouter()
+  const { tripDetailsData, tripDetailsLoading, tripDetailsRefetch } =
+    useTripDetailsGet(params.id)
 
-  const {
-    data: tripData,
-    loading: tripLoading,
-    refetch: refetchTrip
-  } = useTripDetailsQuery({
-    variables: {
-      id: params.id
-    }
-  })
-
-  if (!tripData && !tripLoading) throw new Error('No trip data found')
+  if (!tripDetailsData && !tripDetailsLoading)
+    throw new Error('No trip data found')
 
-  const tripDataCollection = tripData?.tripsCollection
+  const tripData = tripDetailsData?.tripsCollection
   const [selectedImage, setSelectedImage] = useState<File | null>(null)
 
   const uploadImage = async (id: string, file: File) => {
@@ -53,7 +46,7 @@ export default function TripDetailsPage({
       await updateImageMetadataAction(id, uploadData.path)
 
       setSelectedImage(file)
-      await refetchTrip()
+      await tripDetailsRefetch()
     } catch (error) {
       console.error({ error })
       throw error
@@ -67,32 +60,32 @@ export default function TripDetailsPage({
         pt={{ base: '0px', md: '30px' }}
         pb={{ base: '40px', md: '80px' }}
       >
-        {!tripDataCollection || tripLoading ? (
+        {!tripData || tripDetailsLoading ? (
           <Loading />
         ) : (
           <>
             <TripDetailsHeader
-              id={tripDataCollection.edges[0].node.id}
+              id={tripData.edges[0].node.id}
               image={
                 selectedImage
                   ? URL.createObjectURL(selectedImage)
-                  : tripDataCollection.edges[0].node.image_url
+                  : tripData.edges[0].node.image_url
               }
-              title={tripDataCollection.edges[0].node.title}
-              dateFrom={tripDataCollection.edges[0].node.date_from}
-              dateTo={tripDataCollection.edges[0].node.date_to}
-              cost={tripDataCollection.edges[0].node.cost}
-              costUnit={tripDataCollection.edges[0].node.cost_unit}
+              title={tripData.edges[0].node.title}
+              dateFrom={tripData.edges[0].node.date_from}
+              dateTo={tripData.edges[0].node.date_to}
+              cost={tripData.edges[0].node.cost}
+              costUnit={tripData.edges[0].node.cost_unit}
               users={
-                tripDataCollection.edges[0].node.invitationsCollection?.edges.map(
+                tripData.edges[0].node.invitationsCollection?.edges.map(
                   (invitation) => ({
                     id: invitation.node.users?.id,
                     image: invitation.node.users?.profile_picture_url
                   })
                 ) || []
               }
               tags={
-                tripDataCollection.edges[0].node.trip_tagsCollection?.edges.map(
+                tripData.edges[0].node.trip_tagsCollection?.edges.map(
                   (tag) => ({
                     id: tag.node.tags?.id,
                     name: tag.node.tags?.name
@@ -103,7 +96,7 @@ export default function TripDetailsPage({
 
             <TripDetailsTabs
               activities={
-                tripDataCollection.edges[0].node.activityCollection?.edges.map(
+                tripData.edges[0].node.activityCollection?.edges.map(
                   (activity) => ({
                     id: activity.node.id,
                     timeFrom: activity.node.time_from,