fix recipe detail

client/main.css

@@ -9,18 +9,17 @@ body,
   font-weight: 700;
 }
 
-img:before {
+/* img:before {
   content: " ";
   display: block;
   position: absolute;
   height: 100%;
   width: 100%;
-  /* background-image: url(ishere.jpg); */
   background: rgb(200, 200, 200);
   border-top-right-radius: 1.5rem;
   border-top-left-radius: 1.5rem;
   background-image: url("/img/image.svg");
   background-size: 20%;
   background-repeat: no-repeat;
   background-position: 50%;
-}
+} */

constants/defaultBGImgPath.ts

@@ -0,0 +1 @@
+export const defaultBGImgPath = "/img/image.svg";

imports/api/recipes/recipes.publications.ts

@@ -1,4 +1,5 @@
 import { Meteor } from "meteor/meteor";
+import { Mongo } from "meteor/mongo";
 import { RecipesCollection } from "./recipes";
 
 Meteor.publish("recipes", function publishRecipes() {
@@ -8,3 +9,18 @@ Meteor.publish("recipes", function publishRecipes() {
 
   return RecipesCollection.find();
 });
+
+Meteor.publish(
+  "recipeDetail",
+  function publishRecipeDetail(_id: Mongo.ObjectID) {
+    if (!this.userId) {
+      throw new Meteor.Error("Not authorized.");
+    }
+
+    console.log(
+      "🚀 ~ file: recipes.publications.ts:21 ~ publishRecipeDetail ~ _id:",
+      _id
+    );
+    return RecipesCollection.find({ _id });
+  }
+);

imports/ui/hooks/selected-recipe.hook.tsx

@@ -5,7 +5,8 @@ import { RecipesCollection } from "/imports/api/recipes/recipes";
 
 const SelectedRecipeHook = (id?: string) => {
   return useTracker(() => {
-    const handler = Meteor.subscribe("recipes");
+    const _id = new Mongo.ObjectID(id);
+    const handler = Meteor.subscribe("recipeDetail", _id);
 
     const data = { recipe: null, loading: false };
 
@@ -20,14 +21,21 @@ const SelectedRecipeHook = (id?: string) => {
       };
     }
 
-    const objectId = new Mongo.ObjectID(id);
-    const recipe = RecipesCollection.findOne({ _id: objectId });
+    try {
+      const recipe = RecipesCollection.findOne({ _id });
 
-    if (!recipe) {
-      return data;
-    }
+      if (!recipe) {
+        return data;
+      }
 
-    return { recipe, loading: false };
+      return { recipe, loading: false };
+    } catch (err) {
+      console.log(err);
+      return {
+        ...data,
+        loading: false,
+      };
+    }
   });
 };
 

imports/ui/molecules/recipe-list-item.tsx

@@ -6,6 +6,7 @@ import Label from "/imports/ui/atoms/label";
 import { Recipe } from "/imports/api/recipes/recipes";
 import AddToListGroup from "./add-to-list-group";
 import { ClockIcon, UserIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import { defaultBGImgPath } from "/constants/defaultBGImgPath";
 
 const RecipeListItem = ({
   className,
@@ -29,13 +30,18 @@ const RecipeListItem = ({
   onRemoveClick?: (recipe: Recipe) => void;
 }) => {
   const [currentServings, setCurrentServings] = useState(servings);
+  const [isDefaultImg, setIsDefaultImg] = useState(false);
 
   const setServings = (servings: number) => {
     const nextServings = currentServings <= 1 ? 1 : servings;
 
     return setCurrentServings(nextServings);
   };
 
+  const onImgError = () => {
+    setIsDefaultImg(true);
+  };
+
   useEffect(() => {
     setCurrentServings(servings);
   }, [servings]);
@@ -65,10 +71,17 @@ const RecipeListItem = ({
             <XMarkIcon className="w-10 h-10" />
           </div>
         )}
-        <img
-          className="rounded-t-3xl object-cover h-full w-full"
-          src={recipe.image}
-        />
+        {!isDefaultImg ? (
+          <img
+            className="rounded-t-3xl object-cover h-full w-full"
+            src={recipe.image}
+            onError={onImgError}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full bg-slate-300 rounded-t-3xl">
+            <img src={defaultBGImgPath} width={50} />
+          </div>
+        )}
         <div className="flex flex-col absolute bottom-2 left-2 text-white font-bold">
           <div className="flex">
             {recipe.labels.map((value, idx) => {

imports/ui/pages/recipe-detail.tsx

@@ -1,13 +1,16 @@
-import React, { Fragment, useState } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import Label from "../atoms/label";
 import TextToggle from "../atoms/TextToggle";
 import SelectedRecipeHook from "../hooks/selected-recipe.hook";
+import { defaultBGImgPath } from "/constants/defaultBGImgPath";
 import { ButtonGroupState } from "/enums/button-group-state";
 
 const RecipeDetail = () => {
   const { id } = useParams();
   const { recipe, loading } = SelectedRecipeHook(id);
+  const [isImgDefault, setIsImgDefault] = useState(false);
+
   const [selectedView, setSelectedView] = useState(
     ButtonGroupState.INGREDIENTS
   );
@@ -16,6 +19,10 @@ const RecipeDetail = () => {
     return null;
   }
 
+  const onImgError = () => {
+    setIsImgDefault(true);
+  };
+
   const getIngredients = () => {
     let availableDepartmentSet = new Set<string>();
 
@@ -29,14 +36,24 @@ const RecipeDetail = () => {
   return (
     <div className="mx-auto flex max-w-4xl px-4 sm:px-6 md:px-8">
       <div className="flex flex-col py-4 px-2 my-4 w-full bg-white rounded-md">
-        <div className="flex">
-          <div className="w-2/5 mr-4">
+        <div className="flex flex-col md:flex-row">
+          <div className="pb-4 md:pb-0 md:w-2/5 md:mr-4 h-52 overflow-hidden relative backdrop-filter">
             {/* eslint-disable-next-line */}
-            <img
-              src={recipe.image}
-              alt={recipe.title}
-              className="w-full object-cover rounded"
-            />
+            {/* <object data={recipe.image} type="image/jpeg">
+              <img src="/img/image.svg" alt="Name" />
+            </object> */}
+            {!isImgDefault ? (
+              <img
+                src={recipe.image}
+                alt={recipe.title}
+                className="h-full object-cover rounded"
+                onError={onImgError}
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full bg-slate-300 rounded-3xl">
+                <img src={defaultBGImgPath} width={50} />
+              </div>
+            )}
           </div>
 
           <div>

server/main.ts

@@ -3,7 +3,7 @@ import { Meteor } from "meteor/meteor";
 import "/server/migrations";
 
 import "/imports/api/users";
-import "/imports/api/users";
+import "/imports/api/recipes";
 
 Meteor.startup(() => {
   Migrations.migrateTo("latest");