feat: 登録処理に商品画像に関する処理を追加

ricora · Nov 17, 2024 · b665517 · b665517
1 parent 0e396fe
commit b665517
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 2 deletions.
diff --git a/app/components/organisms/register/ProductCard.tsx b/app/components/organisms/register/ProductCard.tsx
@@ -13,12 +13,21 @@ export const ProductCard: FC<Props> = memo((props) => {
   const { product, clickDelete, clickChange } = props
 
   return (
-    <Box w="300px" h="250px" bg={"white"} borderRadius="10px" shadow="md" p={4}>
+    <Box
+      w="full"
+      maxW="300px"
+      h="fit-content"
+      bg={"white"}
+      borderRadius="10px"
+      shadow="md"
+      p={4}
+    >
       <h1>ID：{product.product_id}</h1>
       <Stack textAlign={"center"}>
         <Text>{product.product_name}</Text>
         <Text>価格：{product.price}</Text>
         <Text>在庫：{product.stock}</Text>
+        <img src={product.image} alt={`${product.product_name}の商品画像`} />
         <Button onClick={() => clickDelete(product)} colorScheme="red">
           削除
         </Button>
@@ -38,6 +47,7 @@ ProductCard.propTypes = {
     product_name: PropTypes.string.isRequired,
     price: PropTypes.number.isRequired,
     stock: PropTypes.number.isRequired,
+    image: PropTypes.string.isRequired,
   }).isRequired,
   clickDelete: PropTypes.func.isRequired,
   clickChange: PropTypes.func.isRequired,

diff --git a/app/crud/crud_products.ts b/app/crud/crud_products.ts
@@ -8,12 +8,14 @@ export async function createProduct(data: {
   product_name: string
   price: number
   stock: number
+  image: string
 }) {
   return await prisma.products.create({
     data: {
       product_name: data.product_name,
       price: data.price,
       stock: data.stock,
+      image: data.image,
     },
   })
 }

diff --git a/app/routes/register.tsx b/app/routes/register.tsx
@@ -72,6 +72,7 @@ export default function Register() {
       setName("")
       setPrice("")
       setStock("")
+      setImage("")
       setLoading(false)
       showMessage({ title: "登録完了", status: "success" })
     }
@@ -165,6 +166,15 @@ export default function Register() {
     }
   }
 
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (changeProduct) {
+      setChangeProduct({
+        ...changeProduct,
+        image: e.target.value,
+      })
+    }
+  }
+
   return (
     <div>
       <Button
@@ -361,6 +371,19 @@ export default function Register() {
                   onChange={handleStockChange}
                 />
               </FormControl>
+              <FormControl>
+                <FormLabel>商品画像</FormLabel>
+                <Input
+                  type="url"
+                  name="image"
+                  value={changeProduct?.image}
+                  onChange={handleImageChange}
+                  required
+                />
+                <FormHelperText>
+                  商品画像は画像URLで入力してください
+                </FormHelperText>
+              </FormControl>
             </Stack>
           </ModalBody>
           <ModalFooter gap={4}>
@@ -409,6 +432,7 @@ export const action: ActionFunction = async ({
     const product_name = formData.get("product_name")
     const price = Number(formData.get("price"))
     const stock = Number(formData.get("stock"))
+    const image = formData.get("image")
 
     if (typeof product_name === "string") {
       const isExist = await existProduct(product_name)
@@ -422,11 +446,18 @@ export const action: ActionFunction = async ({
       }
     }
 
-    if (typeof product_name === "string" && !isNaN(price)) {
+    const isValidInput =
+      typeof product_name === "string" &&
+      !isNaN(price) &&
+      !isNaN(stock) &&
+      typeof image === "string" &&
+      URL.canParse(image)
+    if (isValidInput) {
       await createProduct({
         product_name,
         price,
         stock,
+        image,
       })
 
       return json({ success: true, method: request.method })

diff --git a/app/type/typeproduct.ts b/app/type/typeproduct.ts
@@ -3,4 +3,5 @@ export type TypeProduct = {
   product_name: string
   price: number
   stock: number
+  image: string
 }