From 11ebfe56a27ead098d8b9e076f741237b45bfe73 Mon Sep 17 00:00:00 2001
From: rarandeyo <rarandeyo@gmail.com>
Date: Tue, 17 Sep 2024 18:07:00 +0900
Subject: [PATCH 1/2] chore : add error messege when no food in image

---
 .../src/routes/_app/upload/.image-picker.tsx  | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/routes/_app/upload/.image-picker.tsx b/apps/frontend/src/routes/_app/upload/.image-picker.tsx
index f040833..45dd42e 100644
--- a/apps/frontend/src/routes/_app/upload/.image-picker.tsx
+++ b/apps/frontend/src/routes/_app/upload/.image-picker.tsx
@@ -1,4 +1,4 @@
-import { IconX } from '@tabler/icons-react'
+import { IconAlertCircle, IconX } from '@tabler/icons-react'
 import { type Dispatch, type FC, type SetStateAction, useMemo, useState } from 'react'
 import { FileInput } from '../../../components/common/FileInput'
 import { apiClient } from '../../../lib/apiClient'
@@ -17,6 +17,7 @@ export const ImagePicker: FC<ImagePickerProps> = ({
   setSelectedFoods,
 }) => {
   const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<boolean>(false)
   const fileUrls = useMemo(
     () => foodImages.map((image) => URL.createObjectURL(image.file)),
     [foodImages],
@@ -24,29 +25,46 @@ export const ImagePicker: FC<ImagePickerProps> = ({
 
   const uploadFiles = async (files: File[]) => {
     setIsLoading(true)
-    const postImage = (file: File) => apiClient.upload.$post({ form: { file } })
+    setError(false)
+
+    const newFoodImages = await processNewFiles(files, foodImages)
+    const hasError = newFoodImages.some((image) => image.foods.length === 0)
+    updateImagesAndFoods(newFoodImages, setFoodImages, setSelectedFoods)
+    if (hasError) {
+      setError(true)
+    }
+
+    setIsLoading(false)
+  }
 
+  const processNewFiles = async (files: File[], foodImages: FoodImage[]): Promise<FoodImage[]> => {
+    const postImage = (file: File) => apiClient.upload.$post({ form: { file } })
     const currentFiles = foodImages.map((image) => image.file)
     const newFiles = files.filter((file) => !currentFiles.includes(file))
 
-    const newFoodImages = await Promise.all(
+    const results = await Promise.all(
       newFiles.map(async (file) => {
         const res = await postImage(file)
+
         const data = await res.json()
-        return {
-          file,
-          foods: 'foods' in data ? data.foods : [],
-        }
+
+        return { file, foods: 'foods' in data ? data.foods : [] }
       }),
     )
 
+    return results
+  }
+
+  const updateImagesAndFoods = (
+    newFoodImages: FoodImage[],
+    setFoodImages: Dispatch<SetStateAction<FoodImage[]>>,
+    setSelectedFoods: Dispatch<SetStateAction<string[]>>,
+  ) => {
     setFoodImages((prev) => [...prev, ...newFoodImages])
     setSelectedFoods((prev) => [
       ...prev,
       ...newFoodImages.flatMap((image) => image.foods).filter((food) => !prev.includes(food)),
     ])
-
-    setIsLoading(false)
   }
 
   const handleFileRemove = (index: number) => {
@@ -56,6 +74,12 @@ export const ImagePicker: FC<ImagePickerProps> = ({
   return (
     <div className="flex flex-col gap-y-4">
       <FileInput onChange={uploadFiles} isLoading={isLoading} />
+      {error && (
+        <div className="flex gap-x-2">
+          <IconAlertCircle size={25} className="text-red-400" />
+          <p>画像から食材が見つかりませんでした</p>
+        </div>
+      )}
       <div className="scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-gray-300 scrollbar-track-transparent flex gap-x-2 overflow-x-scroll rounded-md">
         {fileUrls.map((url, i) => (
           <div

From 1250d76f4326fed7745161ffe0fefcbc4195eb0a Mon Sep 17 00:00:00 2001
From: rarandeyo <rarandeyo@gmail.com>
Date: Tue, 17 Sep 2024 23:11:22 +0900
Subject: [PATCH 2/2] chore: useState change to UseMemo

---
 .../src/routes/_app/upload/.image-picker.tsx     | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/routes/_app/upload/.image-picker.tsx b/apps/frontend/src/routes/_app/upload/.image-picker.tsx
index 45dd42e..d40e228 100644
--- a/apps/frontend/src/routes/_app/upload/.image-picker.tsx
+++ b/apps/frontend/src/routes/_app/upload/.image-picker.tsx
@@ -17,23 +17,21 @@ export const ImagePicker: FC<ImagePickerProps> = ({
   setSelectedFoods,
 }) => {
   const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<boolean>(false)
+
   const fileUrls = useMemo(
     () => foodImages.map((image) => URL.createObjectURL(image.file)),
     [foodImages],
   )
 
+  const noFoodsError = useMemo(() => {
+    const lastImage = foodImages[foodImages.length - 1]
+    return foodImages.length > 0 && lastImage && lastImage.foods.length === 0
+  }, [foodImages])
+
   const uploadFiles = async (files: File[]) => {
     setIsLoading(true)
-    setError(false)
-
     const newFoodImages = await processNewFiles(files, foodImages)
-    const hasError = newFoodImages.some((image) => image.foods.length === 0)
     updateImagesAndFoods(newFoodImages, setFoodImages, setSelectedFoods)
-    if (hasError) {
-      setError(true)
-    }
-
     setIsLoading(false)
   }
 
@@ -74,7 +72,7 @@ export const ImagePicker: FC<ImagePickerProps> = ({
   return (
     <div className="flex flex-col gap-y-4">
       <FileInput onChange={uploadFiles} isLoading={isLoading} />
-      {error && (
+      {noFoodsError && (
         <div className="flex gap-x-2">
           <IconAlertCircle size={25} className="text-red-400" />
           <p>画像から食材が見つかりませんでした</p>