refactor: improve favorite api

Author: bvv-1

backend/.env.sample

@@ -1,5 +1,6 @@
 WEB_ORIGIN=http://localhost:5173
 DATABASE_URL=""
+# DATABASE_URL=""
 VITE_SUPABASE_URL=
 VITE_SUPABASE_ANON_KEY=
 VITE_GOO_API_KEY=

backend/src/app.ts

@@ -157,7 +157,7 @@ app.post("/api/recipes/search", SearchController.searchRecipes)
 app.post("/api/recipes/search/some", SearchController.searchSomeRecipes)
 
 app.get("/api/users/favorites", UserController.getFavorites)
-app.post("/api/users/favorites", UserController.addFavorite)
+app.post("/api/users/favorites/:id", UserController.addFavorite)
 app.delete("/api/users/favorites/:id", UserController.deleteFavorite)
 app.get("/api/users", UserController.getUser)
 

backend/src/controllers/RecipeController.ts

@@ -494,7 +494,6 @@ class RecipeController {
   //     //   description: recipeData.description,
   //     //   totalCookingTime: this.convertTotalCookingTimeToMinutes(recipeData.totalTime),
   //     //   materials: recipeData.recipeIngredient,
-  //     //   keywords: this.convertKeywords(recipeData.keywords),
   //     //   sourceUrl: sourceUrl,
   //     //   foodImageUrl: recipeData.image[0],
   //     //   dish: recipeData.recipeCategory,
@@ -522,10 +521,6 @@ class RecipeController {
     )
   }
 
-  private convertKeywords = (keywords: string): string[] => {
-    return keywords.split(",").map((keyword) => keyword.trim())
-  }
-
   private convertTotalCookingTimeToMinutes = (totalTime: string): number => {
     if (!totalTime || totalTime.length < 2) {
       return -1

backend/src/controllers/SearchController.ts

@@ -114,61 +114,6 @@ class SearchController {
       res.status(500).json({ error: "Internal server error" })
     }
   }
-
-  // TODO: type=keywords
-  private searchRecipesWithKeywords = async (req: Request, res: Response): Promise<void> => {
-    try {
-      const { keywords } = req.body
-
-      const result = await elasticSearchClient.search({
-        index: "recipes",
-        body: {
-          query: {
-            bool: {
-              should: [
-                { bool: { should: [{ terms: { title: keywords } }] } },
-                { bool: { should: [{ terms: { description: keywords } }] } },
-              ],
-            },
-          },
-        },
-      })
-
-      const hits = result.hits.hits
-      if (hits.length === 0) {
-        res.status(404).json({ error: "Not found" })
-        return
-      }
-      const recipes = hits.map((hit) => hit._source)
-      res.json(recipes)
-    } catch (error) {
-      console.error(error)
-      res.status(500).json({ error: "Internal server error" })
-    }
-  }
-
-  // TODO: type=query
-  private searchRecipesWithQuery = async (req: Request, res: Response): Promise<void> => {
-    try {
-      const { query } = req.body
-      const result = await elasticSearchClient.search({
-        index: "recipes",
-        body: {
-          query,
-        },
-      })
-
-      const hits = result.hits.hits
-      if (hits.length === 0) {
-        res.status(404).json({ error: "Not found" })
-        return
-      }
-      const recipes = hits.map((hit) => hit._source)
-      res.json(recipes)
-    } catch (error) {
-      res.status(500).json(error)
-    }
-  }
 }
 
 export default new SearchController()

backend/src/controllers/UserController.ts

@@ -64,7 +64,7 @@ class UserController {
 
   addFavorite = async (req: Request, res: Response): Promise<void> => {
     try {
-      const { recipeId } = req.body
+      const recipeId = Number(req.params.id)
       const userFromRequest = await extractUserFromRequest(req)
       if (!userFromRequest) {
         res.status(401).json({ error: "Not authorized" })

frontend/src/components/RecipeCard/RecipeCard.tsx

@@ -12,11 +12,11 @@ type Recipe = components["schemas"]["Recipe"]
 
 interface Props {
   recipe: Recipe
-  favoriteRecipes: Recipe[] | undefined
+  isFavorited: boolean
   toggleFavorite: (recipeId: number) => void
 }
 
-export const RecipeCard = ({ recipe, favoriteRecipes, toggleFavorite }: Props) => {
+export const RecipeCard = ({ recipe, isFavorited, toggleFavorite }: Props) => {
   const { session } = useContext(UserContext)
   const textRef = useRef<HTMLDivElement>(null)
   const [textHeight, setTextHeight] = useState<number>(0)
@@ -28,10 +28,6 @@ export const RecipeCard = ({ recipe, favoriteRecipes, toggleFavorite }: Props) =
   }, [textRef.current])
 
   const materialsConverted = recipe.materials.join("・")
-
-  const isFavorited: boolean =
-    favoriteRecipes !== undefined && favoriteRecipes.some((favoriteRecipe) => favoriteRecipe.id === recipe.id)
-
   const onClickHandler = (recipeId: number, event: React.MouseEvent<HTMLDivElement>) => {
     if (!session?.access_token) return
     // NOTE: LinkとonClickは別メソッド？なので event.stopPropagation() だとうまく行かなかった

frontend/src/pages/Favorite/Favorite.module.css

@@ -1,5 +1,5 @@
 .root {
-  padding: 32px 16px;
+  padding: 16px 16px 80px 16px;
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;

frontend/src/pages/Favorite/Favorite.tsx

@@ -83,10 +83,9 @@ export const Favorite = () => {
   const onClickAddFavorite = useMutation({
     mutationFn: async (recipeId: number) => {
       if (!session?.access_token) return []
-      const response = await fetch(postUserFavoritesApi(), {
+      const response = await fetch(postUserFavoritesApi(recipeId), {
         method: "POST",
         headers: { "Content-Type": "application/json", Authorization: `Bearer ${session?.access_token}` },
-        body: JSON.stringify({ recipeId: recipeId }),
       })
       if (!response.ok) throw new Error("お気に入りの追加に失敗しました")
     },
@@ -183,7 +182,10 @@ export const Favorite = () => {
             <RecipeCard
               key={recipe.id}
               recipe={recipe}
-              favoriteRecipes={favoriteRecipes}
+              isFavorited={
+                favoriteRecipes != null &&
+                favoriteRecipes.some((favorite) => favorite.id.toString() === recipe.id.toString())
+              }
               toggleFavorite={toggleFavorite}
             />
           ))

frontend/src/pages/Result/Result.tsx

@@ -9,7 +9,6 @@ import { BackButton } from "../../components/BackButton"
 import { BorderButton } from "../../components/BorderButton"
 import {
   postSearchRecipesApi,
-  postSearchRecipesKeywordsApi,
   getUserFavoritesApi,
   postUserFavoritesApi,
   deleteUserFavoritesApi,
@@ -44,7 +43,11 @@ export const Result = () => {
     [...searchInfo.ingredients, searchInfo.dish, searchInfo.cookingTime].join(" ")
   )
 
-  const { data: recipes, isLoading: isLoadingRecipes } = useQuery({
+  const {
+    data: recipes,
+    isLoading: isLoadingRecipes,
+    refetch,
+  } = useQuery({
     queryKey: ["recipes"],
     queryFn: async () => {
       const response = await fetch(postSearchRecipesApi(), {
@@ -85,10 +88,9 @@ export const Result = () => {
   const addFavorite = useMutation({
     mutationFn: async (recipeId: number) => {
       if (!session?.access_token) return []
-      const response = await fetch(postUserFavoritesApi(), {
+      const response = await fetch(postUserFavoritesApi(recipeId), {
         method: "POST",
         headers: { "Content-Type": "application/json", Authorization: `Bearer ${session?.access_token}` },
-        body: JSON.stringify({ recipeId: recipeId }),
       })
       if (!response.ok) throw new Error("お気に入りの追加に失敗しました")
     },
@@ -113,39 +115,22 @@ export const Result = () => {
   })
 
   const toggleFavorite = (recipeId: number) => {
-    if (!favoriteRecipes) return
-    if (favoriteRecipes.some((recipe) => recipe.id === recipeId)) {
+    if (isFavorited(recipeId)) {
       deleteFavorite.mutate(recipeId)
     } else {
       addFavorite.mutate(recipeId)
     }
   }
 
-  //----------------------------------------------------------------
-  // フリーワード検索機能
-  //----------------------------------------------------------------
-  const searchRecipesKeywords = useMutation({
-    mutationFn: async () => {
-      const response = await fetch(postSearchRecipesKeywordsApi(), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ keywords: inputContent }),
-      })
-      if (!response.ok) throw new Error("レシピの取得に失敗しました")
-      const recipes: Recipe[] = await response.json()
-      return recipes
-    },
-    onSuccess: (recipes) => {
-      queryClient.setQueryData(["recipes"], recipes)
-    },
-  })
-
-  const onClickSearchRecipesKeywords = () => {
-    searchRecipesKeywords.mutate()
+  const isFavorited = (recipeId: number | string) => {
+    if (!favoriteRecipes) return false
+    return favoriteRecipes.some((favorite) => favorite.id.toString() === recipeId.toString())
   }
 
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputContent(e.target.value)
+  const onClickSearch = () => {
+    searchInfo.ingredients = inputContent.split(" ")
+    localStorage.setItem("ingredients", JSON.stringify(searchInfo.ingredients))
+    refetch()
   }
 
   if (isLoadingRecipes || isLoadingFavoriteRecipes) return <Loading />
@@ -154,8 +139,8 @@ export const Result = () => {
       <div className={styles.header}>
         <BackButton onClick={() => navigate("/questions?reset=true")} />
         <Searchbox
-          onClickHandler={onClickSearchRecipesKeywords}
-          onChange={onChangeHandler}
+          onClickHandler={onClickSearch}
+          onChange={(e) => setInputContent(e.target.value)}
           inputContent={inputContent}
           placeholder=""
         />
@@ -171,20 +156,15 @@ export const Result = () => {
           <div className={styles.cards}>
             {recipes.map((recipe) => (
               <Fragment key={recipe.id}>
-                <RecipeCard recipe={recipe} favoriteRecipes={favoriteRecipes} toggleFavorite={toggleFavorite} />
+                <RecipeCard recipe={recipe} isFavorited={isFavorited(recipe.id)} toggleFavorite={toggleFavorite} />
               </Fragment>
             ))}
           </div>
         </div>
       ) : (
         <div className={styles.emptyResults}>
           <EmptyResults />
-          <BorderButton
-            onClick={() => {
-              navigate("/questions?reset=true")
-            }}
-            disabled={false}
-          >
+          <BorderButton onClick={() => refetch()} disabled={false}>
             <h3>再検索する</h3>
           </BorderButton>
         </div>

frontend/src/utils/apiUtils.ts

@@ -4,16 +4,12 @@ export const postSearchRecipesApi = (): string => {
   return `${API_BASE_URL}/api/recipes/search`
 }
 
-export const postSearchRecipesKeywordsApi = (): string => {
-  return `${API_BASE_URL}/api/recipes/search/keywords`
-}
-
 export const getUserFavoritesApi = (): string => {
   return `${API_BASE_URL}/api/users/favorites`
 }
 
-export const postUserFavoritesApi = (): string => {
-  return `${API_BASE_URL}/api/users/favorites`
+export const postUserFavoritesApi = (id: number): string => {
+  return `${API_BASE_URL}/api/users/favorites/${id}`
 }
 
 export const deleteUserFavoritesApi = (id: number): string => {