refactor(picture input): reduce code inside 'if'-statement

NIAEFEUP · Dec 4, 2024 · 21caa45 · 21caa45
1 parent 43fb97a
commit 21caa45
Showing 1 changed file with 29 additions and 53 deletions.
diff --git 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>