Merge branch 'main' into A1_sign_in_UI

app/(auth)/change-password/page.tsx

@@ -3,23 +3,25 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   Box,
-  Flex,
   FormLabel,
   FormErrorMessage,
   FormControl,
-  Input,
   Heading,
   useToast,
-  useBoolean
+  useBoolean,
+  useColorModeValue,
+  VStack
 } from '@chakra-ui/react'
 import { useRouter } from 'next/navigation'
 import {
   changePasswordResolver,
   ChangePasswordSchema
 } from '@/(auth)/change-password/schema'
 import { PrimaryButton } from '@/components/button'
+import { InputForm } from '@/components/input'
 
 export default function ChangePassword() {
+  const color = useColorModeValue('black', 'gray.300')
   const toast = useToast()
   const [isLoading, setIsLoading] = useBoolean()
   const [toastId, setToastId] = useState<ReturnType<typeof toast> | undefined>(
@@ -63,38 +65,80 @@ export default function ChangePassword() {
   )
 
   return (
-    <>
-      <Heading>Change Password</Heading>
-      <Box as="form" onSubmit={changePasswordHandler}>
-        <Flex flexDirection={'column'}>
+    <Box
+      as="main"
+      w="100vw"
+      minH={{ base: 'calc(100vh - 140px)', md: 'calc(100vh - 205px)' }}
+      color={color}
+    >
+      <VStack
+        mt={{ base: '20px', md: '40px' }}
+        mx="auto"
+        w={{ base: '100%', md: '480px' }}
+        px={{ base: '16px', md: '80px' }}
+      >
+        <Heading
+          as="h1"
+          fontSize={{ base: '2xl', md: '4xl' }}
+          mb="40px"
+          w={{ base: '100%', md: '480px' }}
+          maxW="480px"
+          textAlign={{ base: 'left', md: 'center' }}
+        >
+          Change Password
+        </Heading>
+        <VStack
+          spacing={{ base: '30px', md: '40px' }}
+          w={{ base: '100%', md: '480px' }}
+          maxW="480px"
+          as="form"
+          onSubmit={changePasswordHandler}
+        >
           <FormControl isInvalid={!!errors.oldPassword}>
             <FormLabel>Old Password</FormLabel>
-            <Input type="password" {...register('oldPassword')} />
+            <InputForm
+              type="password"
+              hasEyeIcon={true}
+              {...register('oldPassword')}
+              w={{ base: '100%', md: '480px' }}
+            />
             {errors.oldPassword && (
               <FormErrorMessage>{errors.oldPassword.message}</FormErrorMessage>
             )}
           </FormControl>
           <FormControl isInvalid={!!errors.newPassword}>
             <FormLabel>New Password</FormLabel>
-            <Input type="password" {...register('newPassword')} />
+            <InputForm
+              type="password"
+              hasEyeIcon={true}
+              {...register('newPassword')}
+            />
             {errors.newPassword && (
               <FormErrorMessage>{errors.newPassword.message}</FormErrorMessage>
             )}
           </FormControl>
           <FormControl isInvalid={!!errors.confirmNewPassword}>
             <FormLabel>Confirm New Password</FormLabel>
-            <Input type="password" {...register('confirmNewPassword')} />
+            <InputForm
+              type="password"
+              hasEyeIcon={true}
+              {...register('confirmNewPassword')}
+            />
             {errors.confirmNewPassword && (
               <FormErrorMessage>
                 {errors.confirmNewPassword.message}
               </FormErrorMessage>
             )}
           </FormControl>
-          <PrimaryButton isLoading={isLoading} type={'submit'}>
+          <PrimaryButton
+            isLoading={isLoading}
+            type={'submit'}
+            mb={{ base: '60px', md: '70px' }}
+          >
             Change Password
           </PrimaryButton>
-        </Flex>
-      </Box>
-    </>
+        </VStack>
+      </VStack>
+    </Box>
   )
 }

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>
   )
 }