adds wrapper to RecipeViewer to display placeholder if recipe isn't l…

…oaded

src/App.tsx

@@ -1,5 +1,5 @@
 import { FileLoader } from "./components/FileLoader/FileLoader";
-import { RecipeViewer } from "./components/RecipeViewer/RecipeViewer";
+import { RecipeViewerWrapper } from "./components/RecipeViewerWrapper/RecipeViewerWrapper";
 // import { TargetScaleSetter } from "./components/TargetScaleSetter/TargetScaleSetter";
 import { ScalerWrapper } from "./context/ScalerContext";
 import "@mantine/core/styles.css";
@@ -13,8 +13,8 @@ const App = () => {
           <h2>Bakers Mode</h2>
           <FileLoader />
         </header>
-        <main className="max-w-3xl">
-          <RecipeViewer />
+        <main className="max-w-3xl p-2">
+          <RecipeViewerWrapper />
         </main>
       </ScalerWrapper>
     </div>

src/components/RecipeViewer/RecipeViewer.tsx

@@ -4,38 +4,45 @@ import { RecipeStepDisplay } from "../RecipeStepDisplay/RecipeStepDisplay";
 import { TargetScaleSetter } from "../TargetScaleSetter/TargetScaleSetter";
 
 export const RecipeViewer = () => {
-  const { scaledRecipe, ingredientList } = useContext(
+  const { scaledRecipe, ingredientList, isRecipeLoaded } = useContext(
     ScalerContext
   ) as ScalerContextType;
 
   const stepCount = scaledRecipe.steps.length;
-  return (
-    <section className="p-4 flex flex-col gap-4">
-      <h1 className=" text-xl font-bold focus">{scaledRecipe.title}</h1>
-      <p>{scaledRecipe.description}</p>
-      <TargetScaleSetter />
-      <h2>Steps</h2>
+  if (isRecipeLoaded) {
+    return (
+      <section className="p-4 flex flex-col gap-4">
+        <h1 className=" text-xl font-bold focus">{scaledRecipe.title}</h1>
+        <p>{scaledRecipe.description}</p>
+        <TargetScaleSetter />
+        <h2>Steps</h2>
 
-      <ol className="flex flex-col gap-3">
-        {scaledRecipe.steps.map((step, index) => {
-          return (
-            <li tabIndex={0} className="focus:outline-8  focus:outline-red-600">
-              <RecipeStepDisplay
-                stepData={step}
-                ingredientList={ingredientList}
-                stepNumber={index + 1}
-                totalSteps={stepCount}
-              />
-            </li>
-          );
-        })}
-      </ol>
-      <h2>Cooking Notes</h2>
-      <ul>
-        {scaledRecipe.cookingNotes.map((item) => {
-          return <li>{item}</li>;
-        })}
-      </ul>
-    </section>
-  );
+        <ol className="flex flex-col gap-3">
+          {scaledRecipe.steps.map((step, index) => {
+            return (
+              <li
+                tabIndex={0}
+                className="focus:outline-8  focus:outline-red-600"
+              >
+                <RecipeStepDisplay
+                  stepData={step}
+                  ingredientList={ingredientList}
+                  stepNumber={index + 1}
+                  totalSteps={stepCount}
+                />
+              </li>
+            );
+          })}
+        </ol>
+        <h2>Cooking Notes</h2>
+        <ul>
+          {scaledRecipe.cookingNotes.map((item) => {
+            return <li>{item}</li>;
+          })}
+        </ul>
+      </section>
+    );
+  } else {
+    return <section>Load a recipe</section>;
+  }
 };

src/components/RecipeViewerWrapper/RecipeViewerWrapper.tsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ScalerContext, ScalerContextType } from "../../context/ScalerContext";
+import { RecipeViewer } from "../RecipeViewer/RecipeViewer";
+// RecipeViewerWrapper: a component that displays the recipe viewer if a recipe is loaded. If not it displays placeholder element
+export const RecipeViewerWrapper = () => {
+  const { isRecipeLoaded } = useContext(ScalerContext) as ScalerContextType;
+  return isRecipeLoaded ? <RecipeViewer /> : <div>Recipe not loaded?</div>;
+};

src/index.tsx

@@ -10,7 +10,6 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <MantineProvider>
-      {" "}
       <App />
     </MantineProvider>
   </React.StrictMode>