Add cache reset

app/libs/s3.ts

@@ -5,6 +5,8 @@ import {
   DeleteObjectCommand,
   DeleteObjectsCommand,
   HeadObjectCommand,
+  ListObjectsCommand,
+  ListObjectsV2Command,
 } from "@aws-sdk/client-s3";
 
 const s3 = new S3Client({
@@ -109,3 +111,47 @@ export const fileExists = async (filePath: string) => {
     return { exists: false, error };
   }
 };
+
+/**
+ * Delete a folder and all its content from S3
+ * @param location ex "ogimages/generated/"
+ */
+export async function deleteFolder(location: string) {
+  let count = 0; // number of files deleted
+  async function recursiveDelete(token: string | undefined = undefined) {
+    // get the files
+    const listCommand = new ListObjectsV2Command({
+      Bucket: "cgbucket",
+      Prefix: location,
+      ContinuationToken: token,
+    });
+    const list = await s3.send(listCommand);
+    if (list.KeyCount) {
+      // if items to delete
+      // delete the files
+      const deleteCommand = new DeleteObjectsCommand({
+        Bucket: "cgbucket",
+        Delete: {
+          Objects: list.Contents?.map((item) => ({ Key: item.Key })),
+          Quiet: false,
+        },
+      });
+      const deleted = await s3.send(deleteCommand);
+      if (deleted.Deleted) count += deleted.Deleted?.length;
+      // log any errors deleting files
+      if (deleted.Errors) {
+        deleted.Errors.map((error) =>
+          console.log(`${error.Key} could not be deleted - ${error.Code}`)
+        );
+      }
+    }
+    // repeat if more files to delete
+    if (list.NextContinuationToken) {
+      recursiveDelete(list.NextContinuationToken);
+    }
+    // return total deleted count when finished
+    return `${count} files deleted.`;
+  }
+  // start the recursive function
+  return recursiveDelete();
+}

app/routes/api.render.$templateId.tsx

@@ -40,14 +40,13 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   });
 
   //create a hash of the params
-  const templateIdHashed = CryptoJS.SHA256(templateId).toString();
   const variablesValuesHashed = CryptoJS.SHA256(
     JSON.stringify(variablesValues)
   ).toString();
 
-  const cacheKey = `og-image-render-${templateIdHashed}-${variablesValuesHashed}`;
+  const cacheKey = `render-${variablesValuesHashed}`;
 
-  const imageLocation = `ogimages/cached/${cacheKey}.png`;
+  const imageLocation = `ogimages/cached/${templateId}/${cacheKey}.png`;
 
   const resFileExists = await fileExists(imageLocation);
 

app/routes/api.update-template.tsx

@@ -5,6 +5,7 @@ import { validationError } from "remix-validated-form";
 import { z } from "zod";
 import { ensureAuthenticated } from "~/libs/lucia";
 import { prisma } from "~/libs/prisma";
+import { deleteFolder } from "~/libs/s3";
 import { Tree } from "~/stores/EditorStore";
 
 export const editTemplateNamevalidator = withZod(
@@ -53,6 +54,13 @@ export async function action({ context, request }: ActionFunctionArgs) {
       return json({ data: "unauthorized" }, { status: 401 });
     }
 
+    //Check if the new tree is different from the old tree return ok
+    if (JSON.stringify(template.tree) === JSON.stringify(result.data.tree)) {
+      console.log("TREE IS THE SAME");
+
+      return json({ ok: true });
+    }
+
     await prisma.template.update({
       where: {
         id: templateId,
@@ -62,6 +70,13 @@ export async function action({ context, request }: ActionFunctionArgs) {
       },
     });
 
+    //Template folder cached
+    const folder = `ogimages/cached/${templateId}/`;
+
+    //Delete all the files cached
+    deleteFolder(folder);
+    console.log("TREE IS DIFFERENT, DELETING CACHE");
+
     return json({ ok: true });
   } catch (error) {
     console.error(error);