From 091ff357661b02a9e5898bc4b35780b9f65e28af Mon Sep 17 00:00:00 2001
From: moonlitgrace <moonlitgrace.gaia@gmail.com>
Date: Wed, 18 Dec 2024 18:19:00 +0530
Subject: [PATCH] refactor: check valid src before rending avatar

---
 frontend/src/lib/components/ui/avatar.svelte   | 16 +++++++++++++++-
 .../src/routes/(app)/q/[name]/+page.svelte     | 18 +++++++++++++++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/ui/avatar.svelte b/frontend/src/lib/components/ui/avatar.svelte
index cab82270..61e8c137 100644
--- a/frontend/src/lib/components/ui/avatar.svelte
+++ b/frontend/src/lib/components/ui/avatar.svelte
@@ -7,6 +7,20 @@
   };
 
   let { src, class: klass }: Props = $props();
+
+  let valid_src = $state(false);
+
+  $effect.pre(() => {
+    if (!src) {
+      valid_src = false;
+      return;
+    }
+    // create img instance
+    const img = new Image();
+    img.onload = () => (valid_src = true);
+    img.onerror = () => (valid_src = false);
+    img.src = src;
+  });
 </script>
 
 <div
@@ -15,7 +29,7 @@
     'grid size-6 place-items-center overflow-hidden rounded-full bg-neutral'
   )}
 >
-  {#if src}
+  {#if valid_src}
     <img {src} alt="" />
   {:else}
     <svg
diff --git a/frontend/src/routes/(app)/q/[name]/+page.svelte b/frontend/src/routes/(app)/q/[name]/+page.svelte
index c4f602a6..06c75987 100644
--- a/frontend/src/routes/(app)/q/[name]/+page.svelte
+++ b/frontend/src/routes/(app)/q/[name]/+page.svelte
@@ -3,12 +3,21 @@
   import QuibsHeader from '$lib/components/pages/home/quibs_header.svelte';
   import Avatar from '$lib/components/ui/avatar.svelte';
   import { cn } from '$lib/functions/classnames';
-  import readable from 'readable-numbers';
   import type { PageData } from './$types';
   import { FormatDate } from '$lib/functions/date';
+  import { createAuthStore } from '$lib/stores/auth.svelte';
 
   const { data }: { data: PageData } = $props();
   const { quiblet, quibs, highlighted_quibs } = data;
+
+  const authStore = createAuthStore();
+
+  const is_joined = $derived.by(() => {
+    if (!authStore.state.is_authenticated) return false;
+    if (authStore.state.profile && quiblet) {
+      return quiblet.members?.includes(authStore.state.profile.id);
+    }
+  });
 </script>
 
 <svelte:head>
@@ -25,7 +34,10 @@
   ></div>
   <div class="absolute inset-x-0 -bottom-12 flex items-end justify-between px-4">
     <div class="flex items-end gap-2">
-      <Avatar class="!size-20 outline outline-8 outline-base-300" src={quiblet?.avatar} />
+      <Avatar
+        class="!size-20 outline outline-8 outline-base-300"
+        src={'https://google.com'}
+      />
       <h3 class="text-2xl font-bold text-info">q/{quiblet?.name}</h3>
     </div>
     <div class="flex items-center gap-2">
@@ -34,7 +46,7 @@
         <span class="text-sm font-medium">Create Quib</span>
       </button>
       <button class="btn btn-secondary h-10 px-3" aria-label="Join quiblet">
-        <span class="text-sm font-medium">Join</span>
+        <span class="text-sm font-medium">{is_joined ? 'Joined' : 'Join'}</span>
       </button>
       <button class="btn btn-neutral size-10 p-0" aria-label="More options">
         <coreicons-shape-more class="size-5 rotate-90"></coreicons-shape-more>