From c54584493eac7a24672f1262f3560e37ea2e149e Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Wed, 17 Jan 2024 21:32:33 +0900
Subject: [PATCH 01/13] Add Trip edit/create UI

---
 app/components/input/index.ts         |  2 +-
 app/components/input/input-icon.tsx   | 47 ++++++++++++++++
 app/components/input/input-search.tsx | 45 ----------------
 app/trip/[id]/edit/page.tsx           | 34 ++++++++++++
 app/trip/[id]/page.tsx                |  2 +-
 app/trip/components/index.ts          |  2 +
 app/trip/components/trip-form-tag.tsx | 77 +++++++++++++++++++++++++++
 app/trip/components/trip-form.tsx     | 67 +++++++++++++++++++++++
 app/trip/components/trip-search.tsx   |  6 ++-
 app/trip/create/page.tsx              | 11 +++-
 10 files changed, 242 insertions(+), 51 deletions(-)
 create mode 100644 app/components/input/input-icon.tsx
 delete mode 100644 app/components/input/input-search.tsx
 create mode 100644 app/trip/[id]/edit/page.tsx
 create mode 100644 app/trip/components/trip-form-tag.tsx
 create mode 100644 app/trip/components/trip-form.tsx

diff --git a/app/components/input/index.ts b/app/components/input/index.ts
index 9ce8684..d4f1b9c 100644
--- a/app/components/input/index.ts
+++ b/app/components/input/index.ts
@@ -1,3 +1,3 @@
-export { InputSearch } from './input-search'
 export { InputForm } from './input-form'
+export { InputIcon } from './input-icon'
 export { TextareaForm } from './textarea-form'
diff --git a/app/components/input/input-icon.tsx b/app/components/input/input-icon.tsx
new file mode 100644
index 0000000..78f5c1a
--- /dev/null
+++ b/app/components/input/input-icon.tsx
@@ -0,0 +1,47 @@
+import { IconType } from 'react-icons'
+import {
+  Input as ChakraInput,
+  InputProps as ChakraInputProps,
+  InputGroup,
+  InputRightElement,
+  IconButton,
+  forwardRef,
+  useColorModeValue
+} from '@chakra-ui/react'
+
+type InputIconProps = {
+  ariaLabel: string
+  icon: IconType
+  onClick?: () => void
+}
+
+export const InputIcon = forwardRef<ChakraInputProps & InputIconProps, 'input'>(
+  ({ ariaLabel, icon: Icon, onClick, ...props }, ref) => {
+    const bgColor = useColorModeValue('white', 'gray.700')
+    const borderColor = useColorModeValue('primary.700', 'gray.500')
+
+    return (
+      <InputGroup minW={{ base: '100%', md: '23.75rem' }}>
+        <ChakraInput
+          ref={ref}
+          {...props}
+          borderColor={borderColor}
+          focusBorderColor={'primary.600'}
+          bgColor={bgColor}
+          _placeholder={{ color: 'gray.400' }}
+        />
+        <InputRightElement>
+          <IconButton
+            aria-label={ariaLabel}
+            variant="unstyled"
+            type={onClick ? 'button' : 'submit'}
+            onClick={onClick}
+            color="primary.700"
+          >
+            <Icon size="24px" />
+          </IconButton>
+        </InputRightElement>
+      </InputGroup>
+    )
+  }
+)
diff --git a/app/components/input/input-search.tsx b/app/components/input/input-search.tsx
deleted file mode 100644
index 11c1462..0000000
--- a/app/components/input/input-search.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
-  Input as ChakraInput,
-  InputProps as ChakraInputProps,
-  InputGroup,
-  InputRightElement,
-  IconButton,
-  forwardRef,
-  useColorModeValue
-} from '@chakra-ui/react'
-import { FiSearch } from 'react-icons/fi'
-
-type InputSearchProps = {
-  ariaLabel: string
-}
-
-export const InputSearch = forwardRef<
-  ChakraInputProps & InputSearchProps,
-  'input'
->(({ ariaLabel, ...props }, ref) => {
-  const bgColor = useColorModeValue('white', 'gray.700')
-  const borderColor = useColorModeValue('primary.700', 'gray.500')
-
-  return (
-    <InputGroup minW={{ base: '100%', md: '23.75rem' }}>
-      <ChakraInput
-        ref={ref}
-        {...props}
-        borderColor={borderColor}
-        focusBorderColor={'primary.600'}
-        bgColor={bgColor}
-        _placeholder={{ color: 'gray.400' }}
-      />
-      <InputRightElement>
-        <IconButton
-          aria-label={ariaLabel}
-          variant="unstyled"
-          type="submit"
-          color="primary.700"
-        >
-          <FiSearch size="24px" />
-        </IconButton>
-      </InputRightElement>
-    </InputGroup>
-  )
-})
diff --git a/app/trip/[id]/edit/page.tsx b/app/trip/[id]/edit/page.tsx
new file mode 100644
index 0000000..7e491ea
--- /dev/null
+++ b/app/trip/[id]/edit/page.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { Box, Container, Heading, useColorModeValue } from '@chakra-ui/react'
+// import { Loading } from '@/components/loading'
+import { Header, Footer } from '@/components/navigation'
+import { TripForm } from '../../components'
+
+export default function TripEditPage({ params }: { params: { id: string } }) {
+  const bg = useColorModeValue('white', 'gray.800')
+  const color = useColorModeValue('black', 'gray.300')
+
+  console.log(params)
+
+  return (
+    <>
+      <Header />
+      <Box as="main" minH="100svh" bg={bg} color={color}>
+        <Container
+          maxW={{ base: '100%', lg: 'container.sm' }}
+          pt={{ base: '20px', md: '30px' }}
+          pb={{ base: '40px', md: '80px' }}
+        >
+          <Heading as="h1" fontSize={{ base: '2xl', md: '4xl' }}>
+            Edit Trip
+          </Heading>
+          <Box mt="40px">
+            <TripForm />
+          </Box>
+        </Container>
+      </Box>
+      <Footer />
+    </>
+  )
+}
diff --git a/app/trip/[id]/page.tsx b/app/trip/[id]/page.tsx
index f730f79..4d8173d 100644
--- a/app/trip/[id]/page.tsx
+++ b/app/trip/[id]/page.tsx
@@ -31,7 +31,7 @@ export default function TripDetailsPage({
   return (
     <>
       <Header />
-      <Box as="main" minH="100vh" bg={bg} color={color}>
+      <Box as="main" minH="100svh" bg={bg} color={color}>
         <Container
           maxW={{ base: '100%', lg: 'container.xl' }}
           pt={{ base: '0px', md: '30px' }}
diff --git a/app/trip/components/index.ts b/app/trip/components/index.ts
index ddcac6d..d1bbaa2 100644
--- a/app/trip/components/index.ts
+++ b/app/trip/components/index.ts
@@ -1,3 +1,5 @@
 export { TripCard } from './trip-card'
+export { TripFormTag } from './trip-form-tag'
+export { TripForm } from './trip-form'
 export { TripSearch } from './trip-search'
 export { TripSort } from './trip-sort'
diff --git a/app/trip/components/trip-form-tag.tsx b/app/trip/components/trip-form-tag.tsx
new file mode 100644
index 0000000..46c95ac
--- /dev/null
+++ b/app/trip/components/trip-form-tag.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState, KeyboardEvent } from 'react'
+import { useFormContext } from 'react-hook-form'
+import {
+  FormControl,
+  FormLabel,
+  Flex,
+  Tag,
+  useColorModeValue,
+  TagLabel,
+  TagCloseButton
+} from '@chakra-ui/react'
+import { FiPlusCircle } from 'react-icons/fi'
+import { InputIcon } from '@/components/input'
+
+export const TripFormTag = () => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [tags, setTags] = useState<string[]>([])
+
+  const tagBgColor = useColorModeValue('primary.700', 'primary.800')
+
+  const { setValue } = useFormContext()
+
+  const addTag = () => {
+    const userInput = inputRef?.current?.value
+    if (userInput) {
+      setTags((prevTags) => [...prevTags, userInput])
+      inputRef.current!.value = ''
+    }
+  }
+
+  const addEnterHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      addTag()
+    }
+  }
+
+  const deleteClickHandler = (name: string) => {
+    setTags((prevTags) => prevTags.filter((tag) => tag !== name))
+  }
+
+  useEffect(() => {
+    setValue('tags', tags)
+  }, [tags, setValue])
+
+  return (
+    <FormControl>
+      <FormLabel>Tag</FormLabel>
+      <InputIcon
+        type={'text'}
+        placeholder={'Add tag'}
+        ariaLabel={'Add tag'}
+        icon={FiPlusCircle}
+        ref={inputRef}
+        onKeyDown={(e) => addEnterHandler(e)}
+        onClick={addTag}
+      />
+      <Flex mt="20px" gap="10px" flexWrap="wrap">
+        {tags.map((tag, index) => (
+          <Tag
+            key={index}
+            variant="solid"
+            bgColor={tagBgColor}
+            borderRadius="full"
+            px={'20px'}
+            h={{ base: '1.5rem', md: '2.125rem' }}
+            fontSize={{ base: 'sm', md: 'sm' }}
+            position="relative"
+          >
+            <TagLabel>{tag}</TagLabel>
+            <TagCloseButton onClick={() => deleteClickHandler(tag)} />
+          </Tag>
+        ))}
+      </Flex>
+    </FormControl>
+  )
+}
diff --git a/app/trip/components/trip-form.tsx b/app/trip/components/trip-form.tsx
new file mode 100644
index 0000000..947a10c
--- /dev/null
+++ b/app/trip/components/trip-form.tsx
@@ -0,0 +1,67 @@
+import { useForm, FormProvider } from 'react-hook-form'
+import {
+  FormControl,
+  FormLabel,
+  // FormErrorMessage,
+  Image,
+  VStack,
+  HStack,
+  useColorModeValue
+} from '@chakra-ui/react'
+import { PrimaryButton } from '@/components/button'
+import { DateTimePickerWrapper } from '@/components/customDateTimePicker'
+import { InputForm } from '@/components/input'
+import { TripFormTag } from '../components'
+
+export const TripForm = () => {
+  const methods = useForm()
+
+  const imageSrc = useColorModeValue(
+    '/images/no_image_light.jpg',
+    '/images/no_image_dark.jpg'
+  )
+
+  return (
+    <FormProvider {...methods}>
+      <VStack as="form" gap={{ base: '30px', md: '40px' }}>
+        <FormControl>
+          <FormLabel>Title</FormLabel>
+          <InputForm type="text" placeholder="Asakusa Temple" />
+        </FormControl>
+
+        <FormControl>
+          <FormLabel>Date From</FormLabel>
+          <DateTimePickerWrapper
+            onChange={() => console.log('onChange')}
+            value={null}
+          />
+        </FormControl>
+
+        <FormControl>
+          <FormLabel>Date To</FormLabel>
+          <DateTimePickerWrapper
+            onChange={() => console.log('onChange')}
+            value={null}
+          />
+        </FormControl>
+
+        <FormControl>
+          <FormLabel>Image</FormLabel>
+          <HStack gap={{ base: '20px', md: '34px' }}>
+            <Image alt="" src={imageSrc} width="50%" />
+            <PrimaryButton variant="outline">Select Image </PrimaryButton>
+          </HStack>
+        </FormControl>
+
+        <TripFormTag />
+
+        <FormControl>
+          <FormLabel>Cost</FormLabel>
+          <InputForm type="text" placeholder="$200" />
+        </FormControl>
+
+        <PrimaryButton size="lg">Save Trip</PrimaryButton>
+      </VStack>
+    </FormProvider>
+  )
+}
diff --git a/app/trip/components/trip-search.tsx b/app/trip/components/trip-search.tsx
index 86ebaf0..b40241f 100644
--- a/app/trip/components/trip-search.tsx
+++ b/app/trip/components/trip-search.tsx
@@ -2,7 +2,8 @@
 import { useRef, FormEvent, KeyboardEvent } from 'react'
 import { Box } from '@chakra-ui/react'
 import { useRouter } from 'next/navigation'
-import { InputSearch } from '@/components/input'
+import { FiSearch } from 'react-icons/fi'
+import { InputIcon } from '@/components/input'
 
 export const TripSearch = () => {
   const router = useRouter()
@@ -37,13 +38,14 @@ export const TripSearch = () => {
 
   return (
     <Box as="form" onSubmit={submitHandler}>
-      <InputSearch
+      <InputIcon
         type={'text'}
         name={'searchWord'}
         placeholder={'Search trips by title'}
         ariaLabel={'Search trips by title'}
         onKeyDown={(e) => submitByEnter(e)}
         ref={inputRef}
+        icon={FiSearch}
       />
     </Box>
   )
diff --git a/app/trip/create/page.tsx b/app/trip/create/page.tsx
index df0bcfd..187c763 100644
--- a/app/trip/create/page.tsx
+++ b/app/trip/create/page.tsx
@@ -1,20 +1,27 @@
 'use client'
 import { Heading, Box, Container, useColorModeValue } from '@chakra-ui/react'
 import { Header, Footer } from '@/components/navigation'
+import { TripForm } from '../components'
 
 export default function CreateTripPage() {
   const bg = useColorModeValue('white', 'gray.800')
   const color = useColorModeValue('black', 'gray.300')
+
   return (
     <>
       <Header />
       <Box as="main" minH="100vh" bg={bg} color={color}>
         <Container
-          maxW={{ base: '100%', lg: 'container.xl' }}
+          maxW={{ base: '100%', lg: 'container.sm' }}
           pt={{ base: '20px', md: '30px' }}
           pb={{ base: '40px', md: '80px' }}
         >
-          <Heading>Create Trip</Heading>
+          <Heading as="h1" fontSize={{ base: '2xl', md: '4xl' }}>
+            Create Trip
+          </Heading>
+          <Box mt="40px">
+            <TripForm />
+          </Box>
         </Container>
       </Box>
       <Footer />

From 17761e8dcdbb1ec7a854dd7896a0882e033e7db5 Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Wed, 17 Jan 2024 21:46:04 +0900
Subject: [PATCH 02/13] Fix name

---
 app/trip/components/trip-form.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/trip/components/trip-form.tsx b/app/trip/components/trip-form.tsx
index 947a10c..21ca08a 100644
--- a/app/trip/components/trip-form.tsx
+++ b/app/trip/components/trip-form.tsx
@@ -9,7 +9,7 @@ import {
   useColorModeValue
 } from '@chakra-ui/react'
 import { PrimaryButton } from '@/components/button'
-import { DateTimePickerWrapper } from '@/components/customDateTimePicker'
+import { CustomDateTimePicker } from '@/components/customDateTimePicker'
 import { InputForm } from '@/components/input'
 import { TripFormTag } from '../components'
 
@@ -31,7 +31,7 @@ export const TripForm = () => {
 
         <FormControl>
           <FormLabel>Date From</FormLabel>
-          <DateTimePickerWrapper
+          <CustomDateTimePicker
             onChange={() => console.log('onChange')}
             value={null}
           />
@@ -39,7 +39,7 @@ export const TripForm = () => {
 
         <FormControl>
           <FormLabel>Date To</FormLabel>
-          <DateTimePickerWrapper
+          <CustomDateTimePicker
             onChange={() => console.log('onChange')}
             value={null}
           />

From ffe39a34492f8e3aeb11b0003017df906f9f0805 Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Wed, 17 Jan 2024 21:50:22 +0900
Subject: [PATCH 03/13] Amend storybook

---
 .../input/stories/inputIcon.stories.tsx        | 18 ++++++++++++++++++
 .../input/stories/inputSearch.stories.tsx      | 16 ----------------
 2 files changed, 18 insertions(+), 16 deletions(-)
 create mode 100644 app/components/input/stories/inputIcon.stories.tsx
 delete mode 100644 app/components/input/stories/inputSearch.stories.tsx

diff --git a/app/components/input/stories/inputIcon.stories.tsx b/app/components/input/stories/inputIcon.stories.tsx
new file mode 100644
index 0000000..59ca0e6
--- /dev/null
+++ b/app/components/input/stories/inputIcon.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { FiSearch } from 'react-icons/fi'
+import { InputIcon } from '@/components/input'
+
+const meta: Meta<typeof InputIcon> = {
+  title: 'Input Icon',
+  component: InputIcon
+}
+export default meta
+type Story = StoryObj<typeof InputIcon>
+
+export const Default: Story = {
+  args: {
+    ariaLabel: 'Search',
+    placeholder: 'Search...',
+    icon: FiSearch
+  }
+}
diff --git a/app/components/input/stories/inputSearch.stories.tsx b/app/components/input/stories/inputSearch.stories.tsx
deleted file mode 100644
index ef5196f..0000000
--- a/app/components/input/stories/inputSearch.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import { InputSearch } from '../index'
-
-const meta: Meta<typeof InputSearch> = {
-  title: 'Input Search',
-  component: InputSearch
-}
-export default meta
-type Story = StoryObj<typeof InputSearch>
-
-export const Default: Story = {
-  args: {
-    ariaLabel: 'Search',
-    placeholder: 'Search...'
-  }
-}

From 4c0f5aa90d9b98d1b2d9996cb6617d3cfdb60de7 Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Fri, 26 Jan 2024 13:28:51 -0800
Subject: [PATCH 04/13] Change tags form

---
 app/components/input/input-form.tsx           |   2 +-
 app/components/input/input-icon.tsx           |   1 +
 app/components/loading/loading.tsx            |  10 +-
 app/trip/[id]/edit/page.tsx                   |  59 ++-
 app/trip/components/index.ts                  |   2 +-
 app/trip/components/tag-form-modal.tsx        | 178 +++++++++
 app/trip/components/trip-form-tag.tsx         |  77 ----
 app/trip/components/trip-form.tsx             | 143 ++++++-
 app/trip/graphql/mutation/createTag.graphql   |   9 +
 app/trip/graphql/mutation/deleteTag.graphql   |   9 +
 app/trip/graphql/query/tagsCollection.graphql |  13 +
 app/trip/graphql/query/tripDetails.graphql    |   2 +
 app/trip/schema.ts                            |  21 +
 graphql-codegen/generated/api.ts              | 276 +++++++++++++
 graphql-codegen/generated/gql.ts              |  30 +-
 graphql-codegen/generated/graphql.ts          | 374 +++++++++++++++++-
 .../generated/persisted-documents.json        |   5 +-
 17 files changed, 1103 insertions(+), 108 deletions(-)
 create mode 100644 app/trip/components/tag-form-modal.tsx
 delete mode 100644 app/trip/components/trip-form-tag.tsx
 create mode 100644 app/trip/graphql/mutation/createTag.graphql
 create mode 100644 app/trip/graphql/mutation/deleteTag.graphql
 create mode 100644 app/trip/graphql/query/tagsCollection.graphql
 create mode 100644 app/trip/schema.ts

diff --git a/app/components/input/input-form.tsx b/app/components/input/input-form.tsx
index 03a5c4d..50923cb 100644
--- a/app/components/input/input-form.tsx
+++ b/app/components/input/input-form.tsx
@@ -13,7 +13,7 @@ export const InputForm = forwardRef(
     const placeholdercolor = useColorModeValue('gray.400', 'gray.600')
 
     return (
-      <InputGroup minW={{ base: '100%', md: '23.75rem' }}>
+      <InputGroup minW={'100%'}>
         <ChakraFormInput
           {...props}
           ref={ref}
diff --git a/app/components/input/input-icon.tsx b/app/components/input/input-icon.tsx
index 78f5c1a..9e23325 100644
--- a/app/components/input/input-icon.tsx
+++ b/app/components/input/input-icon.tsx
@@ -37,6 +37,7 @@ export const InputIcon = forwardRef<ChakraInputProps & InputIconProps, 'input'>(
             type={onClick ? 'button' : 'submit'}
             onClick={onClick}
             color="primary.700"
+            isDisabled={props.isDisabled}
           >
             <Icon size="24px" />
           </IconButton>
diff --git a/app/components/loading/loading.tsx b/app/components/loading/loading.tsx
index fcb529f..5a724a1 100644
--- a/app/components/loading/loading.tsx
+++ b/app/components/loading/loading.tsx
@@ -1,14 +1,18 @@
 import { VStack, Spinner } from '@chakra-ui/react'
 
-export const Loading = () => {
+type LoadingProps = {
+  size?: string
+  p?: string
+}
+export const Loading = ({ size = 'xl', p = '60px' }: LoadingProps) => {
   return (
-    <VStack align="center" p="60px">
+    <VStack align="center" p={p}>
       <Spinner
         thickness="4px"
         speed="0.6s"
         emptyColor="gray.200"
         color="primary.500"
-        size="xl"
+        size={size}
       />
     </VStack>
   )
diff --git a/app/trip/[id]/edit/page.tsx b/app/trip/[id]/edit/page.tsx
index 7e491ea..ea0c9f6 100644
--- a/app/trip/[id]/edit/page.tsx
+++ b/app/trip/[id]/edit/page.tsx
@@ -1,15 +1,48 @@
 'use client'
 
+import { NetworkStatus } from '@apollo/client'
 import { Box, Container, Heading, useColorModeValue } from '@chakra-ui/react'
-// import { Loading } from '@/components/loading'
+import { Loading } from '@/components/loading'
 import { Header, Footer } from '@/components/navigation'
+import { useUserId } from '@/providers/session-provider'
 import { TripForm } from '../../components'
+import { useTagsCollectionQuery, useTripDetailsQuery } from '@generated/api'
 
 export default function TripEditPage({ params }: { params: { id: string } }) {
   const bg = useColorModeValue('white', 'gray.800')
   const color = useColorModeValue('black', 'gray.300')
 
-  console.log(params)
+  const userId = useUserId()
+
+  const { data: tripData, loading: tripLoading } = useTripDetailsQuery({
+    variables: {
+      id: params.id
+    }
+  })
+
+  const {
+    data: tagsData,
+    loading: tagsLoading,
+    refetch: tagsRefetch,
+    networkStatus: tagsNetWorkStatus
+  } = useTagsCollectionQuery({
+    variables: { userId },
+    notifyOnNetworkStatusChange: true
+  })
+
+  if ((!tripData && !tripLoading) || (!tagsData && !tagsLoading))
+    throw new Error('No trip data found')
+
+  const tripDataCollection = tripData?.tripsCollection?.edges[0]?.node
+
+  const tagsCollectionRefetch = () => {
+    tagsRefetch()
+  }
+
+  const tagsRefetchLoading = tagsNetWorkStatus === NetworkStatus.refetch
+
+  console.log('tripDataCollection', tripDataCollection)
+  console.log('tagsData', tagsData)
 
   return (
     <>
@@ -24,7 +57,27 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
             Edit Trip
           </Heading>
           <Box mt="40px">
-            <TripForm />
+            {!tripDataCollection || tripLoading ? (
+              <Loading />
+            ) : (
+              <TripForm
+                id={tripDataCollection.id}
+                image={tripDataCollection.image_storage_object_id}
+                title={tripDataCollection.title}
+                dateFrom={tripDataCollection.date_from}
+                dateTo={tripDataCollection.date_to}
+                tags={
+                  tagsData?.tagsCollection?.edges.map((tag) => ({
+                    id: tag.node.id,
+                    name: tag.node.name
+                  })) || []
+                }
+                cost={tripDataCollection.cost}
+                costUnit={tripDataCollection.cost_unit}
+                tagsCollectionRefetch={tagsCollectionRefetch}
+                tagsRefetchLoading={tagsRefetchLoading}
+              />
+            )}
           </Box>
         </Container>
       </Box>
diff --git a/app/trip/components/index.ts b/app/trip/components/index.ts
index d1bbaa2..c641ef0 100644
--- a/app/trip/components/index.ts
+++ b/app/trip/components/index.ts
@@ -1,5 +1,5 @@
+export { TagFormModal } from './tag-form-modal'
 export { TripCard } from './trip-card'
-export { TripFormTag } from './trip-form-tag'
 export { TripForm } from './trip-form'
 export { TripSearch } from './trip-search'
 export { TripSort } from './trip-sort'
diff --git a/app/trip/components/tag-form-modal.tsx b/app/trip/components/tag-form-modal.tsx
new file mode 100644
index 0000000..2e8a620
--- /dev/null
+++ b/app/trip/components/tag-form-modal.tsx
@@ -0,0 +1,178 @@
+import { KeyboardEvent } from 'react'
+import { useForm } from 'react-hook-form'
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  FormErrorMessage,
+  FormControl,
+  Flex,
+  Tag,
+  useColorModeValue,
+  Box,
+  Heading,
+  useToast
+} from '@chakra-ui/react'
+import { FiPlusCircle, FiX } from 'react-icons/fi'
+import { InputIcon } from '@/components/input'
+import { Loading } from '@/components/loading'
+import { useUserId } from '@/providers/session-provider'
+import { TagSchema, tagSchemaResolver } from '../schema'
+import { useCreateTagMutation, useDeleteTagMutation } from '@generated/api'
+
+type TagFormModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  tags: { id: string; name: string }[]
+  tagsCollectionRefetch: () => void
+}
+
+export const TagFormModal = ({
+  isOpen,
+  onClose,
+  tags,
+  tagsCollectionRefetch
+}: TagFormModalProps) => {
+  const tagBgColor = useColorModeValue('primary.700', 'primary.800')
+  const userId = useUserId()
+  const toast = useToast()
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors }
+  } = useForm<TagSchema>({
+    resolver: tagSchemaResolver
+  })
+
+  const [createTagMutation, { loading: isCreating }] = useCreateTagMutation()
+  const [deleteTagMutation, { loading: isDeleting }] = useDeleteTagMutation()
+
+  const addTag = async (input: TagSchema) => {
+    try {
+      await createTagMutation({
+        variables: {
+          name: input.name,
+          userId: userId
+        }
+      })
+      reset()
+      tagsCollectionRefetch()
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: "We're sorry, but you failed to create a tag",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  const addEnterHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSubmit(addTag)()
+    }
+  }
+
+  const deleteTag = async (id: string) => {
+    try {
+      await deleteTagMutation({
+        variables: {
+          id: id
+        }
+      })
+      tagsCollectionRefetch()
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: "We're sorry, but you failed to delete a tag",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent maxW="30rem">
+        <ModalCloseButton />
+        <ModalBody pt="48px">
+          <Flex flexDir="column" gap="30px">
+            <Box as="form">
+              <Heading as="h2" fontSize="xl">
+                Tag List
+              </Heading>
+              <Flex columnGap="20px" rowGap="10px" flexWrap="wrap" mt="8px">
+                {isCreating || isDeleting ? (
+                  <Loading p="10px" size="md" />
+                ) : (
+                  <>
+                    {tags.map((tag) => (
+                      <Tag
+                        key={tag.id}
+                        variant="solid"
+                        bgColor={tagBgColor}
+                        borderRadius="full"
+                        px="14px"
+                        py="6px"
+                        gap="8px"
+                      >
+                        {tag.name}
+                        <Box
+                          as="button"
+                          cursor="pointer"
+                          _hover={{
+                            opacity: '.7'
+                          }}
+                          type="button"
+                          onClick={() => deleteTag(tag.id)}
+                        >
+                          <FiX size="18" />
+                        </Box>
+                      </Tag>
+                    ))}
+                  </>
+                )}
+              </Flex>
+            </Box>
+            <Box as="form">
+              <Heading as="h2" fontSize="xl">
+                Add New Tag
+              </Heading>
+              <Box mt="8px">
+                <FormControl isInvalid={!!errors.name}>
+                  <InputIcon
+                    type={'text'}
+                    placeholder={'Add tag'}
+                    ariaLabel={'Add tag'}
+                    icon={FiPlusCircle}
+                    isDisabled={isCreating}
+                    onKeyDown={(e) => addEnterHandler(e)}
+                    onClick={handleSubmit((d) => addTag(d))}
+                    {...register('name')}
+                  />
+                  <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
+                </FormControl>
+              </Box>
+            </Box>
+          </Flex>
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}
diff --git a/app/trip/components/trip-form-tag.tsx b/app/trip/components/trip-form-tag.tsx
deleted file mode 100644
index 46c95ac..0000000
--- a/app/trip/components/trip-form-tag.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useEffect, useRef, useState, KeyboardEvent } from 'react'
-import { useFormContext } from 'react-hook-form'
-import {
-  FormControl,
-  FormLabel,
-  Flex,
-  Tag,
-  useColorModeValue,
-  TagLabel,
-  TagCloseButton
-} from '@chakra-ui/react'
-import { FiPlusCircle } from 'react-icons/fi'
-import { InputIcon } from '@/components/input'
-
-export const TripFormTag = () => {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [tags, setTags] = useState<string[]>([])
-
-  const tagBgColor = useColorModeValue('primary.700', 'primary.800')
-
-  const { setValue } = useFormContext()
-
-  const addTag = () => {
-    const userInput = inputRef?.current?.value
-    if (userInput) {
-      setTags((prevTags) => [...prevTags, userInput])
-      inputRef.current!.value = ''
-    }
-  }
-
-  const addEnterHandler = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      addTag()
-    }
-  }
-
-  const deleteClickHandler = (name: string) => {
-    setTags((prevTags) => prevTags.filter((tag) => tag !== name))
-  }
-
-  useEffect(() => {
-    setValue('tags', tags)
-  }, [tags, setValue])
-
-  return (
-    <FormControl>
-      <FormLabel>Tag</FormLabel>
-      <InputIcon
-        type={'text'}
-        placeholder={'Add tag'}
-        ariaLabel={'Add tag'}
-        icon={FiPlusCircle}
-        ref={inputRef}
-        onKeyDown={(e) => addEnterHandler(e)}
-        onClick={addTag}
-      />
-      <Flex mt="20px" gap="10px" flexWrap="wrap">
-        {tags.map((tag, index) => (
-          <Tag
-            key={index}
-            variant="solid"
-            bgColor={tagBgColor}
-            borderRadius="full"
-            px={'20px'}
-            h={{ base: '1.5rem', md: '2.125rem' }}
-            fontSize={{ base: 'sm', md: 'sm' }}
-            position="relative"
-          >
-            <TagLabel>{tag}</TagLabel>
-            <TagCloseButton onClick={() => deleteClickHandler(tag)} />
-          </Tag>
-        ))}
-      </Flex>
-    </FormControl>
-  )
-}
diff --git a/app/trip/components/trip-form.tsx b/app/trip/components/trip-form.tsx
index 21ca08a..d04ec0e 100644
--- a/app/trip/components/trip-form.tsx
+++ b/app/trip/components/trip-form.tsx
@@ -1,20 +1,66 @@
-import { useForm, FormProvider } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 import {
   FormControl,
   FormLabel,
-  // FormErrorMessage,
+  FormErrorMessage,
   Image,
   VStack,
   HStack,
-  useColorModeValue
+  useColorModeValue,
+  CheckboxGroup,
+  Flex,
+  Checkbox,
+  Box,
+  useDisclosure
 } from '@chakra-ui/react'
-import { PrimaryButton } from '@/components/button'
+import { PrimaryButton, SecondaryButton } from '@/components/button'
 import { CustomDateTimePicker } from '@/components/customDateTimePicker'
 import { InputForm } from '@/components/input'
-import { TripFormTag } from '../components'
+import { Loading } from '@/components/loading'
+import { TagFormModal } from '../components'
+import { tripSchemaResolver, TripSchema } from '../schema'
 
-export const TripForm = () => {
-  const methods = useForm()
+type TripFormProps = {
+  id: string
+  image: string | null | undefined
+  title: string
+  dateFrom: string
+  dateTo: string | null | undefined
+  tags: { id: string; name: string }[]
+  cost: number | null | undefined
+  costUnit: string | null | undefined
+  tagsCollectionRefetch: () => void
+  tagsRefetchLoading: boolean
+}
+
+export const TripForm = ({
+  // id,
+  image,
+  title,
+  dateFrom,
+  dateTo,
+  tags,
+  cost,
+  costUnit,
+  tagsCollectionRefetch,
+  tagsRefetchLoading
+}: TripFormProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const {
+    register,
+    // handleSubmit,
+    formState: { errors }
+  } = useForm<TripSchema>({
+    defaultValues: {
+      title: title,
+      image_storage_object_id: image,
+      date_from: dateFrom,
+      date_to: dateTo,
+      cost: cost,
+      cost_unit: costUnit
+    },
+    resolver: tripSchemaResolver
+  })
 
   const imageSrc = useColorModeValue(
     '/images/no_image_light.jpg',
@@ -22,46 +68,107 @@ export const TripForm = () => {
   )
 
   return (
-    <FormProvider {...methods}>
+    <>
       <VStack as="form" gap={{ base: '30px', md: '40px' }}>
-        <FormControl>
+        <FormControl isInvalid={!!errors.title}>
           <FormLabel>Title</FormLabel>
-          <InputForm type="text" placeholder="Asakusa Temple" />
+          <InputForm
+            type="text"
+            placeholder="Asakusa Temple"
+            {...register('title')}
+          />
+          <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
         </FormControl>
 
-        <FormControl>
+        <FormControl isInvalid={!!errors.date_from}>
           <FormLabel>Date From</FormLabel>
           <CustomDateTimePicker
             onChange={() => console.log('onChange')}
             value={null}
           />
+          <FormErrorMessage>{errors?.date_from?.message}</FormErrorMessage>
         </FormControl>
 
-        <FormControl>
+        <FormControl isInvalid={!!errors.date_to}>
           <FormLabel>Date To</FormLabel>
           <CustomDateTimePicker
             onChange={() => console.log('onChange')}
             value={null}
           />
+          <FormErrorMessage>{errors?.date_to?.message}</FormErrorMessage>
         </FormControl>
 
-        <FormControl>
+        <FormControl isInvalid={!!errors.image_storage_object_id}>
           <FormLabel>Image</FormLabel>
           <HStack gap={{ base: '20px', md: '34px' }}>
             <Image alt="" src={imageSrc} width="50%" />
             <PrimaryButton variant="outline">Select Image </PrimaryButton>
           </HStack>
+          <FormErrorMessage>
+            {errors?.image_storage_object_id?.message}
+          </FormErrorMessage>
         </FormControl>
 
-        <TripFormTag />
+        <FormControl isInvalid={false}>
+          <FormLabel>Tag</FormLabel>
+          <CheckboxGroup defaultValue={[]}>
+            <Flex columnGap={'20px'} rowGap={'10px'} flexWrap={'wrap'}>
+              {tagsRefetchLoading ? (
+                <Loading p="4px" size="md" />
+              ) : (
+                <>
+                  {tags.map((tag) => (
+                    <Checkbox key={tag.id} value={tag.id}>
+                      {tag.name}
+                    </Checkbox>
+                  ))}
+                </>
+              )}
+            </Flex>
+          </CheckboxGroup>
+
+          <Box mt="20px">
+            <SecondaryButton variant={'outline'} size="sm" onClick={onOpen}>
+              Manage Tags
+            </SecondaryButton>
+          </Box>
 
-        <FormControl>
-          <FormLabel>Cost</FormLabel>
-          <InputForm type="text" placeholder="$200" />
+          {/* <FormErrorMessage>{errors?.tags?.message}</FormErrorMessage> */}
         </FormControl>
 
+        <Flex gap="20px" justify={'start'} width="100%">
+          <FormControl w={'180px'} isInvalid={!!errors.cost}>
+            <FormLabel>Cost</FormLabel>
+            <InputForm
+              type="text"
+              placeholder="10"
+              minW={'auto'}
+              {...register('cost')}
+            />
+            <FormErrorMessage>{errors?.cost?.message}</FormErrorMessage>
+          </FormControl>
+
+          <FormControl w={'90px'} isInvalid={!!errors.cost_unit}>
+            <FormLabel>Unit</FormLabel>
+            <InputForm
+              type="text"
+              placeholder="$"
+              minW={'10px'}
+              {...register('cost_unit')}
+            />
+            <FormErrorMessage>{errors?.cost_unit?.message}</FormErrorMessage>
+          </FormControl>
+        </Flex>
+
         <PrimaryButton size="lg">Save Trip</PrimaryButton>
       </VStack>
-    </FormProvider>
+
+      <TagFormModal
+        isOpen={isOpen}
+        onClose={onClose}
+        tags={tags}
+        tagsCollectionRefetch={tagsCollectionRefetch}
+      />
+    </>
   )
 }
diff --git a/app/trip/graphql/mutation/createTag.graphql b/app/trip/graphql/mutation/createTag.graphql
new file mode 100644
index 0000000..1eb11e7
--- /dev/null
+++ b/app/trip/graphql/mutation/createTag.graphql
@@ -0,0 +1,9 @@
+mutation createTag($name: String!, $userId: UUID!) {
+  insertIntotagsCollection(objects: [{ name: $name, user_id: $userId }]) {
+    records {
+      __typename
+      id
+      name
+    }
+  }
+}
diff --git a/app/trip/graphql/mutation/deleteTag.graphql b/app/trip/graphql/mutation/deleteTag.graphql
new file mode 100644
index 0000000..b312002
--- /dev/null
+++ b/app/trip/graphql/mutation/deleteTag.graphql
@@ -0,0 +1,9 @@
+mutation deleteTag($id: UUID!) {
+  deleteFromtagsCollection(filter: { id: { eq: $id } }) {
+    records {
+      __typename
+      id
+      name
+    }
+  }
+}
diff --git a/app/trip/graphql/query/tagsCollection.graphql b/app/trip/graphql/query/tagsCollection.graphql
new file mode 100644
index 0000000..77af9bf
--- /dev/null
+++ b/app/trip/graphql/query/tagsCollection.graphql
@@ -0,0 +1,13 @@
+query tagsCollection($userId: UUID!) {
+  tagsCollection(
+    filter: { user_id: { eq: $userId } }
+    orderBy: { created_at: AscNullsLast }
+  ) {
+    edges {
+      node {
+        id
+        name
+      }
+    }
+  }
+}
diff --git a/app/trip/graphql/query/tripDetails.graphql b/app/trip/graphql/query/tripDetails.graphql
index 46480da..4918ae8 100644
--- a/app/trip/graphql/query/tripDetails.graphql
+++ b/app/trip/graphql/query/tripDetails.graphql
@@ -7,6 +7,8 @@ query tripDetails($id: UUID!) {
         date_from
         date_to
         image_storage_object_id
+        cost
+        cost_unit
         invitationsCollection {
           edges {
             node {
diff --git a/app/trip/schema.ts b/app/trip/schema.ts
new file mode 100644
index 0000000..f34006d
--- /dev/null
+++ b/app/trip/schema.ts
@@ -0,0 +1,21 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+
+const tripSchema = z.object({
+  title: z.string().min(1, { message: 'Title is required' }),
+  date_from: z.string().min(1, { message: 'Date from is required' }),
+  date_to: z.string().nullable(),
+  image_storage_object_id: z.string().nullable(),
+  cost: z.number().nullable(),
+  cost_unit: z.string().nullable()
+})
+
+export type TripSchema = z.infer<typeof tripSchema>
+export const tripSchemaResolver = zodResolver(tripSchema)
+
+const tagSchema = z.object({
+  name: z.string().min(1, { message: 'Tag name is required' })
+})
+
+export type TagSchema = z.infer<typeof tagSchema>
+export const tagSchemaResolver = zodResolver(tagSchema)
diff --git a/graphql-codegen/generated/api.ts b/graphql-codegen/generated/api.ts
index 35f4905..2670a63 100644
--- a/graphql-codegen/generated/api.ts
+++ b/graphql-codegen/generated/api.ts
@@ -468,6 +468,7 @@ export type Activity = Node & {
   __typename?: 'activity'
   address?: Maybe<Scalars['String']['output']>
   cost?: Maybe<Scalars['BigFloat']['output']>
+  cost_unit?: Maybe<Scalars['String']['output']>
   id: Scalars['UUID']['output']
   image_storage_object_id?: Maybe<Scalars['UUID']['output']>
   memo?: Maybe<Scalars['String']['output']>
@@ -504,6 +505,7 @@ export type ActivityEdge = {
 export type ActivityFilter = {
   address?: InputMaybe<StringFilter>
   cost?: InputMaybe<BigFloatFilter>
+  cost_unit?: InputMaybe<StringFilter>
   id?: InputMaybe<UuidFilter>
   image_storage_object_id?: InputMaybe<UuidFilter>
   memo?: InputMaybe<StringFilter>
@@ -518,6 +520,7 @@ export type ActivityFilter = {
 export type ActivityInsertInput = {
   address?: InputMaybe<Scalars['String']['input']>
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
   memo?: InputMaybe<Scalars['String']['input']>
@@ -539,6 +542,7 @@ export type ActivityInsertResponse = {
 export type ActivityOrderBy = {
   address?: InputMaybe<OrderByDirection>
   cost?: InputMaybe<OrderByDirection>
+  cost_unit?: InputMaybe<OrderByDirection>
   id?: InputMaybe<OrderByDirection>
   image_storage_object_id?: InputMaybe<OrderByDirection>
   memo?: InputMaybe<OrderByDirection>
@@ -552,6 +556,7 @@ export type ActivityOrderBy = {
 export type ActivityUpdateInput = {
   address?: InputMaybe<Scalars['String']['input']>
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
   memo?: InputMaybe<Scalars['String']['input']>
@@ -677,11 +682,14 @@ export type Permission_Level_EnumFilter = {
 
 export type Tags = Node & {
   __typename?: 'tags'
+  created_at: Scalars['Datetime']['output']
   id: Scalars['UUID']['output']
   name: Scalars['String']['output']
   /** Globally Unique Record Identifier */
   nodeId: Scalars['ID']['output']
   trip_tagsCollection?: Maybe<Trip_TagsConnection>
+  user_id: Scalars['UUID']['output']
+  users: Users
 }
 
 export type TagsTrip_TagsCollectionArgs = {
@@ -714,14 +722,18 @@ export type TagsEdge = {
 }
 
 export type TagsFilter = {
+  created_at?: InputMaybe<DatetimeFilter>
   id?: InputMaybe<UuidFilter>
   name?: InputMaybe<StringFilter>
   nodeId?: InputMaybe<IdFilter>
+  user_id?: InputMaybe<UuidFilter>
 }
 
 export type TagsInsertInput = {
+  created_at?: InputMaybe<Scalars['Datetime']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   name?: InputMaybe<Scalars['String']['input']>
+  user_id?: InputMaybe<Scalars['UUID']['input']>
 }
 
 export type TagsInsertResponse = {
@@ -733,13 +745,17 @@ export type TagsInsertResponse = {
 }
 
 export type TagsOrderBy = {
+  created_at?: InputMaybe<OrderByDirection>
   id?: InputMaybe<OrderByDirection>
   name?: InputMaybe<OrderByDirection>
+  user_id?: InputMaybe<OrderByDirection>
 }
 
 export type TagsUpdateInput = {
+  created_at?: InputMaybe<Scalars['Datetime']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   name?: InputMaybe<Scalars['String']['input']>
+  user_id?: InputMaybe<Scalars['UUID']['input']>
 }
 
 export type TagsUpdateResponse = {
@@ -889,6 +905,7 @@ export type Trips = Node & {
   __typename?: 'trips'
   activityCollection?: Maybe<ActivityConnection>
   cost?: Maybe<Scalars['BigFloat']['output']>
+  cost_unit?: Maybe<Scalars['String']['output']>
   created_at: Scalars['Datetime']['output']
   date_from: Scalars['Date']['output']
   date_to?: Maybe<Scalars['Date']['output']>
@@ -953,6 +970,7 @@ export type TripsEdge = {
 
 export type TripsFilter = {
   cost?: InputMaybe<BigFloatFilter>
+  cost_unit?: InputMaybe<StringFilter>
   created_at?: InputMaybe<DatetimeFilter>
   date_from?: InputMaybe<DateFilter>
   date_to?: InputMaybe<DateFilter>
@@ -966,6 +984,7 @@ export type TripsFilter = {
 
 export type TripsInsertInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
   date_from?: InputMaybe<Scalars['Date']['input']>
   date_to?: InputMaybe<Scalars['Date']['input']>
@@ -986,6 +1005,7 @@ export type TripsInsertResponse = {
 
 export type TripsOrderBy = {
   cost?: InputMaybe<OrderByDirection>
+  cost_unit?: InputMaybe<OrderByDirection>
   created_at?: InputMaybe<OrderByDirection>
   date_from?: InputMaybe<OrderByDirection>
   date_to?: InputMaybe<OrderByDirection>
@@ -998,6 +1018,7 @@ export type TripsOrderBy = {
 
 export type TripsUpdateInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
   date_from?: InputMaybe<Scalars['Date']['input']>
   date_to?: InputMaybe<Scalars['Date']['input']>
@@ -1025,6 +1046,7 @@ export type Users = Node & {
   /** Globally Unique Record Identifier */
   nodeId: Scalars['ID']['output']
   profile_picture_url?: Maybe<Scalars['String']['output']>
+  tagsCollection?: Maybe<TagsConnection>
   tripsCollection?: Maybe<TripsConnection>
 }
 
@@ -1037,6 +1059,15 @@ export type UsersInvitationsCollectionArgs = {
   orderBy?: InputMaybe<Array<InvitationsOrderBy>>
 }
 
+export type UsersTagsCollectionArgs = {
+  after?: InputMaybe<Scalars['Cursor']['input']>
+  before?: InputMaybe<Scalars['Cursor']['input']>
+  filter?: InputMaybe<TagsFilter>
+  first?: InputMaybe<Scalars['Int']['input']>
+  last?: InputMaybe<Scalars['Int']['input']>
+  orderBy?: InputMaybe<Array<TagsOrderBy>>
+}
+
 export type UsersTripsCollectionArgs = {
   after?: InputMaybe<Scalars['Cursor']['input']>
   before?: InputMaybe<Scalars['Cursor']['input']>
@@ -1159,6 +1190,19 @@ export type ActivityCollectionQuery = {
   } | null
 }
 
+export type CreateTagMutationVariables = Exact<{
+  name: Scalars['String']['input']
+  userId: Scalars['UUID']['input']
+}>
+
+export type CreateTagMutation = {
+  __typename: 'Mutation'
+  insertIntotagsCollection?: {
+    __typename: 'tagsInsertResponse'
+    records: Array<{ __typename: 'tags'; id: string; name: string }>
+  } | null
+}
+
 export type CreateTripMutationVariables = Exact<{
   user_id: Scalars['UUID']['input']
   title: Scalars['String']['input']
@@ -1174,6 +1218,33 @@ export type CreateTripMutation = {
   } | null
 }
 
+export type DeleteTagMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+}>
+
+export type DeleteTagMutation = {
+  __typename: 'Mutation'
+  deleteFromtagsCollection: {
+    __typename: 'tagsDeleteResponse'
+    records: Array<{ __typename: 'tags'; id: string; name: string }>
+  }
+}
+
+export type TagsCollectionQueryVariables = Exact<{
+  userId: Scalars['UUID']['input']
+}>
+
+export type TagsCollectionQuery = {
+  __typename: 'Query'
+  tagsCollection?: {
+    __typename: 'tagsConnection'
+    edges: Array<{
+      __typename: 'tagsEdge'
+      node: { __typename: 'tags'; id: string; name: string }
+    }>
+  } | null
+}
+
 export type TripDetailsQueryVariables = Exact<{
   id: Scalars['UUID']['input']
 }>
@@ -1191,6 +1262,8 @@ export type TripDetailsQuery = {
         date_from: string
         date_to?: string | null
         image_storage_object_id?: string | null
+        cost?: number | null
+        cost_unit?: string | null
         invitationsCollection?: {
           __typename: 'invitationsConnection'
           edges: Array<{
@@ -1460,6 +1533,62 @@ export function refetchActivityCollectionQuery(
 ) {
   return { query: ActivityCollectionDocument, variables: variables }
 }
+export const CreateTagDocument = gql`
+  mutation createTag($name: String!, $userId: UUID!) {
+    __typename
+    insertIntotagsCollection(objects: [{ name: $name, user_id: $userId }]) {
+      __typename
+      records {
+        __typename
+        id
+        name
+      }
+    }
+  }
+`
+export type CreateTagMutationFn = Apollo.MutationFunction<
+  CreateTagMutation,
+  CreateTagMutationVariables
+>
+
+/**
+ * __useCreateTagMutation__
+ *
+ * To run a mutation, you first call `useCreateTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createTagMutation, { data, loading, error }] = useCreateTagMutation({
+ *   variables: {
+ *      name: // value for 'name'
+ *      userId: // value for 'userId'
+ *   },
+ * });
+ */
+export function useCreateTagMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    CreateTagMutation,
+    CreateTagMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<CreateTagMutation, CreateTagMutationVariables>(
+    CreateTagDocument,
+    options
+  )
+}
+export type CreateTagMutationHookResult = ReturnType<
+  typeof useCreateTagMutation
+>
+export type CreateTagMutationResult = Apollo.MutationResult<CreateTagMutation>
+export type CreateTagMutationOptions = Apollo.BaseMutationOptions<
+  CreateTagMutation,
+  CreateTagMutationVariables
+>
 export const CreateTripDocument = gql`
   mutation createTrip(
     $user_id: UUID!
@@ -1532,6 +1661,151 @@ export type CreateTripMutationOptions = Apollo.BaseMutationOptions<
   CreateTripMutation,
   CreateTripMutationVariables
 >
+export const DeleteTagDocument = gql`
+  mutation deleteTag($id: UUID!) {
+    __typename
+    deleteFromtagsCollection(filter: { id: { eq: $id } }) {
+      __typename
+      records {
+        __typename
+        id
+        name
+      }
+    }
+  }
+`
+export type DeleteTagMutationFn = Apollo.MutationFunction<
+  DeleteTagMutation,
+  DeleteTagMutationVariables
+>
+
+/**
+ * __useDeleteTagMutation__
+ *
+ * To run a mutation, you first call `useDeleteTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteTagMutation, { data, loading, error }] = useDeleteTagMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDeleteTagMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    DeleteTagMutation,
+    DeleteTagMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<DeleteTagMutation, DeleteTagMutationVariables>(
+    DeleteTagDocument,
+    options
+  )
+}
+export type DeleteTagMutationHookResult = ReturnType<
+  typeof useDeleteTagMutation
+>
+export type DeleteTagMutationResult = Apollo.MutationResult<DeleteTagMutation>
+export type DeleteTagMutationOptions = Apollo.BaseMutationOptions<
+  DeleteTagMutation,
+  DeleteTagMutationVariables
+>
+export const TagsCollectionDocument = gql`
+  query tagsCollection($userId: UUID!) {
+    __typename
+    tagsCollection(
+      filter: { user_id: { eq: $userId } }
+      orderBy: { created_at: AscNullsLast }
+    ) {
+      __typename
+      edges {
+        __typename
+        node {
+          __typename
+          id
+          name
+        }
+      }
+    }
+  }
+`
+
+/**
+ * __useTagsCollectionQuery__
+ *
+ * To run a query within a React component, call `useTagsCollectionQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTagsCollectionQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useTagsCollectionQuery({
+ *   variables: {
+ *      userId: // value for 'userId'
+ *   },
+ * });
+ */
+export function useTagsCollectionQuery(
+  baseOptions: Apollo.QueryHookOptions<
+    TagsCollectionQuery,
+    TagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<TagsCollectionQuery, TagsCollectionQueryVariables>(
+    TagsCollectionDocument,
+    options
+  )
+}
+export function useTagsCollectionLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    TagsCollectionQuery,
+    TagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<TagsCollectionQuery, TagsCollectionQueryVariables>(
+    TagsCollectionDocument,
+    options
+  )
+}
+export function useTagsCollectionSuspenseQuery(
+  baseOptions?: Apollo.SuspenseQueryHookOptions<
+    TagsCollectionQuery,
+    TagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useSuspenseQuery<
+    TagsCollectionQuery,
+    TagsCollectionQueryVariables
+  >(TagsCollectionDocument, options)
+}
+export type TagsCollectionQueryHookResult = ReturnType<
+  typeof useTagsCollectionQuery
+>
+export type TagsCollectionLazyQueryHookResult = ReturnType<
+  typeof useTagsCollectionLazyQuery
+>
+export type TagsCollectionSuspenseQueryHookResult = ReturnType<
+  typeof useTagsCollectionSuspenseQuery
+>
+export type TagsCollectionQueryResult = Apollo.QueryResult<
+  TagsCollectionQuery,
+  TagsCollectionQueryVariables
+>
+export function refetchTagsCollectionQuery(
+  variables: TagsCollectionQueryVariables
+) {
+  return { query: TagsCollectionDocument, variables: variables }
+}
 export const TripDetailsDocument = gql`
   query tripDetails($id: UUID!) {
     __typename
@@ -1546,6 +1820,8 @@ export const TripDetailsDocument = gql`
           date_from
           date_to
           image_storage_object_id
+          cost
+          cost_unit
           invitationsCollection {
             __typename
             edges {
diff --git a/graphql-codegen/generated/gql.ts b/graphql-codegen/generated/gql.ts
index f4b387f..9d112f9 100644
--- a/graphql-codegen/generated/gql.ts
+++ b/graphql-codegen/generated/gql.ts
@@ -17,9 +17,15 @@ const documents = {
     types.GetUserDocument,
   'query activityCollection($id: UUID!) {\n  activityCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        trip_id\n        title\n        time_from\n        time_to\n        address\n        url\n        memo\n        cost\n        image_storage_object_id\n      }\n    }\n  }\n}':
     types.ActivityCollectionDocument,
+  'mutation createTag($name: String!, $userId: UUID!) {\n  insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}':
+    types.CreateTagDocument,
   'mutation createTrip($user_id: UUID!, $title: String!, $date_from: Date, $date_to: Date) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}':
     types.CreateTripDocument,
-  'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}':
+  'mutation deleteTag($id: UUID!) {\n  deleteFromtagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}':
+    types.DeleteTagDocument,
+  'query tagsCollection($userId: UUID!) {\n  tagsCollection(\n    filter: {user_id: {eq: $userId}}\n    orderBy: {created_at: AscNullsLast}\n  ) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}':
+    types.TagsCollectionDocument,
+  'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}':
     types.TripDetailsDocument,
   'query tripsCollection($filter: tripsFilter, $orderBy: [tripsOrderBy!], $first: Int!, $after: Cursor) {\n  tripsCollection(\n    filter: $filter\n    first: $first\n    after: $after\n    orderBy: $orderBy\n  ) {\n    edges {\n      node {\n        id\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        created_at\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n            }\n          }\n        }\n      }\n    }\n    pageInfo {\n      startCursor\n      endCursor\n      hasPreviousPage\n      hasNextPage\n    }\n  }\n}':
     types.TripsCollectionDocument
@@ -51,6 +57,12 @@ export function graphql(
 export function graphql(
   source: 'query activityCollection($id: UUID!) {\n  activityCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        trip_id\n        title\n        time_from\n        time_to\n        address\n        url\n        memo\n        cost\n        image_storage_object_id\n      }\n    }\n  }\n}'
 ): (typeof documents)['query activityCollection($id: UUID!) {\n  activityCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        trip_id\n        title\n        time_from\n        time_to\n        address\n        url\n        memo\n        cost\n        image_storage_object_id\n      }\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'mutation createTag($name: String!, $userId: UUID!) {\n  insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}'
+): (typeof documents)['mutation createTag($name: String!, $userId: UUID!) {\n  insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -61,8 +73,20 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: 'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}'
-): (typeof documents)['query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}']
+  source: 'mutation deleteTag($id: UUID!) {\n  deleteFromtagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}'
+): (typeof documents)['mutation deleteTag($id: UUID!) {\n  deleteFromtagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'query tagsCollection($userId: UUID!) {\n  tagsCollection(\n    filter: {user_id: {eq: $userId}}\n    orderBy: {created_at: AscNullsLast}\n  ) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}'
+): (typeof documents)['query tagsCollection($userId: UUID!) {\n  tagsCollection(\n    filter: {user_id: {eq: $userId}}\n    orderBy: {created_at: AscNullsLast}\n  ) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}'
+): (typeof documents)['query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/graphql-codegen/generated/graphql.ts b/graphql-codegen/generated/graphql.ts
index 1ad1470..34153c1 100644
--- a/graphql-codegen/generated/graphql.ts
+++ b/graphql-codegen/generated/graphql.ts
@@ -476,6 +476,7 @@ export type Activity = Node & {
   __typename?: 'activity'
   address?: Maybe<Scalars['String']['output']>
   cost?: Maybe<Scalars['BigFloat']['output']>
+  cost_unit?: Maybe<Scalars['String']['output']>
   id: Scalars['UUID']['output']
   image_storage_object_id?: Maybe<Scalars['UUID']['output']>
   memo?: Maybe<Scalars['String']['output']>
@@ -512,6 +513,7 @@ export type ActivityEdge = {
 export type ActivityFilter = {
   address?: InputMaybe<StringFilter>
   cost?: InputMaybe<BigFloatFilter>
+  cost_unit?: InputMaybe<StringFilter>
   id?: InputMaybe<UuidFilter>
   image_storage_object_id?: InputMaybe<UuidFilter>
   memo?: InputMaybe<StringFilter>
@@ -526,6 +528,7 @@ export type ActivityFilter = {
 export type ActivityInsertInput = {
   address?: InputMaybe<Scalars['String']['input']>
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
   memo?: InputMaybe<Scalars['String']['input']>
@@ -547,6 +550,7 @@ export type ActivityInsertResponse = {
 export type ActivityOrderBy = {
   address?: InputMaybe<OrderByDirection>
   cost?: InputMaybe<OrderByDirection>
+  cost_unit?: InputMaybe<OrderByDirection>
   id?: InputMaybe<OrderByDirection>
   image_storage_object_id?: InputMaybe<OrderByDirection>
   memo?: InputMaybe<OrderByDirection>
@@ -560,6 +564,7 @@ export type ActivityOrderBy = {
 export type ActivityUpdateInput = {
   address?: InputMaybe<Scalars['String']['input']>
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
   memo?: InputMaybe<Scalars['String']['input']>
@@ -685,11 +690,14 @@ export type Permission_Level_EnumFilter = {
 
 export type Tags = Node & {
   __typename?: 'tags'
+  created_at: Scalars['Datetime']['output']
   id: Scalars['UUID']['output']
   name: Scalars['String']['output']
   /** Globally Unique Record Identifier */
   nodeId: Scalars['ID']['output']
   trip_tagsCollection?: Maybe<Trip_TagsConnection>
+  user_id: Scalars['UUID']['output']
+  users: Users
 }
 
 export type TagsTrip_TagsCollectionArgs = {
@@ -722,14 +730,18 @@ export type TagsEdge = {
 }
 
 export type TagsFilter = {
+  created_at?: InputMaybe<DatetimeFilter>
   id?: InputMaybe<UuidFilter>
   name?: InputMaybe<StringFilter>
   nodeId?: InputMaybe<IdFilter>
+  user_id?: InputMaybe<UuidFilter>
 }
 
 export type TagsInsertInput = {
+  created_at?: InputMaybe<Scalars['Datetime']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   name?: InputMaybe<Scalars['String']['input']>
+  user_id?: InputMaybe<Scalars['UUID']['input']>
 }
 
 export type TagsInsertResponse = {
@@ -741,13 +753,17 @@ export type TagsInsertResponse = {
 }
 
 export type TagsOrderBy = {
+  created_at?: InputMaybe<OrderByDirection>
   id?: InputMaybe<OrderByDirection>
   name?: InputMaybe<OrderByDirection>
+  user_id?: InputMaybe<OrderByDirection>
 }
 
 export type TagsUpdateInput = {
+  created_at?: InputMaybe<Scalars['Datetime']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   name?: InputMaybe<Scalars['String']['input']>
+  user_id?: InputMaybe<Scalars['UUID']['input']>
 }
 
 export type TagsUpdateResponse = {
@@ -897,6 +913,7 @@ export type Trips = Node & {
   __typename?: 'trips'
   activityCollection?: Maybe<ActivityConnection>
   cost?: Maybe<Scalars['BigFloat']['output']>
+  cost_unit?: Maybe<Scalars['String']['output']>
   created_at: Scalars['Datetime']['output']
   date_from: Scalars['Date']['output']
   date_to?: Maybe<Scalars['Date']['output']>
@@ -961,6 +978,7 @@ export type TripsEdge = {
 
 export type TripsFilter = {
   cost?: InputMaybe<BigFloatFilter>
+  cost_unit?: InputMaybe<StringFilter>
   created_at?: InputMaybe<DatetimeFilter>
   date_from?: InputMaybe<DateFilter>
   date_to?: InputMaybe<DateFilter>
@@ -974,6 +992,7 @@ export type TripsFilter = {
 
 export type TripsInsertInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
   date_from?: InputMaybe<Scalars['Date']['input']>
   date_to?: InputMaybe<Scalars['Date']['input']>
@@ -994,6 +1013,7 @@ export type TripsInsertResponse = {
 
 export type TripsOrderBy = {
   cost?: InputMaybe<OrderByDirection>
+  cost_unit?: InputMaybe<OrderByDirection>
   created_at?: InputMaybe<OrderByDirection>
   date_from?: InputMaybe<OrderByDirection>
   date_to?: InputMaybe<OrderByDirection>
@@ -1006,6 +1026,7 @@ export type TripsOrderBy = {
 
 export type TripsUpdateInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
   date_from?: InputMaybe<Scalars['Date']['input']>
   date_to?: InputMaybe<Scalars['Date']['input']>
@@ -1033,6 +1054,7 @@ export type Users = Node & {
   /** Globally Unique Record Identifier */
   nodeId: Scalars['ID']['output']
   profile_picture_url?: Maybe<Scalars['String']['output']>
+  tagsCollection?: Maybe<TagsConnection>
   tripsCollection?: Maybe<TripsConnection>
 }
 
@@ -1045,6 +1067,15 @@ export type UsersInvitationsCollectionArgs = {
   orderBy?: InputMaybe<Array<InvitationsOrderBy>>
 }
 
+export type UsersTagsCollectionArgs = {
+  after?: InputMaybe<Scalars['Cursor']['input']>
+  before?: InputMaybe<Scalars['Cursor']['input']>
+  filter?: InputMaybe<TagsFilter>
+  first?: InputMaybe<Scalars['Int']['input']>
+  last?: InputMaybe<Scalars['Int']['input']>
+  orderBy?: InputMaybe<Array<TagsOrderBy>>
+}
+
 export type UsersTripsCollectionArgs = {
   after?: InputMaybe<Scalars['Cursor']['input']>
   before?: InputMaybe<Scalars['Cursor']['input']>
@@ -1167,6 +1198,19 @@ export type ActivityCollectionQuery = {
   } | null
 }
 
+export type CreateTagMutationVariables = Exact<{
+  name: Scalars['String']['input']
+  userId: Scalars['UUID']['input']
+}>
+
+export type CreateTagMutation = {
+  __typename: 'Mutation'
+  insertIntotagsCollection?: {
+    __typename: 'tagsInsertResponse'
+    records: Array<{ __typename: 'tags'; id: string; name: string }>
+  } | null
+}
+
 export type CreateTripMutationVariables = Exact<{
   user_id: Scalars['UUID']['input']
   title: Scalars['String']['input']
@@ -1182,6 +1226,33 @@ export type CreateTripMutation = {
   } | null
 }
 
+export type DeleteTagMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+}>
+
+export type DeleteTagMutation = {
+  __typename: 'Mutation'
+  deleteFromtagsCollection: {
+    __typename: 'tagsDeleteResponse'
+    records: Array<{ __typename: 'tags'; id: string; name: string }>
+  }
+}
+
+export type TagsCollectionQueryVariables = Exact<{
+  userId: Scalars['UUID']['input']
+}>
+
+export type TagsCollectionQuery = {
+  __typename: 'Query'
+  tagsCollection?: {
+    __typename: 'tagsConnection'
+    edges: Array<{
+      __typename: 'tagsEdge'
+      node: { __typename: 'tags'; id: string; name: string }
+    }>
+  } | null
+}
+
 export type TripDetailsQueryVariables = Exact<{
   id: Scalars['UUID']['input']
 }>
@@ -1199,6 +1270,8 @@ export type TripDetailsQuery = {
         date_from: string
         date_to?: string | null
         image_storage_object_id?: string | null
+        cost?: number | null
+        cost_unit?: string | null
         invitationsCollection?: {
           __typename: 'invitationsConnection'
           edges: Array<{
@@ -1543,6 +1616,101 @@ export const ActivityCollectionDocument = {
   ActivityCollectionQuery,
   ActivityCollectionQueryVariables
 >
+export const CreateTagDocument = {
+  __meta__: { hash: '9ecd6081f83febe06337ebd01345eef596b81cf9' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'createTag' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'name' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } }
+          }
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'userId' }
+          },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'insertIntotagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'objects' },
+                value: {
+                  kind: 'ListValue',
+                  values: [
+                    {
+                      kind: 'ObjectValue',
+                      fields: [
+                        {
+                          kind: 'ObjectField',
+                          name: { kind: 'Name', value: 'name' },
+                          value: {
+                            kind: 'Variable',
+                            name: { kind: 'Name', value: 'name' }
+                          }
+                        },
+                        {
+                          kind: 'ObjectField',
+                          name: { kind: 'Name', value: 'user_id' },
+                          value: {
+                            kind: 'Variable',
+                            name: { kind: 'Name', value: 'userId' }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'records' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'name' } }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<CreateTagMutation, CreateTagMutationVariables>
 export const CreateTripDocument = {
   __meta__: { hash: '995473133e320e5f7ef165df54d56100c62b3a75' },
   kind: 'Document',
@@ -1673,8 +1841,204 @@ export const CreateTripDocument = {
     }
   ]
 } as unknown as DocumentNode<CreateTripMutation, CreateTripMutationVariables>
+export const DeleteTagDocument = {
+  __meta__: { hash: 'c661c9a00fdae1dbac69eeb283611e0c9202cf55' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'deleteTag' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'deleteFromtagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'id' },
+                      value: {
+                        kind: 'ObjectValue',
+                        fields: [
+                          {
+                            kind: 'ObjectField',
+                            name: { kind: 'Name', value: 'eq' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'id' }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'records' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'name' } }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<DeleteTagMutation, DeleteTagMutationVariables>
+export const TagsCollectionDocument = {
+  __meta__: { hash: '994a2e7e0694c279cbfeff6c8696cbbe6a0c687c' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'tagsCollection' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'userId' }
+          },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'tagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'user_id' },
+                      value: {
+                        kind: 'ObjectValue',
+                        fields: [
+                          {
+                            kind: 'ObjectField',
+                            name: { kind: 'Name', value: 'eq' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'userId' }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'orderBy' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'created_at' },
+                      value: { kind: 'EnumValue', value: 'AscNullsLast' }
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'edges' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'node' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: '__typename' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'id' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'name' }
+                            }
+                          ]
+                        }
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<TagsCollectionQuery, TagsCollectionQueryVariables>
 export const TripDetailsDocument = {
-  __meta__: { hash: '911f735030ae63fca4ef8cefcc3c07e92924ea00' },
+  __meta__: { hash: '12df849b2205e5cf49fd291f6cb8582aa49100c3' },
   kind: 'Document',
   definitions: [
     {
@@ -1773,6 +2137,14 @@ export const TripDetailsDocument = {
                                 value: 'image_storage_object_id'
                               }
                             },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'cost' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'cost_unit' }
+                            },
                             {
                               kind: 'Field',
                               name: {
diff --git a/graphql-codegen/generated/persisted-documents.json b/graphql-codegen/generated/persisted-documents.json
index a3a76ec..5dfda2f 100644
--- a/graphql-codegen/generated/persisted-documents.json
+++ b/graphql-codegen/generated/persisted-documents.json
@@ -1,7 +1,10 @@
 {
   "00c528b2b1c851c06119aedb1fba6b5c885713cf": "query getUser($id: UUID!) { __typename usersCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename email id name profile_picture_url } } } }",
   "2d419044f6b09dcfdf15e868fceccda14add69f4": "query activityCollection($id: UUID!) { __typename activityCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename address cost id image_storage_object_id memo time_from time_to title trip_id url } } } }",
+  "9ecd6081f83febe06337ebd01345eef596b81cf9": "mutation createTag($name: String!, $userId: UUID!) { __typename insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) { __typename records { __typename id name } } }",
   "995473133e320e5f7ef165df54d56100c62b3a75": "mutation createTrip($date_from: Date, $date_to: Date, $title: String!, $user_id: UUID!) { __typename insertIntotripsCollection( objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}] ) { __typename records { __typename id title } } }",
-  "911f735030ae63fca4ef8cefcc3c07e92924ea00": "query tripDetails($id: UUID!) { __typename tripsCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename activityCollection { __typename edges { __typename node { __typename address id time_from time_to title } } } date_from date_to id image_storage_object_id invitationsCollection { __typename edges { __typename node { __typename users { __typename id profile_picture_url } } } } title trip_tagsCollection { __typename edges { __typename node { __typename tags { __typename id name } } } } } } } }",
+  "c661c9a00fdae1dbac69eeb283611e0c9202cf55": "mutation deleteTag($id: UUID!) { __typename deleteFromtagsCollection(filter: {id: {eq: $id}}) { __typename records { __typename id name } } }",
+  "994a2e7e0694c279cbfeff6c8696cbbe6a0c687c": "query tagsCollection($userId: UUID!) { __typename tagsCollection( filter: {user_id: {eq: $userId}} orderBy: {created_at: AscNullsLast} ) { __typename edges { __typename node { __typename id name } } } }",
+  "12df849b2205e5cf49fd291f6cb8582aa49100c3": "query tripDetails($id: UUID!) { __typename tripsCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename activityCollection { __typename edges { __typename node { __typename address id time_from time_to title } } } cost cost_unit date_from date_to id image_storage_object_id invitationsCollection { __typename edges { __typename node { __typename users { __typename id profile_picture_url } } } } title trip_tagsCollection { __typename edges { __typename node { __typename tags { __typename id name } } } } } } } }",
   "70a61f873c23f1db13cef7cd265a9845e9bfc53e": "query tripsCollection($after: Cursor, $filter: tripsFilter, $first: Int!, $orderBy: [tripsOrderBy!]) { __typename tripsCollection( filter: $filter first: $first after: $after orderBy: $orderBy ) { __typename edges { __typename node { __typename activityCollection { __typename edges { __typename node { __typename id } } } created_at date_from date_to id id image_storage_object_id invitationsCollection { __typename edges { __typename node { __typename users { __typename id profile_picture_url } } } } title } } pageInfo { __typename endCursor hasNextPage hasPreviousPage startCursor } } }"
 }

From 2a1becc7929e6ec71c188c6aa3a36cd64eb22bc5 Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Fri, 26 Jan 2024 15:51:15 -0800
Subject: [PATCH 05/13] Change checkbox

---
 app/trip/[id]/edit/page.tsx            |  8 ++-
 app/trip/components/tag-form-modal.tsx |  6 +-
 app/trip/components/trip-form.tsx      | 90 ++++++++++++++++----------
 app/trip/schema.ts                     |  3 +-
 4 files changed, 69 insertions(+), 38 deletions(-)

diff --git a/app/trip/[id]/edit/page.tsx b/app/trip/[id]/edit/page.tsx
index ea0c9f6..6f11739 100644
--- a/app/trip/[id]/edit/page.tsx
+++ b/app/trip/[id]/edit/page.tsx
@@ -66,12 +66,18 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
                 title={tripDataCollection.title}
                 dateFrom={tripDataCollection.date_from}
                 dateTo={tripDataCollection.date_to}
-                tags={
+                allTags={
                   tagsData?.tagsCollection?.edges.map((tag) => ({
                     id: tag.node.id,
                     name: tag.node.name
                   })) || []
                 }
+                checkedTags={
+                  tripDataCollection.trip_tagsCollection?.edges.map((tag) => ({
+                    id: tag.node.tags?.id || '',
+                    name: tag.node.tags?.name || ''
+                  })) || []
+                }
                 cost={tripDataCollection.cost}
                 costUnit={tripDataCollection.cost_unit}
                 tagsCollectionRefetch={tagsCollectionRefetch}
diff --git a/app/trip/components/tag-form-modal.tsx b/app/trip/components/tag-form-modal.tsx
index 2e8a620..2f05244 100644
--- a/app/trip/components/tag-form-modal.tsx
+++ b/app/trip/components/tag-form-modal.tsx
@@ -26,14 +26,14 @@ import { useCreateTagMutation, useDeleteTagMutation } from '@generated/api'
 type TagFormModalProps = {
   isOpen: boolean
   onClose: () => void
-  tags: { id: string; name: string }[]
+  allTags: { id: string; name: string }[]
   tagsCollectionRefetch: () => void
 }
 
 export const TagFormModal = ({
   isOpen,
   onClose,
-  tags,
+  allTags,
   tagsCollectionRefetch
 }: TagFormModalProps) => {
   const tagBgColor = useColorModeValue('primary.700', 'primary.800')
@@ -121,7 +121,7 @@ export const TagFormModal = ({
                   <Loading p="10px" size="md" />
                 ) : (
                   <>
-                    {tags.map((tag) => (
+                    {allTags.map((tag) => (
                       <Tag
                         key={tag.id}
                         variant="solid"
diff --git a/app/trip/components/trip-form.tsx b/app/trip/components/trip-form.tsx
index d04ec0e..74400bf 100644
--- a/app/trip/components/trip-form.tsx
+++ b/app/trip/components/trip-form.tsx
@@ -1,4 +1,4 @@
-import { useForm } from 'react-hook-form'
+import { useForm, Controller } from 'react-hook-form'
 import {
   FormControl,
   FormLabel,
@@ -26,7 +26,8 @@ type TripFormProps = {
   title: string
   dateFrom: string
   dateTo: string | null | undefined
-  tags: { id: string; name: string }[]
+  allTags: { id: string; name: string }[]
+  checkedTags: { id: string; name: string }[]
   cost: number | null | undefined
   costUnit: string | null | undefined
   tagsCollectionRefetch: () => void
@@ -34,42 +35,58 @@ type TripFormProps = {
 }
 
 export const TripForm = ({
-  // id,
+  id,
   image,
   title,
   dateFrom,
   dateTo,
-  tags,
+  allTags,
+  checkedTags,
   cost,
   costUnit,
   tagsCollectionRefetch,
   tagsRefetchLoading
 }: TripFormProps) => {
+  const imageSrc = useColorModeValue(
+    '/images/no_image_light.jpg',
+    '/images/no_image_dark.jpg'
+  )
   const { isOpen, onOpen, onClose } = useDisclosure()
+
   const {
     register,
-    // handleSubmit,
+    handleSubmit,
+    control,
     formState: { errors }
   } = useForm<TripSchema>({
     defaultValues: {
       title: title,
-      image_storage_object_id: image,
       date_from: dateFrom,
       date_to: dateTo,
-      cost: cost,
+      image_storage_object_id: image,
+      checkedTags: checkedTags.map((tag) => tag.id),
+      cost: cost ? cost.toString() : '',
       cost_unit: costUnit
     },
     resolver: tripSchemaResolver
   })
 
-  const imageSrc = useColorModeValue(
-    '/images/no_image_light.jpg',
-    '/images/no_image_dark.jpg'
-  )
+  console.log('errors', errors)
+
+  const updateTrip = async (data: TripSchema) => {
+    console.log('submit!', {
+      id,
+      data
+    })
+  }
 
   return (
     <>
-      <VStack as="form" gap={{ base: '30px', md: '40px' }}>
+      <VStack
+        as="form"
+        gap={{ base: '30px', md: '40px' }}
+        onSubmit={handleSubmit(updateTrip)}
+      >
         <FormControl isInvalid={!!errors.title}>
           <FormLabel>Title</FormLabel>
           <InputForm
@@ -101,7 +118,7 @@ export const TripForm = ({
         <FormControl isInvalid={!!errors.image_storage_object_id}>
           <FormLabel>Image</FormLabel>
           <HStack gap={{ base: '20px', md: '34px' }}>
-            <Image alt="" src={imageSrc} width="50%" />
+            <Image alt="" src={image || imageSrc} width="50%" />
             <PrimaryButton variant="outline">Select Image </PrimaryButton>
           </HStack>
           <FormErrorMessage>
@@ -109,31 +126,36 @@ export const TripForm = ({
           </FormErrorMessage>
         </FormControl>
 
-        <FormControl isInvalid={false}>
+        <FormControl isInvalid={!!errors.checkedTags}>
           <FormLabel>Tag</FormLabel>
-          <CheckboxGroup defaultValue={[]}>
-            <Flex columnGap={'20px'} rowGap={'10px'} flexWrap={'wrap'}>
-              {tagsRefetchLoading ? (
-                <Loading p="4px" size="md" />
-              ) : (
-                <>
-                  {tags.map((tag) => (
-                    <Checkbox key={tag.id} value={tag.id}>
-                      {tag.name}
-                    </Checkbox>
-                  ))}
-                </>
-              )}
-            </Flex>
-          </CheckboxGroup>
+          <Controller
+            name="checkedTags"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <CheckboxGroup value={value} onChange={onChange}>
+                <Flex columnGap={'20px'} rowGap={'10px'} flexWrap={'wrap'}>
+                  {tagsRefetchLoading ? (
+                    <Loading p="4px" size="md" />
+                  ) : (
+                    <>
+                      {allTags.map((tag) => (
+                        <Checkbox key={tag.id} value={tag.id}>
+                          {tag.name}
+                        </Checkbox>
+                      ))}
+                    </>
+                  )}
+                </Flex>
+              </CheckboxGroup>
+            )}
+          />
+          <FormErrorMessage>{errors?.checkedTags?.message}</FormErrorMessage>
 
           <Box mt="20px">
             <SecondaryButton variant={'outline'} size="sm" onClick={onOpen}>
               Manage Tags
             </SecondaryButton>
           </Box>
-
-          {/* <FormErrorMessage>{errors?.tags?.message}</FormErrorMessage> */}
         </FormControl>
 
         <Flex gap="20px" justify={'start'} width="100%">
@@ -160,13 +182,15 @@ export const TripForm = ({
           </FormControl>
         </Flex>
 
-        <PrimaryButton size="lg">Save Trip</PrimaryButton>
+        <PrimaryButton size="lg" type="submit">
+          Save Trip
+        </PrimaryButton>
       </VStack>
 
       <TagFormModal
         isOpen={isOpen}
         onClose={onClose}
-        tags={tags}
+        allTags={allTags}
         tagsCollectionRefetch={tagsCollectionRefetch}
       />
     </>
diff --git a/app/trip/schema.ts b/app/trip/schema.ts
index f34006d..c5eb4c3 100644
--- a/app/trip/schema.ts
+++ b/app/trip/schema.ts
@@ -6,7 +6,8 @@ const tripSchema = z.object({
   date_from: z.string().min(1, { message: 'Date from is required' }),
   date_to: z.string().nullable(),
   image_storage_object_id: z.string().nullable(),
-  cost: z.number().nullable(),
+  checkedTags: z.array(z.string()),
+  cost: z.string().nullable(),
   cost_unit: z.string().nullable()
 })
 

From 0cbf271fd1a6464edcba7c28bc3f64c474bffc4f Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Mon, 29 Jan 2024 19:56:25 -0800
Subject: [PATCH 06/13] Add data logic related tags

---
 app/components/date/custom-date-picker.tsx    | 106 +++++
 app/components/date/index.ts                  |   1 +
 app/components/input/index.ts                 |   2 +-
 app/components/input/input-form.tsx           |  14 +-
 .../{input-icon.tsx => input-icon-button.tsx} |   4 +-
 ...orm.stories.tsx => input-form.stories.tsx} |   0
 ...ries.tsx => input-icon-button.stories.tsx} |  10 +-
 app/libs/utils/date.ts                        |  26 ++
 app/libs/utils/index.ts                       |   4 +-
 app/trip/[id]/edit/page.tsx                   | 109 ++++--
 app/trip/components/tag-form-modal.tsx        |   5 +-
 app/trip/components/trip-form.tsx             | 205 ++++++----
 app/trip/components/trip-search.tsx           |   4 +-
 app/trip/graphql/mutation/createTrip.graphql  |   4 +-
 .../graphql/mutation/createTripTag.graphql    |  12 +
 .../graphql/mutation/deleteTripTag.graphql    |   8 +
 .../graphql/query/tripTagsCollection.graphql  |  11 +
 app/trip/schema.ts                            |   5 +-
 graphql-codegen/generated/api.ts              | 277 ++++++++++++-
 graphql-codegen/generated/gql.ts              |  30 +-
 graphql-codegen/generated/graphql.ts          | 363 +++++++++++++++++-
 .../generated/persisted-documents.json        |   5 +-
 package.json                                  |   3 +
 pnpm-lock.yaml                                | 125 ++++++
 24 files changed, 1186 insertions(+), 147 deletions(-)
 create mode 100644 app/components/date/custom-date-picker.tsx
 create mode 100644 app/components/date/index.ts
 rename app/components/input/{input-icon.tsx => input-icon-button.tsx} (90%)
 rename app/components/input/stories/{inputForm.stories.tsx => input-form.stories.tsx} (100%)
 rename app/components/input/stories/{inputIcon.stories.tsx => input-icon-button.stories.tsx} (53%)
 create mode 100644 app/trip/graphql/mutation/createTripTag.graphql
 create mode 100644 app/trip/graphql/mutation/deleteTripTag.graphql
 create mode 100644 app/trip/graphql/query/tripTagsCollection.graphql

diff --git a/app/components/date/custom-date-picker.tsx b/app/components/date/custom-date-picker.tsx
new file mode 100644
index 0000000..8cbde6d
--- /dev/null
+++ b/app/components/date/custom-date-picker.tsx
@@ -0,0 +1,106 @@
+import DatePicker from 'react-datepicker'
+import { Box, useColorMode } from '@chakra-ui/react'
+import { FiCalendar } from 'react-icons/fi'
+import 'react-datepicker/dist/react-datepicker.css'
+import { InputForm } from '@/components/input'
+
+type DatePickerProps = {
+  selectedDate: Date | null
+  onChange: (date: Date) => void
+  placeholderText: string
+  dateFormat?: string | string[] | undefined
+}
+
+export const CustomDatePicker = ({
+  selectedDate,
+  onChange,
+  placeholderText,
+  dateFormat
+}: DatePickerProps) => {
+  const { colorMode } = useColorMode()
+
+  const datePickerStyles = {
+    '.react-datepicker-wrapper': {
+      width: '100%'
+    },
+    '.react-datepicker-popper': {
+      right: { base: 0, md: 'unset' }
+    },
+    '.react-datepicker ': {
+      width: '100%',
+      border: 'none',
+      boxShadow: '0px 2px 16px 0px rgba(0,0,0,.25);',
+      fontSize: 'sm'
+    },
+    '.react-datepicker__month-container': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      width: { base: '100%', md: '400px' }
+    },
+    '.react-datepicker__triangle': {
+      display: 'none'
+    },
+    '.react-datepicker__header': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      borderBottomColor: colorMode === 'dark' ? 'gray.500' : 'gray.300'
+    },
+    '.react-datepicker__current-month': {
+      color: colorMode === 'dark' ? 'primary.700' : 'primary.800',
+      paddingY: '8px',
+      fontSize: 'lg'
+    },
+    '.react-datepicker__navigation': {
+      top: '11px'
+    },
+    '.react-datepicker__navigation--previous': {
+      left: '32px'
+    },
+    '.react-datepicker__navigation--next': {
+      right: '32px'
+    },
+    '.react-datepicker__navigation-icon': {
+      '&::before': {
+        borderColor: colorMode === 'dark' ? 'gray.500' : 'gray.400'
+      }
+    },
+    '.react-datepicker__month': {
+      margin: '1rem'
+    },
+    '.react-datepicker__day-names': {
+      paddingY: '4px'
+    },
+    '.react-datepicker__day-name': {
+      width: { base: '2.4rem', md: '2.8rem' },
+      lineHeight: { base: '2.4rem', md: '2.8rem' },
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    },
+    '.react-datepicker__day': {
+      width: { base: '2.4rem', md: '2.8rem' },
+      lineHeight: { base: '2.2rem', md: '2.4rem' },
+      ':hover': {
+        backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.100'
+      },
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    },
+    '.react-datepicker__day--selected': {
+      fontWeight: 'bold',
+      color: 'white',
+      backgroundColor: colorMode === 'dark' ? 'primary.700' : 'primary.500'
+    },
+    '.react-datepicker__day--keyboard-selected': {
+      background: 'none'
+    }
+  }
+
+  return (
+    <Box sx={datePickerStyles}>
+      <DatePicker
+        selected={selectedDate}
+        placeholderText={placeholderText}
+        onChange={onChange}
+        dateFormat={dateFormat}
+        popperPlacement="bottom-start"
+        customInput={<InputForm rightIcon={FiCalendar} />}
+      />
+    </Box>
+  )
+}
diff --git a/app/components/date/index.ts b/app/components/date/index.ts
new file mode 100644
index 0000000..6ec423b
--- /dev/null
+++ b/app/components/date/index.ts
@@ -0,0 +1 @@
+export { CustomDatePicker } from './custom-date-picker'
diff --git a/app/components/input/index.ts b/app/components/input/index.ts
index d4f1b9c..3da76d4 100644
--- a/app/components/input/index.ts
+++ b/app/components/input/index.ts
@@ -1,3 +1,3 @@
 export { InputForm } from './input-form'
-export { InputIcon } from './input-icon'
+export { InputIconButton } from './input-icon-button'
 export { TextareaForm } from './textarea-form'
diff --git a/app/components/input/input-form.tsx b/app/components/input/input-form.tsx
index 50923cb..237044f 100644
--- a/app/components/input/input-form.tsx
+++ b/app/components/input/input-form.tsx
@@ -1,13 +1,18 @@
+import { IconType } from 'react-icons'
 import {
   Input as ChakraFormInput,
   InputProps as ChakraInputProps,
   InputGroup,
+  InputRightElement,
   forwardRef,
   useColorModeValue
 } from '@chakra-ui/react'
 
-export const InputForm = forwardRef(
-  (props: ChakraInputProps, ref: React.Ref<HTMLInputElement>) => {
+type InputFormProps = {
+  rightIcon?: IconType
+}
+export const InputForm = forwardRef<ChakraInputProps & InputFormProps, 'input'>(
+  ({ rightIcon: RightIcon, ...props }, ref) => {
     const bgColor = useColorModeValue('white', 'gray.700')
     const borderColor = useColorModeValue('gray.300', 'gray.500')
     const placeholdercolor = useColorModeValue('gray.400', 'gray.600')
@@ -24,6 +29,11 @@ export const InputForm = forwardRef(
             color: placeholdercolor
           }}
         />
+        {RightIcon && (
+          <InputRightElement color="gray.500">
+            <RightIcon />
+          </InputRightElement>
+        )}
       </InputGroup>
     )
   }
diff --git a/app/components/input/input-icon.tsx b/app/components/input/input-icon-button.tsx
similarity index 90%
rename from app/components/input/input-icon.tsx
rename to app/components/input/input-icon-button.tsx
index 9e23325..02316bb 100644
--- a/app/components/input/input-icon.tsx
+++ b/app/components/input/input-icon-button.tsx
@@ -9,13 +9,13 @@ import {
   useColorModeValue
 } from '@chakra-ui/react'
 
-type InputIconProps = {
+type InputIconButtonProps = {
   ariaLabel: string
   icon: IconType
   onClick?: () => void
 }
 
-export const InputIcon = forwardRef<ChakraInputProps & InputIconProps, 'input'>(
+export const InputIconButton = forwardRef<ChakraInputProps & InputIconButtonProps, 'input'>(
   ({ ariaLabel, icon: Icon, onClick, ...props }, ref) => {
     const bgColor = useColorModeValue('white', 'gray.700')
     const borderColor = useColorModeValue('primary.700', 'gray.500')
diff --git a/app/components/input/stories/inputForm.stories.tsx b/app/components/input/stories/input-form.stories.tsx
similarity index 100%
rename from app/components/input/stories/inputForm.stories.tsx
rename to app/components/input/stories/input-form.stories.tsx
diff --git a/app/components/input/stories/inputIcon.stories.tsx b/app/components/input/stories/input-icon-button.stories.tsx
similarity index 53%
rename from app/components/input/stories/inputIcon.stories.tsx
rename to app/components/input/stories/input-icon-button.stories.tsx
index 59ca0e6..a2a6456 100644
--- a/app/components/input/stories/inputIcon.stories.tsx
+++ b/app/components/input/stories/input-icon-button.stories.tsx
@@ -1,13 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react'
 import { FiSearch } from 'react-icons/fi'
-import { InputIcon } from '@/components/input'
+import { InputIconButton } from '@/components/input'
 
-const meta: Meta<typeof InputIcon> = {
-  title: 'Input Icon',
-  component: InputIcon
+const meta: Meta<typeof InputIconButton> = {
+  title: 'Input Icon Button',
+  component: InputIconButton
 }
 export default meta
-type Story = StoryObj<typeof InputIcon>
+type Story = StoryObj<typeof InputIconButton>
 
 export const Default: Story = {
   args: {
diff --git a/app/libs/utils/date.ts b/app/libs/utils/date.ts
index edd625a..4779a4d 100644
--- a/app/libs/utils/date.ts
+++ b/app/libs/utils/date.ts
@@ -1,3 +1,7 @@
+import { zonedTimeToUtc, toDate, utcToZonedTime, format } from 'date-fns-tz'
+
+const TIMEZONE = 'Asia/Tokyo'
+
 /**
  * @param date - ISO date string e.g. '2023-01-01'
  * @param type - 'dayMonthYear' | 'dayMonth'
@@ -54,3 +58,25 @@ export const formatToDateTime = (date: string | null | undefined) => {
 
   return `${monthDay} ${hours}:${minutes}`
 }
+
+/**
+ *
+ * @param isoString - ISO date string
+ * @returns - Date Object ex. Mon Jan 01 2024 00:00:00 GMT-0800 (Pacific Standard Time)
+ */
+export const getDateObj = (isoString: string) => {
+  const parsedDate = toDate(isoString, { timeZone: TIMEZONE })
+  const dateObj = utcToZonedTime(parsedDate, TIMEZONE)
+  return dateObj
+}
+
+/**
+ * @param date - Date Object
+ * @returns - ISO date string with Tokyo timezone ex.2024-01-01T12:00:00+09:00
+ */
+export const formatToISODate = (date: Date) => {
+  const isoString = format(date, "yyyy-MM-dd'T'HH:mm:ssXXX", {
+    timeZone: TIMEZONE
+  })
+  return isoString
+}
diff --git a/app/libs/utils/index.ts b/app/libs/utils/index.ts
index eb4ca56..4d3aec5 100644
--- a/app/libs/utils/index.ts
+++ b/app/libs/utils/index.ts
@@ -2,5 +2,7 @@ export {
   formatDateToSlash,
   extractTimeFromDate,
   formatDbTimeToDate,
-  formatToDateTime
+  formatToDateTime,
+  getDateObj,
+  formatToISODate
 } from './date'
diff --git a/app/trip/[id]/edit/page.tsx b/app/trip/[id]/edit/page.tsx
index 6f11739..2c40bfb 100644
--- a/app/trip/[id]/edit/page.tsx
+++ b/app/trip/[id]/edit/page.tsx
@@ -6,7 +6,11 @@ import { Loading } from '@/components/loading'
 import { Header, Footer } from '@/components/navigation'
 import { useUserId } from '@/providers/session-provider'
 import { TripForm } from '../../components'
-import { useTagsCollectionQuery, useTripDetailsQuery } from '@generated/api'
+import {
+  useTagsCollectionQuery,
+  useTripDetailsQuery,
+  useTripTagsCollectionQuery
+} from '@generated/api'
 
 export default function TripEditPage({ params }: { params: { id: string } }) {
   const bg = useColorModeValue('white', 'gray.800')
@@ -14,12 +18,24 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
 
   const userId = useUserId()
 
-  const { data: tripData, loading: tripLoading } = useTripDetailsQuery({
+  const {
+    data: tripData,
+    loading: tripLoading,
+    refetch: tripRefetch,
+    networkStatus: tripNetWorkStatus
+  } = useTripDetailsQuery({
     variables: {
       id: params.id
-    }
+    },
+    notifyOnNetworkStatusChange: true
   })
 
+  const tripDataCollection = tripData?.tripsCollection?.edges[0]?.node
+  const tripDetailsRefetch = () => {
+    tripRefetch()
+  }
+  const tripDetailsRefetchLoading = tripNetWorkStatus === NetworkStatus.refetch
+
   const {
     data: tagsData,
     loading: tagsLoading,
@@ -30,17 +46,39 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
     notifyOnNetworkStatusChange: true
   })
 
-  if ((!tripData && !tripLoading) || (!tagsData && !tagsLoading))
-    throw new Error('No trip data found')
-
-  const tripDataCollection = tripData?.tripsCollection?.edges[0]?.node
-
   const tagsCollectionRefetch = () => {
     tagsRefetch()
   }
-
   const tagsRefetchLoading = tagsNetWorkStatus === NetworkStatus.refetch
 
+  const {
+    data: tripTagsData,
+    refetch: tripTagsRefetch,
+    networkStatus: tripTagsNetWorkStatus
+  } = useTripTagsCollectionQuery({
+    variables: {
+      filter: {
+        trip_id: { eq: params.id }
+      }
+    },
+    notifyOnNetworkStatusChange: true
+  })
+
+  const tripsTagsDataArray = tripTagsData?.trip_tagsCollection?.edges.map(
+    (tag) => ({
+      id: tag.node.id,
+      tag_id: tag.node.tag_id || '',
+      trip_id: tag.node.trip_id || ''
+    })
+  )
+  const tripTagsCollectionRefetch = () => {
+    tripTagsRefetch()
+  }
+  const tripTagsRefetchLoading = tripTagsNetWorkStatus === NetworkStatus.refetch
+
+  if ((!tripData && !tripLoading) || (!tagsData && !tagsLoading))
+    throw new Error('No trip data found')
+
   console.log('tripDataCollection', tripDataCollection)
   console.log('tagsData', tagsData)
 
@@ -57,31 +95,40 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
             Edit Trip
           </Heading>
           <Box mt="40px">
-            {!tripDataCollection || tripLoading ? (
+            {!tripDataCollection || tripLoading || !tripsTagsDataArray ? (
               <Loading />
             ) : (
               <TripForm
-                id={tripDataCollection.id}
-                image={tripDataCollection.image_storage_object_id}
-                title={tripDataCollection.title}
-                dateFrom={tripDataCollection.date_from}
-                dateTo={tripDataCollection.date_to}
-                allTags={
-                  tagsData?.tagsCollection?.edges.map((tag) => ({
-                    id: tag.node.id,
-                    name: tag.node.name
-                  })) || []
-                }
-                checkedTags={
-                  tripDataCollection.trip_tagsCollection?.edges.map((tag) => ({
-                    id: tag.node.tags?.id || '',
-                    name: tag.node.tags?.name || ''
-                  })) || []
-                }
-                cost={tripDataCollection.cost}
-                costUnit={tripDataCollection.cost_unit}
-                tagsCollectionRefetch={tagsCollectionRefetch}
-                tagsRefetchLoading={tagsRefetchLoading}
+                tripDetails={{
+                  id: tripDataCollection.id,
+                  image: tripDataCollection.image_storage_object_id,
+                  title: tripDataCollection.title,
+                  dateFrom: tripDataCollection.date_from,
+                  dateTo: tripDataCollection.date_to,
+                  cost: tripDataCollection.cost,
+                  costUnit: tripDataCollection.cost_unit,
+                  refetch: tripDetailsRefetch,
+                  refetchLoading: tripDetailsRefetchLoading
+                }}
+                tags={{
+                  data:
+                    tagsData?.tagsCollection?.edges.map((tag) => ({
+                      id: tag.node.id,
+                      name: tag.node.name
+                    })) || [],
+                  refetch: tagsCollectionRefetch,
+                  refetchLoading: tagsRefetchLoading
+                }}
+                tripTags={{
+                  data:
+                    tripTagsData?.trip_tagsCollection?.edges.map((tripTag) => ({
+                      id: tripTag.node.id,
+                      tag_id: tripTag.node.tag_id || '',
+                      trip_id: tripTag.node.trip_id || ''
+                    })) || [],
+                  refetch: tripTagsCollectionRefetch,
+                  refetchLoading: tripTagsRefetchLoading
+                }}
               />
             )}
           </Box>
diff --git a/app/trip/components/tag-form-modal.tsx b/app/trip/components/tag-form-modal.tsx
index 2f05244..6e0bd5d 100644
--- a/app/trip/components/tag-form-modal.tsx
+++ b/app/trip/components/tag-form-modal.tsx
@@ -17,7 +17,7 @@ import {
   useToast
 } from '@chakra-ui/react'
 import { FiPlusCircle, FiX } from 'react-icons/fi'
-import { InputIcon } from '@/components/input'
+import { InputIconButton } from '@/components/input'
 import { Loading } from '@/components/loading'
 import { useUserId } from '@/providers/session-provider'
 import { TagSchema, tagSchemaResolver } from '../schema'
@@ -54,6 +54,7 @@ export const TagFormModal = ({
 
   const addTag = async (input: TagSchema) => {
     try {
+      
       await createTagMutation({
         variables: {
           name: input.name,
@@ -155,7 +156,7 @@ export const TagFormModal = ({
               </Heading>
               <Box mt="8px">
                 <FormControl isInvalid={!!errors.name}>
-                  <InputIcon
+                  <InputIconButton
                     type={'text'}
                     placeholder={'Add tag'}
                     ariaLabel={'Add tag'}
diff --git a/app/trip/components/trip-form.tsx b/app/trip/components/trip-form.tsx
index 74400bf..b101fd0 100644
--- a/app/trip/components/trip-form.tsx
+++ b/app/trip/components/trip-form.tsx
@@ -11,47 +11,59 @@ import {
   Flex,
   Checkbox,
   Box,
-  useDisclosure
+  useDisclosure,
+  useToast
 } from '@chakra-ui/react'
 import { PrimaryButton, SecondaryButton } from '@/components/button'
-import { CustomDateTimePicker } from '@/components/customDateTimePicker'
+import { CustomDatePicker } from '@/components/date'
 import { InputForm } from '@/components/input'
 import { Loading } from '@/components/loading'
+import { getDateObj, formatToISODate } from '@/libs/utils'
 import { TagFormModal } from '../components'
 import { tripSchemaResolver, TripSchema } from '../schema'
+import {
+  useCreateTripTagMutation,
+  useDeleteTripTagMutation
+} from '@generated/api'
 
 type TripFormProps = {
-  id: string
-  image: string | null | undefined
-  title: string
-  dateFrom: string
-  dateTo: string | null | undefined
-  allTags: { id: string; name: string }[]
-  checkedTags: { id: string; name: string }[]
-  cost: number | null | undefined
-  costUnit: string | null | undefined
-  tagsCollectionRefetch: () => void
-  tagsRefetchLoading: boolean
+  tripDetails: {
+    id: string
+    image: string | null | undefined
+    title: string
+    dateFrom: string
+    dateTo: string | null | undefined
+    cost: number | null | undefined
+    costUnit: string | null | undefined
+    refetch: () => void
+    refetchLoading: boolean
+  }
+  tags: {
+    data: { id: string; name: string }[]
+    refetch: () => void
+    refetchLoading: boolean
+  }
+  tripTags: {
+    data: { id: string; tag_id: string; trip_id: string }[]
+    refetch: () => void
+    refetchLoading: boolean
+  }
 }
 
-export const TripForm = ({
-  id,
-  image,
-  title,
-  dateFrom,
-  dateTo,
-  allTags,
-  checkedTags,
-  cost,
-  costUnit,
-  tagsCollectionRefetch,
-  tagsRefetchLoading
-}: TripFormProps) => {
+export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
   const imageSrc = useColorModeValue(
     '/images/no_image_light.jpg',
     '/images/no_image_dark.jpg'
   )
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const toast = useToast()
+
+  console.log('tripTagsData', tripTags.data)
+
+  const [createTripTagMutation, { loading: isTripTagCreating }] =
+    useCreateTripTagMutation()
+  const [deleteTripTagMutation, { loading: isTripTagDeleting }] =
+    useDeleteTripTagMutation()
 
   const {
     register,
@@ -60,24 +72,67 @@ export const TripForm = ({
     formState: { errors }
   } = useForm<TripSchema>({
     defaultValues: {
-      title: title,
-      date_from: dateFrom,
-      date_to: dateTo,
-      image_storage_object_id: image,
-      checkedTags: checkedTags.map((tag) => tag.id),
-      cost: cost ? cost.toString() : '',
-      cost_unit: costUnit
+      title: tripDetails.title,
+      date_from: getDateObj(tripDetails.dateFrom),
+      date_to: tripDetails.dateTo ? getDateObj(tripDetails.dateTo) : null,
+      image_storage_object_id: tripDetails.image,
+      cost: tripDetails.cost ? tripDetails.cost.toString() : '',
+      cost_unit: tripDetails.costUnit
     },
     resolver: tripSchemaResolver
   })
 
   console.log('errors', errors)
 
+  const tagClickHandler = async (selectedTagId: string) => {
+    try {
+      const isTagIdAlreadyExists = tripTags.data.find(
+        (tripTag) => tripTag.tag_id === selectedTagId
+      )
+
+      if (isTagIdAlreadyExists) {
+        await deleteTripTagMutation({
+          variables: {
+            id: isTagIdAlreadyExists.id
+          }
+        })
+        tripTags.refetch()
+        return
+      }
+
+      if (!isTagIdAlreadyExists) {
+        await createTripTagMutation({
+          variables: {
+            tripId: tripDetails.id,
+            tagId: selectedTagId
+          }
+        })
+        tripTags.refetch()
+      }
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: "We're sorry, but you failed to update a tag",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
   const updateTrip = async (data: TripSchema) => {
     console.log('submit!', {
-      id,
+      tripId: tripDetails.id,
       data
     })
+
+    if (data.date_to) {
+      const dateTo = formatToISODate(data.date_to)
+      console.log('dateTo', dateTo)
+    }
   }
 
   return (
@@ -99,18 +154,35 @@ export const TripForm = ({
 
         <FormControl isInvalid={!!errors.date_from}>
           <FormLabel>Date From</FormLabel>
-          <CustomDateTimePicker
-            onChange={() => console.log('onChange')}
-            value={null}
+          <Controller
+            name="date_from"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <CustomDatePicker
+                onChange={onChange}
+                selectedDate={value}
+                placeholderText={'2024/01/01'}
+                dateFormat="yyyy/MM/dd"
+              />
+            )}
           />
           <FormErrorMessage>{errors?.date_from?.message}</FormErrorMessage>
         </FormControl>
 
         <FormControl isInvalid={!!errors.date_to}>
           <FormLabel>Date To</FormLabel>
-          <CustomDateTimePicker
-            onChange={() => console.log('onChange')}
-            value={null}
+
+          <Controller
+            name="date_to"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <CustomDatePicker
+                onChange={onChange}
+                selectedDate={value}
+                placeholderText={'2024/01/01'}
+                dateFormat="yyyy/MM/dd"
+              />
+            )}
           />
           <FormErrorMessage>{errors?.date_to?.message}</FormErrorMessage>
         </FormControl>
@@ -118,7 +190,7 @@ export const TripForm = ({
         <FormControl isInvalid={!!errors.image_storage_object_id}>
           <FormLabel>Image</FormLabel>
           <HStack gap={{ base: '20px', md: '34px' }}>
-            <Image alt="" src={image || imageSrc} width="50%" />
+            <Image alt="" src={tripDetails.image || imageSrc} width="50%" />
             <PrimaryButton variant="outline">Select Image </PrimaryButton>
           </HStack>
           <FormErrorMessage>
@@ -126,37 +198,36 @@ export const TripForm = ({
           </FormErrorMessage>
         </FormControl>
 
-        <FormControl isInvalid={!!errors.checkedTags}>
+        <Flex justify="start" flexDir="column" width="100%">
           <FormLabel>Tag</FormLabel>
-          <Controller
-            name="checkedTags"
-            control={control}
-            render={({ field: { onChange, value } }) => (
-              <CheckboxGroup value={value} onChange={onChange}>
-                <Flex columnGap={'20px'} rowGap={'10px'} flexWrap={'wrap'}>
-                  {tagsRefetchLoading ? (
-                    <Loading p="4px" size="md" />
-                  ) : (
-                    <>
-                      {allTags.map((tag) => (
-                        <Checkbox key={tag.id} value={tag.id}>
-                          {tag.name}
-                        </Checkbox>
-                      ))}
-                    </>
-                  )}
-                </Flex>
-              </CheckboxGroup>
-            )}
-          />
-          <FormErrorMessage>{errors?.checkedTags?.message}</FormErrorMessage>
+
+          <CheckboxGroup defaultValue={tripTags.data.map((tag) => tag.tag_id)}>
+            <Flex columnGap={'20px'} rowGap={'10px'} flexWrap={'wrap'}>
+              {tags.refetchLoading ? (
+                <Loading p="4px" size="md" />
+              ) : (
+                <>
+                  {tags.data.map((tag) => (
+                    <Checkbox
+                      key={tag.id}
+                      value={tag.id}
+                      isDisabled={isTripTagCreating || isTripTagDeleting}
+                      onChange={() => tagClickHandler(tag.id)}
+                    >
+                      {tag.name}
+                    </Checkbox>
+                  ))}
+                </>
+              )}
+            </Flex>
+          </CheckboxGroup>
 
           <Box mt="20px">
             <SecondaryButton variant={'outline'} size="sm" onClick={onOpen}>
               Manage Tags
             </SecondaryButton>
           </Box>
-        </FormControl>
+        </Flex>
 
         <Flex gap="20px" justify={'start'} width="100%">
           <FormControl w={'180px'} isInvalid={!!errors.cost}>
@@ -190,8 +261,8 @@ export const TripForm = ({
       <TagFormModal
         isOpen={isOpen}
         onClose={onClose}
-        allTags={allTags}
-        tagsCollectionRefetch={tagsCollectionRefetch}
+        allTags={tags.data}
+        tagsCollectionRefetch={tags.refetch}
       />
     </>
   )
diff --git a/app/trip/components/trip-search.tsx b/app/trip/components/trip-search.tsx
index b40241f..a6fc3b7 100644
--- a/app/trip/components/trip-search.tsx
+++ b/app/trip/components/trip-search.tsx
@@ -3,7 +3,7 @@ import { useRef, FormEvent, KeyboardEvent } from 'react'
 import { Box } from '@chakra-ui/react'
 import { useRouter } from 'next/navigation'
 import { FiSearch } from 'react-icons/fi'
-import { InputIcon } from '@/components/input'
+import { InputIconButton } from '@/components/input'
 
 export const TripSearch = () => {
   const router = useRouter()
@@ -38,7 +38,7 @@ export const TripSearch = () => {
 
   return (
     <Box as="form" onSubmit={submitHandler}>
-      <InputIcon
+      <InputIconButton
         type={'text'}
         name={'searchWord'}
         placeholder={'Search trips by title'}
diff --git a/app/trip/graphql/mutation/createTrip.graphql b/app/trip/graphql/mutation/createTrip.graphql
index ccbf4b1..fafbd7b 100644
--- a/app/trip/graphql/mutation/createTrip.graphql
+++ b/app/trip/graphql/mutation/createTrip.graphql
@@ -1,8 +1,8 @@
 mutation createTrip(
   $user_id: UUID!
   $title: String!
-  $date_from: Date
-  $date_to: Date
+  $date_from: Datetime!
+  $date_to: Datetime
 ) {
   insertIntotripsCollection(
     objects: [
diff --git a/app/trip/graphql/mutation/createTripTag.graphql b/app/trip/graphql/mutation/createTripTag.graphql
new file mode 100644
index 0000000..9a77c36
--- /dev/null
+++ b/app/trip/graphql/mutation/createTripTag.graphql
@@ -0,0 +1,12 @@
+mutation createTripTag($tripId: UUID!, $tagId: UUID!) {
+  insertIntotrip_tagsCollection(
+    objects: [{ trip_id: $tripId, tag_id: $tagId }]
+  ) {
+    records {
+      __typename
+      id
+      tag_id
+      trip_id
+    }
+  }
+}
diff --git a/app/trip/graphql/mutation/deleteTripTag.graphql b/app/trip/graphql/mutation/deleteTripTag.graphql
new file mode 100644
index 0000000..0beb20e
--- /dev/null
+++ b/app/trip/graphql/mutation/deleteTripTag.graphql
@@ -0,0 +1,8 @@
+mutation deleteTripTag($id: UUID!) {
+  deleteFromtrip_tagsCollection(filter: { id: { eq: $id } }) {
+    records {
+      __typename
+      id
+    }
+  }
+}
diff --git a/app/trip/graphql/query/tripTagsCollection.graphql b/app/trip/graphql/query/tripTagsCollection.graphql
new file mode 100644
index 0000000..07d45ae
--- /dev/null
+++ b/app/trip/graphql/query/tripTagsCollection.graphql
@@ -0,0 +1,11 @@
+query tripTagsCollection($filter: trip_tagsFilter) {
+  trip_tagsCollection(filter: $filter) {
+    edges {
+      node {
+        id
+        trip_id
+        tag_id
+      }
+    }
+  }
+}
diff --git a/app/trip/schema.ts b/app/trip/schema.ts
index c5eb4c3..071b63c 100644
--- a/app/trip/schema.ts
+++ b/app/trip/schema.ts
@@ -3,10 +3,9 @@ import * as z from 'zod'
 
 const tripSchema = z.object({
   title: z.string().min(1, { message: 'Title is required' }),
-  date_from: z.string().min(1, { message: 'Date from is required' }),
-  date_to: z.string().nullable(),
+  date_from: z.date(),
+  date_to: z.date().nullable(),
   image_storage_object_id: z.string().nullable(),
-  checkedTags: z.array(z.string()),
   cost: z.string().nullable(),
   cost_unit: z.string().nullable()
 })
diff --git a/graphql-codegen/generated/api.ts b/graphql-codegen/generated/api.ts
index 2670a63..f38161a 100644
--- a/graphql-codegen/generated/api.ts
+++ b/graphql-codegen/generated/api.ts
@@ -907,8 +907,8 @@ export type Trips = Node & {
   cost?: Maybe<Scalars['BigFloat']['output']>
   cost_unit?: Maybe<Scalars['String']['output']>
   created_at: Scalars['Datetime']['output']
-  date_from: Scalars['Date']['output']
-  date_to?: Maybe<Scalars['Date']['output']>
+  date_from: Scalars['Datetime']['output']
+  date_to?: Maybe<Scalars['Datetime']['output']>
   description?: Maybe<Scalars['String']['output']>
   id: Scalars['UUID']['output']
   image_storage_object_id?: Maybe<Scalars['UUID']['output']>
@@ -972,8 +972,8 @@ export type TripsFilter = {
   cost?: InputMaybe<BigFloatFilter>
   cost_unit?: InputMaybe<StringFilter>
   created_at?: InputMaybe<DatetimeFilter>
-  date_from?: InputMaybe<DateFilter>
-  date_to?: InputMaybe<DateFilter>
+  date_from?: InputMaybe<DatetimeFilter>
+  date_to?: InputMaybe<DatetimeFilter>
   description?: InputMaybe<StringFilter>
   id?: InputMaybe<UuidFilter>
   image_storage_object_id?: InputMaybe<UuidFilter>
@@ -986,8 +986,8 @@ export type TripsInsertInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
   cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from?: InputMaybe<Scalars['Datetime']['input']>
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
   description?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
@@ -1020,8 +1020,8 @@ export type TripsUpdateInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
   cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from?: InputMaybe<Scalars['Datetime']['input']>
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
   description?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
@@ -1206,8 +1206,8 @@ export type CreateTagMutation = {
 export type CreateTripMutationVariables = Exact<{
   user_id: Scalars['UUID']['input']
   title: Scalars['String']['input']
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from: Scalars['Datetime']['input']
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
 }>
 
 export type CreateTripMutation = {
@@ -1218,6 +1218,24 @@ export type CreateTripMutation = {
   } | null
 }
 
+export type CreateTripTagMutationVariables = Exact<{
+  tripId: Scalars['UUID']['input']
+  tagId: Scalars['UUID']['input']
+}>
+
+export type CreateTripTagMutation = {
+  __typename: 'Mutation'
+  insertIntotrip_tagsCollection?: {
+    __typename: 'trip_tagsInsertResponse'
+    records: Array<{
+      __typename: 'trip_tags'
+      id: string
+      tag_id?: string | null
+      trip_id?: string | null
+    }>
+  } | null
+}
+
 export type DeleteTagMutationVariables = Exact<{
   id: Scalars['UUID']['input']
 }>
@@ -1230,6 +1248,18 @@ export type DeleteTagMutation = {
   }
 }
 
+export type DeleteTripTagMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+}>
+
+export type DeleteTripTagMutation = {
+  __typename: 'Mutation'
+  deleteFromtrip_tagsCollection: {
+    __typename: 'trip_tagsDeleteResponse'
+    records: Array<{ __typename: 'trip_tags'; id: string }>
+  }
+}
+
 export type TagsCollectionQueryVariables = Exact<{
   userId: Scalars['UUID']['input']
 }>
@@ -1307,6 +1337,26 @@ export type TripDetailsQuery = {
   } | null
 }
 
+export type TripTagsCollectionQueryVariables = Exact<{
+  filter?: InputMaybe<Trip_TagsFilter>
+}>
+
+export type TripTagsCollectionQuery = {
+  __typename: 'Query'
+  trip_tagsCollection?: {
+    __typename: 'trip_tagsConnection'
+    edges: Array<{
+      __typename: 'trip_tagsEdge'
+      node: {
+        __typename: 'trip_tags'
+        id: string
+        trip_id?: string | null
+        tag_id?: string | null
+      }
+    }>
+  } | null
+}
+
 export type TripsCollectionQueryVariables = Exact<{
   filter?: InputMaybe<TripsFilter>
   orderBy?: InputMaybe<Array<TripsOrderBy> | TripsOrderBy>
@@ -1593,8 +1643,8 @@ export const CreateTripDocument = gql`
   mutation createTrip(
     $user_id: UUID!
     $title: String!
-    $date_from: Date
-    $date_to: Date
+    $date_from: Datetime!
+    $date_to: Datetime
   ) {
     __typename
     insertIntotripsCollection(
@@ -1661,6 +1711,66 @@ export type CreateTripMutationOptions = Apollo.BaseMutationOptions<
   CreateTripMutation,
   CreateTripMutationVariables
 >
+export const CreateTripTagDocument = gql`
+  mutation createTripTag($tripId: UUID!, $tagId: UUID!) {
+    __typename
+    insertIntotrip_tagsCollection(
+      objects: [{ trip_id: $tripId, tag_id: $tagId }]
+    ) {
+      __typename
+      records {
+        __typename
+        id
+        tag_id
+        trip_id
+      }
+    }
+  }
+`
+export type CreateTripTagMutationFn = Apollo.MutationFunction<
+  CreateTripTagMutation,
+  CreateTripTagMutationVariables
+>
+
+/**
+ * __useCreateTripTagMutation__
+ *
+ * To run a mutation, you first call `useCreateTripTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateTripTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createTripTagMutation, { data, loading, error }] = useCreateTripTagMutation({
+ *   variables: {
+ *      tripId: // value for 'tripId'
+ *      tagId: // value for 'tagId'
+ *   },
+ * });
+ */
+export function useCreateTripTagMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    CreateTripTagMutation,
+    CreateTripTagMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<
+    CreateTripTagMutation,
+    CreateTripTagMutationVariables
+  >(CreateTripTagDocument, options)
+}
+export type CreateTripTagMutationHookResult = ReturnType<
+  typeof useCreateTripTagMutation
+>
+export type CreateTripTagMutationResult =
+  Apollo.MutationResult<CreateTripTagMutation>
+export type CreateTripTagMutationOptions = Apollo.BaseMutationOptions<
+  CreateTripTagMutation,
+  CreateTripTagMutationVariables
+>
 export const DeleteTagDocument = gql`
   mutation deleteTag($id: UUID!) {
     __typename
@@ -1716,6 +1826,61 @@ export type DeleteTagMutationOptions = Apollo.BaseMutationOptions<
   DeleteTagMutation,
   DeleteTagMutationVariables
 >
+export const DeleteTripTagDocument = gql`
+  mutation deleteTripTag($id: UUID!) {
+    __typename
+    deleteFromtrip_tagsCollection(filter: { id: { eq: $id } }) {
+      __typename
+      records {
+        __typename
+        id
+      }
+    }
+  }
+`
+export type DeleteTripTagMutationFn = Apollo.MutationFunction<
+  DeleteTripTagMutation,
+  DeleteTripTagMutationVariables
+>
+
+/**
+ * __useDeleteTripTagMutation__
+ *
+ * To run a mutation, you first call `useDeleteTripTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteTripTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteTripTagMutation, { data, loading, error }] = useDeleteTripTagMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDeleteTripTagMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    DeleteTripTagMutation,
+    DeleteTripTagMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<
+    DeleteTripTagMutation,
+    DeleteTripTagMutationVariables
+  >(DeleteTripTagDocument, options)
+}
+export type DeleteTripTagMutationHookResult = ReturnType<
+  typeof useDeleteTripTagMutation
+>
+export type DeleteTripTagMutationResult =
+  Apollo.MutationResult<DeleteTripTagMutation>
+export type DeleteTripTagMutationOptions = Apollo.BaseMutationOptions<
+  DeleteTripTagMutation,
+  DeleteTripTagMutationVariables
+>
 export const TagsCollectionDocument = gql`
   query tagsCollection($userId: UUID!) {
     __typename
@@ -1936,6 +2101,94 @@ export type TripDetailsQueryResult = Apollo.QueryResult<
 export function refetchTripDetailsQuery(variables: TripDetailsQueryVariables) {
   return { query: TripDetailsDocument, variables: variables }
 }
+export const TripTagsCollectionDocument = gql`
+  query tripTagsCollection($filter: trip_tagsFilter) {
+    __typename
+    trip_tagsCollection(filter: $filter) {
+      __typename
+      edges {
+        __typename
+        node {
+          __typename
+          id
+          trip_id
+          tag_id
+        }
+      }
+    }
+  }
+`
+
+/**
+ * __useTripTagsCollectionQuery__
+ *
+ * To run a query within a React component, call `useTripTagsCollectionQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTripTagsCollectionQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useTripTagsCollectionQuery({
+ *   variables: {
+ *      filter: // value for 'filter'
+ *   },
+ * });
+ */
+export function useTripTagsCollectionQuery(
+  baseOptions?: Apollo.QueryHookOptions<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >(TripTagsCollectionDocument, options)
+}
+export function useTripTagsCollectionLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >(TripTagsCollectionDocument, options)
+}
+export function useTripTagsCollectionSuspenseQuery(
+  baseOptions?: Apollo.SuspenseQueryHookOptions<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useSuspenseQuery<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >(TripTagsCollectionDocument, options)
+}
+export type TripTagsCollectionQueryHookResult = ReturnType<
+  typeof useTripTagsCollectionQuery
+>
+export type TripTagsCollectionLazyQueryHookResult = ReturnType<
+  typeof useTripTagsCollectionLazyQuery
+>
+export type TripTagsCollectionSuspenseQueryHookResult = ReturnType<
+  typeof useTripTagsCollectionSuspenseQuery
+>
+export type TripTagsCollectionQueryResult = Apollo.QueryResult<
+  TripTagsCollectionQuery,
+  TripTagsCollectionQueryVariables
+>
+export function refetchTripTagsCollectionQuery(
+  variables?: TripTagsCollectionQueryVariables
+) {
+  return { query: TripTagsCollectionDocument, variables: variables }
+}
 export const TripsCollectionDocument = gql`
   query tripsCollection(
     $filter: tripsFilter
diff --git a/graphql-codegen/generated/gql.ts b/graphql-codegen/generated/gql.ts
index 9d112f9..36f3aff 100644
--- a/graphql-codegen/generated/gql.ts
+++ b/graphql-codegen/generated/gql.ts
@@ -19,14 +19,20 @@ const documents = {
     types.ActivityCollectionDocument,
   'mutation createTag($name: String!, $userId: UUID!) {\n  insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}':
     types.CreateTagDocument,
-  'mutation createTrip($user_id: UUID!, $title: String!, $date_from: Date, $date_to: Date) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}':
+  'mutation createTrip($user_id: UUID!, $title: String!, $date_from: Datetime!, $date_to: Datetime) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}':
     types.CreateTripDocument,
+  'mutation createTripTag($tripId: UUID!, $tagId: UUID!) {\n  insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) {\n    records {\n      __typename\n      id\n      tag_id\n      trip_id\n    }\n  }\n}':
+    types.CreateTripTagDocument,
   'mutation deleteTag($id: UUID!) {\n  deleteFromtagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}':
     types.DeleteTagDocument,
+  'mutation deleteTripTag($id: UUID!) {\n  deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n    }\n  }\n}':
+    types.DeleteTripTagDocument,
   'query tagsCollection($userId: UUID!) {\n  tagsCollection(\n    filter: {user_id: {eq: $userId}}\n    orderBy: {created_at: AscNullsLast}\n  ) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}':
     types.TagsCollectionDocument,
   'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}':
     types.TripDetailsDocument,
+  'query tripTagsCollection($filter: trip_tagsFilter) {\n  trip_tagsCollection(filter: $filter) {\n    edges {\n      node {\n        id\n        trip_id\n        tag_id\n      }\n    }\n  }\n}':
+    types.TripTagsCollectionDocument,
   'query tripsCollection($filter: tripsFilter, $orderBy: [tripsOrderBy!], $first: Int!, $after: Cursor) {\n  tripsCollection(\n    filter: $filter\n    first: $first\n    after: $after\n    orderBy: $orderBy\n  ) {\n    edges {\n      node {\n        id\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        created_at\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n            }\n          }\n        }\n      }\n    }\n    pageInfo {\n      startCursor\n      endCursor\n      hasPreviousPage\n      hasNextPage\n    }\n  }\n}':
     types.TripsCollectionDocument
 }
@@ -67,14 +73,26 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: 'mutation createTrip($user_id: UUID!, $title: String!, $date_from: Date, $date_to: Date) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}'
-): (typeof documents)['mutation createTrip($user_id: UUID!, $title: String!, $date_from: Date, $date_to: Date) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}']
+  source: 'mutation createTrip($user_id: UUID!, $title: String!, $date_from: Datetime!, $date_to: Datetime) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}'
+): (typeof documents)['mutation createTrip($user_id: UUID!, $title: String!, $date_from: Datetime!, $date_to: Datetime) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'mutation createTripTag($tripId: UUID!, $tagId: UUID!) {\n  insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) {\n    records {\n      __typename\n      id\n      tag_id\n      trip_id\n    }\n  }\n}'
+): (typeof documents)['mutation createTripTag($tripId: UUID!, $tagId: UUID!) {\n  insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) {\n    records {\n      __typename\n      id\n      tag_id\n      trip_id\n    }\n  }\n}']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
   source: 'mutation deleteTag($id: UUID!) {\n  deleteFromtagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}'
 ): (typeof documents)['mutation deleteTag($id: UUID!) {\n  deleteFromtagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'mutation deleteTripTag($id: UUID!) {\n  deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n    }\n  }\n}'
+): (typeof documents)['mutation deleteTripTag($id: UUID!) {\n  deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n    }\n  }\n}']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -87,6 +105,12 @@ export function graphql(
 export function graphql(
   source: 'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}'
 ): (typeof documents)['query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'query tripTagsCollection($filter: trip_tagsFilter) {\n  trip_tagsCollection(filter: $filter) {\n    edges {\n      node {\n        id\n        trip_id\n        tag_id\n      }\n    }\n  }\n}'
+): (typeof documents)['query tripTagsCollection($filter: trip_tagsFilter) {\n  trip_tagsCollection(filter: $filter) {\n    edges {\n      node {\n        id\n        trip_id\n        tag_id\n      }\n    }\n  }\n}']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/graphql-codegen/generated/graphql.ts b/graphql-codegen/generated/graphql.ts
index 34153c1..b5f50ce 100644
--- a/graphql-codegen/generated/graphql.ts
+++ b/graphql-codegen/generated/graphql.ts
@@ -915,8 +915,8 @@ export type Trips = Node & {
   cost?: Maybe<Scalars['BigFloat']['output']>
   cost_unit?: Maybe<Scalars['String']['output']>
   created_at: Scalars['Datetime']['output']
-  date_from: Scalars['Date']['output']
-  date_to?: Maybe<Scalars['Date']['output']>
+  date_from: Scalars['Datetime']['output']
+  date_to?: Maybe<Scalars['Datetime']['output']>
   description?: Maybe<Scalars['String']['output']>
   id: Scalars['UUID']['output']
   image_storage_object_id?: Maybe<Scalars['UUID']['output']>
@@ -980,8 +980,8 @@ export type TripsFilter = {
   cost?: InputMaybe<BigFloatFilter>
   cost_unit?: InputMaybe<StringFilter>
   created_at?: InputMaybe<DatetimeFilter>
-  date_from?: InputMaybe<DateFilter>
-  date_to?: InputMaybe<DateFilter>
+  date_from?: InputMaybe<DatetimeFilter>
+  date_to?: InputMaybe<DatetimeFilter>
   description?: InputMaybe<StringFilter>
   id?: InputMaybe<UuidFilter>
   image_storage_object_id?: InputMaybe<UuidFilter>
@@ -994,8 +994,8 @@ export type TripsInsertInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
   cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from?: InputMaybe<Scalars['Datetime']['input']>
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
   description?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
@@ -1028,8 +1028,8 @@ export type TripsUpdateInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
   cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from?: InputMaybe<Scalars['Datetime']['input']>
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
   description?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
@@ -1214,8 +1214,8 @@ export type CreateTagMutation = {
 export type CreateTripMutationVariables = Exact<{
   user_id: Scalars['UUID']['input']
   title: Scalars['String']['input']
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from: Scalars['Datetime']['input']
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
 }>
 
 export type CreateTripMutation = {
@@ -1226,6 +1226,24 @@ export type CreateTripMutation = {
   } | null
 }
 
+export type CreateTripTagMutationVariables = Exact<{
+  tripId: Scalars['UUID']['input']
+  tagId: Scalars['UUID']['input']
+}>
+
+export type CreateTripTagMutation = {
+  __typename: 'Mutation'
+  insertIntotrip_tagsCollection?: {
+    __typename: 'trip_tagsInsertResponse'
+    records: Array<{
+      __typename: 'trip_tags'
+      id: string
+      tag_id?: string | null
+      trip_id?: string | null
+    }>
+  } | null
+}
+
 export type DeleteTagMutationVariables = Exact<{
   id: Scalars['UUID']['input']
 }>
@@ -1238,6 +1256,18 @@ export type DeleteTagMutation = {
   }
 }
 
+export type DeleteTripTagMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+}>
+
+export type DeleteTripTagMutation = {
+  __typename: 'Mutation'
+  deleteFromtrip_tagsCollection: {
+    __typename: 'trip_tagsDeleteResponse'
+    records: Array<{ __typename: 'trip_tags'; id: string }>
+  }
+}
+
 export type TagsCollectionQueryVariables = Exact<{
   userId: Scalars['UUID']['input']
 }>
@@ -1315,6 +1345,26 @@ export type TripDetailsQuery = {
   } | null
 }
 
+export type TripTagsCollectionQueryVariables = Exact<{
+  filter?: InputMaybe<Trip_TagsFilter>
+}>
+
+export type TripTagsCollectionQuery = {
+  __typename: 'Query'
+  trip_tagsCollection?: {
+    __typename: 'trip_tagsConnection'
+    edges: Array<{
+      __typename: 'trip_tagsEdge'
+      node: {
+        __typename: 'trip_tags'
+        id: string
+        trip_id?: string | null
+        tag_id?: string | null
+      }
+    }>
+  } | null
+}
+
 export type TripsCollectionQueryVariables = Exact<{
   filter?: InputMaybe<TripsFilter>
   orderBy?: InputMaybe<Array<TripsOrderBy> | TripsOrderBy>
@@ -1712,7 +1762,7 @@ export const CreateTagDocument = {
   ]
 } as unknown as DocumentNode<CreateTagMutation, CreateTagMutationVariables>
 export const CreateTripDocument = {
-  __meta__: { hash: '995473133e320e5f7ef165df54d56100c62b3a75' },
+  __meta__: { hash: 'aca942ce9802822f0ecd793697b6b6bf16d25152' },
   kind: 'Document',
   definitions: [
     {
@@ -1748,7 +1798,13 @@ export const CreateTripDocument = {
             kind: 'Variable',
             name: { kind: 'Name', value: 'date_from' }
           },
-          type: { kind: 'NamedType', name: { kind: 'Name', value: 'Date' } }
+          type: {
+            kind: 'NonNullType',
+            type: {
+              kind: 'NamedType',
+              name: { kind: 'Name', value: 'Datetime' }
+            }
+          }
         },
         {
           kind: 'VariableDefinition',
@@ -1756,7 +1812,7 @@ export const CreateTripDocument = {
             kind: 'Variable',
             name: { kind: 'Name', value: 'date_to' }
           },
-          type: { kind: 'NamedType', name: { kind: 'Name', value: 'Date' } }
+          type: { kind: 'NamedType', name: { kind: 'Name', value: 'Datetime' } }
         }
       ],
       selectionSet: {
@@ -1841,6 +1897,114 @@ export const CreateTripDocument = {
     }
   ]
 } as unknown as DocumentNode<CreateTripMutation, CreateTripMutationVariables>
+export const CreateTripTagDocument = {
+  __meta__: { hash: 'b86b0c68b8ee2697ff1b539e5df92575cedb30f0' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'createTripTag' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'tripId' }
+          },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'tagId' }
+          },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'insertIntotrip_tagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'objects' },
+                value: {
+                  kind: 'ListValue',
+                  values: [
+                    {
+                      kind: 'ObjectValue',
+                      fields: [
+                        {
+                          kind: 'ObjectField',
+                          name: { kind: 'Name', value: 'trip_id' },
+                          value: {
+                            kind: 'Variable',
+                            name: { kind: 'Name', value: 'tripId' }
+                          }
+                        },
+                        {
+                          kind: 'ObjectField',
+                          name: { kind: 'Name', value: 'tag_id' },
+                          value: {
+                            kind: 'Variable',
+                            name: { kind: 'Name', value: 'tagId' }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'records' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'tag_id' }
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'trip_id' }
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<
+  CreateTripTagMutation,
+  CreateTripTagMutationVariables
+>
 export const DeleteTagDocument = {
   __meta__: { hash: 'c661c9a00fdae1dbac69eeb283611e0c9202cf55' },
   kind: 'Document',
@@ -1921,6 +2085,88 @@ export const DeleteTagDocument = {
     }
   ]
 } as unknown as DocumentNode<DeleteTagMutation, DeleteTagMutationVariables>
+export const DeleteTripTagDocument = {
+  __meta__: { hash: '1a4d048db574dedfebd859dc737e16a42021f3ff' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'deleteTripTag' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'deleteFromtrip_tagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'id' },
+                      value: {
+                        kind: 'ObjectValue',
+                        fields: [
+                          {
+                            kind: 'ObjectField',
+                            name: { kind: 'Name', value: 'eq' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'id' }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'records' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<
+  DeleteTripTagMutation,
+  DeleteTripTagMutationVariables
+>
 export const TagsCollectionDocument = {
   __meta__: { hash: '994a2e7e0694c279cbfeff6c8696cbbe6a0c687c' },
   kind: 'Document',
@@ -2405,6 +2651,97 @@ export const TripDetailsDocument = {
     }
   ]
 } as unknown as DocumentNode<TripDetailsQuery, TripDetailsQueryVariables>
+export const TripTagsCollectionDocument = {
+  __meta__: { hash: 'f4142b2a2f4ab96ce0e69488851fdff976486652' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'tripTagsCollection' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'filter' }
+          },
+          type: {
+            kind: 'NamedType',
+            name: { kind: 'Name', value: 'trip_tagsFilter' }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'trip_tagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'filter' }
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'edges' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'node' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: '__typename' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'id' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'trip_id' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'tag_id' }
+                            }
+                          ]
+                        }
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<
+  TripTagsCollectionQuery,
+  TripTagsCollectionQueryVariables
+>
 export const TripsCollectionDocument = {
   __meta__: { hash: '70a61f873c23f1db13cef7cd265a9845e9bfc53e' },
   kind: 'Document',
diff --git a/graphql-codegen/generated/persisted-documents.json b/graphql-codegen/generated/persisted-documents.json
index 5dfda2f..0bb8b8b 100644
--- a/graphql-codegen/generated/persisted-documents.json
+++ b/graphql-codegen/generated/persisted-documents.json
@@ -2,9 +2,12 @@
   "00c528b2b1c851c06119aedb1fba6b5c885713cf": "query getUser($id: UUID!) { __typename usersCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename email id name profile_picture_url } } } }",
   "2d419044f6b09dcfdf15e868fceccda14add69f4": "query activityCollection($id: UUID!) { __typename activityCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename address cost id image_storage_object_id memo time_from time_to title trip_id url } } } }",
   "9ecd6081f83febe06337ebd01345eef596b81cf9": "mutation createTag($name: String!, $userId: UUID!) { __typename insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) { __typename records { __typename id name } } }",
-  "995473133e320e5f7ef165df54d56100c62b3a75": "mutation createTrip($date_from: Date, $date_to: Date, $title: String!, $user_id: UUID!) { __typename insertIntotripsCollection( objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}] ) { __typename records { __typename id title } } }",
+  "aca942ce9802822f0ecd793697b6b6bf16d25152": "mutation createTrip($date_from: Datetime!, $date_to: Datetime, $title: String!, $user_id: UUID!) { __typename insertIntotripsCollection( objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}] ) { __typename records { __typename id title } } }",
+  "b86b0c68b8ee2697ff1b539e5df92575cedb30f0": "mutation createTripTag($tagId: UUID!, $tripId: UUID!) { __typename insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) { __typename records { __typename id tag_id trip_id } } }",
   "c661c9a00fdae1dbac69eeb283611e0c9202cf55": "mutation deleteTag($id: UUID!) { __typename deleteFromtagsCollection(filter: {id: {eq: $id}}) { __typename records { __typename id name } } }",
+  "1a4d048db574dedfebd859dc737e16a42021f3ff": "mutation deleteTripTag($id: UUID!) { __typename deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) { __typename records { __typename id } } }",
   "994a2e7e0694c279cbfeff6c8696cbbe6a0c687c": "query tagsCollection($userId: UUID!) { __typename tagsCollection( filter: {user_id: {eq: $userId}} orderBy: {created_at: AscNullsLast} ) { __typename edges { __typename node { __typename id name } } } }",
   "12df849b2205e5cf49fd291f6cb8582aa49100c3": "query tripDetails($id: UUID!) { __typename tripsCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename activityCollection { __typename edges { __typename node { __typename address id time_from time_to title } } } cost cost_unit date_from date_to id image_storage_object_id invitationsCollection { __typename edges { __typename node { __typename users { __typename id profile_picture_url } } } } title trip_tagsCollection { __typename edges { __typename node { __typename tags { __typename id name } } } } } } } }",
+  "f4142b2a2f4ab96ce0e69488851fdff976486652": "query tripTagsCollection($filter: trip_tagsFilter) { __typename trip_tagsCollection(filter: $filter) { __typename edges { __typename node { __typename id tag_id trip_id } } } }",
   "70a61f873c23f1db13cef7cd265a9845e9bfc53e": "query tripsCollection($after: Cursor, $filter: tripsFilter, $first: Int!, $orderBy: [tripsOrderBy!]) { __typename tripsCollection( filter: $filter first: $first after: $after orderBy: $orderBy ) { __typename edges { __typename node { __typename activityCollection { __typename edges { __typename node { __typename id } } } created_at date_from date_to id id image_storage_object_id invitationsCollection { __typename edges { __typename node { __typename users { __typename id profile_picture_url } } } } title } } pageInfo { __typename endCursor hasNextPage hasPreviousPage startCursor } } }"
 }
diff --git a/package.json b/package.json
index 0dc97a4..1e450e5 100644
--- a/package.json
+++ b/package.json
@@ -24,12 +24,14 @@
     "@emotion/styled": "^11.11.0",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@types/jest": "^29.5.11",
+    "date-fns-tz": "^2.0.0",
     "framer-motion": "^10.16.4",
     "graphql": "^16.8.1",
     "next": "14.0.1",
     "react": "^18",
     "react-calendar": "^4.7.0",
     "react-clock": "^4.6.0",
+    "react-datepicker": "^5.0.0",
     "react-datetime-picker": "^5.6.0",
     "react-dom": "^18",
     "react-dropzone": "^14.2.3",
@@ -60,6 +62,7 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-datepicker": "^4.19.5",
     "@types/react-dom": "^18",
     "@types/react-slick": "^0.23.12",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7111f07..caf40b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ dependencies:
   '@types/jest':
     specifier: ^29.5.11
     version: 29.5.11
+  date-fns-tz:
+    specifier: ^2.0.0
+    version: 2.0.0(date-fns@2.30.0)
   framer-motion:
     specifier: ^10.16.4
     version: 10.16.4(react-dom@18.2.0)(react@18.2.0)
@@ -47,6 +50,9 @@ dependencies:
   react-clock:
     specifier: ^4.6.0
     version: 4.6.0(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0)
+  react-datepicker:
+    specifier: ^5.0.0
+    version: 5.0.0(react-dom@18.2.0)(react@18.2.0)
   react-datetime-picker:
     specifier: ^5.6.0
     version: 5.6.0(@types/react-dom@18.2.14)(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0)
@@ -133,6 +139,9 @@ devDependencies:
   '@types/react':
     specifier: ^18
     version: 18.2.36
+  '@types/react-datepicker':
+    specifier: ^4.19.5
+    version: 4.19.5(react-dom@18.2.0)(react@18.2.0)
   '@types/react-dom':
     specifier: ^18
     version: 18.2.14
@@ -3157,6 +3166,12 @@ packages:
       '@floating-ui/utils': 0.1.6
     dev: true
 
+  /@floating-ui/core@1.6.0:
+    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
+    dependencies:
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
   /@floating-ui/dom@1.5.3:
     resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
     dependencies:
@@ -3164,6 +3179,13 @@ packages:
       '@floating-ui/utils': 0.1.6
     dev: true
 
+  /@floating-ui/dom@1.6.0:
+    resolution: {integrity: sha512-SZ0BEXzsaaS6THZfZJUcAobbZTD+MvfGM42bxgeg0Tnkp4/an/avqwAXiVLsFtIBZtfsx3Ymvwx0+KnnhdA/9g==}
+    dependencies:
+      '@floating-ui/core': 1.6.0
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
   /@floating-ui/react-dom@2.0.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==}
     peerDependencies:
@@ -3175,10 +3197,38 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
+  /@floating-ui/react-dom@2.0.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-B5GJxKUyPcGsvE1vua+Abvw0t6zVMyTbtG+Jk7BoI4hfc5Ahv50dstRIAn0nS0274kR9gnKwxIXyGA8EzBZJrA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 1.6.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@floating-ui/react@0.26.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-0uMI9IBJBPPt8N+8uRg4gazJvQReWTu/fVUHHLfAOuy1WB6f242jtjWm52hLJG8nzuZVuU+2crW4lJbJQoqeIA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/react-dom': 2.0.7(react-dom@18.2.0)(react@18.2.0)
+      '@floating-ui/utils': 0.2.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tabbable: 6.2.0
+    dev: false
+
   /@floating-ui/utils@0.1.6:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: true
 
+  /@floating-ui/utils@0.2.1:
+    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+    dev: false
+
   /@graphql-codegen/add@5.0.0(graphql@16.8.1):
     resolution: {integrity: sha512-ynWDOsK2yxtFHwcJTB9shoSkUd7YXd6ZE57f0nk7W5cu/nAgxZZpEsnTPEpZB/Mjf14YRGe2uJHQ7AfElHjqUQ==}
     peerDependencies:
@@ -7180,6 +7230,18 @@ packages:
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
     dev: true
 
+  /@types/react-datepicker@4.19.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-tKpuj19p9T4sBQm3Bw13CPuhalo4CFOe/LcSUGJ5z6DmHoiBX3uq33iMKePeSEq7OxyU8O1rh5emAm92nyXZLg==}
+    dependencies:
+      '@popperjs/core': 2.11.8
+      '@types/react': 18.2.36
+      date-fns: 2.30.0
+      react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0)
+    transitivePeerDependencies:
+      - react
+      - react-dom
+    dev: true
+
   /@types/react-dom@18.2.14:
     resolution: {integrity: sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==}
     dependencies:
@@ -9725,6 +9787,20 @@ packages:
     resolution: {integrity: sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==}
     dev: true
 
+  /date-fns-tz@2.0.0(date-fns@2.30.0):
+    resolution: {integrity: sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==}
+    peerDependencies:
+      date-fns: '>=2.0.0'
+    dependencies:
+      date-fns: 2.30.0
+    dev: false
+
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.23.2
+
   /debounce@1.2.1:
     resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
     dev: true
@@ -15083,6 +15159,21 @@ packages:
       - '@types/react-dom'
     dev: false
 
+  /react-datepicker@5.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-AYpBCzinlE0fpltMtjjcpkiIyZVI3o9rbrhaMuf7oZcFp4LyRW2veCwORVFdcj4ProqnKTwNJBrTtauyanjMwg==}
+    peerDependencies:
+      react: ^16.9.0 || ^17 || ^18
+      react-dom: ^16.9.0 || ^17 || ^18
+    dependencies:
+      '@floating-ui/react': 0.26.7(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.5.1
+      date-fns: 2.30.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-onclickoutside: 6.13.0(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
   /react-datetime-picker@5.6.0(@types/react-dom@18.2.14)(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-zbYSuYuiRj4/6lR9xGjAgw7V4gpTGtzOwZIfw1TONj6K6OKuaDreczS+6ijJjwLYlMcx8V+Sw1IMP+K059wnnA==}
     peerDependencies:
@@ -15249,6 +15340,30 @@ packages:
   /react-is@18.1.0:
     resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
 
+  /react-onclickoutside@6.13.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==}
+    peerDependencies:
+      react: ^15.5.x || ^16.x || ^17.x || ^18.x
+      react-dom: ^15.5.x || ^16.x || ^17.x || ^18.x
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
+    peerDependencies:
+      '@popperjs/core': ^2.0.0
+      react: ^16.8.0 || ^17 || ^18
+      react-dom: ^16.8.0 || ^17 || ^18
+    dependencies:
+      '@popperjs/core': 2.11.8
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-fast-compare: 3.2.2
+      warning: 4.0.3
+    dev: true
+
   /react-refresh@0.11.0:
     resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
     engines: {node: '>=0.10.0'}
@@ -16614,6 +16729,10 @@ packages:
     resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==}
     dev: true
 
+  /tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+    dev: false
+
   /tapable@1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
     engines: {node: '>=6'}
@@ -17517,6 +17636,12 @@ packages:
       makeerror: 1.0.12
     dev: true
 
+  /warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: true
+
   /watchpack-chokidar2@2.0.1:
     resolution: {integrity: sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==}
     requiresBuild: true

From 7f8142f6185fe8d5a1f6be4033603327a821fe25 Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Mon, 29 Jan 2024 23:05:48 -0800
Subject: [PATCH 07/13] Create trip update mutation and custom hooks

---
 app/trip/[id]/edit/page.tsx                   |   3 -
 app/trip/components/tag-form-modal.tsx        |  83 ++--------
 app/trip/components/trip-form.tsx             | 149 +++++-------------
 app/trip/graphql/mutation/updateTrip.graphql  |   8 +
 app/trip/hooks/index.ts                       |   3 +
 app/trip/hooks/useTagCreateDelete.ts          |  88 +++++++++++
 app/trip/hooks/useTripTagCreateDelete.ts      |  64 ++++++++
 app/trip/hooks/useTripUpdate.ts               |  89 +++++++++++
 graphql-codegen/codegen.ts                    |   4 +-
 graphql-codegen/generated/api.ts              |  77 ++++++++-
 graphql-codegen/generated/gql.ts              |   8 +
 graphql-codegen/generated/graphql.ts          | 120 +++++++++++++-
 .../generated/persisted-documents.json        |   1 +
 13 files changed, 499 insertions(+), 198 deletions(-)
 create mode 100644 app/trip/graphql/mutation/updateTrip.graphql
 create mode 100644 app/trip/hooks/index.ts
 create mode 100644 app/trip/hooks/useTagCreateDelete.ts
 create mode 100644 app/trip/hooks/useTripTagCreateDelete.ts
 create mode 100644 app/trip/hooks/useTripUpdate.ts

diff --git a/app/trip/[id]/edit/page.tsx b/app/trip/[id]/edit/page.tsx
index 2c40bfb..ba6af6f 100644
--- a/app/trip/[id]/edit/page.tsx
+++ b/app/trip/[id]/edit/page.tsx
@@ -79,9 +79,6 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
   if ((!tripData && !tripLoading) || (!tagsData && !tagsLoading))
     throw new Error('No trip data found')
 
-  console.log('tripDataCollection', tripDataCollection)
-  console.log('tagsData', tagsData)
-
   return (
     <>
       <Header />
diff --git a/app/trip/components/tag-form-modal.tsx b/app/trip/components/tag-form-modal.tsx
index 6e0bd5d..ef4f307 100644
--- a/app/trip/components/tag-form-modal.tsx
+++ b/app/trip/components/tag-form-modal.tsx
@@ -1,5 +1,3 @@
-import { KeyboardEvent } from 'react'
-import { useForm } from 'react-hook-form'
 import {
   Modal,
   ModalOverlay,
@@ -13,15 +11,12 @@ import {
   Tag,
   useColorModeValue,
   Box,
-  Heading,
-  useToast
+  Heading
 } from '@chakra-ui/react'
 import { FiPlusCircle, FiX } from 'react-icons/fi'
 import { InputIconButton } from '@/components/input'
 import { Loading } from '@/components/loading'
-import { useUserId } from '@/providers/session-provider'
-import { TagSchema, tagSchemaResolver } from '../schema'
-import { useCreateTagMutation, useDeleteTagMutation } from '@generated/api'
+import { useTagCreateDelete } from '../hooks'
 
 type TagFormModalProps = {
   isOpen: boolean
@@ -37,74 +32,16 @@ export const TagFormModal = ({
   tagsCollectionRefetch
 }: TagFormModalProps) => {
   const tagBgColor = useColorModeValue('primary.700', 'primary.800')
-  const userId = useUserId()
-  const toast = useToast()
 
   const {
+    addEnterHandler,
+    addTag,
+    deleteTag,
+    isCreating,
+    isDeleting,
     register,
-    handleSubmit,
-    reset,
-    formState: { errors }
-  } = useForm<TagSchema>({
-    resolver: tagSchemaResolver
-  })
-
-  const [createTagMutation, { loading: isCreating }] = useCreateTagMutation()
-  const [deleteTagMutation, { loading: isDeleting }] = useDeleteTagMutation()
-
-  const addTag = async (input: TagSchema) => {
-    try {
-      
-      await createTagMutation({
-        variables: {
-          name: input.name,
-          userId: userId
-        }
-      })
-      reset()
-      tagsCollectionRefetch()
-    } catch (error) {
-      console.error(error)
-      toast({
-        title: "We're sorry, but you failed to create a tag",
-        description:
-          error instanceof Error ? error.message : 'Please try again later.',
-        status: 'error',
-        duration: 5000,
-        isClosable: true,
-        position: 'top'
-      })
-    }
-  }
-
-  const addEnterHandler = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      handleSubmit(addTag)()
-    }
-  }
-
-  const deleteTag = async (id: string) => {
-    try {
-      await deleteTagMutation({
-        variables: {
-          id: id
-        }
-      })
-      tagsCollectionRefetch()
-    } catch (error) {
-      console.error(error)
-      toast({
-        title: "We're sorry, but you failed to delete a tag",
-        description:
-          error instanceof Error ? error.message : 'Please try again later.',
-        status: 'error',
-        duration: 5000,
-        isClosable: true,
-        position: 'top'
-      })
-    }
-  }
+    errors
+  } = useTagCreateDelete(tagsCollectionRefetch)
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered>
@@ -163,7 +100,7 @@ export const TagFormModal = ({
                     icon={FiPlusCircle}
                     isDisabled={isCreating}
                     onKeyDown={(e) => addEnterHandler(e)}
-                    onClick={handleSubmit((d) => addTag(d))}
+                    onClick={addTag}
                     {...register('name')}
                   />
                   <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
diff --git a/app/trip/components/trip-form.tsx b/app/trip/components/trip-form.tsx
index b101fd0..6da5e2d 100644
--- a/app/trip/components/trip-form.tsx
+++ b/app/trip/components/trip-form.tsx
@@ -1,4 +1,3 @@
-import { useForm, Controller } from 'react-hook-form'
 import {
   FormControl,
   FormLabel,
@@ -11,43 +10,44 @@ import {
   Flex,
   Checkbox,
   Box,
-  useDisclosure,
-  useToast
+  useDisclosure
 } from '@chakra-ui/react'
 import { PrimaryButton, SecondaryButton } from '@/components/button'
 import { CustomDatePicker } from '@/components/date'
 import { InputForm } from '@/components/input'
 import { Loading } from '@/components/loading'
-import { getDateObj, formatToISODate } from '@/libs/utils'
+
 import { TagFormModal } from '../components'
-import { tripSchemaResolver, TripSchema } from '../schema'
-import {
-  useCreateTripTagMutation,
-  useDeleteTripTagMutation
-} from '@generated/api'
+import { useTripUpdate, useTripTagCreateDelete } from '../hooks'
+
+export type TripDetailsArgs = {
+  id: string
+  image: string | null | undefined
+  title: string
+  dateFrom: string
+  dateTo: string | null | undefined
+  cost: string | null | undefined
+  costUnit: string | null | undefined
+  refetch: () => void
+  refetchLoading: boolean
+}
+
+export type TagsArgs = {
+  data: { id: string; name: string }[]
+  refetch: () => void
+  refetchLoading: boolean
+}
+
+export type TripTagsArgs = {
+  data: { id: string; tag_id: string; trip_id: string }[]
+  refetch: () => void
+  refetchLoading: boolean
+}
 
 type TripFormProps = {
-  tripDetails: {
-    id: string
-    image: string | null | undefined
-    title: string
-    dateFrom: string
-    dateTo: string | null | undefined
-    cost: number | null | undefined
-    costUnit: string | null | undefined
-    refetch: () => void
-    refetchLoading: boolean
-  }
-  tags: {
-    data: { id: string; name: string }[]
-    refetch: () => void
-    refetchLoading: boolean
-  }
-  tripTags: {
-    data: { id: string; tag_id: string; trip_id: string }[]
-    refetch: () => void
-    refetchLoading: boolean
-  }
+  tripDetails: TripDetailsArgs
+  tags: TagsArgs
+  tripTags: TripTagsArgs
 }
 
 export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
@@ -56,92 +56,16 @@ export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
     '/images/no_image_dark.jpg'
   )
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const toast = useToast()
-
-  console.log('tripTagsData', tripTags.data)
-
-  const [createTripTagMutation, { loading: isTripTagCreating }] =
-    useCreateTripTagMutation()
-  const [deleteTripTagMutation, { loading: isTripTagDeleting }] =
-    useDeleteTripTagMutation()
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors }
-  } = useForm<TripSchema>({
-    defaultValues: {
-      title: tripDetails.title,
-      date_from: getDateObj(tripDetails.dateFrom),
-      date_to: tripDetails.dateTo ? getDateObj(tripDetails.dateTo) : null,
-      image_storage_object_id: tripDetails.image,
-      cost: tripDetails.cost ? tripDetails.cost.toString() : '',
-      cost_unit: tripDetails.costUnit
-    },
-    resolver: tripSchemaResolver
-  })
-
-  console.log('errors', errors)
-
-  const tagClickHandler = async (selectedTagId: string) => {
-    try {
-      const isTagIdAlreadyExists = tripTags.data.find(
-        (tripTag) => tripTag.tag_id === selectedTagId
-      )
-
-      if (isTagIdAlreadyExists) {
-        await deleteTripTagMutation({
-          variables: {
-            id: isTagIdAlreadyExists.id
-          }
-        })
-        tripTags.refetch()
-        return
-      }
-
-      if (!isTagIdAlreadyExists) {
-        await createTripTagMutation({
-          variables: {
-            tripId: tripDetails.id,
-            tagId: selectedTagId
-          }
-        })
-        tripTags.refetch()
-      }
-    } catch (error) {
-      console.error(error)
-      toast({
-        title: "We're sorry, but you failed to update a tag",
-        description:
-          error instanceof Error ? error.message : 'Please try again later.',
-        status: 'error',
-        duration: 5000,
-        isClosable: true,
-        position: 'top'
-      })
-    }
-  }
 
-  const updateTrip = async (data: TripSchema) => {
-    console.log('submit!', {
-      tripId: tripDetails.id,
-      data
-    })
+  const { onMutate, isTripUpdating, register, control, errors, Controller } =
+    useTripUpdate(tripDetails)
 
-    if (data.date_to) {
-      const dateTo = formatToISODate(data.date_to)
-      console.log('dateTo', dateTo)
-    }
-  }
+  const { tagClickHandler, isTripTagCreating, isTripTagDeleting } =
+    useTripTagCreateDelete(tripTags, tripDetails.id)
 
   return (
     <>
-      <VStack
-        as="form"
-        gap={{ base: '30px', md: '40px' }}
-        onSubmit={handleSubmit(updateTrip)}
-      >
+      <VStack as="form" gap={{ base: '30px', md: '40px' }} onSubmit={onMutate}>
         <FormControl isInvalid={!!errors.title}>
           <FormLabel>Title</FormLabel>
           <InputForm
@@ -187,6 +111,7 @@ export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
           <FormErrorMessage>{errors?.date_to?.message}</FormErrorMessage>
         </FormControl>
 
+        {/* TODO Image Upload to storage & Send the URL string to DB */}
         <FormControl isInvalid={!!errors.image_storage_object_id}>
           <FormLabel>Image</FormLabel>
           <HStack gap={{ base: '20px', md: '34px' }}>
@@ -253,7 +178,7 @@ export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
           </FormControl>
         </Flex>
 
-        <PrimaryButton size="lg" type="submit">
+        <PrimaryButton size="lg" type="submit" isDisabled={isTripUpdating}>
           Save Trip
         </PrimaryButton>
       </VStack>
diff --git a/app/trip/graphql/mutation/updateTrip.graphql b/app/trip/graphql/mutation/updateTrip.graphql
new file mode 100644
index 0000000..eae35f7
--- /dev/null
+++ b/app/trip/graphql/mutation/updateTrip.graphql
@@ -0,0 +1,8 @@
+mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {
+  updatetripsCollection(set: $set, filter: { id: { eq: $id } }) {
+    records {
+      id
+      title
+    }
+  }
+}
diff --git a/app/trip/hooks/index.ts b/app/trip/hooks/index.ts
new file mode 100644
index 0000000..0f5807e
--- /dev/null
+++ b/app/trip/hooks/index.ts
@@ -0,0 +1,3 @@
+export { useTagCreateDelete } from './useTagCreateDelete'
+export { useTripTagCreateDelete } from './useTripTagCreateDelete'
+export { useTripUpdate } from './useTripUpdate'
diff --git a/app/trip/hooks/useTagCreateDelete.ts b/app/trip/hooks/useTagCreateDelete.ts
new file mode 100644
index 0000000..d58bdce
--- /dev/null
+++ b/app/trip/hooks/useTagCreateDelete.ts
@@ -0,0 +1,88 @@
+import { KeyboardEvent } from 'react'
+import { useForm } from 'react-hook-form'
+import { useToast } from '@chakra-ui/react'
+import { useUserId } from '@/providers/session-provider'
+import { TagSchema, tagSchemaResolver } from '../schema'
+import { useCreateTagMutation, useDeleteTagMutation } from '@generated/api'
+
+export const useTagCreateDelete = (tagsCollectionRefetch: () => void) => {
+  const userId = useUserId()
+  const toast = useToast()
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors }
+  } = useForm<TagSchema>({
+    resolver: tagSchemaResolver
+  })
+
+  const [createTagMutation, { loading: isCreating }] = useCreateTagMutation()
+  const [deleteTagMutation, { loading: isDeleting }] = useDeleteTagMutation()
+
+  const addTag = async (input: TagSchema) => {
+    try {
+      await createTagMutation({
+        variables: {
+          name: input.name,
+          userId: userId
+        }
+      })
+
+      reset()
+      tagsCollectionRefetch()
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: "We're sorry, but you failed to create a tag",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  const addEnterHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSubmit(addTag)()
+    }
+  }
+
+  const deleteTag = async (id: string) => {
+    try {
+      await deleteTagMutation({
+        variables: {
+          id: id
+        }
+      })
+      
+      tagsCollectionRefetch()
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: "We're sorry, but you failed to delete a tag",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  return {
+    addEnterHandler,
+    addTag: handleSubmit((d) => addTag(d)),
+    deleteTag,
+    isCreating,
+    isDeleting,
+    register,
+    errors
+  }
+}
diff --git a/app/trip/hooks/useTripTagCreateDelete.ts b/app/trip/hooks/useTripTagCreateDelete.ts
new file mode 100644
index 0000000..1362990
--- /dev/null
+++ b/app/trip/hooks/useTripTagCreateDelete.ts
@@ -0,0 +1,64 @@
+import { useToast } from '@chakra-ui/react'
+import { TripTagsArgs } from '../components/trip-form'
+import {
+  useCreateTripTagMutation,
+  useDeleteTripTagMutation
+} from '@generated/api'
+
+export const useTripTagCreateDelete = (
+  tripTags: TripTagsArgs,
+  tripId: string
+) => {
+  const toast = useToast()
+  const [createTripTagMutation, { loading: isTripTagCreating }] =
+    useCreateTripTagMutation()
+  const [deleteTripTagMutation, { loading: isTripTagDeleting }] =
+    useDeleteTripTagMutation()
+
+  const tagClickHandler = async (selectedTagId: string) => {
+    try {
+      const isTagIdAlreadyExists = tripTags.data.find(
+        (tripTag) => tripTag.tag_id === selectedTagId
+      )
+
+      if (isTagIdAlreadyExists) {
+        await deleteTripTagMutation({
+          variables: {
+            id: isTagIdAlreadyExists.id
+          }
+        })
+        tripTags.refetch()
+        return
+      }
+
+      if (!isTagIdAlreadyExists) {
+        await createTripTagMutation({
+          variables: {
+            tripId: tripId,
+            tagId: selectedTagId
+          }
+        })
+        tripTags.refetch()
+      }
+    } catch (error) {
+      console.error(error)
+      window.scroll({ top: 0 })
+
+      toast({
+        title: "We're sorry, but you failed to update a tag",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  return {
+    tagClickHandler,
+    isTripTagCreating,
+    isTripTagDeleting
+  }
+}
diff --git a/app/trip/hooks/useTripUpdate.ts b/app/trip/hooks/useTripUpdate.ts
new file mode 100644
index 0000000..693b54f
--- /dev/null
+++ b/app/trip/hooks/useTripUpdate.ts
@@ -0,0 +1,89 @@
+import { useForm, Controller } from 'react-hook-form'
+import { useToast } from '@chakra-ui/react'
+import { formatToISODate, getDateObj } from '@/libs/utils'
+import { TripDetailsArgs } from '../components/trip-form'
+import { TripSchema, tripSchemaResolver } from '../schema'
+import { useUpdateTripMutation } from '@generated/api'
+
+export const useTripUpdate = (tripDetails?: TripDetailsArgs) => {
+  const toast = useToast()
+  const [updateTripMutation, { loading: isTripUpdating }] =
+    useUpdateTripMutation()
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors }
+  } = useForm<TripSchema>({
+    defaultValues: {
+      title: tripDetails?.title,
+      date_from: tripDetails?.dateFrom
+        ? getDateObj(tripDetails.dateFrom)
+        : undefined,
+      date_to: tripDetails?.dateTo ? getDateObj(tripDetails.dateTo) : null,
+      image_storage_object_id: tripDetails?.image,
+      cost: tripDetails?.cost ? tripDetails.cost.toString() : '',
+      cost_unit: tripDetails?.costUnit
+    },
+    resolver: tripSchemaResolver
+  })
+
+  const mutationTrip = async (data: TripSchema) => {
+    const type = tripDetails ? 'update' : 'create'
+
+    try {
+      if (tripDetails) {
+        await updateTripMutation({
+          variables: {
+            id: tripDetails.id,
+            set: {
+              title: data.title,
+              date_from: formatToISODate(data.date_from),
+              date_to: data.date_to ? formatToISODate(data.date_to) : null,
+              image_storage_object_id: data.image_storage_object_id,
+              cost: data.cost ? data.cost : null,
+              cost_unit: data.cost_unit
+            }
+          }
+        })
+        tripDetails.refetch()
+      }
+
+      if (!tripDetails) {
+        console.log('create!')
+      }
+
+      window.scroll({ top: 0 })
+      toast({
+        title: `Successfully ${type}d!`,
+        status: 'success',
+        duration: 2000,
+        isClosable: true,
+        position: 'top'
+      })
+    } catch (error) {
+      console.error(error)
+      window.scroll({ top: 0 })
+
+      toast({
+        title: `We're sorry, but you failed to ${type} a trip`,
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  return {
+    onMutate: handleSubmit(mutationTrip),
+    isTripUpdating,
+    register,
+    control,
+    errors,
+    Controller
+  }
+}
diff --git a/graphql-codegen/codegen.ts b/graphql-codegen/codegen.ts
index eac0db0..327bbea 100644
--- a/graphql-codegen/codegen.ts
+++ b/graphql-codegen/codegen.ts
@@ -50,8 +50,8 @@ const config: CodegenConfig = {
       Time: 'string',
       Datetime: 'string',
       JSON: 'string',
-      BigInt: 'number',
-      BigFloat: 'number',
+      BigInt: 'string',
+      BigFloat: 'string',
       Opaque: 'any'
     }
   },
diff --git a/graphql-codegen/generated/api.ts b/graphql-codegen/generated/api.ts
index f38161a..49afcdf 100644
--- a/graphql-codegen/generated/api.ts
+++ b/graphql-codegen/generated/api.ts
@@ -28,8 +28,8 @@ export type Scalars = {
   Boolean: { input: boolean; output: boolean }
   Int: { input: number; output: number }
   Float: { input: number; output: number }
-  BigFloat: { input: number; output: number }
-  BigInt: { input: number; output: number }
+  BigFloat: { input: string; output: string }
+  BigInt: { input: string; output: string }
   Cursor: { input: any; output: any }
   Date: { input: string; output: string }
   Datetime: { input: string; output: string }
@@ -1183,7 +1183,7 @@ export type ActivityCollectionQuery = {
         address?: string | null
         url?: string | null
         memo?: string | null
-        cost?: number | null
+        cost?: string | null
         image_storage_object_id?: string | null
       }
     }>
@@ -1260,6 +1260,19 @@ export type DeleteTripTagMutation = {
   }
 }
 
+export type UpdateTripMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+  set: TripsUpdateInput
+}>
+
+export type UpdateTripMutation = {
+  __typename: 'Mutation'
+  updatetripsCollection: {
+    __typename: 'tripsUpdateResponse'
+    records: Array<{ __typename: 'trips'; id: string; title: string }>
+  }
+}
+
 export type TagsCollectionQueryVariables = Exact<{
   userId: Scalars['UUID']['input']
 }>
@@ -1292,7 +1305,7 @@ export type TripDetailsQuery = {
         date_from: string
         date_to?: string | null
         image_storage_object_id?: string | null
-        cost?: number | null
+        cost?: string | null
         cost_unit?: string | null
         invitationsCollection?: {
           __typename: 'invitationsConnection'
@@ -1881,6 +1894,62 @@ export type DeleteTripTagMutationOptions = Apollo.BaseMutationOptions<
   DeleteTripTagMutation,
   DeleteTripTagMutationVariables
 >
+export const UpdateTripDocument = gql`
+  mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {
+    __typename
+    updatetripsCollection(set: $set, filter: { id: { eq: $id } }) {
+      __typename
+      records {
+        __typename
+        id
+        title
+      }
+    }
+  }
+`
+export type UpdateTripMutationFn = Apollo.MutationFunction<
+  UpdateTripMutation,
+  UpdateTripMutationVariables
+>
+
+/**
+ * __useUpdateTripMutation__
+ *
+ * To run a mutation, you first call `useUpdateTripMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateTripMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateTripMutation, { data, loading, error }] = useUpdateTripMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *      set: // value for 'set'
+ *   },
+ * });
+ */
+export function useUpdateTripMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    UpdateTripMutation,
+    UpdateTripMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<UpdateTripMutation, UpdateTripMutationVariables>(
+    UpdateTripDocument,
+    options
+  )
+}
+export type UpdateTripMutationHookResult = ReturnType<
+  typeof useUpdateTripMutation
+>
+export type UpdateTripMutationResult = Apollo.MutationResult<UpdateTripMutation>
+export type UpdateTripMutationOptions = Apollo.BaseMutationOptions<
+  UpdateTripMutation,
+  UpdateTripMutationVariables
+>
 export const TagsCollectionDocument = gql`
   query tagsCollection($userId: UUID!) {
     __typename
diff --git a/graphql-codegen/generated/gql.ts b/graphql-codegen/generated/gql.ts
index 36f3aff..84d3588 100644
--- a/graphql-codegen/generated/gql.ts
+++ b/graphql-codegen/generated/gql.ts
@@ -27,6 +27,8 @@ const documents = {
     types.DeleteTagDocument,
   'mutation deleteTripTag($id: UUID!) {\n  deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n    }\n  }\n}':
     types.DeleteTripTagDocument,
+  'mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {\n  updatetripsCollection(set: $set, filter: {id: {eq: $id}}) {\n    records {\n      id\n      title\n    }\n  }\n}':
+    types.UpdateTripDocument,
   'query tagsCollection($userId: UUID!) {\n  tagsCollection(\n    filter: {user_id: {eq: $userId}}\n    orderBy: {created_at: AscNullsLast}\n  ) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}':
     types.TagsCollectionDocument,
   'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}':
@@ -93,6 +95,12 @@ export function graphql(
 export function graphql(
   source: 'mutation deleteTripTag($id: UUID!) {\n  deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n    }\n  }\n}'
 ): (typeof documents)['mutation deleteTripTag($id: UUID!) {\n  deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {\n  updatetripsCollection(set: $set, filter: {id: {eq: $id}}) {\n    records {\n      id\n      title\n    }\n  }\n}'
+): (typeof documents)['mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {\n  updatetripsCollection(set: $set, filter: {id: {eq: $id}}) {\n    records {\n      id\n      title\n    }\n  }\n}']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/graphql-codegen/generated/graphql.ts b/graphql-codegen/generated/graphql.ts
index b5f50ce..1e211a0 100644
--- a/graphql-codegen/generated/graphql.ts
+++ b/graphql-codegen/generated/graphql.ts
@@ -28,9 +28,9 @@ export type Scalars = {
   Int: { input: number; output: number }
   Float: { input: number; output: number }
   /** A high precision floating point value represented as a string */
-  BigFloat: { input: number; output: number }
+  BigFloat: { input: string; output: string }
   /** An arbitrary size integer represented as a string */
-  BigInt: { input: number; output: number }
+  BigInt: { input: string; output: string }
   /** An opaque string using for tracking a position in results during pagination */
   Cursor: { input: any; output: any }
   /** A date wihout time information */
@@ -1191,7 +1191,7 @@ export type ActivityCollectionQuery = {
         address?: string | null
         url?: string | null
         memo?: string | null
-        cost?: number | null
+        cost?: string | null
         image_storage_object_id?: string | null
       }
     }>
@@ -1268,6 +1268,19 @@ export type DeleteTripTagMutation = {
   }
 }
 
+export type UpdateTripMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+  set: TripsUpdateInput
+}>
+
+export type UpdateTripMutation = {
+  __typename: 'Mutation'
+  updatetripsCollection: {
+    __typename: 'tripsUpdateResponse'
+    records: Array<{ __typename: 'trips'; id: string; title: string }>
+  }
+}
+
 export type TagsCollectionQueryVariables = Exact<{
   userId: Scalars['UUID']['input']
 }>
@@ -1300,7 +1313,7 @@ export type TripDetailsQuery = {
         date_from: string
         date_to?: string | null
         image_storage_object_id?: string | null
-        cost?: number | null
+        cost?: string | null
         cost_unit?: string | null
         invitationsCollection?: {
           __typename: 'invitationsConnection'
@@ -2167,6 +2180,105 @@ export const DeleteTripTagDocument = {
   DeleteTripTagMutation,
   DeleteTripTagMutationVariables
 >
+export const UpdateTripDocument = {
+  __meta__: { hash: '7b9783d44e5c70098239e977664434de3eae6204' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'updateTrip' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'set' } },
+          type: {
+            kind: 'NonNullType',
+            type: {
+              kind: 'NamedType',
+              name: { kind: 'Name', value: 'tripsUpdateInput' }
+            }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'updatetripsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'set' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'set' }
+                }
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'id' },
+                      value: {
+                        kind: 'ObjectValue',
+                        fields: [
+                          {
+                            kind: 'ObjectField',
+                            name: { kind: 'Name', value: 'eq' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'id' }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'records' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'title' } }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<UpdateTripMutation, UpdateTripMutationVariables>
 export const TagsCollectionDocument = {
   __meta__: { hash: '994a2e7e0694c279cbfeff6c8696cbbe6a0c687c' },
   kind: 'Document',
diff --git a/graphql-codegen/generated/persisted-documents.json b/graphql-codegen/generated/persisted-documents.json
index 0bb8b8b..c2c0cab 100644
--- a/graphql-codegen/generated/persisted-documents.json
+++ b/graphql-codegen/generated/persisted-documents.json
@@ -6,6 +6,7 @@
   "b86b0c68b8ee2697ff1b539e5df92575cedb30f0": "mutation createTripTag($tagId: UUID!, $tripId: UUID!) { __typename insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) { __typename records { __typename id tag_id trip_id } } }",
   "c661c9a00fdae1dbac69eeb283611e0c9202cf55": "mutation deleteTag($id: UUID!) { __typename deleteFromtagsCollection(filter: {id: {eq: $id}}) { __typename records { __typename id name } } }",
   "1a4d048db574dedfebd859dc737e16a42021f3ff": "mutation deleteTripTag($id: UUID!) { __typename deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) { __typename records { __typename id } } }",
+  "7b9783d44e5c70098239e977664434de3eae6204": "mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) { __typename updatetripsCollection(set: $set, filter: {id: {eq: $id}}) { __typename records { __typename id title } } }",
   "994a2e7e0694c279cbfeff6c8696cbbe6a0c687c": "query tagsCollection($userId: UUID!) { __typename tagsCollection( filter: {user_id: {eq: $userId}} orderBy: {created_at: AscNullsLast} ) { __typename edges { __typename node { __typename id name } } } }",
   "12df849b2205e5cf49fd291f6cb8582aa49100c3": "query tripDetails($id: UUID!) { __typename tripsCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename activityCollection { __typename edges { __typename node { __typename address id time_from time_to title } } } cost cost_unit date_from date_to id image_storage_object_id invitationsCollection { __typename edges { __typename node { __typename users { __typename id profile_picture_url } } } } title trip_tagsCollection { __typename edges { __typename node { __typename tags { __typename id name } } } } } } } }",
   "f4142b2a2f4ab96ce0e69488851fdff976486652": "query tripTagsCollection($filter: trip_tagsFilter) { __typename trip_tagsCollection(filter: $filter) { __typename edges { __typename node { __typename id tag_id trip_id } } } }",

From 6d3dda1864adaea968fea8d7ee67241168599dbb Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Tue, 30 Jan 2024 14:49:51 -0800
Subject: [PATCH 08/13] Add create trip form

---
 .../dateTimePickerWrapper.tsx                 |   3 +-
 .../stories/custom-date-picker.stories.tsx    |  20 +++
 app/trip/[id]/edit/page.tsx                   |  58 +++++----
 app/trip/components/trip-form.tsx             | 116 +++++++++++------
 app/trip/create/page.tsx                      |  35 ++++-
 app/trip/graphql/mutation/createTrip.graphql  |  18 +--
 app/trip/hooks/index.ts                       |   1 +
 app/trip/hooks/useTripCreate.ts               |  80 ++++++++++++
 app/trip/hooks/useTripTagCreateDelete.ts      |  10 +-
 app/trip/hooks/useTripUpdate.ts               | 120 ++++++++++--------
 app/trip/schema.ts                            |   8 +-
 graphql-codegen/generated/api.ts              |  28 +---
 graphql-codegen/generated/gql.ts              |   6 +-
 graphql-codegen/generated/graphql.ts          |  78 +-----------
 .../generated/persisted-documents.json        |   2 +-
 15 files changed, 344 insertions(+), 239 deletions(-)
 create mode 100644 app/components/date/stories/custom-date-picker.stories.tsx
 create mode 100644 app/trip/hooks/useTripCreate.ts

diff --git a/app/components/customDateTimePicker/dateTimePickerWrapper.tsx b/app/components/customDateTimePicker/dateTimePickerWrapper.tsx
index 689a9fd..1e87eaa 100644
--- a/app/components/customDateTimePicker/dateTimePickerWrapper.tsx
+++ b/app/components/customDateTimePicker/dateTimePickerWrapper.tsx
@@ -8,6 +8,7 @@ import 'react-calendar/dist/Calendar.css'
 type ValuePiece = Date | null
 type Value = ValuePiece | [ValuePiece, ValuePiece]
 
+// TODO Delete this and use react date picker for time as well
 export const CustomDateTimePicker = ({
   onChange,
   value
@@ -20,7 +21,7 @@ export const CustomDateTimePicker = ({
   return (
     <>
       <style>{`
-       
+
         .react-calendar{
           margin-top: 12%;
         }
diff --git a/app/components/date/stories/custom-date-picker.stories.tsx b/app/components/date/stories/custom-date-picker.stories.tsx
new file mode 100644
index 0000000..b5c1ebb
--- /dev/null
+++ b/app/components/date/stories/custom-date-picker.stories.tsx
@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import { Meta } from '@storybook/react'
+import { CustomDatePicker } from '@/components/date'
+
+const meta: Meta<typeof CustomDatePicker> = {
+  title: 'CustomDatePicker',
+  component: CustomDatePicker
+}
+export default meta
+
+export const Default = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date())
+  return (
+    <CustomDatePicker
+      selectedDate={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+      placeholderText="Select Date"
+    />
+  )
+}
diff --git a/app/trip/[id]/edit/page.tsx b/app/trip/[id]/edit/page.tsx
index ba6af6f..3adce59 100644
--- a/app/trip/[id]/edit/page.tsx
+++ b/app/trip/[id]/edit/page.tsx
@@ -18,6 +18,7 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
 
   const userId = useUserId()
 
+  // Trip Details
   const {
     data: tripData,
     loading: tripLoading,
@@ -36,23 +37,10 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
   }
   const tripDetailsRefetchLoading = tripNetWorkStatus === NetworkStatus.refetch
 
-  const {
-    data: tagsData,
-    loading: tagsLoading,
-    refetch: tagsRefetch,
-    networkStatus: tagsNetWorkStatus
-  } = useTagsCollectionQuery({
-    variables: { userId },
-    notifyOnNetworkStatusChange: true
-  })
-
-  const tagsCollectionRefetch = () => {
-    tagsRefetch()
-  }
-  const tagsRefetchLoading = tagsNetWorkStatus === NetworkStatus.refetch
-
+  // Trip Tags
   const {
     data: tripTagsData,
+    loading: tripTagsLoading,
     refetch: tripTagsRefetch,
     networkStatus: tripTagsNetWorkStatus
   } = useTripTagsCollectionQuery({
@@ -64,6 +52,7 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
     notifyOnNetworkStatusChange: true
   })
 
+  // Tags
   const tripsTagsDataArray = tripTagsData?.trip_tagsCollection?.edges.map(
     (tag) => ({
       id: tag.node.id,
@@ -76,7 +65,26 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
   }
   const tripTagsRefetchLoading = tripTagsNetWorkStatus === NetworkStatus.refetch
 
-  if ((!tripData && !tripLoading) || (!tagsData && !tagsLoading))
+  const {
+    data: tagsData,
+    loading: tagsLoading,
+    refetch: tagsRefetch,
+    networkStatus: tagsNetWorkStatus
+  } = useTagsCollectionQuery({
+    variables: { userId },
+    notifyOnNetworkStatusChange: true
+  })
+
+  const tagsCollectionRefetch = () => {
+    tagsRefetch()
+  }
+  const tagsRefetchLoading = tagsNetWorkStatus === NetworkStatus.refetch
+
+  if (
+    (!tripData && !tripLoading) ||
+    (!tripTagsData && !tripTagsLoading) ||
+    (!tagsData && !tagsLoading)
+  )
     throw new Error('No trip data found')
 
   return (
@@ -107,15 +115,6 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
                   refetch: tripDetailsRefetch,
                   refetchLoading: tripDetailsRefetchLoading
                 }}
-                tags={{
-                  data:
-                    tagsData?.tagsCollection?.edges.map((tag) => ({
-                      id: tag.node.id,
-                      name: tag.node.name
-                    })) || [],
-                  refetch: tagsCollectionRefetch,
-                  refetchLoading: tagsRefetchLoading
-                }}
                 tripTags={{
                   data:
                     tripTagsData?.trip_tagsCollection?.edges.map((tripTag) => ({
@@ -126,6 +125,15 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
                   refetch: tripTagsCollectionRefetch,
                   refetchLoading: tripTagsRefetchLoading
                 }}
+                tags={{
+                  data:
+                    tagsData?.tagsCollection?.edges.map((tag) => ({
+                      id: tag.node.id,
+                      name: tag.node.name
+                    })) || [],
+                  refetch: tagsCollectionRefetch,
+                  refetchLoading: tagsRefetchLoading
+                }}
               />
             )}
           </Box>
diff --git a/app/trip/components/trip-form.tsx b/app/trip/components/trip-form.tsx
index 6da5e2d..42c87f3 100644
--- a/app/trip/components/trip-form.tsx
+++ b/app/trip/components/trip-form.tsx
@@ -1,3 +1,4 @@
+import { useForm, Controller } from 'react-hook-form'
 import {
   FormControl,
   FormLabel,
@@ -16,9 +17,10 @@ import { PrimaryButton, SecondaryButton } from '@/components/button'
 import { CustomDatePicker } from '@/components/date'
 import { InputForm } from '@/components/input'
 import { Loading } from '@/components/loading'
-
+import { getDateObj } from '@/libs/utils'
 import { TagFormModal } from '../components'
-import { useTripUpdate, useTripTagCreateDelete } from '../hooks'
+import { useTripCreate, useTripUpdate, useTripTagCreateDelete } from '../hooks'
+import { TripSchema, tripSchemaResolver } from '../schema'
 
 export type TripDetailsArgs = {
   id: string
@@ -32,22 +34,22 @@ export type TripDetailsArgs = {
   refetchLoading: boolean
 }
 
-export type TagsArgs = {
-  data: { id: string; name: string }[]
+export type TripTagsArgs = {
+  data: { id: string; tag_id: string; trip_id: string }[]
   refetch: () => void
   refetchLoading: boolean
 }
 
-export type TripTagsArgs = {
-  data: { id: string; tag_id: string; trip_id: string }[]
+export type TagsArgs = {
+  data: { id: string; name: string }[]
   refetch: () => void
   refetchLoading: boolean
 }
 
 type TripFormProps = {
-  tripDetails: TripDetailsArgs
+  tripDetails?: TripDetailsArgs
+  tripTags?: TripTagsArgs
   tags: TagsArgs
-  tripTags: TripTagsArgs
 }
 
 export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
@@ -57,15 +59,45 @@ export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
   )
   const { isOpen, onOpen, onClose } = useDisclosure()
 
-  const { onMutate, isTripUpdating, register, control, errors, Controller } =
-    useTripUpdate(tripDetails)
+  const { createTrip, isTripCreating } = useTripCreate()
+
+  const { updateTrip, isTripUpdating } = useTripUpdate(tripTags, tripDetails)
 
-  const { tagClickHandler, isTripTagCreating, isTripTagDeleting } =
-    useTripTagCreateDelete(tripTags, tripDetails.id)
+  const { isTripTagCreating, isTripTagDeleting } = useTripTagCreateDelete(
+    String(tripDetails?.id),
+    tripTags
+  )
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors }
+  } = useForm<TripSchema>({
+    defaultValues: {
+      title: tripDetails?.title,
+      date_from: tripDetails?.dateFrom
+        ? getDateObj(tripDetails.dateFrom)
+        : undefined,
+      date_to: tripDetails?.dateTo ? getDateObj(tripDetails.dateTo) : null,
+      image_storage_object_id: tripDetails?.image || null,
+      selectedTags: tripTags ? tripTags.data.map((tag) => tag.tag_id) : [],
+      cost: tripDetails?.cost ? tripDetails.cost.toString() : '',
+      cost_unit: tripDetails?.costUnit
+    },
+    resolver: tripSchemaResolver
+  })
+
+  const mutateFun = tripDetails ? updateTrip : createTrip
+  const isMutating = isTripCreating || isTripUpdating
 
   return (
     <>
-      <VStack as="form" gap={{ base: '30px', md: '40px' }} onSubmit={onMutate}>
+      <VStack
+        as="form"
+        gap={{ base: '30px', md: '40px' }}
+        onSubmit={handleSubmit(mutateFun)}
+      >
         <FormControl isInvalid={!!errors.title}>
           <FormLabel>Title</FormLabel>
           <InputForm
@@ -115,7 +147,7 @@ export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
         <FormControl isInvalid={!!errors.image_storage_object_id}>
           <FormLabel>Image</FormLabel>
           <HStack gap={{ base: '20px', md: '34px' }}>
-            <Image alt="" src={tripDetails.image || imageSrc} width="50%" />
+            <Image alt="" src={tripDetails?.image || imageSrc} width="50%" />
             <PrimaryButton variant="outline">Select Image </PrimaryButton>
           </HStack>
           <FormErrorMessage>
@@ -123,36 +155,46 @@ export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
           </FormErrorMessage>
         </FormControl>
 
-        <Flex justify="start" flexDir="column" width="100%">
+        <FormControl isInvalid={!!errors?.selectedTags}>
           <FormLabel>Tag</FormLabel>
 
-          <CheckboxGroup defaultValue={tripTags.data.map((tag) => tag.tag_id)}>
-            <Flex columnGap={'20px'} rowGap={'10px'} flexWrap={'wrap'}>
-              {tags.refetchLoading ? (
-                <Loading p="4px" size="md" />
-              ) : (
-                <>
-                  {tags.data.map((tag) => (
-                    <Checkbox
-                      key={tag.id}
-                      value={tag.id}
-                      isDisabled={isTripTagCreating || isTripTagDeleting}
-                      onChange={() => tagClickHandler(tag.id)}
-                    >
-                      {tag.name}
-                    </Checkbox>
-                  ))}
-                </>
-              )}
-            </Flex>
-          </CheckboxGroup>
+          <Controller
+            name="selectedTags"
+            control={control}
+            render={({ field: { onChange } }) => (
+              <CheckboxGroup
+                defaultValue={tripTags?.data.map((tag) => tag.tag_id)}
+                onChange={onChange}
+              >
+                <Flex columnGap={'20px'} rowGap={'10px'} flexWrap={'wrap'}>
+                  {tags.refetchLoading ? (
+                    <Loading p="4px" size="md" />
+                  ) : (
+                    <>
+                      {tags.data.map((tag) => (
+                        <Checkbox
+                          key={tag.id}
+                          value={tag.id}
+                          isDisabled={isTripTagCreating || isTripTagDeleting}
+                        >
+                          {tag.name}
+                        </Checkbox>
+                      ))}
+                    </>
+                  )}
+                </Flex>
+              </CheckboxGroup>
+            )}
+          />
+
+          <FormErrorMessage>{errors?.selectedTags?.message}</FormErrorMessage>
 
           <Box mt="20px">
             <SecondaryButton variant={'outline'} size="sm" onClick={onOpen}>
               Manage Tags
             </SecondaryButton>
           </Box>
-        </Flex>
+        </FormControl>
 
         <Flex gap="20px" justify={'start'} width="100%">
           <FormControl w={'180px'} isInvalid={!!errors.cost}>
@@ -178,7 +220,7 @@ export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
           </FormControl>
         </Flex>
 
-        <PrimaryButton size="lg" type="submit" isDisabled={isTripUpdating}>
+        <PrimaryButton size="lg" type="submit" isDisabled={isMutating}>
           Save Trip
         </PrimaryButton>
       </VStack>
diff --git a/app/trip/create/page.tsx b/app/trip/create/page.tsx
index 187c763..da5997d 100644
--- a/app/trip/create/page.tsx
+++ b/app/trip/create/page.tsx
@@ -1,12 +1,35 @@
 'use client'
+
+import { NetworkStatus } from '@apollo/client'
 import { Heading, Box, Container, useColorModeValue } from '@chakra-ui/react'
 import { Header, Footer } from '@/components/navigation'
+import { useUserId } from '@/providers/session-provider'
 import { TripForm } from '../components'
+import { useTagsCollectionQuery } from '@generated/api'
 
 export default function CreateTripPage() {
   const bg = useColorModeValue('white', 'gray.800')
   const color = useColorModeValue('black', 'gray.300')
 
+  const userId = useUserId()
+
+  const {
+    data: tagsData,
+    loading: tagsLoading,
+    refetch: tagsRefetch,
+    networkStatus: tagsNetWorkStatus
+  } = useTagsCollectionQuery({
+    variables: { userId },
+    notifyOnNetworkStatusChange: true
+  })
+
+  const tagsCollectionRefetch = () => {
+    tagsRefetch()
+  }
+  const tagsRefetchLoading = tagsNetWorkStatus === NetworkStatus.refetch
+
+  if (!tagsData && !tagsLoading) throw new Error('No tags data found')
+
   return (
     <>
       <Header />
@@ -20,7 +43,17 @@ export default function CreateTripPage() {
             Create Trip
           </Heading>
           <Box mt="40px">
-            <TripForm />
+            <TripForm
+              tags={{
+                data:
+                  tagsData?.tagsCollection?.edges.map((tag) => ({
+                    id: tag.node.id,
+                    name: tag.node.name
+                  })) || [],
+                refetch: tagsCollectionRefetch,
+                refetchLoading: tagsRefetchLoading
+              }}
+            />
           </Box>
         </Container>
       </Box>
diff --git a/app/trip/graphql/mutation/createTrip.graphql b/app/trip/graphql/mutation/createTrip.graphql
index fafbd7b..dc099a5 100644
--- a/app/trip/graphql/mutation/createTrip.graphql
+++ b/app/trip/graphql/mutation/createTrip.graphql
@@ -1,19 +1,5 @@
-mutation createTrip(
-  $user_id: UUID!
-  $title: String!
-  $date_from: Datetime!
-  $date_to: Datetime
-) {
-  insertIntotripsCollection(
-    objects: [
-      {
-        user_id: $user_id
-        title: $title
-        date_from: $date_from
-        date_to: $date_to
-      }
-    ]
-  ) {
+mutation createTrip($object: tripsInsertInput!) {
+  insertIntotripsCollection(objects: [$object]) {
     records {
       __typename
       id
diff --git a/app/trip/hooks/index.ts b/app/trip/hooks/index.ts
index 0f5807e..8d7cfbd 100644
--- a/app/trip/hooks/index.ts
+++ b/app/trip/hooks/index.ts
@@ -1,3 +1,4 @@
 export { useTagCreateDelete } from './useTagCreateDelete'
+export { useTripCreate } from './useTripCreate'
 export { useTripTagCreateDelete } from './useTripTagCreateDelete'
 export { useTripUpdate } from './useTripUpdate'
diff --git a/app/trip/hooks/useTripCreate.ts b/app/trip/hooks/useTripCreate.ts
new file mode 100644
index 0000000..c5b6fab
--- /dev/null
+++ b/app/trip/hooks/useTripCreate.ts
@@ -0,0 +1,80 @@
+import { useToast } from '@chakra-ui/react'
+import { useRouter } from 'next/navigation'
+import { formatToISODate } from '@/libs/utils'
+import { useUserId } from '@/providers/session-provider'
+import { TripSchema } from '../schema'
+import { useCreateTripMutation, useCreateTripTagMutation } from '@generated/api'
+
+export const useTripCreate = () => {
+  const toast = useToast()
+  const router = useRouter()
+  const userId = useUserId()
+  const [createTripMutation, { loading: isTripCreating }] =
+    useCreateTripMutation()
+
+  const [createTripTagMutation, { loading: isTripTagCreating }] =
+    useCreateTripTagMutation()
+
+  const createTrip = async (data: TripSchema) => {
+    try {
+      const res = await createTripMutation({
+        variables: {
+          object: {
+            title: data.title,
+            date_from: formatToISODate(data.date_from),
+            date_to: data.date_to ? formatToISODate(data.date_to) : null,
+            image_storage_object_id: data.image_storage_object_id,
+            cost: data.cost,
+            cost_unit: data.cost_unit,
+            user_id: userId
+          }
+        }
+      })
+
+      const createdTripId = res.data?.insertIntotripsCollection?.records[0]?.id
+
+      if (!createdTripId) throw new Error('Failed to create a trip')
+
+      const selectedTags = data.selectedTags
+      const createPromises = selectedTags.map((tag) =>
+        createTripTagMutation({
+          variables: {
+            tripId: createdTripId,
+            tagId: tag
+          }
+        })
+      )
+
+      await Promise.all([...createPromises])
+
+      router.push('/')
+
+      toast({
+        title: 'Successfully created!',
+        status: 'success',
+        duration: 2000,
+        isClosable: true,
+        position: 'top'
+      })
+    } catch (error) {
+      console.error(error)
+      window.scroll({ top: 0 })
+
+      toast({
+        title: "We're sorry, but you failed to create a trip",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  return {
+    createTrip,
+    isTripCreating,
+    isTripTagsUpdating: isTripTagCreating
+  }
+}
diff --git a/app/trip/hooks/useTripTagCreateDelete.ts b/app/trip/hooks/useTripTagCreateDelete.ts
index 1362990..a740afe 100644
--- a/app/trip/hooks/useTripTagCreateDelete.ts
+++ b/app/trip/hooks/useTripTagCreateDelete.ts
@@ -6,8 +6,8 @@ import {
 } from '@generated/api'
 
 export const useTripTagCreateDelete = (
-  tripTags: TripTagsArgs,
-  tripId: string
+  tripId: string,
+  tripTags?: TripTagsArgs
 ) => {
   const toast = useToast()
   const [createTripTagMutation, { loading: isTripTagCreating }] =
@@ -17,7 +17,7 @@ export const useTripTagCreateDelete = (
 
   const tagClickHandler = async (selectedTagId: string) => {
     try {
-      const isTagIdAlreadyExists = tripTags.data.find(
+      const isTagIdAlreadyExists = tripTags?.data.find(
         (tripTag) => tripTag.tag_id === selectedTagId
       )
 
@@ -27,7 +27,7 @@ export const useTripTagCreateDelete = (
             id: isTagIdAlreadyExists.id
           }
         })
-        tripTags.refetch()
+        tripTags?.refetch()
         return
       }
 
@@ -38,7 +38,7 @@ export const useTripTagCreateDelete = (
             tagId: selectedTagId
           }
         })
-        tripTags.refetch()
+        tripTags?.refetch()
       }
     } catch (error) {
       console.error(error)
diff --git a/app/trip/hooks/useTripUpdate.ts b/app/trip/hooks/useTripUpdate.ts
index 693b54f..b383cf7 100644
--- a/app/trip/hooks/useTripUpdate.ts
+++ b/app/trip/hooks/useTripUpdate.ts
@@ -1,62 +1,79 @@
-import { useForm, Controller } from 'react-hook-form'
 import { useToast } from '@chakra-ui/react'
-import { formatToISODate, getDateObj } from '@/libs/utils'
-import { TripDetailsArgs } from '../components/trip-form'
-import { TripSchema, tripSchemaResolver } from '../schema'
-import { useUpdateTripMutation } from '@generated/api'
+import { useRouter } from 'next/navigation'
+import { formatToISODate } from '@/libs/utils'
+import { TripDetailsArgs, TripTagsArgs } from '../components/trip-form'
+import { TripSchema } from '../schema'
+import {
+  useUpdateTripMutation,
+  useCreateTripTagMutation,
+  useDeleteTripTagMutation
+} from '@generated/api'
 
-export const useTripUpdate = (tripDetails?: TripDetailsArgs) => {
+export const useTripUpdate = (
+  tripTags?: TripTagsArgs,
+  tripDetails?: TripDetailsArgs
+) => {
   const toast = useToast()
+  const router = useRouter()
   const [updateTripMutation, { loading: isTripUpdating }] =
     useUpdateTripMutation()
 
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors }
-  } = useForm<TripSchema>({
-    defaultValues: {
-      title: tripDetails?.title,
-      date_from: tripDetails?.dateFrom
-        ? getDateObj(tripDetails.dateFrom)
-        : undefined,
-      date_to: tripDetails?.dateTo ? getDateObj(tripDetails.dateTo) : null,
-      image_storage_object_id: tripDetails?.image,
-      cost: tripDetails?.cost ? tripDetails.cost.toString() : '',
-      cost_unit: tripDetails?.costUnit
-    },
-    resolver: tripSchemaResolver
-  })
+  const [createTripTagMutation, { loading: isTripTagCreating }] =
+    useCreateTripTagMutation()
+  const [deleteTripTagMutation, { loading: isTripTagDeleting }] =
+    useDeleteTripTagMutation()
 
-  const mutationTrip = async (data: TripSchema) => {
-    const type = tripDetails ? 'update' : 'create'
+  const updateTrip = async (data: TripSchema) => {
+    if (!tripDetails) throw new Error('Trip details is not found')
 
     try {
-      if (tripDetails) {
-        await updateTripMutation({
-          variables: {
-            id: tripDetails.id,
-            set: {
-              title: data.title,
-              date_from: formatToISODate(data.date_from),
-              date_to: data.date_to ? formatToISODate(data.date_to) : null,
-              image_storage_object_id: data.image_storage_object_id,
-              cost: data.cost ? data.cost : null,
-              cost_unit: data.cost_unit
-            }
+      // Trip Update
+      await updateTripMutation({
+        variables: {
+          id: tripDetails.id,
+          set: {
+            title: data.title,
+            date_from: formatToISODate(data.date_from),
+            date_to: data.date_to ? formatToISODate(data.date_to) : null,
+            image_storage_object_id: data.image_storage_object_id,
+            cost: data.cost,
+            cost_unit: data.cost_unit
           }
-        })
-        tripDetails.refetch()
-      }
+        }
+      })
 
-      if (!tripDetails) {
-        console.log('create!')
-      }
+      // TripTags Update
+      const selectedTags = data.selectedTags
+      const tripTagsArray = tripTags?.data || []
+
+      const deletePromises = tripTagsArray
+        .filter((tag) => !selectedTags.includes(tag.tag_id))
+        .map((tag) =>
+          deleteTripTagMutation({
+            variables: {
+              id: tag.id
+            }
+          })
+        )
+      const createPromises = selectedTags
+        .filter((tag) => !tripTagsArray.find((t) => t.tag_id === tag))
+        .map((tag) =>
+          createTripTagMutation({
+            variables: {
+              tripId: tripDetails.id,
+              tagId: tag
+            }
+          })
+        )
+
+      await Promise.all([...deletePromises, ...createPromises])
+
+      tripDetails.refetch()
+      tripTags?.refetch()
+      router.push(`/trip/${tripDetails.id}`)
 
-      window.scroll({ top: 0 })
       toast({
-        title: `Successfully ${type}d!`,
+        title: 'Successfully updated!',
         status: 'success',
         duration: 2000,
         isClosable: true,
@@ -64,10 +81,12 @@ export const useTripUpdate = (tripDetails?: TripDetailsArgs) => {
       })
     } catch (error) {
       console.error(error)
+      // NOTE: For case tripTags (one or all) updating failed, refetch tripTags to show the latest data
+      tripTags?.refetch()
       window.scroll({ top: 0 })
 
       toast({
-        title: `We're sorry, but you failed to ${type} a trip`,
+        title: "We're sorry, but you failed to update a trip",
         description:
           error instanceof Error ? error.message : 'Please try again later.',
         status: 'error',
@@ -79,11 +98,8 @@ export const useTripUpdate = (tripDetails?: TripDetailsArgs) => {
   }
 
   return {
-    onMutate: handleSubmit(mutationTrip),
+    updateTrip,
     isTripUpdating,
-    register,
-    control,
-    errors,
-    Controller
+    isTripTagsUpdating: isTripTagCreating || isTripTagDeleting
   }
 }
diff --git a/app/trip/schema.ts b/app/trip/schema.ts
index 071b63c..b220989 100644
--- a/app/trip/schema.ts
+++ b/app/trip/schema.ts
@@ -2,10 +2,14 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
 
 const tripSchema = z.object({
-  title: z.string().min(1, { message: 'Title is required' }),
-  date_from: z.date(),
+  title: z.string().min(1, { message: 'Please enter a title' }),
+  date_from: z.date({
+    required_error: 'Please select a date from',
+    invalid_type_error: "That's not a date"
+  }),
   date_to: z.date().nullable(),
   image_storage_object_id: z.string().nullable(),
+  selectedTags: z.array(z.string()),
   cost: z.string().nullable(),
   cost_unit: z.string().nullable()
 })
diff --git a/graphql-codegen/generated/api.ts b/graphql-codegen/generated/api.ts
index 49afcdf..e00e5f1 100644
--- a/graphql-codegen/generated/api.ts
+++ b/graphql-codegen/generated/api.ts
@@ -1204,10 +1204,7 @@ export type CreateTagMutation = {
 }
 
 export type CreateTripMutationVariables = Exact<{
-  user_id: Scalars['UUID']['input']
-  title: Scalars['String']['input']
-  date_from: Scalars['Datetime']['input']
-  date_to?: InputMaybe<Scalars['Datetime']['input']>
+  object: TripsInsertInput
 }>
 
 export type CreateTripMutation = {
@@ -1653,23 +1650,9 @@ export type CreateTagMutationOptions = Apollo.BaseMutationOptions<
   CreateTagMutationVariables
 >
 export const CreateTripDocument = gql`
-  mutation createTrip(
-    $user_id: UUID!
-    $title: String!
-    $date_from: Datetime!
-    $date_to: Datetime
-  ) {
+  mutation createTrip($object: tripsInsertInput!) {
     __typename
-    insertIntotripsCollection(
-      objects: [
-        {
-          user_id: $user_id
-          title: $title
-          date_from: $date_from
-          date_to: $date_to
-        }
-      ]
-    ) {
+    insertIntotripsCollection(objects: [$object]) {
       __typename
       records {
         __typename
@@ -1697,10 +1680,7 @@ export type CreateTripMutationFn = Apollo.MutationFunction<
  * @example
  * const [createTripMutation, { data, loading, error }] = useCreateTripMutation({
  *   variables: {
- *      user_id: // value for 'user_id'
- *      title: // value for 'title'
- *      date_from: // value for 'date_from'
- *      date_to: // value for 'date_to'
+ *      object: // value for 'object'
  *   },
  * });
  */
diff --git a/graphql-codegen/generated/gql.ts b/graphql-codegen/generated/gql.ts
index 84d3588..4b7ea10 100644
--- a/graphql-codegen/generated/gql.ts
+++ b/graphql-codegen/generated/gql.ts
@@ -19,7 +19,7 @@ const documents = {
     types.ActivityCollectionDocument,
   'mutation createTag($name: String!, $userId: UUID!) {\n  insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}':
     types.CreateTagDocument,
-  'mutation createTrip($user_id: UUID!, $title: String!, $date_from: Datetime!, $date_to: Datetime) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}':
+  'mutation createTrip($object: tripsInsertInput!) {\n  insertIntotripsCollection(objects: [$object]) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}':
     types.CreateTripDocument,
   'mutation createTripTag($tripId: UUID!, $tagId: UUID!) {\n  insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) {\n    records {\n      __typename\n      id\n      tag_id\n      trip_id\n    }\n  }\n}':
     types.CreateTripTagDocument,
@@ -75,8 +75,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: 'mutation createTrip($user_id: UUID!, $title: String!, $date_from: Datetime!, $date_to: Datetime) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}'
-): (typeof documents)['mutation createTrip($user_id: UUID!, $title: String!, $date_from: Datetime!, $date_to: Datetime) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}']
+  source: 'mutation createTrip($object: tripsInsertInput!) {\n  insertIntotripsCollection(objects: [$object]) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}'
+): (typeof documents)['mutation createTrip($object: tripsInsertInput!) {\n  insertIntotripsCollection(objects: [$object]) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/graphql-codegen/generated/graphql.ts b/graphql-codegen/generated/graphql.ts
index 1e211a0..bb308c2 100644
--- a/graphql-codegen/generated/graphql.ts
+++ b/graphql-codegen/generated/graphql.ts
@@ -1212,10 +1212,7 @@ export type CreateTagMutation = {
 }
 
 export type CreateTripMutationVariables = Exact<{
-  user_id: Scalars['UUID']['input']
-  title: Scalars['String']['input']
-  date_from: Scalars['Datetime']['input']
-  date_to?: InputMaybe<Scalars['Datetime']['input']>
+  object: TripsInsertInput
 }>
 
 export type CreateTripMutation = {
@@ -1775,7 +1772,7 @@ export const CreateTagDocument = {
   ]
 } as unknown as DocumentNode<CreateTagMutation, CreateTagMutationVariables>
 export const CreateTripDocument = {
-  __meta__: { hash: 'aca942ce9802822f0ecd793697b6b6bf16d25152' },
+  __meta__: { hash: '68140ac8465fd7c6f5bab39db9eec02dab9501ef' },
   kind: 'Document',
   definitions: [
     {
@@ -1787,45 +1784,15 @@ export const CreateTripDocument = {
           kind: 'VariableDefinition',
           variable: {
             kind: 'Variable',
-            name: { kind: 'Name', value: 'user_id' }
-          },
-          type: {
-            kind: 'NonNullType',
-            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
-          }
-        },
-        {
-          kind: 'VariableDefinition',
-          variable: {
-            kind: 'Variable',
-            name: { kind: 'Name', value: 'title' }
-          },
-          type: {
-            kind: 'NonNullType',
-            type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } }
-          }
-        },
-        {
-          kind: 'VariableDefinition',
-          variable: {
-            kind: 'Variable',
-            name: { kind: 'Name', value: 'date_from' }
+            name: { kind: 'Name', value: 'object' }
           },
           type: {
             kind: 'NonNullType',
             type: {
               kind: 'NamedType',
-              name: { kind: 'Name', value: 'Datetime' }
+              name: { kind: 'Name', value: 'tripsInsertInput' }
             }
           }
-        },
-        {
-          kind: 'VariableDefinition',
-          variable: {
-            kind: 'Variable',
-            name: { kind: 'Name', value: 'date_to' }
-          },
-          type: { kind: 'NamedType', name: { kind: 'Name', value: 'Datetime' } }
         }
       ],
       selectionSet: {
@@ -1843,41 +1810,8 @@ export const CreateTripDocument = {
                   kind: 'ListValue',
                   values: [
                     {
-                      kind: 'ObjectValue',
-                      fields: [
-                        {
-                          kind: 'ObjectField',
-                          name: { kind: 'Name', value: 'user_id' },
-                          value: {
-                            kind: 'Variable',
-                            name: { kind: 'Name', value: 'user_id' }
-                          }
-                        },
-                        {
-                          kind: 'ObjectField',
-                          name: { kind: 'Name', value: 'title' },
-                          value: {
-                            kind: 'Variable',
-                            name: { kind: 'Name', value: 'title' }
-                          }
-                        },
-                        {
-                          kind: 'ObjectField',
-                          name: { kind: 'Name', value: 'date_from' },
-                          value: {
-                            kind: 'Variable',
-                            name: { kind: 'Name', value: 'date_from' }
-                          }
-                        },
-                        {
-                          kind: 'ObjectField',
-                          name: { kind: 'Name', value: 'date_to' },
-                          value: {
-                            kind: 'Variable',
-                            name: { kind: 'Name', value: 'date_to' }
-                          }
-                        }
-                      ]
+                      kind: 'Variable',
+                      name: { kind: 'Name', value: 'object' }
                     }
                   ]
                 }
diff --git a/graphql-codegen/generated/persisted-documents.json b/graphql-codegen/generated/persisted-documents.json
index c2c0cab..5a56c77 100644
--- a/graphql-codegen/generated/persisted-documents.json
+++ b/graphql-codegen/generated/persisted-documents.json
@@ -2,7 +2,7 @@
   "00c528b2b1c851c06119aedb1fba6b5c885713cf": "query getUser($id: UUID!) { __typename usersCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename email id name profile_picture_url } } } }",
   "2d419044f6b09dcfdf15e868fceccda14add69f4": "query activityCollection($id: UUID!) { __typename activityCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename address cost id image_storage_object_id memo time_from time_to title trip_id url } } } }",
   "9ecd6081f83febe06337ebd01345eef596b81cf9": "mutation createTag($name: String!, $userId: UUID!) { __typename insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) { __typename records { __typename id name } } }",
-  "aca942ce9802822f0ecd793697b6b6bf16d25152": "mutation createTrip($date_from: Datetime!, $date_to: Datetime, $title: String!, $user_id: UUID!) { __typename insertIntotripsCollection( objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}] ) { __typename records { __typename id title } } }",
+  "68140ac8465fd7c6f5bab39db9eec02dab9501ef": "mutation createTrip($object: tripsInsertInput!) { __typename insertIntotripsCollection(objects: [$object]) { __typename records { __typename id title } } }",
   "b86b0c68b8ee2697ff1b539e5df92575cedb30f0": "mutation createTripTag($tagId: UUID!, $tripId: UUID!) { __typename insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) { __typename records { __typename id tag_id trip_id } } }",
   "c661c9a00fdae1dbac69eeb283611e0c9202cf55": "mutation deleteTag($id: UUID!) { __typename deleteFromtagsCollection(filter: {id: {eq: $id}}) { __typename records { __typename id name } } }",
   "1a4d048db574dedfebd859dc737e16a42021f3ff": "mutation deleteTripTag($id: UUID!) { __typename deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) { __typename records { __typename id } } }",

From 72351b6c7eb1fe3fd9af3346f86624c11eaad94d Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Tue, 30 Jan 2024 14:50:55 -0800
Subject: [PATCH 09/13] Run lint

---
 app/components/input/input-icon-button.tsx | 61 +++++++++++-----------
 app/libs/utils/date.ts                     |  2 +-
 app/trip/hooks/useTagCreateDelete.ts       |  2 +-
 3 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/app/components/input/input-icon-button.tsx b/app/components/input/input-icon-button.tsx
index 02316bb..ec92215 100644
--- a/app/components/input/input-icon-button.tsx
+++ b/app/components/input/input-icon-button.tsx
@@ -15,34 +15,35 @@ type InputIconButtonProps = {
   onClick?: () => void
 }
 
-export const InputIconButton = forwardRef<ChakraInputProps & InputIconButtonProps, 'input'>(
-  ({ ariaLabel, icon: Icon, onClick, ...props }, ref) => {
-    const bgColor = useColorModeValue('white', 'gray.700')
-    const borderColor = useColorModeValue('primary.700', 'gray.500')
+export const InputIconButton = forwardRef<
+  ChakraInputProps & InputIconButtonProps,
+  'input'
+>(({ ariaLabel, icon: Icon, onClick, ...props }, ref) => {
+  const bgColor = useColorModeValue('white', 'gray.700')
+  const borderColor = useColorModeValue('primary.700', 'gray.500')
 
-    return (
-      <InputGroup minW={{ base: '100%', md: '23.75rem' }}>
-        <ChakraInput
-          ref={ref}
-          {...props}
-          borderColor={borderColor}
-          focusBorderColor={'primary.600'}
-          bgColor={bgColor}
-          _placeholder={{ color: 'gray.400' }}
-        />
-        <InputRightElement>
-          <IconButton
-            aria-label={ariaLabel}
-            variant="unstyled"
-            type={onClick ? 'button' : 'submit'}
-            onClick={onClick}
-            color="primary.700"
-            isDisabled={props.isDisabled}
-          >
-            <Icon size="24px" />
-          </IconButton>
-        </InputRightElement>
-      </InputGroup>
-    )
-  }
-)
+  return (
+    <InputGroup minW={{ base: '100%', md: '23.75rem' }}>
+      <ChakraInput
+        ref={ref}
+        {...props}
+        borderColor={borderColor}
+        focusBorderColor={'primary.600'}
+        bgColor={bgColor}
+        _placeholder={{ color: 'gray.400' }}
+      />
+      <InputRightElement>
+        <IconButton
+          aria-label={ariaLabel}
+          variant="unstyled"
+          type={onClick ? 'button' : 'submit'}
+          onClick={onClick}
+          color="primary.700"
+          isDisabled={props.isDisabled}
+        >
+          <Icon size="24px" />
+        </IconButton>
+      </InputRightElement>
+    </InputGroup>
+  )
+})
diff --git a/app/libs/utils/date.ts b/app/libs/utils/date.ts
index 4779a4d..ead10cb 100644
--- a/app/libs/utils/date.ts
+++ b/app/libs/utils/date.ts
@@ -1,4 +1,4 @@
-import { zonedTimeToUtc, toDate, utcToZonedTime, format } from 'date-fns-tz'
+import { toDate, utcToZonedTime, format } from 'date-fns-tz'
 
 const TIMEZONE = 'Asia/Tokyo'
 
diff --git a/app/trip/hooks/useTagCreateDelete.ts b/app/trip/hooks/useTagCreateDelete.ts
index d58bdce..18b38e1 100644
--- a/app/trip/hooks/useTagCreateDelete.ts
+++ b/app/trip/hooks/useTagCreateDelete.ts
@@ -60,7 +60,7 @@ export const useTagCreateDelete = (tagsCollectionRefetch: () => void) => {
           id: id
         }
       })
-      
+
       tagsCollectionRefetch()
     } catch (error) {
       console.error(error)

From 0216556654ae80b1a7f10d63f1f63bba0eba1a2b Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Tue, 30 Jan 2024 20:05:18 -0800
Subject: [PATCH 10/13] Amend dates display

---
 app/libs/utils/date.ts                        | 105 ++++++++++--------
 app/libs/utils/index.ts                       |   9 +-
 app/trip/[id]/__test__/mock.ts                |  40 +++----
 app/trip/[id]/components/activity-card.tsx    |  45 ++------
 .../[id]/components/trip-details-tabs.tsx     |  35 ++++--
 5 files changed, 117 insertions(+), 117 deletions(-)

diff --git a/app/libs/utils/date.ts b/app/libs/utils/date.ts
index ead10cb..0178c53 100644
--- a/app/libs/utils/date.ts
+++ b/app/libs/utils/date.ts
@@ -1,9 +1,42 @@
 import { toDate, utcToZonedTime, format } from 'date-fns-tz'
 
+/*
+ * NOTE: This timezone is used for the entire application.
+ * All form inputs for date or date time should have offset of +09:00 e.g."2024-01-01T00:00:00+09:00", which is Tokyo timezone.
+ * See "formatToISODate" function.
+ */
 const TIMEZONE = 'Asia/Tokyo'
 
 /**
- * @param date - ISO date string e.g. '2023-01-01'
+ *
+ * @param isoString - ISO date string
+ * @returns - Date Object ex. Mon Jan 01 2024 00:00:00 GMT-0800 (Pacific Standard Time)
+ */
+export const getDateObj = (isoString: string) => {
+  const parsedDate = toDate(isoString, { timeZone: TIMEZONE })
+  const dateObj = utcToZonedTime(parsedDate, TIMEZONE)
+  return dateObj
+}
+
+export const getOneNextDate = (isoString: string) => {
+  const dateObj = getDateObj(isoString)
+  dateObj.setDate(dateObj.getDate() + 1)
+  return dateObj
+}
+
+/**
+ * @param date - Date Object
+ * @returns - ISO date string with Tokyo timezone ex.2024-01-01T12:00:00+09:00
+ */
+export const formatToISODate = (date: Date) => {
+  const isoString = format(date, "yyyy-MM-dd'T'HH:mm:ssXXX", {
+    timeZone: TIMEZONE
+  })
+  return isoString
+}
+
+/**
+ * @param date - ISO date string
  * @param type - 'dayMonthYear' | 'dayMonth'
  * @returns - Formatted date string for 'dayMonthYear' e.g. '2023/01/01'
  * @returns - Formatted date string for 'dayMonth' e.g. '01/01'
@@ -14,69 +47,47 @@ export const formatDateToSlash = (
 ) => {
   if (!date) return ''
 
-  const parts = date.split('-')
-
-  if (type === 'dayMonthYear') return `${parts[0]}/${parts[1]}/${parts[2]}`
-
-  if (type === 'dayMonth') return `${parts[1]}/${parts[2]}`
-}
-
-/**
- * @param date - ISO date string e.g. '2021-01-01T12:00:00+00:00'
- * @returns - Formatted time string e.g. '12:00'
- */
-export const extractTimeFromDate = (date: string | undefined | null) => {
-  if (!date) return ''
-
-  const parts = date.split('T')
-  const hours = parts[1].split(':')[0]
-  const minutes = parts[1].split(':')[1]
+  const dateObj = getDateObj(date)
+  const formattedDateMonthYear = format(dateObj, 'yyyy/MM/dd')
+  const formattedDateMonth = format(dateObj, 'MM/dd')
 
-  return `${hours}:${minutes}`
+  if (type === 'dayMonthYear') return formattedDateMonthYear
+  if (type === 'dayMonth') return formattedDateMonth
 }
 
 /**
  * @param date  - ISO date string
- * @returns - Formatted date string e.g. '2023-01-01'
+ * @returns - Formatted date string e.g. '2023/01/01 10:00'
  */
-export const formatDbTimeToDate = (date: string | null | undefined) => {
+export const formatToDateTime = (date: string | null | undefined) => {
   if (!date) return ''
-  const formattedDate = date.split('T')[0]
+
+  const dateObj = getDateObj(date)
+  const formattedDate = format(dateObj, 'yyyy/MM/dd HH:mm')
   return formattedDate
 }
 
 /**
- * @param date  - ISO date string
- * @returns - Formatted date string e.g. '2023-01-01 10:00'
+ * @param date - ISO date string
+ * @returns - Formatted time string e.g. '12:00'
  */
-export const formatToDateTime = (date: string | null | undefined) => {
+export const extractTimeFromDate = (date: string | undefined | null) => {
   if (!date) return ''
-  const parts = date.split('T')
-  const monthDay = date.split('T')[0]
-  const hours = parts[1].split(':')[0]
-  const minutes = parts[1].split(':')[1]
 
-  return `${monthDay} ${hours}:${minutes}`
+  const dateObj = getDateObj(date)
+  const formattedTime = format(dateObj, 'HH:mm')
+  return formattedTime
 }
 
+// TODO
 /**
- *
- * @param isoString - ISO date string
- * @returns - Date Object ex. Mon Jan 01 2024 00:00:00 GMT-0800 (Pacific Standard Time)
+ * @param date  - ISO date string
+ * @returns - Formatted date string e.g. '2023-01-01'
  */
-export const getDateObj = (isoString: string) => {
-  const parsedDate = toDate(isoString, { timeZone: TIMEZONE })
-  const dateObj = utcToZonedTime(parsedDate, TIMEZONE)
-  return dateObj
-}
+export const formatDbTimeToDate = (date: string | null | undefined) => {
+  if (!date) return ''
 
-/**
- * @param date - Date Object
- * @returns - ISO date string with Tokyo timezone ex.2024-01-01T12:00:00+09:00
- */
-export const formatToISODate = (date: Date) => {
-  const isoString = format(date, "yyyy-MM-dd'T'HH:mm:ssXXX", {
-    timeZone: TIMEZONE
-  })
-  return isoString
+  const dateObj = getDateObj(date)
+  const formattedDate = format(dateObj, 'yyyy-MM-dd')
+  return formattedDate
 }
diff --git a/app/libs/utils/index.ts b/app/libs/utils/index.ts
index 4d3aec5..3672c4f 100644
--- a/app/libs/utils/index.ts
+++ b/app/libs/utils/index.ts
@@ -1,8 +1,9 @@
 export {
+  getDateObj,
+  getOneNextDate,
+  formatToISODate,
   formatDateToSlash,
-  extractTimeFromDate,
-  formatDbTimeToDate,
   formatToDateTime,
-  getDateObj,
-  formatToISODate
+  extractTimeFromDate,
+  formatDbTimeToDate
 } from './date'
diff --git a/app/trip/[id]/__test__/mock.ts b/app/trip/[id]/__test__/mock.ts
index b172605..15a50c9 100644
--- a/app/trip/[id]/__test__/mock.ts
+++ b/app/trip/[id]/__test__/mock.ts
@@ -18,8 +18,8 @@ export const tripDetailsMock1 = [
                 id: 'trip-uuid-1',
                 image_storage_object_id: null,
                 title: 'Tokyo',
-                date_from: '2021-01-01',
-                date_to: '2021-01-01',
+                date_from: '2024-01-01T00:00:00+09:00',
+                date_to: '2024-01-10T00:00:00+09:00',
                 invitationsCollection: {
                   edges: [
                     {
@@ -49,8 +49,8 @@ export const tripDetailsMock1 = [
                     {
                       node: {
                         address: 'Shibuya',
-                        time_from: '2021-01-01T10:00:00+00:00',
-                        time_to: '2021-01-01T11:00:00+00:00',
+                        time_from: '2024-01-01T10:00:00+09:00',
+                        time_to: '2024-01-01T11:00:00+09:00',
                         title: 'Activity 1',
                         id: 'abc1'
                       }
@@ -58,8 +58,8 @@ export const tripDetailsMock1 = [
                     {
                       node: {
                         address: 'Asakusa',
-                        time_from: '2021-01-02T10:00:00+00:00',
-                        time_to: '2021-01-02T11:00:00+00:00',
+                        time_from: '2024-01-02T10:00:00+09:00',
+                        time_to: '2024-01-02T11:00:00+09:00',
                         title: 'Activity 2',
                         id: 'abc2'
                       }
@@ -67,8 +67,8 @@ export const tripDetailsMock1 = [
                     {
                       node: {
                         address: 'Shinjuku',
-                        time_from: '2021-01-03T11:00:00+00:00',
-                        time_to: '2021-01-03T12:00:00+00:00',
+                        time_from: '2024-01-03T11:00:00+09:00',
+                        time_to: '2024-01-03T12:00:00+09:00',
                         title: 'Activity 3',
                         id: 'abc3'
                       }
@@ -76,8 +76,8 @@ export const tripDetailsMock1 = [
                     {
                       node: {
                         address: 'Yoyogi',
-                        time_from: '2021-01-03T14:00:00+00:00',
-                        time_to: '2021-01-03T08:00:00+00:00',
+                        time_from: '2024-01-03T14:00:00+09:00',
+                        time_to: '2024-01-03T18:00:00+09:00',
                         title: 'Activity 4',
                         id: 'abc4'
                       }
@@ -111,8 +111,8 @@ export const tripDetailsMock2 = [
                 id: 'trip-uuid-2',
                 image_storage_object_id: null,
                 title: 'Tokyo',
-                date_from: '2021-01-01',
-                date_to: '2021-01-01',
+                date_from: '2024-01-01T00:00:00+09:00',
+                date_to: '2024-01-010T00:00:00+09:00',
                 invitationsCollection: {
                   edges: [
                     {
@@ -142,8 +142,8 @@ export const tripDetailsMock2 = [
                     {
                       node: {
                         address: 'Shibuya',
-                        time_from: '2021-01-01T10:00:00+00:00',
-                        time_to: '2021-01-01T11:00:00+00:00',
+                        time_from: '2021-01-01T10:00:00+09:00',
+                        time_to: '2021-01-01T11:00:00+09:00',
                         title: 'Activity 1',
                         id: 'abc1'
                       }
@@ -151,8 +151,8 @@ export const tripDetailsMock2 = [
                     {
                       node: {
                         address: 'Asakusa',
-                        time_from: '2021-01-01T12:00:00+00:00',
-                        time_to: '2021-01-03T11:00:00+00:00',
+                        time_from: '2021-01-01T12:00:00+09:00',
+                        time_to: '2021-01-03T11:00:00+09:00',
                         title: 'Activity 2',
                         id: 'abc2'
                       }
@@ -160,8 +160,8 @@ export const tripDetailsMock2 = [
                     {
                       node: {
                         address: 'Shinjuku',
-                        time_from: '2021-01-03T11:00:00+00:00',
-                        time_to: '2021-01-03T12:00:00+00:00',
+                        time_from: '2021-01-03T11:00:00+09:00',
+                        time_to: '2021-01-03T12:00:00+09:00',
                         title: 'Activity 3',
                         id: 'abc3'
                       }
@@ -169,8 +169,8 @@ export const tripDetailsMock2 = [
                     {
                       node: {
                         address: 'Yoyogi',
-                        time_from: '2021-01-03T14:00:00+00:00',
-                        time_to: '2021-01-04T08:00:00+00:00',
+                        time_from: '2021-01-03T14:00:00+09:00',
+                        time_to: '2021-01-04T08:00:00+09:00',
                         title: 'Activity 4',
                         id: 'abc4'
                       }
diff --git a/app/trip/[id]/components/activity-card.tsx b/app/trip/[id]/components/activity-card.tsx
index 281cbc6..2a4a2c6 100644
--- a/app/trip/[id]/components/activity-card.tsx
+++ b/app/trip/[id]/components/activity-card.tsx
@@ -15,9 +15,10 @@ import { FiTrash2, FiMapPin, FiMoreHorizontal, FiEdit3 } from 'react-icons/fi'
 import { Link } from '@/components/link'
 import { ConfirmModal } from '@/components/modal'
 import {
-  formatDbTimeToDate,
   formatDateToSlash,
-  extractTimeFromDate
+  extractTimeFromDate,
+  getOneNextDate,
+  getDateObj
 } from '@/libs/utils'
 import { ActivityType } from '../components'
 
@@ -41,45 +42,21 @@ export const ActivityCard = ({ activity, selectedDate }: ActivityCardProps) => {
   const differentDate = (displayPlace: 'timeFrom' | 'timeTo') => {
     if (!activity.timeTo) return null
 
-    const timeFromDate = formatDbTimeToDate(activity.timeFrom)
-    const timeToDate = formatDbTimeToDate(activity.timeTo)
+    const timeFromDateObj = getDateObj(activity.timeFrom)
+    const timeToDateObj = getDateObj(activity.timeTo)
+    const selectedDateObj = getDateObj(selectedDate)
+    const nextDate = getOneNextDate(selectedDate)
 
-    if (timeFromDate === timeToDate) return null
-
-    const [yearSelected, monthSelected, daySelected] = selectedDate
-      .split('-')
-      .map(Number)
-
-    const [yearTimeFrom, monthTimeFrom, dayTimeFrom] = timeFromDate
-      .split('-')
-      .map(Number)
-
-    const [yearTimeTo, monthTimeTo, dayTimeTo] = timeToDate
-      .split('-')
-      .map(Number)
-
-    const selectedDateObj = new Date(
-      yearSelected,
-      monthSelected - 1,
-      daySelected
-    )
-
-    const timeFromDateObj = new Date(
-      yearTimeFrom,
-      monthTimeFrom - 1,
-      dayTimeFrom
-    )
-
-    const timeToDateObj = new Date(yearTimeTo, monthTimeTo - 1, dayTimeTo)
+    if (timeFromDateObj === timeToDateObj) return null
 
     // To display below TimeFrom if the selected date is before than the timeFrom date
     if (displayPlace === 'timeFrom' && timeFromDateObj < selectedDateObj) {
-      return formatDateToSlash(timeFromDate, 'dayMonth')
+      return formatDateToSlash(activity.timeFrom, 'dayMonth')
     }
 
     // To display below TimeTo if the selected date is later than the timeTo date
-    if (displayPlace === 'timeTo' && timeToDateObj > selectedDateObj) {
-      return formatDateToSlash(timeToDate, 'dayMonth')
+    if (displayPlace === 'timeTo' && timeToDateObj > nextDate) {
+      return formatDateToSlash(activity.timeTo, 'dayMonth')
     }
   }
 
diff --git a/app/trip/[id]/components/trip-details-tabs.tsx b/app/trip/[id]/components/trip-details-tabs.tsx
index 7fc5f67..be4668f 100644
--- a/app/trip/[id]/components/trip-details-tabs.tsx
+++ b/app/trip/[id]/components/trip-details-tabs.tsx
@@ -10,7 +10,12 @@ import {
   VStack,
   Heading
 } from '@chakra-ui/react'
-import { formatDbTimeToDate, formatDateToSlash } from '@/libs/utils'
+import {
+  formatDbTimeToDate,
+  formatDateToSlash,
+  getDateObj,
+  formatToISODate
+} from '@/libs/utils'
 import { ActivityCard } from '../components'
 
 export type ActivityType = {
@@ -30,8 +35,8 @@ export const TripDetailsTabs = ({ activities }: TripDetailsTabsProps) => {
 
   const sortedActivities = useMemo(() => {
     return activities.sort((a, b) => {
-      const dateA = new Date(a.timeFrom).getTime()
-      const dateB = new Date(b.timeFrom).getTime()
+      const dateA = getDateObj(a.timeFrom).getTime()
+      const dateB = getDateObj(b.timeFrom).getTime()
 
       return dateA - dateB
     })
@@ -49,15 +54,21 @@ export const TripDetailsTabs = ({ activities }: TripDetailsTabsProps) => {
       // Array list for all dates
       const allDates: string[] = []
       sortedActivities.forEach((activity) => {
-        const startDate = new Date(formatDbTimeToDate(activity.timeFrom))
-        const endDate = new Date(formatDbTimeToDate(activity.timeTo))
+        const startDate = getDateObj(activity.timeFrom)
+        const endDate = activity.timeTo ? getDateObj(activity.timeTo) : null
 
         const currentDate = startDate
 
-        while (currentDate <= endDate) {
-          const formattedDate = currentDate.toISOString().split('T')[0] // Format to yyyy-mm-dd
-          if (!allDates.includes(formattedDate)) {
-            allDates.push(formattedDate)
+        while (endDate && currentDate <= endDate) {
+          const formattedFromDate = formatToISODate(currentDate).split('T')[0]
+          const formattedToDate = formatToISODate(endDate).split('T')[0]
+
+          if (!allDates.includes(formattedFromDate)) {
+            allDates.push(formattedFromDate)
+          }
+
+          if (!allDates.includes(formattedToDate)) {
+            allDates.push(formattedToDate)
           }
 
           // Move to the next day
@@ -69,7 +80,7 @@ export const TripDetailsTabs = ({ activities }: TripDetailsTabsProps) => {
         const activitiesForDate = sortedActivities.filter(
           (activity) =>
             formatDbTimeToDate(activity.timeFrom) === dateKey ||
-            formatDbTimeToDate(activity.timeTo) === dateKey
+            (activity.timeTo && formatDbTimeToDate(activity.timeTo) === dateKey)
         )
 
         result[dateKey] = activitiesForDate
@@ -82,12 +93,12 @@ export const TripDetailsTabs = ({ activities }: TripDetailsTabsProps) => {
   const [tabIndex, setTabIndex] = useState(0)
 
   const [selectedDate, setSelectedDate] = useState(
-    Object.keys(activitiesByDate)[0]
+    `${Object.keys(activitiesByDate)[0]}T00:00:00+09:00`
   )
 
   const handleTabsChange = (index: number) => {
     setTabIndex(index)
-    setSelectedDate(Object.keys(activitiesByDate)[index])
+    setSelectedDate(`${Object.keys(activitiesByDate)[index]}T00:00:00+09:00`)
   }
 
   return (

From 2bc17427209f0f3d942b4353598737fdf9b1eebb Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Tue, 30 Jan 2024 20:14:25 -0800
Subject: [PATCH 11/13] Display total trip cost

---
 app/activity/[id]/components/activity-info.tsx   |  2 +-
 app/trip/[id]/components/trip-details-header.tsx | 11 ++++++++++-
 app/trip/[id]/page.tsx                           |  2 ++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/activity/[id]/components/activity-info.tsx b/app/activity/[id]/components/activity-info.tsx
index f36e4ed..18ad97b 100644
--- a/app/activity/[id]/components/activity-info.tsx
+++ b/app/activity/[id]/components/activity-info.tsx
@@ -4,7 +4,7 @@ import { Heading, Box, Text, VStack } from '@chakra-ui/react'
 
 type ActivityInfoProps = {
   memo: string | null | undefined
-  cost: number | null | undefined
+  cost: string | null | undefined
 }
 
 export const ActivityInfo = ({ memo, cost }: ActivityInfoProps) => {
diff --git a/app/trip/[id]/components/trip-details-header.tsx b/app/trip/[id]/components/trip-details-header.tsx
index 9d18582..3921bf9 100644
--- a/app/trip/[id]/components/trip-details-header.tsx
+++ b/app/trip/[id]/components/trip-details-header.tsx
@@ -20,11 +20,12 @@ type TripDetailsHeaderProps = {
   title: string
   dateFrom: string | null | undefined
   dateTo: string | null | undefined
+  cost: string | null | undefined
+  costUnit: string | null | undefined
   users: {
     id: string | undefined
     image: string | null | undefined
   }[]
-
   tags: { id: string | undefined; name: string | undefined }[]
 }
 
@@ -34,6 +35,8 @@ export const TripDetailsHeader = ({
   title,
   dateFrom,
   dateTo,
+  cost,
+  costUnit,
   tags,
   users
 }: TripDetailsHeaderProps) => {
@@ -89,10 +92,16 @@ export const TripDetailsHeader = ({
               mt={{ base: '4px', md: '8px' }}
               fontSize={{ base: 'sm', md: 'md' }}
               color={{ base: 'gray.100', md: color }}
+              fontWeight="bold"
             >
               {formatDateToSlash(dateFrom, 'dayMonthYear')} -{' '}
               {formatDateToSlash(dateTo, 'dayMonthYear')}
             </Box>
+            {cost && (
+              <Box mt="4px">
+                Total Cost: {cost} {costUnit}
+              </Box>
+            )}
           </Box>
 
           <Flex gap={{ base: '10px', md: '28px' }}>
diff --git a/app/trip/[id]/page.tsx b/app/trip/[id]/page.tsx
index 222d6d5..a21a907 100644
--- a/app/trip/[id]/page.tsx
+++ b/app/trip/[id]/page.tsx
@@ -47,6 +47,8 @@ export default function TripDetailsPage({
                 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}
                 users={
                   tripDataCollection.edges[0].node.invitationsCollection?.edges.map(
                     (invitation) => ({

From e974fb3c05b136e4d61ecd26ca6d83bbca4e023e Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Tue, 30 Jan 2024 21:27:31 -0800
Subject: [PATCH 12/13] Add handling refetch trips collection

---
 app/page.tsx                      |  67 ++++++-------------
 app/trip/[id]/edit/page.tsx       | 103 ++++++++++++++----------------
 app/trip/components/trip-form.tsx |   2 +-
 app/trip/hooks/index.ts           |   1 +
 app/trip/hooks/useTripCreate.ts   |   4 ++
 app/trip/hooks/useTripUpdate.ts   |   4 ++
 app/trip/hooks/useTripsGet.ts     |  73 +++++++++++++++++++++
 7 files changed, 152 insertions(+), 102 deletions(-)
 create mode 100644 app/trip/hooks/useTripsGet.ts

diff --git a/app/page.tsx b/app/page.tsx
index 0c53943..d7938fa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 'use client'
+
 import {
   Heading,
   Box,
@@ -12,9 +13,9 @@ import {
 import { useRouter } from 'next/navigation'
 import { PrimaryButton } from '@/components/button'
 import { Loading } from '@/components/loading'
-import { useUserId } from '@/providers/session-provider'
+
 import { TripSearch, TripSort, TripCard } from '@/trip/components'
-import { useTripsCollectionQuery, TripsOrderBy } from '@generated/api'
+import { useTripsGet } from '@/trip/hooks'
 
 export default function Top({ searchParams }: { searchParams: { q: string } }) {
   const router = useRouter()
@@ -22,48 +23,17 @@ export default function Top({ searchParams }: { searchParams: { q: string } }) {
   const color = useColorModeValue('black', 'gray.300')
 
   const searchWord = searchParams.q
-  const userId = useUserId()
-
-  const { data, loading, fetchMore, refetch } = useTripsCollectionQuery({
-    variables: {
-      filter: {
-        user_id: { eq: userId },
-        ...(searchWord &&
-          searchWord.length && { title: { like: `%${searchWord}%` } })
-      },
-      first: 6,
-      after: null
-    }
-  })
 
-  const handleSortBy = (sortObj: TripsOrderBy) => {
-    refetch({
-      orderBy: sortObj
-    })
-  }
+  const {
+    tripsData,
+    loading,
+    error,
+    handleSortBy,
+    handleLoadMore,
+    refetchLoading
+  } = useTripsGet(searchWord)
 
-  const handleLoadMore = () => {
-    fetchMore({
-      variables: {
-        after: data?.tripsCollection?.pageInfo.endCursor
-      },
-      updateQuery: (previousQueryResult, { fetchMoreResult }) => {
-        const newEdges = fetchMoreResult?.tripsCollection?.edges
-        const pageInfo = fetchMoreResult?.tripsCollection?.pageInfo
-        const previousCollection = previousQueryResult?.tripsCollection
-        return newEdges && newEdges.length && pageInfo && previousCollection
-          ? {
-              tripsCollection: {
-                __typename: previousCollection.__typename,
-                edges: [...previousCollection.edges, ...newEdges],
-                pageInfo
-              },
-              __typename: previousQueryResult.__typename
-            }
-          : previousQueryResult
-      }
-    })
-  }
+  if (error) throw new Error('Failed to fetch trips')
 
   return (
     <Box as="main" minH="100vh" bg={bg} color={color}>
@@ -101,7 +71,7 @@ export default function Top({ searchParams }: { searchParams: { q: string } }) {
             <TripSort sortBy={handleSortBy} />
           </GridItem>
         </Grid>
-        {loading || !data?.tripsCollection ? (
+        {loading || refetchLoading || !tripsData ? (
           <Loading />
         ) : (
           <>
@@ -110,16 +80,19 @@ export default function Top({ searchParams }: { searchParams: { q: string } }) {
               mt={{ base: '38px', md: '40px' }}
               flexWrap={'wrap'}
             >
-              {data.tripsCollection.edges.length === 0 && (
+              {tripsData.edges.length === 0 && (
                 <Text>We couldn&apos;t find any results</Text>
               )}
-              {data.tripsCollection.edges.map((trip) => (
+              {tripsData.edges.map((trip) => (
                 <TripCard key={trip.node.id} data={trip} />
               ))}
             </Flex>
-            {data.tripsCollection.pageInfo.hasNextPage && (
+            {tripsData.pageInfo.hasNextPage && (
               <Box textAlign="center" mt={{ base: '40px', md: '60px' }}>
-                <PrimaryButton variant="outline" onClick={handleLoadMore}>
+                <PrimaryButton
+                  variant="outline"
+                  onClick={() => handleLoadMore(tripsData.pageInfo.endCursor)}
+                >
                   Load More
                 </PrimaryButton>
               </Box>
diff --git a/app/trip/[id]/edit/page.tsx b/app/trip/[id]/edit/page.tsx
index 3adce59..e97d48f 100644
--- a/app/trip/[id]/edit/page.tsx
+++ b/app/trip/[id]/edit/page.tsx
@@ -3,7 +3,6 @@
 import { NetworkStatus } from '@apollo/client'
 import { Box, Container, Heading, useColorModeValue } from '@chakra-ui/react'
 import { Loading } from '@/components/loading'
-import { Header, Footer } from '@/components/navigation'
 import { useUserId } from '@/providers/session-provider'
 import { TripForm } from '../../components'
 import {
@@ -88,58 +87,54 @@ export default function TripEditPage({ params }: { params: { id: string } }) {
     throw new Error('No trip data found')
 
   return (
-    <>
-      <Header />
-      <Box as="main" minH="100svh" bg={bg} color={color}>
-        <Container
-          maxW={{ base: '100%', lg: 'container.sm' }}
-          pt={{ base: '20px', md: '30px' }}
-          pb={{ base: '40px', md: '80px' }}
-        >
-          <Heading as="h1" fontSize={{ base: '2xl', md: '4xl' }}>
-            Edit Trip
-          </Heading>
-          <Box mt="40px">
-            {!tripDataCollection || tripLoading || !tripsTagsDataArray ? (
-              <Loading />
-            ) : (
-              <TripForm
-                tripDetails={{
-                  id: tripDataCollection.id,
-                  image: tripDataCollection.image_storage_object_id,
-                  title: tripDataCollection.title,
-                  dateFrom: tripDataCollection.date_from,
-                  dateTo: tripDataCollection.date_to,
-                  cost: tripDataCollection.cost,
-                  costUnit: tripDataCollection.cost_unit,
-                  refetch: tripDetailsRefetch,
-                  refetchLoading: tripDetailsRefetchLoading
-                }}
-                tripTags={{
-                  data:
-                    tripTagsData?.trip_tagsCollection?.edges.map((tripTag) => ({
-                      id: tripTag.node.id,
-                      tag_id: tripTag.node.tag_id || '',
-                      trip_id: tripTag.node.trip_id || ''
-                    })) || [],
-                  refetch: tripTagsCollectionRefetch,
-                  refetchLoading: tripTagsRefetchLoading
-                }}
-                tags={{
-                  data:
-                    tagsData?.tagsCollection?.edges.map((tag) => ({
-                      id: tag.node.id,
-                      name: tag.node.name
-                    })) || [],
-                  refetch: tagsCollectionRefetch,
-                  refetchLoading: tagsRefetchLoading
-                }}
-              />
-            )}
-          </Box>
-        </Container>
-      </Box>
-      <Footer />
-    </>
+    <Box as="main" minH="100svh" bg={bg} color={color}>
+      <Container
+        maxW={{ base: '100%', lg: 'container.sm' }}
+        pt={{ base: '20px', md: '30px' }}
+        pb={{ base: '40px', md: '80px' }}
+      >
+        <Heading as="h1" fontSize={{ base: '2xl', md: '4xl' }}>
+          Edit Trip
+        </Heading>
+        <Box mt="40px">
+          {!tripDataCollection || tripLoading || !tripsTagsDataArray ? (
+            <Loading />
+          ) : (
+            <TripForm
+              tripDetails={{
+                id: tripDataCollection.id,
+                image: tripDataCollection.image_storage_object_id,
+                title: tripDataCollection.title,
+                dateFrom: tripDataCollection.date_from,
+                dateTo: tripDataCollection.date_to,
+                cost: tripDataCollection.cost,
+                costUnit: tripDataCollection.cost_unit,
+                refetch: tripDetailsRefetch,
+                refetchLoading: tripDetailsRefetchLoading
+              }}
+              tripTags={{
+                data:
+                  tripTagsData?.trip_tagsCollection?.edges.map((tripTag) => ({
+                    id: tripTag.node.id,
+                    tag_id: tripTag.node.tag_id || '',
+                    trip_id: tripTag.node.trip_id || ''
+                  })) || [],
+                refetch: tripTagsCollectionRefetch,
+                refetchLoading: tripTagsRefetchLoading
+              }}
+              tags={{
+                data:
+                  tagsData?.tagsCollection?.edges.map((tag) => ({
+                    id: tag.node.id,
+                    name: tag.node.name
+                  })) || [],
+                refetch: tagsCollectionRefetch,
+                refetchLoading: tagsRefetchLoading
+              }}
+            />
+          )}
+        </Box>
+      </Container>
+    </Box>
   )
 }
diff --git a/app/trip/components/trip-form.tsx b/app/trip/components/trip-form.tsx
index 42c87f3..bcf9112 100644
--- a/app/trip/components/trip-form.tsx
+++ b/app/trip/components/trip-form.tsx
@@ -82,7 +82,7 @@ export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
       date_to: tripDetails?.dateTo ? getDateObj(tripDetails.dateTo) : null,
       image_storage_object_id: tripDetails?.image || null,
       selectedTags: tripTags ? tripTags.data.map((tag) => tag.tag_id) : [],
-      cost: tripDetails?.cost ? tripDetails.cost.toString() : '',
+      cost: tripDetails?.cost ? tripDetails.cost.toString() : null,
       cost_unit: tripDetails?.costUnit
     },
     resolver: tripSchemaResolver
diff --git a/app/trip/hooks/index.ts b/app/trip/hooks/index.ts
index 8d7cfbd..d6950e2 100644
--- a/app/trip/hooks/index.ts
+++ b/app/trip/hooks/index.ts
@@ -1,3 +1,4 @@
+export { useTripsGet } from './useTripsGet'
 export { useTagCreateDelete } from './useTagCreateDelete'
 export { useTripCreate } from './useTripCreate'
 export { useTripTagCreateDelete } from './useTripTagCreateDelete'
diff --git a/app/trip/hooks/useTripCreate.ts b/app/trip/hooks/useTripCreate.ts
index c5b6fab..2aee89d 100644
--- a/app/trip/hooks/useTripCreate.ts
+++ b/app/trip/hooks/useTripCreate.ts
@@ -3,6 +3,7 @@ import { useRouter } from 'next/navigation'
 import { formatToISODate } from '@/libs/utils'
 import { useUserId } from '@/providers/session-provider'
 import { TripSchema } from '../schema'
+import { useTripsGet } from '.'
 import { useCreateTripMutation, useCreateTripTagMutation } from '@generated/api'
 
 export const useTripCreate = () => {
@@ -15,6 +16,8 @@ export const useTripCreate = () => {
   const [createTripTagMutation, { loading: isTripTagCreating }] =
     useCreateTripTagMutation()
 
+  const { tripsRefetch } = useTripsGet()
+
   const createTrip = async (data: TripSchema) => {
     try {
       const res = await createTripMutation({
@@ -47,6 +50,7 @@ export const useTripCreate = () => {
 
       await Promise.all([...createPromises])
 
+      tripsRefetch()
       router.push('/')
 
       toast({
diff --git a/app/trip/hooks/useTripUpdate.ts b/app/trip/hooks/useTripUpdate.ts
index b383cf7..cab109d 100644
--- a/app/trip/hooks/useTripUpdate.ts
+++ b/app/trip/hooks/useTripUpdate.ts
@@ -3,6 +3,7 @@ import { useRouter } from 'next/navigation'
 import { formatToISODate } from '@/libs/utils'
 import { TripDetailsArgs, TripTagsArgs } from '../components/trip-form'
 import { TripSchema } from '../schema'
+import { useTripsGet } from '.'
 import {
   useUpdateTripMutation,
   useCreateTripTagMutation,
@@ -23,6 +24,8 @@ export const useTripUpdate = (
   const [deleteTripTagMutation, { loading: isTripTagDeleting }] =
     useDeleteTripTagMutation()
 
+  const { tripsRefetch } = useTripsGet()
+
   const updateTrip = async (data: TripSchema) => {
     if (!tripDetails) throw new Error('Trip details is not found')
 
@@ -70,6 +73,7 @@ export const useTripUpdate = (
 
       tripDetails.refetch()
       tripTags?.refetch()
+      tripsRefetch()
       router.push(`/trip/${tripDetails.id}`)
 
       toast({
diff --git a/app/trip/hooks/useTripsGet.ts b/app/trip/hooks/useTripsGet.ts
new file mode 100644
index 0000000..13203a3
--- /dev/null
+++ b/app/trip/hooks/useTripsGet.ts
@@ -0,0 +1,73 @@
+import { NetworkStatus } from '@apollo/client'
+import { useUserId } from '@/providers/session-provider'
+import { useTripsCollectionQuery, TripsOrderBy } from '@generated/api'
+
+export const useTripsGet = (searchWord?: string) => {
+  const userId = useUserId()
+
+  const { data, loading, error, fetchMore, refetch, networkStatus } =
+    useTripsCollectionQuery({
+      variables: {
+        filter: {
+          user_id: { eq: userId },
+          ...(searchWord &&
+            searchWord.length && { title: { like: `%${searchWord}%` } })
+        },
+        first: 12,
+        after: null
+      }
+    })
+
+  const refetchLoading = networkStatus === NetworkStatus.refetch
+
+  const tripsRefetch = () => {
+    refetch({
+      filter: {
+        user_id: { eq: userId },
+        ...(searchWord &&
+          searchWord.length && { title: { like: `%${searchWord}%` } })
+      },
+      first: 12,
+      after: null
+    })
+  }
+
+  const handleSortBy = (sortObj: TripsOrderBy) => {
+    refetch({
+      orderBy: sortObj
+    })
+  }
+
+  const handleLoadMore = (endCursor: string | null | undefined) => {
+    fetchMore({
+      variables: {
+        after: endCursor
+      },
+      updateQuery: (previousQueryResult, { fetchMoreResult }) => {
+        const newEdges = fetchMoreResult?.tripsCollection?.edges
+        const pageInfo = fetchMoreResult?.tripsCollection?.pageInfo
+        const previousCollection = previousQueryResult?.tripsCollection
+        return newEdges && newEdges.length && pageInfo && previousCollection
+          ? {
+              tripsCollection: {
+                __typename: previousCollection.__typename,
+                edges: [...previousCollection.edges, ...newEdges],
+                pageInfo
+              },
+              __typename: previousQueryResult.__typename
+            }
+          : previousQueryResult
+      }
+    })
+  }
+
+  return {
+    tripsData: data?.tripsCollection,
+    loading,
+    error,
+    handleSortBy,
+    handleLoadMore,
+    tripsRefetch,
+    refetchLoading
+  }
+}

From 491d7d0df308e441d3c8dad7963a8137877e6ad4 Mon Sep 17 00:00:00 2001
From: Kana Taguchi <mukrabwy103@gmail.com>
Date: Wed, 31 Jan 2024 20:43:11 -0800
Subject: [PATCH 13/13] Fix cost UI style

---
 app/trip/[id]/components/trip-details-header.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/trip/[id]/components/trip-details-header.tsx b/app/trip/[id]/components/trip-details-header.tsx
index 3921bf9..d7fc10b 100644
--- a/app/trip/[id]/components/trip-details-header.tsx
+++ b/app/trip/[id]/components/trip-details-header.tsx
@@ -98,7 +98,7 @@ export const TripDetailsHeader = ({
               {formatDateToSlash(dateTo, 'dayMonthYear')}
             </Box>
             {cost && (
-              <Box mt="4px">
+              <Box mt="4px" display={{ base: 'none', md: 'block' }}>
                 Total Cost: {cost} {costUnit}
               </Box>
             )}
@@ -136,9 +136,9 @@ export const TripDetailsHeader = ({
 
         <Flex
           flexDir={{ base: 'column', md: 'row' }}
-          mt={{ base: '24px', md: '28px' }}
+          mt={{ base: '24px', md: '20px' }}
           justifyContent="space-between"
-          gap={'16px'}
+          gap={'14px'}
         >
           <Flex align="center" gap="18px">
             {!!users.length && (
@@ -181,6 +181,7 @@ export const TripDetailsHeader = ({
               Manage
             </Link>
           </Flex>
+
           <Flex gap="12px" maxW={{ base: '100%', md: '50%' }} flexWrap="wrap">
             {tags.map((tag) => (
               <Tag
@@ -196,6 +197,12 @@ export const TripDetailsHeader = ({
               </Tag>
             ))}
           </Flex>
+
+          {cost && (
+            <Box display={{ base: 'block', md: 'none' }} fontWeight="bold">
+              Total Cost: {cost} {costUnit}
+            </Box>
+          )}
         </Flex>
       </Box>
     </Box>