From 32c8e4c96fb93bf4aa5f83ce3f92735d57b909e9 Mon Sep 17 00:00:00 2001
From: Alex Whitehead-Smith <alex.me.smith@gmail.com>
Date: Wed, 20 Nov 2024 16:36:18 +0000
Subject: [PATCH] Display today's recipe on the home page

---
 frontend/src/components/Home/Home.jsx         |  6 ++--
 frontend/src/components/Home/loader.js        | 22 +++++--------
 .../RecipeSummaryCard/RecipeSummaryCard.jsx   | 19 ------------
 .../TodaySummaryCard/TodaySummaryCard.jsx     | 31 +++++++++++++++++++
 4 files changed, 41 insertions(+), 37 deletions(-)
 delete mode 100644 frontend/src/components/RecipeSummaryCard/RecipeSummaryCard.jsx
 create mode 100644 frontend/src/components/TodaySummaryCard/TodaySummaryCard.jsx

diff --git a/frontend/src/components/Home/Home.jsx b/frontend/src/components/Home/Home.jsx
index 826429e..d08d9f7 100644
--- a/frontend/src/components/Home/Home.jsx
+++ b/frontend/src/components/Home/Home.jsx
@@ -2,10 +2,10 @@ import { PageLayout, Heading } from "@primer/react";
 import { useLoaderData } from "react-router";
 
 import TopNav from "../TopNav/TopNav";
-import RecipeSummaryCard from "../RecipeSummaryCard/RecipeSummaryCard";
+import TodaySummaryCard from "../TodaySummaryCard/TodaySummaryCard";
 
 function Home() {
-  const todaysRecipe = useLoaderData();
+  const todaysPlan = useLoaderData();
 
   return (
     <PageLayout padding={"none"} containerWidth="fullg">
@@ -14,7 +14,7 @@ function Home() {
         <Heading as={"h1"} sx={{ mb: 2 }}>
           Recipe Manager
         </Heading>
-        <RecipeSummaryCard recipe={todaysRecipe} />
+        <TodaySummaryCard plan={todaysPlan} />
       </PageLayout.Content>
     </PageLayout>
   );
diff --git a/frontend/src/components/Home/loader.js b/frontend/src/components/Home/loader.js
index 2f72f38..b52df67 100644
--- a/frontend/src/components/Home/loader.js
+++ b/frontend/src/components/Home/loader.js
@@ -1,16 +1,8 @@
-export default function loader() {
-  return {
-    id: "d8258fc3-db04-490f-9961-1624834c880b",
-    name: "All-in-one roasted tomato & bay orzo",
-    source: {
-      type: "book",
-      title: "The Green Roasting Tin",
-      page: "28",
-    },
-    ingredients: ["cherry tomatoes", "orzo", "basil"],
-    tags: [],
-    difficulty: "easy",
-    length: "over_60",
-    category: "vegan",
-  };
+import { toIsoDate } from "../../services/date";
+import { apiClient } from "../../services/apiClient";
+
+export default async function loader() {
+  const today = toIsoDate(new Date());
+  const plan = await apiClient.getPlan();
+  return today in plan ? plan[today] : null;
 }
diff --git a/frontend/src/components/RecipeSummaryCard/RecipeSummaryCard.jsx b/frontend/src/components/RecipeSummaryCard/RecipeSummaryCard.jsx
deleted file mode 100644
index dae9074..0000000
--- a/frontend/src/components/RecipeSummaryCard/RecipeSummaryCard.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Heading } from "@primer/react";
-import { Link } from "react-router-dom";
-import BorderBox from "../BorderBox/BorderBox";
-import Source from "../Source/Source";
-
-function RecipeSummaryCard({ recipe }) {
-  return (
-    <BorderBox>
-      <Heading as="h3" variant="small">
-        Today's recipe:
-      </Heading>
-      <Link to={`/recipes/${recipe.id}`}>{recipe.name}</Link>
-      <br />
-      <Source source={recipe.source} />
-    </BorderBox>
-  );
-}
-
-export default RecipeSummaryCard;
diff --git a/frontend/src/components/TodaySummaryCard/TodaySummaryCard.jsx b/frontend/src/components/TodaySummaryCard/TodaySummaryCard.jsx
new file mode 100644
index 0000000..b2547a9
--- /dev/null
+++ b/frontend/src/components/TodaySummaryCard/TodaySummaryCard.jsx
@@ -0,0 +1,31 @@
+import { Heading } from "@primer/react";
+import { Link } from "react-router-dom";
+import BorderBox from "../BorderBox/BorderBox";
+import Source from "../Source/Source";
+
+function TodaySummaryCard({ plan }) {
+  const link =
+    plan && plan.recipe && plan.recipe.id && plan.recipe.name ? (
+      <Link to={`/recipes/${plan.recipe.id}`}>{plan.recipe.name}</Link>
+    ) : null;
+  const source =
+    plan && plan.recipe && plan.recipe.source ? (
+      <Source source={plan.recipe.source} />
+    ) : null;
+  const notes =
+    plan && plan.notes
+      ? `${plan.recipe && plan.recipe.name ? "Notes: " : ""}${plan.notes}`
+      : null;
+  return (
+    <BorderBox>
+      <Heading as="h3" variant="small">
+        {plan ? "Today's recipe:" : "Nothing planned for today"}
+      </Heading>
+      {link}
+      {source}
+      {notes}
+    </BorderBox>
+  );
+}
+
+export default TodaySummaryCard;