Skip to content

Commit

Permalink
Merge branch 'main' into A2_sign_up_UI
Browse files Browse the repository at this point in the history
  • Loading branch information
SachiGoto authored Mar 9, 2024
2 parents a8cb467 + 80290bf commit 9175c56
Show file tree
Hide file tree
Showing 59 changed files with 3,380 additions and 1,096 deletions.
4 changes: 2 additions & 2 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"node_modules": true,
".next": true
"node_modules": false,
".next": false
},
"eslint.lintTask.enable": true,
"typescript.tsdk": "node_modules/typescript/lib",
Expand Down
11 changes: 10 additions & 1 deletion app/activity/[id]/components/activity-header.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
'use client'

import { Heading, Box, Flex, Spacer, Text, IconButton } from '@chakra-ui/react'
import { useRouter } from 'next/navigation'
import { FiClock, FiMapPin, FiLink2, FiEdit3, FiTrash2 } from 'react-icons/fi'
import { useActivityDelete } from '@/activity/hooks/useActivityDelete'
import { Link } from '@/components/link'
import { formatToDateTime } from '@/libs/utils'
import { customColors } from '@/theme/color'

type ActivityHeaderProps = {
id: string
title: string
time_from: string | null
time_to?: string | null
Expand All @@ -15,12 +18,16 @@ type ActivityHeaderProps = {
}

export const ActivityHeader = ({
id,
title,
time_from,
time_to,
address,
url
}: ActivityHeaderProps) => {
const router = useRouter()
const { deleteActivity, isActivityDeleting } = useActivityDelete()

return (
<>
<Flex pb={{ base: '30px', md: '40px' }} align="center">
Expand All @@ -31,7 +38,7 @@ export const ActivityHeader = ({
<IconButton
aria-label="Edit this trip"
variant="roundIcon"
onClick={() => {}}
onClick={() => router.push(`/activity/${id}/edit`)}
p={{ base: '6px', md: '10px' }}
>
<FiEdit3 size="100%" />
Expand All @@ -40,6 +47,8 @@ export const ActivityHeader = ({
aria-label="Delete this trip"
variant="roundIcon"
p={{ base: '6px', md: '10px' }}
onClick={() => deleteActivity(id)}
isLoading={isActivityDeleting}
>
<FiTrash2 size="100%" />
</IconButton>
Expand Down
77 changes: 77 additions & 0 deletions app/activity/[id]/edit/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
'use client'

import { NetworkStatus } from '@apollo/client'
import { Box, Container, Heading, useColorModeValue } from '@chakra-ui/react'
import { ActivityForm } from '@/activity/components/activity-form'
import { Loading } from '@/components/loading'
import { useActivityCollectionQuery } from '@generated/api'

export default function ActivityEditPage({
params
}: {
params: { id: string }
}) {
const bg = useColorModeValue('white', 'gray.800')
const color = useColorModeValue('black', 'gray.300')

// Activity Details
const {
data: activityData,
loading: activityLoading,
refetch: activityRefetch,
networkStatus: activityNetWorkStatus
} = useActivityCollectionQuery({
variables: {
id: params.id
},
notifyOnNetworkStatusChange: true
})

const activityDataCollection =
activityData?.activityCollection?.edges[0]?.node
const activityDetailsRefetch = () => {
activityRefetch()
}
const activityDetailsRefetchLoading =
activityNetWorkStatus === NetworkStatus.refetch

if (!activityData && !activityLoading)
throw new Error('No activity data found')

return (
<Box as="main" minH="100vh" bg={bg} color={color}>
<Container
pt={{ base: '20px', md: '40px' }}
pb={{ base: '40px', md: '70px' }}
>
<Heading as={'h1'} fontSize={{ base: '2xl', md: '4xl' }}>
Edit Activity
</Heading>
{!activityDataCollection || activityLoading ? (
<Loading />
) : (
<ActivityForm
tripId={activityDataCollection.trip_id}
activityDetails={{
id: activityDataCollection.id,
title: activityDataCollection.title,
timeFrom: activityDataCollection.time_from,
timeTo: activityDataCollection?.time_to,
address: activityDataCollection?.address,
url: activityDataCollection?.url,
memo: activityDataCollection?.memo,
cost: activityDataCollection?.cost,
costUnit: activityDataCollection?.cost_unit,
uploadedFileUrls:
activityDataCollection?.activity_uploaded_filesCollection?.edges.map(
(edge) => edge?.node?.file_url
),
refetch: activityDetailsRefetch,
refetchLoading: activityDetailsRefetchLoading
}}
/>
)}
</Container>
</Box>
)
}
19 changes: 10 additions & 9 deletions app/activity/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,14 @@ export default function ActivityDetails({
}
})

const dummyUrls: string[] = [
'https://images.unsplash.com/photo-1612852098516-55d01c75769a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
'https://images.unsplash.com/photo-1627875764093-315831ac12f7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
'https://images.unsplash.com/photo-1571432248690-7fd6980a1ae2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60'
]

if (!loading && !data) throw new Error('No activity data found')

const activityData = data?.activityCollection?.edges[0]?.node
const uploadedImageUrls = activityData?.activity_uploaded_filesCollection
? activityData?.activity_uploaded_filesCollection?.edges.map(
(edge) => edge?.node?.file_url
)
: []

return (
<Box as="main" minH="100vh" bg={bg} color={color}>
Expand All @@ -44,18 +43,20 @@ export default function ActivityDetails({
pb={{ base: '40px', md: '80px' }}
>
<ActivityHeader
id={activityData.id}
title={activityData.title}
time_from={activityData.time_from}
time_to={activityData?.time_to}
address={activityData?.address}
url={activityData?.url}
/>
{/* TODO: Fetch images from the database once available. */}
<Carousel urls={dummyUrls} />
{uploadedImageUrls.length > 0 && (
<Carousel urls={uploadedImageUrls} />
)}
<ActivityInfo memo={activityData?.memo} cost={activityData?.cost} />
<Box mt="60px" display="flex" alignItems="center">
<FiChevronLeft />
<Link ml="2%" href="/">
<Link ml="2%" href={`/trip/${activityData.trip_id}`}>
Got back to Trip Details
</Link>
</Box>
Expand Down
Loading

0 comments on commit 9175c56

Please sign in to comment.