Merge branch 'main' into P3_change_password_UI

app/activity/[id]/graphql/query/activityCollection.graphql

@@ -11,7 +11,8 @@ query activityCollection($id: UUID!) {
         url
         memo
         cost
-        image_storage_object_id
+        cost_unit
+        image_url
       }
     }
   }

app/activity/create/graphql/mutation/createActivity.graphql

@@ -0,0 +1,35 @@
+mutation createActivity(
+  $trip_id: UUID!
+  $title: String!
+  $time_from: Datetime
+  $time_to: Datetime
+  $address: String
+  $url: String
+  $memo: String
+  $cost: BigFloat
+  $cost_unit: String
+  $image_url: String
+) {
+  insertIntoactivityCollection(
+    objects: [
+      {
+        trip_id: $trip_id
+        title: $title
+        time_from: $time_from
+        time_to: $time_to
+        address: $address
+        url: $url
+        memo: $memo
+        cost: $cost
+        cost_unit: $cost_unit
+        image_url: $image_url
+      }
+    ]
+  ) {
+    records {
+      __typename
+      id
+      title
+    }
+  }
+}

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]/__test__/mock.ts

@@ -16,7 +16,7 @@ export const tripDetailsMock1 = [
             {
               node: {
                 id: 'trip-uuid-1',
-                image_storage_object_id: null,
+                image_url: null,
                 title: 'Tokyo',
                 date_from: '2024-01-01T00:00:00+09:00',
                 date_to: '2024-01-10T00:00:00+09:00',
@@ -109,7 +109,7 @@ export const tripDetailsMock2 = [
             {
               node: {
                 id: 'trip-uuid-2',
-                image_storage_object_id: null,
+                image_url: null,
                 title: 'Tokyo',
                 date_from: '2024-01-01T00:00:00+09:00',
                 date_to: '2024-01-010T00:00:00+09:00',

app/trip/[id]/action/update-image-metadata.ts

@@ -0,0 +1,53 @@
+'use server'
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+
+export const updateImageMetadataAction = async (
+  id: string,
+  filePath: string
+): Promise<
+  | { status: 'success'; data: { publicUrl: string } }
+  | { status: 'error'; data: { publicUrl: string }; error: { message: string } }
+> => {
+  try {
+    const cookieStore = cookies()
+    // NOTE: Use createServerActionClient instead of createClient in with-cookie.ts
+    //       https://supabase.com/docs/guides/auth/auth-helpers/nextjs?language=ts#server-actions
+    const supabase = createServerActionClient({ cookies: () => cookieStore })
+
+    // Supabase Storage API is not available in the server action.
+    // const { data: uploadData, error: uploadError } = await supabase.storage
+    //   .from('tabi-memo-uploads')
+    //   .upload(`trips/${id}/${file.name}`, file, { upsert: true })
+
+    // if (uploadError) throw uploadError
+
+    const {
+      data: { publicUrl }
+    } = await supabase.storage
+      .from(process.env.NEXT_PUBLIC_BUCKET_NAME!)
+      .getPublicUrl(filePath)
+
+    const updateResponse = await supabase
+      .from('trips')
+      .update({ image_url: publicUrl })
+      .match({ id })
+
+    if (updateResponse.error) {
+      return {
+        status: 'error',
+        data: { publicUrl },
+        error: { message: updateResponse.error.message }
+      }
+    }
+
+    return { status: 'success', data: { publicUrl } }
+  } catch (error) {
+    console.error({ error })
+    return {
+      status: 'error',
+      data: { publicUrl: '' },
+      error: { message: 'Failed to upload image' }
+    }
+  }
+}

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]/edit/page.tsx

@@ -103,7 +103,7 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
             <TripForm
               tripDetails={{
                 id: tripDataCollection.id,
-                image: tripDataCollection.image_storage_object_id,
+                image: tripDataCollection.image_url,
                 title: tripDataCollection.title,
                 dateFrom: tripDataCollection.date_from,
                 dateTo: tripDataCollection.date_to,