destructure return from getSketch for legibility and revert title to come from getSketch

Author: clairep94

src/api/OpenProcessing.ts

@@ -95,7 +95,6 @@ export const getSketch = memoize(
     }
 
     // check for sketch data in Open Processing API
-    console.log("CALLING API TEST FOR:", id);
   const response = await fetch(`${openProcessingEndpoint}sketch/${id}`);
     if (!response.ok) {
       //log error instead of throwing error to not cache result in memoize

src/layouts/SketchLayout.astro

@@ -18,17 +18,14 @@ import { ScalingIframe } from "@components/ScalingIframe";
 interface Props {
   sketchId: string;
   authorName: string;
-  title: string;
 }
 
-const { sketchId, authorName, title } = Astro.props;
-const sketchInfo = await getSketch(sketchId);
+const { sketchId, authorName } = Astro.props;
+const { title, createdOn, instructions } = await getSketch(sketchId);
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
-const dateString = new Date(sketchInfo.createdOn).toLocaleDateString(
-  currentLocale,
-  {
+const dateString = new Date(createdOn).toLocaleDateString(currentLocale, {
     year: "numeric",
     month: "long",
     day: "numeric",
@@ -37,12 +34,12 @@ const dateString = new Date(sketchInfo.createdOn).toLocaleDateString(
 
 setJumpToState(null);
 const moreSketches = await getRandomCurationSketches(4);
-const featuredImageURL = makeThumbnailUrl(sketchInfo.visualID);
+const featuredImageURL = makeThumbnailUrl(sketchId);
 
 // NOTE: Commenting out the call to getSketchSize to minimise calls to OP due to rate limiting
 // width and height should be moved to data fetched by either getCuratedSketches or getSketch to minimise calls.
 
-// let { width, height } = await getSketchSize(sketchInfo.visualID);
+// let { width, height } = await getSketchSize(sketchId);
 // let heightOverWidth = 1 / 1.5;
 // if (width && height) {
 //   // Account for OP header bar
@@ -61,7 +58,7 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
   title={title}
   locale={currentLocale}
   featuredImageSrc={featuredImageURL}
-  description={sketchInfo.instructions}
+  description={instructions}
 />
 
 <BaseLayout
@@ -83,14 +80,14 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
         width ? (
           <ScalingIframe
             client:load
-            src={makeSketchEmbedUrl(sketchInfo.visualID)}
+            src={makeSketchEmbedUrl(sketchId)}
             width={width}
             height={height}
             title={iframeTitle}
           />
         ) : (
           <iframe
-            src={makeSketchEmbedUrl(sketchInfo.visualID)}
+            src={makeSketchEmbedUrl(sketchId)}
             width="100%"
             height="100%"
             style={{
@@ -108,7 +105,7 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
     <div class="py-md grid gap-y-sm md:gap-y-md">
       <LinkButton
         variant="code"
-        url={`${makeSketchLinkUrl(sketchInfo.visualID)}/#code`}
+        url={`${makeSketchLinkUrl(sketchId)}/#code`}
         class="min-w-[184px] lg:min-w-[220px]">{t("Show Code")}</LinkButton
       >
       <LinkButton
@@ -118,16 +115,11 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
       >
     </div>
 
-    {
-      sketchInfo.instructions && (
-        <p class="text-md my-sm md:my-lg">{sketchInfo.instructions}</p>
-      )
-    }
+    {instructions && <p class="text-md my-sm md:my-lg">{instructions}</p>}
 
     <p class="text-xs md:text-base mb-3xl">
-      This <a
-        class="text-type-magenta"
-        href={makeSketchLinkUrl(sketchInfo.visualID)}>sketch</a
+      This <a class="text-type-magenta" href={makeSketchLinkUrl(sketchId)}
+        >sketch</a
       > is ported from the <a
         class="text-type-magenta"
         href="https://openprocessing.org">OpenProcessing</a

src/pages/[locale]/sketches/[...slug].astro

@@ -17,7 +17,7 @@ export async function getStaticPaths() {
   return entries.flat();
 }
 const { slug } = Astro.params;
-const { authorName, title } = Astro.props;
+const { authorName } = Astro.props;
 ---
 
-<SketchLayout sketchId={slug} authorName={authorName} title={title} />
+<SketchLayout sketchId={slug} authorName={authorName} />

src/pages/sketches/[...slug].astro

@@ -6,12 +6,12 @@ export async function getStaticPaths() {
   const sketches = await getCurationSketches();
   return sketches.map((sketch) => ({
     params: { slug: sketch.visualID },
-    props: { authorName: sketch.fullname, title: sketch.title },
+    props: { authorName: sketch.fullname },
   }));
 }
 
 const { slug } = Astro.params;
-const { authorName, title } = Astro.props;
+const { authorName } = Astro.props;
 ---
 
-<SketchLayout sketchId={slug} authorName={authorName} title={title} />
+<SketchLayout sketchId={slug} authorName={authorName} />