From ec1d32b7c901d8f8897e5579d438586e3d047606 Mon Sep 17 00:00:00 2001
From: Avi <avi.leeker@gmail.com>
Date: Mon, 5 Feb 2024 09:58:34 +0200
Subject: [PATCH 1/4] added download image functionality

---
 .../post/components/options/index.tsx         | 41 +++++++------
 .../post/[postid]/components/post/index.tsx   | 58 ++++++++++---------
 src/utils/utils.ts                            | 21 +++++++
 3 files changed, 76 insertions(+), 44 deletions(-)
 create mode 100644 src/utils/utils.ts

diff --git a/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx b/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx
index 3d5b05a..c5eb14c 100644
--- a/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx
+++ b/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx
@@ -1,16 +1,20 @@
-"use client";
+'use client';
 
-import { useSupabase } from "@/hooks/use-supabase";
-import { MoreHorizontal } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { Option } from "./option.models";
-import { PrimaryButton } from "@/components/ui/buttons/primary";
+import { useSupabase } from '@/hooks/use-supabase';
+import { MoreHorizontal } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { Option } from './option.models';
+import { PrimaryButton } from '@/components/ui/buttons/primary';
+import { downloadImage } from '@/utils/utils';
 
 export function PostOptions({
   post_id,
+  image_url,
+  doesUserOwnPost,
 }: {
   post_id: number;
+  image_url: string;
   doesUserOwnPost: boolean;
 }) {
   const { supabase } = useSupabase();
@@ -23,21 +27,21 @@ export function PostOptions({
   >(null);
 
   const OWNER_OPTIONS: Option[] = [
-    { title: "Edit", action: () => {} },
+    { title: 'Edit', action: () => {} },
     {
-      title: "Delete",
+      title: 'Delete',
       action: async () => {
         const indexOfOption = 1;
         setIndexOfOptionLoading(indexOfOption);
         try {
           const { error } = await supabase
-            .from("posts")
+            .from('posts')
             .delete()
-            .eq("id", post_id)
+            .eq('id', post_id)
             .single();
           console.log({ error });
           setIndexOfOptionLoading(null);
-          if (error) throw new Error("Error trying to delete");
+          if (error) throw new Error('Error trying to delete');
           router.refresh();
         } catch (e) {
           //
@@ -46,7 +50,10 @@ export function PostOptions({
     },
   ];
 
-  const PUBLIC_OPTIONS: Option[] = [{ title: "Share", action: () => {} }];
+  const PUBLIC_OPTIONS: Option[] = [
+    { title: 'Share', action: () => {} },
+    { title: 'Download', action: async () => await downloadImage(image_url) },
+  ];
 
   const FINAL_OPTIONS = [...OWNER_OPTIONS, ...PUBLIC_OPTIONS];
 
@@ -55,18 +62,18 @@ export function PostOptions({
   }
 
   return (
-    <div className="relative">
+    <div className='relative'>
       <button
         onClick={toggleDropdown}
-        className="text-white bg-neutral-700 hover:brightness-125 rounded-md p-2 text-center flex items-center"
+        className='text-white bg-neutral-700 hover:brightness-125 rounded-md p-2 text-center flex items-center'
       >
         <MoreHorizontal />
       </button>
 
       {showDropdown && (
         <ul
-          id="dropdown"
-          className="flex flex-col z-10 absolute top-12 right-0 w-48 bg-neutral-700 rounded-md overflow-hidden"
+          id='dropdown'
+          className='flex flex-col z-10 absolute top-12 right-0 w-48 bg-neutral-700 rounded-md overflow-hidden'
         >
           {FINAL_OPTIONS.map((option, index) => (
             <li key={option.title}>
diff --git a/src/app/(site)/app/post/[postid]/components/post/index.tsx b/src/app/(site)/app/post/[postid]/components/post/index.tsx
index 101f556..87c7fa5 100644
--- a/src/app/(site)/app/post/[postid]/components/post/index.tsx
+++ b/src/app/(site)/app/post/[postid]/components/post/index.tsx
@@ -1,15 +1,15 @@
-import { getSuapabaseServerComponent } from "@/supabase/models/index.models";
-import { Database } from "@/supabase/types";
-import { PostOptions } from "./components/options";
-import { LazyImage } from "@/components/feature/lazy-image";
-import Link from "next/link";
+import { getSuapabaseServerComponent } from '@/supabase/models/index.models';
+import { Database } from '@/supabase/types';
+import { PostOptions } from './components/options';
+import { LazyImage } from '@/components/feature/lazy-image';
+import Link from 'next/link';
 
 export async function Post({
   post,
   doesUserOwnPost,
-  postHref = "",
+  postHref = '',
 }: {
-  post: Database["public"]["Tables"]["posts"]["Row"];
+  post: Database['public']['Tables']['posts']['Row'];
   doesUserOwnPost: boolean;
   postHref: string;
 }) {
@@ -18,64 +18,68 @@ export async function Post({
   const supabase = await getSuapabaseServerComponent();
 
   const { data: postOwnerProfile } = await supabase
-    .from("profiles")
-    .select("*")
-    .eq("id", profile_id)
+    .from('profiles')
+    .select('*')
+    .eq('id', profile_id)
     .single();
 
   return (
-    <article className="w-full h-full bg-neutral-200 dark:bg-neutral-900 border-t border-neutral-300 dark:border-cm-lighter-gray overflow-hidden">
-      <header className="flex items-center justify-between px-5 py-5">
-        <section className="w-full flex flex-col items-start justify-center gap-4">
+    <article className='w-full h-full bg-neutral-200 dark:bg-neutral-900 border-t border-neutral-300 dark:border-cm-lighter-gray overflow-hidden'>
+      <header className='flex items-center justify-between px-5 py-5'>
+        <section className='w-full flex flex-col items-start justify-center gap-4'>
           {postOwnerProfile && (
             <Link href={`/app/profile/${postOwnerProfile.username}`}>
-              <section className="flex flex-none gap-4 w-full items-center justify-start">
+              <section className='flex flex-none gap-4 w-full items-center justify-start'>
                 {postOwnerProfile.avatar_url ? (
                   <LazyImage
                     src={postOwnerProfile.avatar_url}
                     alt={post.title}
-                    className="w-12 h-12 rounded-full object-cover object-center"
-                    skeletonClassName="w-12 h-12 rounded-full"
+                    className='w-12 h-12 rounded-full object-cover object-center'
+                    skeletonClassName='w-12 h-12 rounded-full'
                   />
                 ) : (
-                  <div className="h-12 w-12 rounded-full bg-neutral-300" />
+                  <div className='h-12 w-12 rounded-full bg-neutral-300' />
                 )}
-                <h3 className="text-neutral-800 dark:text-neutral-300 font-semibold text-xl">
+                <h3 className='text-neutral-800 dark:text-neutral-300 font-semibold text-xl'>
                   {postOwnerProfile.name}
                 </h3>
               </section>
             </Link>
           )}
         </section>
-        <PostOptions post_id={post.id} doesUserOwnPost={doesUserOwnPost} />
+        <PostOptions
+          post_id={post.id}
+          doesUserOwnPost={doesUserOwnPost}
+          image_url={post.asset_url}
+        />
       </header>
 
       {postHref ? (
         <Link href={postHref}>
-          <section className="px-5 pb-5">
-            <h3 className="text-neutral-800 dark:text-neutral-300 font-bold text-2xl">
+          <section className='px-5 pb-5'>
+            <h3 className='text-neutral-800 dark:text-neutral-300 font-bold text-2xl'>
               {title}
             </h3>
           </section>
           <LazyImage
             src={asset_url}
             alt={title}
-            className="w-full h-full object-cover object-center"
-            skeletonClassName="w-full h-[500px]"
+            className='w-full h-full object-cover object-center'
+            skeletonClassName='w-full h-[500px]'
           />
         </Link>
       ) : (
         <>
-          <section className="px-5 pb-5">
-            <h3 className="text-neutral-800 dark:text-neutral-300 font-bold text-2xl">
+          <section className='px-5 pb-5'>
+            <h3 className='text-neutral-800 dark:text-neutral-300 font-bold text-2xl'>
               {title}
             </h3>
           </section>
           <LazyImage
             src={asset_url}
             alt={title}
-            className="w-full h-full object-cover object-center rounded-md"
-            skeletonClassName="w-full h-[500px]"
+            className='w-full h-full object-cover object-center rounded-md'
+            skeletonClassName='w-full h-[500px]'
           />
         </>
       )}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..e218f45
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,21 @@
+export const downloadImage = async (url: string) => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+
+    // Extract image name from the URL
+    const urlParts = url.split('/');
+    const imageName = urlParts[urlParts.length - 1];
+
+    const blobUrl = window.URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = blobUrl;
+    link.setAttribute('download', imageName);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } catch (error) {
+    console.error('Error downloading image:', error);
+  }
+};

From 09250db118190acda1baf873cd6650ca76ef5a4b Mon Sep 17 00:00:00 2001
From: Avi <avi.leeker@gmail.com>
Date: Tue, 6 Feb 2024 09:22:56 +0200
Subject: [PATCH 2/4] delete from cloudinary and go back to /app after delete

---
 package-lock.json                             |  60 +++++++++
 .../app/components/new-post-box/index.tsx     | 117 +++++++++---------
 .../post/components/options/index.tsx         |   5 +-
 src/app/api/images/delete/route.ts            |  25 ++++
 src/app/api/images/upload/route.ts            |  32 ++---
 src/services/api/upload-image/index.ts        |   8 +-
 src/utils/utils.ts                            |  37 ++++++
 7 files changed, 206 insertions(+), 78 deletions(-)
 create mode 100644 src/app/api/images/delete/route.ts

diff --git a/package-lock.json b/package-lock.json
index 0e17302..1065d9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "zustand": "^4.4.7"
       },
       "devDependencies": {
+        "@playwright/test": "^1.41.2",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -443,6 +444,21 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.41.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz",
+      "integrity": "sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.41.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz",
@@ -3847,6 +3863,50 @@
         "node": ">= 6"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.41.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.2.tgz",
+      "integrity": "sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.41.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.41.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.2.tgz",
+      "integrity": "sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.33",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
diff --git a/src/app/(site)/app/components/new-post-box/index.tsx b/src/app/(site)/app/components/new-post-box/index.tsx
index 1b3529d..a4d7cff 100644
--- a/src/app/(site)/app/components/new-post-box/index.tsx
+++ b/src/app/(site)/app/components/new-post-box/index.tsx
@@ -1,17 +1,17 @@
-"use client";
-
-import { useUserProfile } from "@/hooks/use-user-profile";
-import { Trash, Image } from "lucide-react";
-import { ChangeEvent, useState } from "react";
-import { useForm } from "react-hook-form";
-import { FormAreas } from "./new-post.models";
-import { PrimaryButton } from "@/components/ui/buttons/primary";
-import { postImage } from "@/services/api/upload-image";
-import { useRouter } from "next/navigation";
-import { useSupabase } from "@/hooks/use-supabase";
-import { useBase64Image } from "@/hooks/use-base-64-image";
-import { Skeleton } from "@/components/ui/skeleton";
-import { LazyImage } from "@/components/feature/lazy-image";
+'use client';
+
+import { useUserProfile } from '@/hooks/use-user-profile';
+import { Trash, Image } from 'lucide-react';
+import { ChangeEvent, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { FormAreas } from './new-post.models';
+import { PrimaryButton } from '@/components/ui/buttons/primary';
+import { postImage } from '@/services/api/upload-image';
+import { useRouter } from 'next/navigation';
+import { useSupabase } from '@/hooks/use-supabase';
+import { useBase64Image } from '@/hooks/use-base-64-image';
+import { Skeleton } from '@/components/ui/skeleton';
+import { LazyImage } from '@/components/feature/lazy-image';
 
 export function NewPostBox() {
   const [formImageSrc, setFormImageSrc] = useState<string | null>(null);
@@ -35,7 +35,7 @@ export function NewPostBox() {
     handleSubmit,
     watch,
     resetField,
-  } = useForm<FormAreas>({ mode: "onChange" });
+  } = useForm<FormAreas>({ mode: 'onChange' });
 
   const { parseImageToBase64 } = useBase64Image();
 
@@ -51,26 +51,26 @@ export function NewPostBox() {
 
     try {
       const base64Image = await parseImageToBase64({ image });
-      if (!base64Image) throw new Error("No base64Image");
+      if (!base64Image) throw new Error('No base64Image');
 
       const { error: postImageError, assetSecureUrl } = await postImage({
         image: base64Image,
       });
       if (postImageError || !assetSecureUrl) {
         throw new Error(
-          postImageError || "There is no assetSecureUrl from the response",
+          postImageError || 'There is no assetSecureUrl from the response'
         );
       }
 
       const { error } = await supabase
-        .from("posts")
+        .from('posts')
         .insert({
           asset_url: assetSecureUrl,
           title: title,
           profile_id: userProfile?.id,
           user_id: userProfile.user_id,
         })
-        .eq("profile_id", userProfile?.id)
+        .eq('profile_id', userProfile?.id)
         .single();
 
       if (error) {
@@ -88,7 +88,7 @@ export function NewPostBox() {
         hasSubmittingBeenSuccesful: true,
       });
       UnSelectImage();
-      resetField("title");
+      resetField('title');
       router.refresh();
     } catch (e) {
       console.log(e);
@@ -101,85 +101,86 @@ export function NewPostBox() {
   }
 
   function UnSelectImage() {
-    resetField("media");
+    resetField('media');
     setFormImageSrc(null);
   }
 
   return (
     <div>
       <form
-        className="flex flex-col sm:p-5 p-1"
+        className='flex flex-col sm:p-5 p-1'
         onSubmit={handleSubmit(publishPost)}
       >
-        <div className="flex gap-4">
+        <div className='flex gap-4'>
           {isLoadingUserProfile ? (
-            <Skeleton className="h-14 w-14 rounded-full flex-none" />
+            <Skeleton className='h-14 w-14 rounded-full flex-none' />
           ) : (
             userProfile &&
             userProfile.avatar_url && (
               <LazyImage
                 src={userProfile.avatar_url}
-                alt={userProfile.username ?? userProfile.name ?? ""}
-                className="h-12 w-12 rounded-full object-cover object-center"
-                skeletonClassName="h-12 w-12 rounded-full"
+                alt={userProfile.username ?? userProfile.name ?? ''}
+                className='h-12 w-12 rounded-full object-cover object-center'
+                skeletonClassName='h-12 w-12 rounded-full'
               />
             )
           )}
-          <div className="flex flex-col gap-4 pt-3 w-full">
-            <div className="flex flex-col">
+          <div className='flex flex-col gap-4 pt-3 w-full'>
+            <div className='flex flex-col'>
               <input
-                type="text"
-                placeholder="What have you drew?"
-                className="bg-transparent w-full h-max text-2xl max-w-full text-neutral-800 dark:text-neutral-300 font-bold placeholder:font-medium placeholder:text-neutral-600 dark:placeholder:text-neutral-500 focus:outline-none"
-                {...register("title", {
+                type='text'
+                placeholder='What have you drew?'
+                className='bg-transparent w-full h-max text-2xl max-w-full text-neutral-800 dark:text-neutral-300 font-bold placeholder:font-medium placeholder:text-neutral-600 dark:placeholder:text-neutral-500 focus:outline-none'
+                {...register('title', {
                   maxLength: {
                     value: 50,
-                    message: "Max title characteres is 50",
+                    message: 'Max title characteres is 50',
                   },
-                  required: { value: true, message: "Title is required" },
+                  required: { value: true, message: 'Title is required' },
                 })}
               />
-              {errors.title?.type === "maxLength" && (
-                <span className="text-red-500">
-                  {watch("title").length} of 50 characteres
+              {errors.title?.type === 'maxLength' && (
+                <span className='text-red-500'>
+                  {watch('title').length} of 50 characteres
                 </span>
               )}
-              {errors.title?.type === "required" && (
-                <span className="text-red-500">Title required</span>
+              {errors.title?.type === 'required' && (
+                <span className='text-red-500'>Title required</span>
               )}
             </div>
             {formImageSrc && (
-              <div className="h-full w-full relative mb-5">
+              <div className='h-full w-full relative mb-5'>
                 <img
                   src={formImageSrc}
-                  className="w-full max-w-full max-h-96 rounded-md object-center object-cover"
+                  className='w-full max-w-full max-h-96 rounded-md object-center object-cover'
+                  alt=''
                 />
                 <button
-                  className="absolute top-2 right-2 text-neutral-50 p-2 bg-neutral-700 rounded-[calc(0.5rem-0.375rem)] hover:bg-red-500 transition-colors delay-75"
+                  className='absolute top-2 right-2 text-neutral-50 p-2 bg-neutral-700 rounded-[calc(0.5rem-0.375rem)] hover:bg-red-500 transition-colors delay-75'
                   onClick={UnSelectImage}
                 >
-                  <Trash className="h-4 w-4" />
+                  <Trash className='h-4 w-4' />
                 </button>
               </div>
             )}
           </div>
         </div>
-        <section className="pl-[calc(48px+1rem)] flex justify-between">
-          <div className="flex items-center justify-center border-l border-neutral-600 dark:border-neutral-600">
-            <div className="cursor-pointer relative w-10 h-10 p-4 hover:bg-neutral-300 dark:hover:bg-cm-lighter-gray rounded-sm flex items-center justify-center">
-              <label htmlFor="image" className="cursor-pointer">
+        <section className='pl-[calc(48px+1rem)] flex justify-between'>
+          <div className='flex items-center justify-center border-l border-neutral-600 dark:border-neutral-600'>
+            <div className='cursor-pointer relative w-10 h-10 p-4 hover:bg-neutral-300 dark:hover:bg-cm-lighter-gray rounded-sm flex items-center justify-center'>
+              <label htmlFor='image' className='cursor-pointer'>
                 <Image
                   className={`h-6 w-6 ${
                     errors.media
-                      ? "text-red-500"
-                      : "text-neutral-800 dark:text-neutral-300"
+                      ? 'text-red-500'
+                      : 'text-neutral-800 dark:text-neutral-300'
                   }`}
                 />
               </label>
               <input
-                type="file"
-                className="absolute top-0 left-0 opacity-0 h-full w-full cursor-pointer"
-                {...register("media", {
+                type='file'
+                className='absolute top-0 left-0 opacity-0 h-full w-full cursor-pointer'
+                {...register('media', {
                   onChange: (e: ChangeEvent<HTMLInputElement>) => {
                     if (
                       !e.target ||
@@ -198,17 +199,17 @@ export function NewPostBox() {
                       setFormImageSrc(event.target.result as string);
                     };
                   },
-                  required: { value: true, message: "Image/Gif is required" },
+                  required: { value: true, message: 'Image/Gif is required' },
                 })}
               />
             </div>
             {errors.media && (
-              <span className="text-red-500">{errors.media.message}</span>
+              <span className='text-red-500'>{errors.media.message}</span>
             )}
           </div>
-          <div className="max-w-40">
+          <div className='max-w-40'>
             <PrimaryButton
-              type="submit"
+              type='submit'
               disabled={isSubmitting || !isValid}
               isLoading={isSubmitting}
             >
@@ -217,7 +218,7 @@ export function NewPostBox() {
           </div>
         </section>
         {formSubmitingState.hasSubmittingFailed && (
-          <p className="text-red-500 w-full text-center">
+          <p className='text-red-500 w-full text-center'>
             There has been an error trying to publish your post
           </p>
         )}
diff --git a/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx b/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx
index c5eb14c..bcd5890 100644
--- a/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx
+++ b/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx
@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { Option } from './option.models';
 import { PrimaryButton } from '@/components/ui/buttons/primary';
-import { downloadImage } from '@/utils/utils';
+import { deleteFromCloundinary, downloadImage } from '@/utils/utils';
 
 export function PostOptions({
   post_id,
@@ -39,9 +39,10 @@ export function PostOptions({
             .delete()
             .eq('id', post_id)
             .single();
-          console.log({ error });
           setIndexOfOptionLoading(null);
           if (error) throw new Error('Error trying to delete');
+          deleteFromCloundinary(image_url);
+          router.push('/app');
           router.refresh();
         } catch (e) {
           //
diff --git a/src/app/api/images/delete/route.ts b/src/app/api/images/delete/route.ts
new file mode 100644
index 0000000..7822274
--- /dev/null
+++ b/src/app/api/images/delete/route.ts
@@ -0,0 +1,25 @@
+import cloudinary from '@/services/cloudinary';
+
+export async function DELETE(req: Request) {
+  try {
+    const reqBody: { public_id: string | null } = await req.json();
+    const { public_id } = reqBody;
+
+    if (!public_id) {
+      throw new Error('Invalid public_id');
+    }
+
+    const result = await cloudinary.v2.uploader.destroy(public_id);
+
+    if (result.result === 'ok') {
+      return Response.json({
+        message: 'Image deleted successfully',
+      });
+    } else {
+      throw new Error('Failed to delete image');
+    }
+  } catch (error) {
+    console.log('Error in DELETE: ', { error });
+    return Response.error();
+  }
+}
diff --git a/src/app/api/images/upload/route.ts b/src/app/api/images/upload/route.ts
index d08b6da..fc471b6 100644
--- a/src/app/api/images/upload/route.ts
+++ b/src/app/api/images/upload/route.ts
@@ -1,5 +1,5 @@
-import cloudinary from "@/services/cloudinary";
-import { UploadApiOptions } from "cloudinary";
+import cloudinary from '@/services/cloudinary';
+import { UploadApiOptions } from 'cloudinary';
 
 export async function POST(req: Request) {
   try {
@@ -7,22 +7,22 @@ export async function POST(req: Request) {
     const { image } = reqBody;
 
     if (!image) {
-      throw new Error("invalid image");
+      throw new Error('invalid image');
     }
 
-    const imageMetadata = image.split(";")[0];
-    const imageType = imageMetadata.split("/")[1];
-    const defaultImageTransformation: UploadApiOptions["transformation"] = {
+    const imageMetadata = image.split(';')[0];
+    const imageType = imageMetadata.split('/')[1];
+    const defaultImageTransformation: UploadApiOptions['transformation'] = {
       width: 700,
-      crop: "fill",
-      gravity: "center",
-      fetch_format: "webp",
+      crop: 'fill',
+      gravity: 'center',
+      fetch_format: 'webp',
       quality: 80,
     };
 
     let finalTransformation;
 
-    if (imageType === "gif") {
+    if (imageType === 'gif') {
       finalTransformation = {};
     } else {
       finalTransformation = defaultImageTransformation;
@@ -31,7 +31,7 @@ export async function POST(req: Request) {
     const imageFromCloudinary = await cloudinary.v2.uploader.upload(
       image,
       {
-        resource_type: "image",
+        resource_type: 'image',
         discard_original_filename: true,
         transformation: {
           ...finalTransformation,
@@ -43,14 +43,18 @@ export async function POST(req: Request) {
         }
 
         return result;
-      },
+      }
     );
     if (!imageFromCloudinary) {
-      throw new Error("image could not be uploaded :(");
+      throw new Error('image could not be uploaded :(');
     }
 
     return Response.json({
-      data: { image: { secure_url: imageFromCloudinary.secure_url } },
+      data: {
+        image: {
+          secure_url: imageFromCloudinary.secure_url,
+        },
+      },
     });
   } catch (error) {
     console.log({ error });
diff --git a/src/services/api/upload-image/index.ts b/src/services/api/upload-image/index.ts
index fb17f2f..4a1415b 100644
--- a/src/services/api/upload-image/index.ts
+++ b/src/services/api/upload-image/index.ts
@@ -13,8 +13,8 @@ export async function postImage({
   image: string; // base 64
 }): Promise<IResponse> {
   try {
-    const res = await fetch("/api/images/upload", {
-      method: "POST",
+    const res = await fetch('/api/images/upload', {
+      method: 'POST',
       body: JSON.stringify({ image }),
     });
 
@@ -25,12 +25,12 @@ export async function postImage({
     if (!res.ok || !assetSecureUrl) {
       return {
         error:
-          "There is been an error on the response, or wether the asset secure url was not found on the response",
+          'There is been an error on the response, or wether the asset secure url was not found on the response',
         assetSecureUrl: null,
       };
     }
 
-    return { error: false, assetSecureUrl: assetSecureUrl };
+    return { error: false, assetSecureUrl };
   } catch (e) {
     return { error: e, assetSecureUrl: null };
   }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e218f45..72a70bf 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,3 +1,5 @@
+import cloudinary from '@/services/cloudinary';
+
 export const downloadImage = async (url: string) => {
   try {
     const response = await fetch(url);
@@ -19,3 +21,38 @@ export const downloadImage = async (url: string) => {
     console.error('Error downloading image:', error);
   }
 };
+
+export const extractPublicId = async (imageURL: string) => {
+  const parts = imageURL.split('/');
+  const filename = parts.pop(); // Get the last part of the URL
+  if (filename) {
+    const filenameParts = filename.split('.');
+    if (filenameParts.length > 1) {
+      return filenameParts[0]; // Return the part before the first '.'
+    }
+  }
+  throw new Error('Invalid imageURL format');
+};
+
+export const deleteFromCloundinary = async (imageUrl: string) => {
+  try {
+    const public_id = await extractPublicId(imageUrl);
+    const response = await fetch('/api/images/delete', {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ public_id }),
+    });
+
+    console.log('Res from deleteFromCloudinary', response);
+    if (!response.ok) {
+      throw new Error('Failed to delete image');
+    }
+
+    const data = await response.json();
+    console.log(data.message);
+  } catch (error) {
+    console.error('Error deleting image:', error);
+  }
+};

From 4ed770e7ba8295812a8a2c302a6b434a83e4209a Mon Sep 17 00:00:00 2001
From: Avi <avi.leeker@gmail.com>
Date: Tue, 6 Feb 2024 09:43:53 +0200
Subject: [PATCH 3/4] go back if there is history, otherwise go to /app after
 post delete

---
 .../[postid]/components/post/components/options/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx b/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx
index bcd5890..7904e0f 100644
--- a/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx
+++ b/src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx
@@ -42,7 +42,13 @@ export function PostOptions({
           setIndexOfOptionLoading(null);
           if (error) throw new Error('Error trying to delete');
           deleteFromCloundinary(image_url);
-          router.push('/app');
+          if (typeof window !== 'undefined') {
+            if (window.history.length > 1) {
+              window.history.back(); // Go back to the previous page
+            } else {
+              router.push('/app'); // Navigate to '/app' if no history
+            }
+          }
           router.refresh();
         } catch (e) {
           //

From bb1981aaea6930aef6abe7223b30e7faf404bb31 Mon Sep 17 00:00:00 2001
From: Avi <avi.leeker@gmail.com>
Date: Tue, 6 Feb 2024 09:45:40 +0200
Subject: [PATCH 4/4] remove console log

---
 src/utils/utils.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 72a70bf..bfe4936 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -45,13 +45,11 @@ export const deleteFromCloundinary = async (imageUrl: string) => {
       body: JSON.stringify({ public_id }),
     });
 
-    console.log('Res from deleteFromCloudinary', response);
     if (!response.ok) {
       throw new Error('Failed to delete image');
     }
 
     const data = await response.json();
-    console.log(data.message);
   } catch (error) {
     console.error('Error deleting image:', error);
   }