feat: remove asset from ui on deletion

manankarnik · Jan 21, 2024 · c90c935 · c90c935
1 parent db26b2c
commit c90c935
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 56 deletions.
diff --git a/src/lib/components/asset-card.svelte b/src/lib/components/asset-card.svelte
@@ -1,55 +1,32 @@
 <script>
   import { page } from "$app/stores";
-  import { User, Heart, MoreVertical, Pencil, Trash, Loader2, CheckCircle2 } from "lucide-svelte";
+  import { User, Heart, MoreVertical, Pencil, Trash } from "lucide-svelte";
   import { Button } from "$lib/components/ui/button";
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
-  import * as Dialog from "$lib/components/ui/dialog";
   import * as Avatar from "$lib/components/ui/avatar";
   import * as Tooltip from "$lib/components/ui/tooltip";
-  import * as Alert from "$lib/components/ui/alert";
 
   export let asset;
   export let manage = false;
-  let open = false;
-  let title;
+  export let deleteDialog = () => {};
   let animate;
-  let loading;
-  let alert;
-
-  async function deleteAsset(id) {
-    loading = true;
-    await fetch("/asset", { method: "DELETE", body: JSON.stringify({ id }) });
-    loading = false;
-    open = false;
-    alert = true;
-    setTimeout(() => {
-      alert = false;
-    }, 2000);
-  }
   async function changeLikeStatus() {
     animate = true;
     setTimeout(() => {
       animate = false;
     }, 250);
-    const response = await fetch("/like", {
+    asset.liked = !asset.liked;
+    asset.likes = asset.liked ? asset.likes + 1 : asset.likes - 1;
+    await fetch("/like", {
       method: "POST",
       body: JSON.stringify({
         assetId: asset.id,
         userId: $page.data.userId
       })
     });
-    asset.liked = (await response.json()).liked;
-    asset.likes = asset.liked ? asset.likes + 1 : asset.likes - 1;
   }
 </script>
 
-<div class={`top-20 left-0 fixed flex h-20 w-full justify-center ${alert ? "" : "hidden"}`}>
-  <Alert.Root variant="success" class="w-30 bg-slate-100 dark:bg-slate-900">
-    <CheckCircle2 class="h-4 w-4 text-green-500" />
-    <Alert.Title>Success</Alert.Title>
-    <Alert.Description>Asset deleted successfully!</Alert.Description>
-  </Alert.Root>
-</div>
 <div class="animate-gradient rounded-xl p-[4px] hover:border-transparent hover:bg-gradient-to-r">
   <div class="h-full w-full rounded-lg bg-slate-100 p-4 dark:bg-slate-900">
     <svelte:element
@@ -96,10 +73,7 @@
               </DropdownMenu.Item>
               <DropdownMenu.Item
                 class="flex flex-row items-center gap-2 text-destructive hover:bg-destructive"
-                on:click={() => {
-                  title = asset.title;
-                  open = true;
-                }}
+                on:click={() => deleteDialog(asset.id)}
               >
                 <Trash size={20} />
                 Delete Asset
@@ -150,25 +124,3 @@
     </svelte:element>
   </div>
 </div>
-
-<Dialog.Root {open}>
-  <Dialog.Content>
-    <Dialog.Header>
-      <Dialog.Title>Delete Asset</Dialog.Title>
-      <Dialog.Description>
-        Are you sure you want to <span class="font-bold text-destructive">DELETE</span> the asset
-        <span class="font-bold text-primary">{title}</span>?
-      </Dialog.Description>
-    </Dialog.Header>
-    <div class="flex justify-end gap-4">
-      <Button variant="outline" on:click={() => (open = false)}>Cancel</Button>
-      {#if loading}
-        <Button disabled variant="destructive">
-          <Loader2 class="animate-spin" />
-        </Button>
-      {:else}
-        <Button variant="destructive" on:click={deleteAsset(asset.id)}>Delete</Button>
-      {/if}
-    </div>
-  </Dialog.Content>
-</Dialog.Root>
diff --git a/src/routes/manage/+page.svelte b/src/routes/manage/+page.svelte
@@ -1,12 +1,43 @@
 <script>
-  import background from "$lib/assets/gradient.png";
+  import { page } from "$app/stores";
+  import { Loader2, CheckCircle2 } from "lucide-svelte";
+  import { Button } from "$lib/components/ui/button";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import * as Alert from "$lib/components/ui/alert";
   import AssetCard from "$lib/components/asset-card.svelte";
   import SearchFilter from "$lib/components/search-filter.svelte";
 
   export let data;
   let filteredAssets = data.assets;
+  let open = false;
+  let loading;
+  let alert;
+  let currentAsset;
+
+  function deleteDialog(id) {
+    open = true;
+    currentAsset = data.assets.find(asset => asset.id == id);
+  }
+  async function deleteAsset(id) {
+    loading = true;
+    await fetch("/asset", { method: "DELETE", body: JSON.stringify({ id }) });
+    loading = false;
+    open = false;
+    data.assets = data.assets.filter(asset => asset.id != id);
+    alert = true;
+    setTimeout(() => {
+      alert = false;
+    }, 2000);
+  }
 </script>
 
+<div class={`fixed left-0 top-20 flex h-20 w-full justify-center ${alert ? "" : "hidden"}`}>
+  <Alert.Root variant="success" class="w-30 bg-slate-100 dark:bg-slate-900">
+    <CheckCircle2 class="h-4 w-4 text-green-500" />
+    <Alert.Title>Success</Alert.Title>
+    <Alert.Description>Asset deleted successfully!</Alert.Description>
+  </Alert.Root>
+</div>
 <section class="container p-8">
   <h1
     class="animate-gradient bg-gradient-to-r bg-clip-text text-2xl font-extrabold text-transparent sm:text-3xl md:text-4xl lg:pb-1 lg:text-5xl"
@@ -20,8 +51,29 @@
   {:else}
     <div class="grid-col-1 my-4 mt-2 grid gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
       {#each filteredAssets as asset}
-        <AssetCard {asset} manage={true} />
+        <AssetCard {asset} manage={true} {deleteDialog} />
       {/each}
     </div>
   {/if}
 </section>
+<Dialog.Root bind:open>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Delete Asset</Dialog.Title>
+      <Dialog.Description>
+        Are you sure you want to <span class="font-bold text-destructive">DELETE</span> the asset
+        <span class="font-bold text-primary">{currentAsset.title}</span>?
+      </Dialog.Description>
+    </Dialog.Header>
+    <div class="flex justify-end gap-4">
+      <Button variant="outline" on:click={() => (open = false)}>Cancel</Button>
+      {#if loading}
+        <Button disabled variant="destructive">
+          <Loader2 class="animate-spin" />
+        </Button>
+      {:else}
+        <Button variant="destructive" on:click={deleteAsset(currentAsset.id)}>Delete</Button>
+      {/if}
+    </div>
+  </Dialog.Content>
+</Dialog.Root>