Skip to content

Commit

Permalink
updated based on feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@SachiGoto
SachiGoto committed Dec 12, 2023
1 parent 54dad88 commit cef4e86
Show file tree
Hide file tree
Showing 7 changed files with 183 additions and 154 deletions.
238 changes: 109 additions & 129 deletions app/activity/create/components/form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,17 @@ import {
FormControl,
FormLabel,
FormErrorMessage,
Input,
Button,
Textarea,
Image,
SimpleGrid,
Text,
Flex
} from '@chakra-ui/react'

import { PrimaryButton } from '@/components/button'
import { createActivitySchema, createActivityResolver } from './schema'
import { InputForm, TextareaForm } from '@/components/input'
import { createActivitySchema, createActivityResolver } from '../schema'

export const Form = () => {
export const FormActivity = () => {
const [selectedImages, setSelectedImages] = useState<File[]>([])
const onDrop = useCallback((acceptedFiles: File[]) => {
setSelectedImages((prevImages) => [...prevImages, ...acceptedFiles])
Expand All @@ -43,141 +41,123 @@ export const Form = () => {

const createHandler = handleSubmit(async (data: createActivitySchema) => {
// TODO append images to formData and send to backend
console.log('formData', data)
})

return (
<Container
pt={{ base: '40px', md: '40px' }}
pb={{ base: '40px', md: '80px' }}
>
<Box as="form" onSubmit={createHandler}>
<FormControl isRequired isInvalid={!!errors.title}>
<FormLabel>Title</FormLabel>
<Input
type="text"
placeholder="Asakusa Temple"
{...register('title')}
/>
{errors.title && (
<FormErrorMessage>{errors.title.message}</FormErrorMessage>
)}
</FormControl>
<Box as="form" onSubmit={createHandler} pt={{ base: '40px', md: '40px' }}>
<FormControl isRequired isInvalid={!!errors.title}>
<FormLabel>Title</FormLabel>
<InputForm
type="text"
placeholder="Asakusa Temple"
{...register('title')}
/>
{errors.title && (
<FormErrorMessage>{errors.title.message}</FormErrorMessage>
)}
</FormControl>

<FormControl
mt={{ base: '30px', md: '40px' }}
isInvalid={!!errors.timeFrom}
>
<FormLabel>Time From</FormLabel>
<Input {...register('timeFrom')} type="time" />
{errors.timeFrom && (
<FormErrorMessage>{errors.timeFrom.message}</FormErrorMessage>
)}
</FormControl>
<FormControl mt={{ base: '30px', md: '40px' }}>
<FormLabel>Time From</FormLabel>
<InputForm {...register('timeFrom')} type="datetime-local" />
{errors.timeFrom && (
<FormErrorMessage>{errors.timeFrom.message}</FormErrorMessage>
)}
</FormControl>

<FormControl
mt={{ base: '30px', md: '40px' }}
isInvalid={!!errors.timeTo}
>
<FormLabel>Time To</FormLabel>
<Input {...register('timeTo')} type="time" />
{errors.timeTo && (
<FormErrorMessage>{errors.timeTo.message}</FormErrorMessage>
)}
</FormControl>
<FormControl mt={{ base: '30px', md: '40px' }}>
<FormLabel>Time To</FormLabel>
<InputForm {...register('timeTo')} type="datetime-local" />
{errors.timeTo && (
<FormErrorMessage>{errors.timeTo.message}</FormErrorMessage>
)}
</FormControl>

<FormControl
mt={{ base: '30px', md: '40px' }}
isInvalid={!!errors.address}
>
<FormLabel>Address</FormLabel>
<Input
{...register('address')}
type="text"
placeholder="10-10 Shibuya, Tokyo, Japan"
/>
{errors.address && (
<FormErrorMessage>{errors.address.message}</FormErrorMessage>
)}
</FormControl>
<FormControl
mt={{ base: '30px', md: '40px' }}
isInvalid={!!errors.address}
>
<FormLabel>Address</FormLabel>
<InputForm
{...register('address')}
type="text"
placeholder="10-10 Shibuya, Tokyo, Japan"
/>
{errors.address && (
<FormErrorMessage>{errors.address.message}</FormErrorMessage>
)}
</FormControl>

<FormControl isInvalid={!!errors.url} mt={{ base: '30px', md: '40px' }}>
<FormLabel>URL</FormLabel>
<Input
{...register('url')}
type="url"
placeholder="https://www.google.com"
/>
{errors.url && (
<FormErrorMessage>{errors.url.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isInvalid={!!errors.url} mt={{ base: '30px', md: '40px' }}>
<FormLabel>URL</FormLabel>
<InputForm
{...register('url')}
type="url"
placeholder="https://www.google.com"
/>
{errors.url && (
<FormErrorMessage>{errors.url.message}</FormErrorMessage>
)}
</FormControl>

<Text mt={{ base: '30px', md: '40px' }} fontWeight="medium">
Image
</Text>
<SimpleGrid
mt={{ base: '30px', md: '40px' }}
columns={{ base: 2, md: 3 }}
spacing={4}
>
{selectedImages.map((image, index) => (
<Image
key={index}
src={URL.createObjectURL(image)}
alt={`Selected Image ${image.name}`}
objectFit="cover"
width={{ base: '160px', md: '180px' }}
height={{ base: '106px', md: '120px' }}
margin="auto"
onClick={() => removeImage(index)}
/>
))}
</SimpleGrid>
<Text mt={{ base: '30px', md: '40px' }} fontWeight="medium">
Image
</Text>
<SimpleGrid
mt={{ base: '30px', md: '40px' }}
columns={{ base: 2, md: 3 }}
spacing={4}
>
{selectedImages.map((image, index) => (
<Image
key={index}
src={URL.createObjectURL(image)}
alt={`Selected Image ${image.name}`}
objectFit="cover"
width={{ base: '160px', md: '180px' }}
height={{ base: '106px', md: '120px' }}
margin="auto"
onClick={() => removeImage(index)}
/>
))}
</SimpleGrid>

<Box
{...getRootProps()}
textAlign="center"
mt={{ base: '30px', md: '40px' }}
>
<PrimaryButton variant="outline">
<input {...getInputProps()} />
Add Image
</PrimaryButton>
</Box>
<Box
{...getRootProps()}
textAlign="center"
mt={selectedImages.length !== 0 && { base: '30px', md: '40px' }}
>
<PrimaryButton variant="outline">
<input {...getInputProps()} />
Add Image
</PrimaryButton>
</Box>

<FormControl
isInvalid={!!errors.memo}
mt={{ base: '30px', md: '40px' }}
>
<FormLabel>Memo</FormLabel>
<Textarea
{...register('memo')}
name="memo"
placeholder="Type test here..."
/>
{errors.memo && (
<FormErrorMessage>{errors.memo.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isInvalid={!!errors.memo} mt={{ base: '30px', md: '40px' }}>
<FormLabel>Memo</FormLabel>
<TextareaForm
{...register('memo')}
name="memo"
placeholder="Type test here..."
/>
{errors.memo && (
<FormErrorMessage>{errors.memo.message}</FormErrorMessage>
)}
</FormControl>

<FormControl
isInvalid={!!errors.cost}
mt={{ base: '30px', md: '40px' }}
>
<FormLabel>Cost</FormLabel>
<Input {...register('cost')} type="text" placeholder="$200" />
{errors.cost && (
<FormErrorMessage>{errors.cost.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isInvalid={!!errors.cost} mt={{ base: '30px', md: '40px' }}>
<FormLabel>Cost</FormLabel>
<InputForm {...register('cost')} type="text" placeholder="$200" />
{errors.cost && (
<FormErrorMessage>{errors.cost.message}</FormErrorMessage>
)}
</FormControl>

<Flex justifyContent="center" mt={{ base: '30px', md: '40px' }}>
<Button colorScheme="teal" type="submit" margin="auto">
Create Activity
</Button>
</Flex>
</Box>
</Container>
<Flex justifyContent="center" mt={{ base: '30px', md: '40px' }}>
<Button colorScheme="teal" type="submit" margin="auto">
Create Activity
</Button>
</Flex>
</Box>
)
}
2 changes: 1 addition & 1 deletion app/activity/create/components/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export {Form} from "./form"
export {FormActivity} from "./form"
29 changes: 9 additions & 20 deletions app/activity/create/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
'use client'

import {
Box,
Container,
Heading,
useColorModeValue
} from '@chakra-ui/react'
import { Box, Container, Heading, useColorModeValue } from '@chakra-ui/react'
import { Header, Footer } from '@/components/navigation'
import {Form} from "./components"


export default function Create() {
import { FormActivity } from './components'

export default function CreateActivityPage() {
const bg = useColorModeValue('white', 'gray.800')
const color = useColorModeValue('black', 'gray.300')

Expand All @@ -20,17 +13,13 @@ export default function Create() {
<Box as="main" minH="100vh" bg={bg} color={color}>
<Header />
<Container
maxW={{ base: '100%', md: 'container.md' }}
pt={{ base: '20px', md: '30px' }}
pb={{ base: '40px', md: '80px' }}
margin="auto"
pt={{ base: '20px', md: '40px' }}
pb={{ base: '40px', md: '70px' }}
>
<Container>
<Heading as={'h1'} fontSize={{ base: '2xl', md: '4xl' }}>
Create Activity
</Heading>
</Container>
<Form />
<Heading as={'h1'} fontSize={{ base: '2xl', md: '4xl' }}>
Create Activity
</Heading>
<FormActivity />
</Container>
<Footer />
</Box>
Expand Down
8 changes: 4 additions & 4 deletions app/activity/create/components/schema.ts → app/activity/create/schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import * as z from 'zod'
// TODO: refactor zod validation

const createActivitySchema = z.object({
title: z.string().min(1).max(20),
title: z.string().min(1).max(20).optional(),
timeFrom: z.string().optional(),
timeTo: z.string().optional(),
address: z.string().min(0).max(50),
address: z.string().min(0).max(50).optional(),
url: z.union([z.string().url().nullish(), z.literal('')]),
memo: z.string().min(0).max(300),
cost: z.string().min(0).max(15)
memo: z.string().min(0).max(300).optional(),
cost: z.string().min(0).max(15).optional()
})

export type createActivitySchema = z.infer<typeof createActivitySchema>
Expand Down
2 changes: 2 additions & 0 deletions app/components/input/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export { InputSearch } from './input-search'
export {InputForm} from './input-form'
export {TextareaForm} from './textarea-form'
29 changes: 29 additions & 0 deletions app/components/input/input-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import {
Input as ChakraFormInput,
InputProps as ChakraInputProps,
InputGroup,
forwardRef,
useColorModeValue
} from '@chakra-ui/react'

export const InputForm = forwardRef(
(props: ChakraInputProps, ref: React.Ref<HTMLInputElement>) => {
const bgColor = useColorModeValue('white', 'gray.700')
const borderColor = useColorModeValue('gray.300', 'gray.500')
const placeholdercolor = useColorModeValue('gray.400', 'gray.600')

return (
<InputGroup minW={{ base: '100%', md: '23.75rem' }}>
<ChakraFormInput
{...props}
ref={ref}
borderColor={borderColor}
bgColor={bgColor}
_placeholder={{
color: placeholdercolor
}}
/>
</InputGroup>
)
}
)
Loading

0 comments on commit cef4e86

Please sign in to comment.