From 21caa45e653421572e1cbc13816c1f0278264835 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Wed, 4 Dec 2024 17:27:35 +0000
Subject: [PATCH] refactor(picture input): reduce code inside 'if'-statement

---
 src/lib/components/forms/picture-input.svelte | 82 +++++++------------
 1 file changed, 29 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
index ea56de5..0f7c607 100644
--- a/src/lib/components/forms/picture-input.svelte
+++ b/src/lib/components/forms/picture-input.svelte
@@ -11,65 +11,41 @@
     let reader = new FileReader();
     reader.readAsDataURL(image);
     reader.onload = (e) => {
-      avatar = e.target.result;
+      if (e.target?.result) {
+        avatar = e.target.result.toString();
+      }
     };
   };
 </script>
 
 <div id="app" class="flex flex-col items-center justify-center">
-  {#if avatar}
-    <div class="relative flex h-[200px] w-[200px] overflow-hidden rounded-md">
+  <div class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center">
+    {#if avatar}
       <img class="h-[200px] w-[200px] object-cover" src={avatar} alt="Avatar" />
-      <button
-        type="button"
-        aria-label="Change Avatar"
-        class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
-        on:click={() => {
-          fileinput.click();
-        }}
-        on:keydown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            fileinput.click();
-          }
-        }}
-      >
-        <Icon src={Icons.Edit} color="white" size="70%" />
-      </button>
-      <input
-        style="display:none"
-        type="file"
-        accept=".jpg, .jpeg, .png"
-        on:change={(e) => onFileSelected(e)}
-        bind:this={fileinput}
-      />
-    </div>
-  {:else}
-    <div
-      class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center"
-    >
+    {:else}
       <p class="font-medium text-white">{text}<span class="text-4xl">*</span></p>
-      <button
-        type="button"
-        aria-label="Change Avatar"
-        class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
-        on:click={() => {
+    {/if}
+    <button
+      type="button"
+      aria-label="Change Avatar"
+      class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
+      on:click={() => {
+        fileinput.click();
+      }}
+      on:keydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
           fileinput.click();
-        }}
-        on:keydown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            fileinput.click();
-          }
-        }}
-      >
-        <Icon src={Icons.Edit} color="white" size="60%" />
-      </button>
-      <input
-        style="display:none"
-        type="file"
-        accept=".jpg, .jpeg, .png"
-        on:change={(e) => onFileSelected(e)}
-        bind:this={fileinput}
-      />
-    </div>
-  {/if}
+        }
+      }}
+    >
+      <Icon src={Icons.Edit} color="white" size="60%" />
+    </button>
+    <input
+      style="display:none"
+      type="file"
+      accept=".jpg, .jpeg, .png"
+      on:change={(e) => onFileSelected(e)}
+      bind:this={fileinput}
+    />
+  </div>
 </div>