feat(RepoPage): add maintainer profile name in ui

add ui component states and test vectors for loading, displayName only and no name or displayName found wrapper for fetching user profile to follow
DanConwayDev · Dec 19, 2023 · 92c9637 · 92c9637
1 parent 46edd25
commit 92c9637
Show file tree

Hide file tree

Showing 7 changed files with 229 additions and 5 deletions.
diff --git a/...pshots__/repo-details--one-maintainer-s-profile-has-no-display-name-or-name.png b/...pshots__/repo-details--one-maintainer-s-profile-has-no-display-name-or-name.png
diff --git a/__snapshots__/repo-details--one-maintainer-s-profile-not-loaded.png b/__snapshots__/repo-details--one-maintainer-s-profile-not-loaded.png
diff --git a/...__/repo-details--one-maintainer-s-profile-only-has-display-name-but-no-name.png b/...__/repo-details--one-maintainer-s-profile-only-has-display-name-but-no-name.png
diff --git a/__snapshots__/repo-details.test.js.snap b/__snapshots__/repo-details.test.js.snap
@@ -365,6 +365,164 @@ exports[`Repo/Details No Tags test 1`] = `
 </div>
 `;
 
+exports[`Repo/Details One Maintainer's Profile Has No displayName or Name test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    short description
+  </p>
+  <div>
+    <div class="badge badge-secondary mr-2">
+      svelte
+    </div>
+    <div class="badge badge-secondary mr-2">
+      nostr
+    </div>
+    <div class="badge badge-secondary mr-2">
+      code-collaboration
+    </div>
+    <div class="badge badge-secondary mr-2">
+      git
+    </div>
+  </div>
+  <div>
+    <h4>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-neutral block my-2">
+      cannot find name
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details One Maintainer's Profile Not Loaded test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    short description
+  </p>
+  <div>
+    <div class="badge badge-secondary mr-2">
+      svelte
+    </div>
+    <div class="badge badge-secondary mr-2">
+      nostr
+    </div>
+    <div class="badge badge-secondary mr-2">
+      code-collaboration
+    </div>
+    <div class="badge badge-secondary mr-2">
+      git
+    </div>
+  </div>
+  <div>
+    <h4>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge skeleton my-2 w-40 block">
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name test 1`] = `
+<div class="max-w-md prose">
+  <h4>
+    description
+  </h4>
+  <p class="text-sm my-2 break-words">
+    short description
+  </p>
+  <div>
+    <div class="badge badge-secondary mr-2">
+      svelte
+    </div>
+    <div class="badge badge-secondary mr-2">
+      nostr
+    </div>
+    <div class="badge badge-secondary mr-2">
+      code-collaboration
+    </div>
+    <div class="badge badge-secondary mr-2">
+      git
+    </div>
+  </div>
+  <div>
+    <h4>
+      maintainers
+    </h4>
+    <div class="badge badge-accent block my-2">
+      carole
+    </div>
+    <div class="badge badge-accent block my-2">
+      bob
+    </div>
+    <div class="badge badge-accent block my-2">
+      steve
+    </div>
+  </div>
+  <div>
+    <h4>
+      relays
+    </h4>
+    <div class="badge badge-secondary block my-2">
+      relay.damus.io
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relay.snort.social
+    </div>
+    <div class="badge badge-secondary block my-2">
+      relayable.org
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Repo/Details Short Details test 1`] = `
 <div class="max-w-md prose">
   <h4>

diff --git a/src/lib/components/Repo.vectors.ts b/src/lib/components/Repo.vectors.ts
@@ -1,5 +1,6 @@
 import type { Args as SummaryCardArgs } from "./RepoSummaryCard.svelte";
 import type { Args as DetailsArgs } from "./RepoDetails.svelte";
+import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
 
 export let RepoSummaryCardArgsVectors = {
     Short: {
@@ -29,9 +30,9 @@ let base: DetailsArgs = {
         "relayable.org",
     ],
     maintainers: [
-        "carole",
-        "bob",
-        "steve",
+        { name: "carole" } as NDKUserProfile,
+        { name: "bob" } as NDKUserProfile,
+        { name: "steve" } as NDKUserProfile,
     ],
 };
 
@@ -52,6 +53,40 @@ export let RepoDetailsArgsVectors = {
     NoNameOrDescription: { ...base, name: "", description: "" } as DetailsArgs,
     NoDescription: { ...base, description: "" } as DetailsArgs,
     NoTags: { ...base, tags: [] } as DetailsArgs,
+    MaintainersOneProfileNotLoaded: {
+        ...base, maintainers: [
+            { name: "carole" } as NDKUserProfile,
+            "pubkey",
+            { name: "steve" } as NDKUserProfile,
+
+        ]
+    } as DetailsArgs,
+    MaintainersOneProfileDisplayNameWithoutName: {
+        ...base, maintainers: [
+            { name: "carole" } as NDKUserProfile,
+            { displayName: "bob" } as NDKUserProfile,
+            { name: "steve" } as NDKUserProfile,
+
+        ]
+    } as DetailsArgs,
+    MaintainersOneProfileNameAndDisplayNamePresent: {
+        ...base, maintainers: [
+            { name: "carole" } as NDKUserProfile,
+            {
+                name: "bob", displayName: "shouldnt display"
+            } as NDKUserProfile,
+            { name: "steve" } as NDKUserProfile,
+
+        ]
+    } as DetailsArgs,
+    MaintainersOneProfileNoNameOrDisplayNameBeingPresent: {
+        ...base, maintainers: [
+            { name: "carole" } as NDKUserProfile,
+            {} as NDKUserProfile,
+            { name: "steve" } as NDKUserProfile,
+
+        ]
+    } as DetailsArgs,
     NoMaintainers: { ...base, maintainers: [] } as DetailsArgs,
     NoRelays: { ...base, relays: [] } as DetailsArgs,
     NoMaintainersOrRelays: { ...base, maintainers: [], relays: [] } as DetailsArgs,

diff --git a/src/lib/components/RepoDetails.stories.svelte b/src/lib/components/RepoDetails.stories.svelte
@@ -29,6 +29,21 @@
 
 <Story name="No Maintainers" args={vectors.NoMaintainers} />
 
+<Story
+    name="One Maintainer's Profile Not Loaded"
+    args={vectors.MaintainersOneProfileNotLoaded}
+/>
+
+<Story
+    name="One Maintainer's Profile Only Has displayName But No Name"
+    args={vectors.MaintainersOneProfileDisplayNameWithoutName}
+/>
+
+<Story
+    name="One Maintainer's Profile Has No displayName or Name"
+    args={vectors.MaintainersOneProfileNoNameOrDisplayNameBeingPresent}
+/>
+
 <Story name="No Relays" args={vectors.NoRelays} />
 
 <Story name="No Maintainers or Relays" args={vectors.NoMaintainersOrRelays} />

diff --git a/src/lib/components/RepoDetails.svelte b/src/lib/components/RepoDetails.svelte
@@ -1,11 +1,13 @@
 <script lang="ts" context="module">
+    import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
+
     export interface Args {
         repo_id: string;
         name: string;
         description: string;
         git_server: string;
         tags: string[];
-        maintainers: string[];
+        maintainers: (string | NDKUserProfile)[];
         relays: string[];
         loading?: boolean;
     }
@@ -77,7 +79,21 @@
         {:else}
             <h4>maintainers</h4>
             {#each maintainers as maintainer}
-                <div class="badge badge-accent block my-2">{maintainer}</div>
+                {#if typeof maintainer == "string"}
+                    <div class="badge skeleton my-2 w-40 block"></div>
+                {:else if typeof maintainer.name !== "undefined"}
+                    <div class="badge badge-accent block my-2">
+                        {maintainer.name}
+                    </div>
+                {:else if typeof maintainer.displayName !== "undefined"}
+                    <div class="badge badge-accent block my-2">
+                        {maintainer.displayName}
+                    </div>
+                {:else}
+                    <div class="badge badge-neutral block my-2">
+                        cannot find name
+                    </div>
+                {/if}
             {/each}
         {/if}
     </div>