From cef4e86c35d632254153f4043316468011a82701 Mon Sep 17 00:00:00 2001
From: Sachi Goto <70562492+SachiGoto@users.noreply.github.com>
Date: Tue, 12 Dec 2023 18:13:54 +0900
Subject: [PATCH] updated based on feedback

---
 app/activity/create/components/form.tsx       | 238 ++++++++----------
 app/activity/create/components/index.ts       |   2 +-
 app/activity/create/page.tsx                  |  29 +--
 .../create/{components => }/schema.ts         |   8 +-
 app/components/input/index.ts                 |   2 +
 app/components/input/input-form.tsx           |  29 +++
 app/components/input/textarea-form.tsx        |  29 +++
 7 files changed, 183 insertions(+), 154 deletions(-)
 rename app/activity/create/{components => }/schema.ts (69%)
 create mode 100644 app/components/input/input-form.tsx
 create mode 100644 app/components/input/textarea-form.tsx

diff --git a/app/activity/create/components/form.tsx b/app/activity/create/components/form.tsx
index 5e98ad0..e1949b8 100644
--- a/app/activity/create/components/form.tsx
+++ b/app/activity/create/components/form.tsx
@@ -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])
@@ -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>
   )
 }
diff --git a/app/activity/create/components/index.ts b/app/activity/create/components/index.ts
index a5da7d5..3f2293a 100644
--- a/app/activity/create/components/index.ts
+++ b/app/activity/create/components/index.ts
@@ -1 +1 @@
-export {Form} from "./form"
\ No newline at end of file
+export {FormActivity} from "./form"
\ No newline at end of file
diff --git a/app/activity/create/page.tsx b/app/activity/create/page.tsx
index 6c89bc9..f156ebe 100644
--- a/app/activity/create/page.tsx
+++ b/app/activity/create/page.tsx
@@ -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')
 
@@ -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>
diff --git a/app/activity/create/components/schema.ts b/app/activity/create/schema.ts
similarity index 69%
rename from app/activity/create/components/schema.ts
rename to app/activity/create/schema.ts
index b4a352a..694dbb8 100644
--- a/app/activity/create/components/schema.ts
+++ b/app/activity/create/schema.ts
@@ -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>
diff --git a/app/components/input/index.ts b/app/components/input/index.ts
index da05630..22d5ca3 100644
--- a/app/components/input/index.ts
+++ b/app/components/input/index.ts
@@ -1 +1,3 @@
 export { InputSearch } from './input-search'
+export {InputForm} from './input-form'  
+export {TextareaForm} from './textarea-form'
\ No newline at end of file
diff --git a/app/components/input/input-form.tsx b/app/components/input/input-form.tsx
new file mode 100644
index 0000000..acd563e
--- /dev/null
+++ b/app/components/input/input-form.tsx
@@ -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>
+    )
+  }
+)
diff --git a/app/components/input/textarea-form.tsx b/app/components/input/textarea-form.tsx
new file mode 100644
index 0000000..994d4cc
--- /dev/null
+++ b/app/components/input/textarea-form.tsx
@@ -0,0 +1,29 @@
+import {
+  Textarea as ChakraFormTextarea,
+  TextareaProps as ChakraTextareaProps,
+  InputGroup,
+  forwardRef,
+  useColorModeValue
+} from '@chakra-ui/react'
+
+export const TextareaForm = forwardRef(
+  (props: ChakraTextareaProps, 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' }}>
+        <ChakraFormTextarea
+          {...props}
+          ref={ref}
+          borderColor={borderColor}
+          bgColor={bgColor}
+          _placeholder={{
+            color: placeholdercolor
+          }}
+        />
+      </InputGroup>
+    )
+  }
+)