From 045890d2e110dbe408dbd2c3de8766f08c47c970 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Mon, 10 Apr 2023 14:39:50 +0200
Subject: [PATCH] Simplify Avatar component and get rid of extra requests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
---
 src/App/Header/Connect.svelte              | 10 +++-------
 src/components/Authorship.svelte           |  4 ++--
 src/components/{Comment => }/Avatar.svelte | 18 +++---------------
 src/views/projects/Issue.svelte            |  4 ++--
 src/views/projects/Issue/New.svelte        |  4 ++--
 5 files changed, 12 insertions(+), 28 deletions(-)
 rename src/components/{Comment => }/Avatar.svelte (69%)

diff --git a/src/App/Header/Connect.svelte b/src/App/Header/Connect.svelte
index eb30cabae..8394e16b1 100644
--- a/src/App/Header/Connect.svelte
+++ b/src/App/Header/Connect.svelte
@@ -5,7 +5,7 @@
   import { sessionStore, disconnect } from "@app/lib/session";
   import { toClipboard, formatNodeId } from "@app/lib/utils";
 
-  import Avatar from "@app/components/Comment/Avatar.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
   import Button from "@app/components/Button.svelte";
   import Floating from "@app/components/Floating.svelte";
   import Icon from "@app/components/Icon.svelte";
@@ -161,9 +161,7 @@
       {#if $sessionStore}
         <div class="toggle-avatar">
           <div style:height="1.5rem">
-            <Avatar
-              source={$sessionStore.publicKey}
-              title={$sessionStore.publicKey} />
+            <Avatar nodeId={$sessionStore.publicKey} />
           </div>
           <div class="user-id txt-small">
             {formatNodeId($sessionStore.publicKey)}
@@ -196,9 +194,7 @@
       <div class="dropdown">
         <div class="avatar-id-container">
           <div class="dropdown-avatar">
-            <Avatar
-              source={$sessionStore.publicKey}
-              title={$sessionStore.publicKey} />
+            <Avatar nodeId={$sessionStore.publicKey} />
           </div>
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
diff --git a/src/components/Authorship.svelte b/src/components/Authorship.svelte
index d42ded07d..c2007d665 100644
--- a/src/components/Authorship.svelte
+++ b/src/components/Authorship.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Author } from "@app/lib/cobs";
 
-  import Avatar from "@app/components/Comment/Avatar.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
   import { formatNodeId, formatTimestamp } from "@app/lib/utils";
 
   export let author: Author;
@@ -42,7 +42,7 @@
 
 <span class="authorship txt-tiny" title={relativeTimestamp(timestamp)}>
   {#if !noAvatar}
-    <Avatar inline source={author.id} title={author.id} />
+    <Avatar inline nodeId={author.id} />
   {/if}
   <span class:highlight class="id highlight layout-desktop">
     {formatNodeId(author.id)}
diff --git a/src/components/Comment/Avatar.svelte b/src/components/Avatar.svelte
similarity index 69%
rename from src/components/Comment/Avatar.svelte
rename to src/components/Avatar.svelte
index 227ade2e8..4a1bba7ef 100644
--- a/src/components/Comment/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -1,16 +1,9 @@
 <script lang="ts">
   import { createIcon } from "@app/lib/blockies";
-  import { isNodeId } from "@app/lib/utils";
 
-  export let title: string;
-  export let source: string;
+  export let nodeId: string;
   export let inline = false;
 
-  function handleMissingFile() {
-    console.warn("Not able to locate", source);
-    source = createContainer(title);
-  }
-
   function createContainer(source: string) {
     source = source.replace("did:key:", "");
     const seed = source.toLowerCase();
@@ -21,10 +14,6 @@
     });
     return avatar.toDataURL();
   }
-
-  if (isNodeId(source)) {
-    source = createContainer(source);
-  }
 </script>
 
 <style>
@@ -48,9 +37,8 @@
 </style>
 
 <img
-  {title}
-  src={source}
+  title={nodeId}
+  src={createContainer(nodeId)}
   class="avatar"
   alt="avatar"
-  on:error={handleMissingFile}
   class:inline />
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index 9ec4b03a7..bd2504eec 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -5,7 +5,7 @@
   import type { Item } from "@app/components/Dropdown.svelte";
 
   import Authorship from "@app/components/Authorship.svelte";
-  import Avatar from "@app/components/Comment/Avatar.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
   import Badge from "@app/components/Badge.svelte";
   import Button from "@app/components/Button.svelte";
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
@@ -259,7 +259,7 @@
       validate={item => Boolean(parseNodeId(item))}
       validateAdd={(item, items) => validateAssignee(item, items)}>
       <svelte:fragment let:item>
-        <Avatar inline source={item} title={item} />
+        <Avatar inline nodeId={item} />
         <span>{formatNodeId(item)}</span>
       </svelte:fragment>
     </CobSideInput>
diff --git a/src/views/projects/Issue/New.svelte b/src/views/projects/Issue/New.svelte
index 605cf8e7f..6163d678d 100644
--- a/src/views/projects/Issue/New.svelte
+++ b/src/views/projects/Issue/New.svelte
@@ -5,7 +5,7 @@
   import * as modal from "@app/lib/modal";
   import AuthenticationErrorModal from "@app/views/session/AuthenticationErrorModal.svelte";
   import Authorship from "@app/components/Authorship.svelte";
-  import Avatar from "@app/components/Comment/Avatar.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
   import Badge from "@app/components/Badge.svelte";
   import Button from "@app/components/Button.svelte";
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
@@ -145,7 +145,7 @@
         validate={item => Boolean(parseNodeId(item))}
         validateAdd={(item, items) => validateTag(item, items)}>
         <svelte:fragment let:item>
-          <Avatar inline source={item} title={item} />
+          <Avatar inline nodeId={item} />
           <span>{formatNodeId(item)}</span>
         </svelte:fragment>
       </CobSideInput>