chore(platform): delete old images on upload of new ones

apps/console/app/routes/apps/$clientId/designer.tsx

@@ -97,6 +97,7 @@ import designerSVG from '~/assets/early/designer.webp'
 import EarlyAccessPanel from '~/components/EarlyAccess/EarlyAccessPanel'
 import { IdentityURN } from '@proofzero/urns/identity'
 import { GetOgThemeResult } from '@proofzero/platform.starbase/src/jsonrpc/methods/getOgTheme'
+import createImageClient from '@proofzero/platform-clients/image'
 
 const LazyAuth = lazy(() =>
   // @ts-ignore :(
@@ -1556,6 +1557,8 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
       let colorDark = fd.get('colordark') as string | undefined
       if (!colorDark || colorDark === '') colorDark = undefined
 
+      const ogGraphicURL = theme.graphicURL
+
       let graphicURL = fd.get('image') as string | undefined
       if (!graphicURL || graphicURL === '') graphicURL = undefined
 
@@ -1596,6 +1599,14 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
           clientId,
           theme,
         })
+
+        if (ogGraphicURL && ogGraphicURL !== theme.graphicURL) {
+          const imageClient = createImageClient(context.env.Images, {
+            headers: generateTraceContextHeaders(context.traceSpan),
+          })
+
+          await imageClient.delete.mutate(ogGraphicURL)
+        }
       }
 
       return json({

platform/images/src/jsonrpc/methods/delete.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod'
+import { Context } from '../../context'
+
+export const DeleteMethodInputSchema = z.string()
+export type DeleteMethodInputParams = z.infer<typeof DeleteMethodInputSchema>
+
+export const DeleteMethodOutputSchema = z.boolean()
+export type DeleteMethodOutputParams = z.infer<typeof DeleteMethodOutputSchema>
+
+export const deleteMethod = async ({
+  input,
+  ctx,
+}: {
+  input: DeleteMethodInputParams
+  ctx: Context
+}): Promise<DeleteMethodOutputParams> => {
+  // A typical image delivery URL looks like this:
+  // https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<VARIANT_NAME>
+  const imageComponents = input.split('/')
+  const imageID = imageComponents[imageComponents.length - 2]
+
+  const url = `https://api.cloudflare.com/client/v4/accounts/${ctx.INTERNAL_CLOUDFLARE_ACCOUNT_ID}/images/v1/${imageID}`
+  const deleteRequest = new Request(url, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${ctx.TOKEN_CLOUDFLARE_API}`,
+    },
+  })
+
+  const response = await fetch(deleteRequest)
+  const res = (await response.json()) as {
+    success: boolean
+  }
+
+  return res.success
+}

platform/images/src/jsonrpc/router.ts

@@ -21,6 +21,11 @@ import {
 } from './methods/getGradient'
 
 import { Context } from '../context'
+import {
+  DeleteMethodInputSchema,
+  DeleteMethodOutputSchema,
+  deleteMethod,
+} from './methods/delete'
 
 const t = initTRPC.context<Context>().create({ errorFormatter })
 
@@ -31,6 +36,12 @@ export const appRouter = t.router({
     .input(uploadMethodInput)
     .output(uploadMethodOutput)
     .mutation(uploadMethod),
+  delete: t.procedure
+    .use(LogUsage)
+    .use(Analytics)
+    .input(DeleteMethodInputSchema)
+    .output(DeleteMethodOutputSchema)
+    .mutation(deleteMethod),
   getOgImage: t.procedure
     .use(LogUsage)
     .use(Analytics)