diff --git a/src/api/OpenProcessing.ts b/src/api/OpenProcessing.ts index c32bc25874..adb842b669 100644 --- a/src/api/OpenProcessing.ts +++ b/src/api/OpenProcessing.ts @@ -23,6 +23,9 @@ export type OpenProcessingCurationResponse = Array<{ title: string; /** Description of sketch */ description: string; + instructions: string; + mode: string; + createdOn: string; userID: string; submittedOn: string; /** Author's name */ @@ -36,16 +39,19 @@ export type OpenProcessingCurationResponse = Array<{ * @param limit max number of sketches to return * @returns sketches */ -export const getCurationSketches = async ( +export const getCurationSketches = memoize(async ( limit?: number, ): Promise => { const limitParam = limit ? `limit=${limit}` : ""; const response = await fetch( `${openProcessingEndpoint}curation/${curationId}/sketches?${limitParam}`, ); + if(!response.ok){ //log error instead of throwing error to not cache result in memoize + console.error('getCurationSketches', response.status, response.statusText) + } const payload = await response.json(); return payload as OpenProcessingCurationResponse; -}; +}); /** * API Response from a call to the Sketch endpoint @@ -69,19 +75,40 @@ export type OpenProcessingSketchResponse = { /** * Get info about a specific sketch from the OpenProcessing API + * First checks if the sketch is in the memoized curated sketches and returns the data if so, + * Otherwise calls OpenProcessing API for this specific sketch * * https://documenter.getpostman.com/view/16936458/2s9YC1Xa6X#7cd344f6-6e87-426a-969b-2b4a79701dd1 * @param id * @returns */ -export const getSketch = memoize(async ( - id: string, -): Promise => { +export const getSketch = memoize( + async (id: string): Promise => { + // check for memoized sketch in curation sketches + const curationSketches = await getCurationSketches(); + const memoizedSketch = curationSketches.find((el) => el.visualID === id); + if (memoizedSketch) { + return { + ...memoizedSketch, + license: "", + } as OpenProcessingSketchResponse; + } + + // check for sketch data in Open Processing API const response = await fetch(`${openProcessingEndpoint}sketch/${id}`); + if (!response.ok) { + //log error instead of throwing error to not cache result in memoize + console.error("getSketch", id, response.status, response.statusText); + } const payload = await response.json(); return payload as OpenProcessingSketchResponse; }); +/** + * Note: this currently calls `/api/sketch/:id/code` + * But only uses the width and height properties from this call + * Width and height should instead be added to properties for `/api/sketch/:id` or `api/curation/:curationId/sketches` instead + */ export const getSketchSize = memoize(async (id: string) => { const sketch = await getSketch(id) if (sketch.mode !== 'p5js') { @@ -89,6 +116,9 @@ export const getSketchSize = memoize(async (id: string) => { } const response = await fetch(`${openProcessingEndpoint}sketch/${id}/code`); + if(!response.ok){ //log error instead of throwing error to not cache result in memoize + console.error('getSketchSize', id, response.status, response.statusText) + } const payload = await response.json(); for (const tab of payload) { diff --git a/src/layouts/SketchLayout.astro b/src/layouts/SketchLayout.astro index 7e40be8958..9d6070bd65 100644 --- a/src/layouts/SketchLayout.astro +++ b/src/layouts/SketchLayout.astro @@ -21,24 +21,21 @@ interface Props { } const { sketchId, authorName } = Astro.props; -const sketchInfo = await getSketch(sketchId); +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, - { - year: "numeric", - month: "long", - day: "numeric", - } -); +const dateString = new Date(createdOn).toLocaleDateString(currentLocale, { + year: "numeric", + month: "long", + day: "numeric", +}); setJumpToState(null); const moreSketches = await getRandomCurationSketches(4); -const featuredImageURL = makeThumbnailUrl(sketchInfo.visualID); +const featuredImageURL = makeThumbnailUrl(sketchId); -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 @@ -46,51 +43,61 @@ if (width && height) { heightOverWidth = height / width; } -const iframeTitle = `OpenProcessing Sketch: ${sketchInfo.title} by ${authorName}`; +const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`; ---
-
- {width ? ( - - ) : ( -