web/src/components/items/RecipeListItem.tsx

@@ -1,3 +1,6 @@
+import { useNavigate } from "react-router-dom";
+import { EngagementViewRecipe } from "../../services/EngagementService";
+import { isApiError } from "../../types/api/error";
 import type { Recipe, Tag } from "../../types/recipe"
 
 interface RecipeListItemProps {
@@ -26,12 +29,26 @@ function displayTags(tags: Tag[]): string {
 }
 
 export default function RecipeListItem({ recipe }: RecipeListItemProps) {
-  // TODO: Click event
-  return <>
+  const navigate = useNavigate();
+
+  // HANDLERS
+  const clickHandler = async () => {
+    if (!recipe) return;
+
+    // Navigate first, so it feels faster
+    await navigate(`/v2/web/recipe/${recipe.Id}`);
+
+    const result = await EngagementViewRecipe(recipe.Id);
+    if (isApiError(result)) {
+      console.error(result.message);
+    }
+  }
+
+  return (
     <li className="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 duration-150">
-      <p className="text-base md:text-lg hover:text-blue-600 duration-100 cursor-pointer">
+      <h2 onClick={() => void clickHandler()} className="text-base md:text-lg hover:text-blue-600 duration-100 cursor-pointer">
         {recipe.Title}
-      </p>
+      </h2>
       <p className="hidden md:block text-sm text-gray-700 my-1.5">
         Difficulty: <span className="font-semibold">{displayDifficulty(recipe.Difficulty)}</span>
         {" "} | Duration: <span className="font-semibold">{recipe.Duration.Total} min</span>
@@ -52,5 +69,5 @@ export default function RecipeListItem({ recipe }: RecipeListItemProps) {
         </p>
       )}
     </li>
-  </>
+  );
 }

web/src/pages/Home.tsx

@@ -12,7 +12,6 @@ import { GetRecipeOfTheWeek } from "../services/RecipeService";
 import { isApiError, type ApiError } from "../types/api/error";
 import { AuthContext } from "../context/AuthContext";
 import { GetAuthenticatedUserMadeRecipes, GetAuthenticateUserViewedRecipes } from "../services/UserService";
-import { type SearchFilters } from "../types/search";
 
 export default function Home() {
   // Context