Display today's recipe on the home page

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>
   );

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;
 }

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;