csr tangled client in solid-js
show user handle in issue comment card
+14
-5
+14
-5
src/pages/repo/issues.tsx
+14
-5
src/pages/repo/issues.tsx
···
4
4
import { createQuery, useQueryClient } from '@tanstack/solid-query';
5
5
import type { ResourceUri } from '@atcute/lexicons/syntax';
6
6
import { For, Match, Show, Switch, createMemo, createSignal, type Component } from 'solid-js';
7
-
import { createIssue, createIssueComment, getIssue, listIssuesPage, parseAtUri, setIssueState, type IssueComment, type RepoContext } from '../../lib/api';
7
+
import { createIssue, createIssueComment, getIssue, listIssuesPage, parseAtUri, resolveActor, setIssueState, type IssueComment, type RepoContext } from '../../lib/api';
8
8
import { useAuth } from '../../lib/auth';
9
9
import { Avatar, ErrorState, StateBadge, ToggleButton, buttonStyles, cardStyles, inputStyles, textareaStyles } from '../../components/common';
10
10
import { MarkdownBlock, PaginationControls, RepoListSkeleton, RepoThreadSkeleton } from '../../components/repo';
···
385
385
return true;
386
386
});
387
387
});
388
-
const currentDid = createMemo(() => auth.currentDid());
389
-
const commentThreads = createMemo(() => buildIssueCommentThreads(detail().comments));
388
+
const currentDid = createMemo(() => auth.currentDid());
389
+
const currentHandleQuery = createQuery(() => {
390
+
const did = currentDid();
391
+
return {
392
+
queryKey: ['actor-handle', did ?? ''],
393
+
enabled: Boolean(did),
394
+
queryFn: async () => (await resolveActor(did!)).handle,
395
+
};
396
+
});
397
+
const currentHandle = createMemo(() => currentHandleQuery.data ?? currentDid());
398
+
const commentThreads = createMemo(() => buildIssueCommentThreads(detail().comments));
390
399
return (
391
400
<div class="grid grid-cols-1 gap-4 w-full md:grid-cols-10">
392
401
<div class="col-span-1 min-w-0 md:col-span-8">
···
494
503
{(did) => (
495
504
<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
496
505
<Avatar did={did()} size="size-6" />
497
-
<span>{did()}</span>
506
+
<span>{currentHandle()}</span>
498
507
</div>
499
508
)}
500
509
</Show>
···
529
538
{(did) => (
530
539
<div class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
531
540
<Avatar did={did()} size="size-6" />
532
-
<span>{did()}</span>
541
+
<span>{currentHandle()}</span>
533
542
</div>
534
543
)}
535
544
</Show>