Barazo default frontend
barazo.forum
Merge pull request #130 from barazo-forum/feat/like-button
feat(reactions): wire up interactive like button
authored by
Guido X Jansen
and committed by
GitHub
a25cbfb6
f17b202d
+627
-18
+21
src/components/reply-card.test.tsx
+21
src/components/reply-card.test.tsx
···
9
9
import { ReplyCard } from './reply-card'
10
10
import { mockReplies, mockAuthorDeletedReply, mockModDeletedReply } from '@/mocks/data'
11
11
12
+
vi.mock('@/hooks/use-auth', () => ({
13
+
useAuth: () => ({
14
+
user: { did: 'did:plc:user-test-001', handle: 'test.bsky.social' },
15
+
isAuthenticated: true,
16
+
isLoading: false,
17
+
getAccessToken: () => 'mock-access-token',
18
+
authFetch: vi.fn(),
19
+
login: vi.fn(),
20
+
logout: vi.fn(),
21
+
setSessionFromCallback: vi.fn(),
22
+
crossPostScopesGranted: false,
23
+
requestCrossPostAuth: vi.fn(),
24
+
}),
25
+
}))
26
+
27
+
vi.mock('@/lib/api/client', () => ({
28
+
getReactions: vi.fn().mockResolvedValue({ reactions: [], cursor: null }),
29
+
createReaction: vi.fn().mockResolvedValue({ uri: 'at://test', cid: 'bafyrei-test' }),
30
+
deleteReaction: vi.fn().mockResolvedValue(undefined),
31
+
}))
32
+
12
33
const reply = mockReplies[0]!
13
34
const nestedReply = mockReplies[1]! // depth 1
14
35
+9
-9
src/components/reply-card.tsx
+9
-9
src/components/reply-card.tsx
···
8
8
9
9
import Link from 'next/link'
10
10
import Image from 'next/image'
11
-
import { Heart, Clock, Link as LinkIcon, ChatCircle } from '@phosphor-icons/react/dist/ssr'
11
+
import { Clock, Link as LinkIcon, ChatCircle } from '@phosphor-icons/react/dist/ssr'
12
12
import type { Reply } from '@/lib/api/types'
13
13
import { cn } from '@/lib/utils'
14
-
import { formatRelativeTime, formatCompactNumber } from '@/lib/format'
14
+
import { formatRelativeTime } from '@/lib/format'
15
15
import { MarkdownContent } from './markdown-content'
16
16
import { ReactionBar } from './reaction-bar'
17
17
import { ReportDialog, type ReportSubmission } from './report-dialog'
18
18
import { SelfLabelIndicator } from './self-label-indicator'
19
+
import { LikeButton } from './like-button'
19
20
20
21
interface ReactionData {
21
22
type: string
···
163
164
{reactions && onReactionToggle && (
164
165
<ReactionBar reactions={reactions} onToggle={onReactionToggle} />
165
166
)}
166
-
<span
167
-
className="flex items-center gap-1"
168
-
aria-label={`${formatCompactNumber(reply.reactionCount)} reactions`}
169
-
>
170
-
<Heart className="h-3.5 w-3.5" weight="regular" aria-hidden="true" />
171
-
{formatCompactNumber(reply.reactionCount)}
172
-
</span>
167
+
<LikeButton
168
+
subjectUri={reply.uri}
169
+
subjectCid={reply.cid}
170
+
initialCount={reply.reactionCount}
171
+
size="sm"
172
+
/>
173
173
<span className="flex items-center gap-1">
174
174
<Clock className="h-3.5 w-3.5" weight="regular" aria-hidden="true" />
175
175
{formatRelativeTime(reply.createdAt)}
+22
-1
src/components/reply-thread.test.tsx
+22
-1
src/components/reply-thread.test.tsx
···
2
2
* Tests for ReplyThread component.
3
3
*/
4
4
5
-
import { describe, it, expect } from 'vitest'
5
+
import { describe, it, expect, vi } from 'vitest'
6
6
import { render, screen } from '@testing-library/react'
7
7
import { axe } from 'vitest-axe'
8
8
import { ReplyThread } from './reply-thread'
9
9
import { mockReplies } from '@/mocks/data'
10
+
11
+
vi.mock('@/hooks/use-auth', () => ({
12
+
useAuth: () => ({
13
+
user: { did: 'did:plc:user-test-001', handle: 'test.bsky.social' },
14
+
isAuthenticated: true,
15
+
isLoading: false,
16
+
getAccessToken: () => 'mock-access-token',
17
+
authFetch: vi.fn(),
18
+
login: vi.fn(),
19
+
logout: vi.fn(),
20
+
setSessionFromCallback: vi.fn(),
21
+
crossPostScopesGranted: false,
22
+
requestCrossPostAuth: vi.fn(),
23
+
}),
24
+
}))
25
+
26
+
vi.mock('@/lib/api/client', () => ({
27
+
getReactions: vi.fn().mockResolvedValue({ reactions: [], cursor: null }),
28
+
createReaction: vi.fn().mockResolvedValue({ uri: 'at://test', cid: 'bafyrei-test' }),
29
+
deleteReaction: vi.fn().mockResolvedValue(undefined),
30
+
}))
10
31
11
32
describe('ReplyThread', () => {
12
33
it('renders all replies', () => {
+21
src/components/topic-view.test.tsx
+21
src/components/topic-view.test.tsx
···
9
9
import { TopicView } from './topic-view'
10
10
import { mockTopics, mockUsers, mockAuthorDeletedTopic, mockModDeletedTopic } from '@/mocks/data'
11
11
12
+
vi.mock('@/hooks/use-auth', () => ({
13
+
useAuth: () => ({
14
+
user: { did: 'did:plc:user-test-001', handle: 'test.bsky.social' },
15
+
isAuthenticated: true,
16
+
isLoading: false,
17
+
getAccessToken: () => 'mock-access-token',
18
+
authFetch: vi.fn(),
19
+
login: vi.fn(),
20
+
logout: vi.fn(),
21
+
setSessionFromCallback: vi.fn(),
22
+
crossPostScopesGranted: false,
23
+
requestCrossPostAuth: vi.fn(),
24
+
}),
25
+
}))
26
+
27
+
vi.mock('@/lib/api/client', () => ({
28
+
getReactions: vi.fn().mockResolvedValue({ reactions: [], cursor: null }),
29
+
createReaction: vi.fn().mockResolvedValue({ uri: 'at://test', cid: 'bafyrei-test' }),
30
+
deleteReaction: vi.fn().mockResolvedValue(undefined),
31
+
}))
32
+
12
33
const topic = mockTopics[0]!
13
34
14
35
const mockReactions = [
+7
-8
src/components/topic-view.tsx
+7
-8
src/components/topic-view.tsx
···
6
6
*/
7
7
8
8
import Link from 'next/link'
9
-
import { ChatCircle, Heart, Clock, Tag } from '@phosphor-icons/react/dist/ssr'
9
+
import { ChatCircle, Clock, Tag } from '@phosphor-icons/react/dist/ssr'
10
10
import type { Topic } from '@/lib/api/types'
11
11
import { cn } from '@/lib/utils'
12
12
import { formatRelativeTime, formatCompactNumber } from '@/lib/format'
···
15
15
import { ModerationControls, type ModerationAction } from './moderation-controls'
16
16
import { ReportDialog, type ReportSubmission } from './report-dialog'
17
17
import { SelfLabelIndicator } from './self-label-indicator'
18
+
import { LikeButton } from './like-button'
18
19
19
20
interface ReactionData {
20
21
type: string
···
155
156
<ChatCircle className="h-4 w-4" weight="regular" aria-hidden="true" />
156
157
{formatCompactNumber(topic.replyCount)}
157
158
</span>
158
-
<span
159
-
className="flex items-center gap-1.5"
160
-
aria-label={`${formatCompactNumber(topic.reactionCount)} reactions`}
161
-
>
162
-
<Heart className="h-4 w-4" weight="regular" aria-hidden="true" />
163
-
{formatCompactNumber(topic.reactionCount)}
164
-
</span>
159
+
<LikeButton
160
+
subjectUri={topic.uri}
161
+
subjectCid={topic.cid}
162
+
initialCount={topic.reactionCount}
163
+
/>
165
164
<span className="flex items-center gap-1.5">
166
165
<Clock className="h-4 w-4" weight="regular" aria-hidden="true" />
167
166
Last activity {formatRelativeTime(topic.lastActivityAt)}
+58
src/lib/api/client.ts
+58
src/lib/api/client.ts
···
63
63
TrustGraphStatus,
64
64
BehavioralFlagsResponse,
65
65
BehavioralFlag,
66
+
ReactionsResponse,
66
67
} from './types'
67
68
68
69
/** Client: relative URLs (empty string). Server: internal Docker network URL. */
···
1124
1125
headers: { ...options?.headers, Authorization: `Bearer ${accessToken}` },
1125
1126
body: input,
1126
1127
})
1128
+
}
1129
+
1130
+
// --- Reaction endpoints ---
1131
+
1132
+
export interface CreateReactionInput {
1133
+
subjectUri: string
1134
+
subjectCid: string
1135
+
type: string
1136
+
}
1137
+
1138
+
export interface CreateReactionResponse {
1139
+
uri: string
1140
+
cid: string
1141
+
rkey: string
1142
+
type: string
1143
+
subjectUri: string
1144
+
createdAt: string
1145
+
}
1146
+
1147
+
export function createReaction(
1148
+
input: CreateReactionInput,
1149
+
accessToken: string,
1150
+
options?: FetchOptions
1151
+
): Promise<CreateReactionResponse> {
1152
+
return apiFetch<CreateReactionResponse>('/api/reactions', {
1153
+
...options,
1154
+
method: 'POST',
1155
+
headers: { ...options?.headers, Authorization: `Bearer ${accessToken}` },
1156
+
body: input,
1157
+
})
1158
+
}
1159
+
1160
+
export function deleteReaction(
1161
+
uri: string,
1162
+
accessToken: string,
1163
+
options?: FetchOptions
1164
+
): Promise<void> {
1165
+
const url = `/api/reactions/${encodeURIComponent(uri)}`
1166
+
return apiFetch<void>(url, {
1167
+
...options,
1168
+
method: 'DELETE',
1169
+
headers: { ...options?.headers, Authorization: `Bearer ${accessToken}` },
1170
+
})
1171
+
}
1172
+
1173
+
export function getReactions(
1174
+
subjectUri: string,
1175
+
params: { type?: string; cursor?: string; limit?: number } = {},
1176
+
options?: FetchOptions
1177
+
): Promise<ReactionsResponse> {
1178
+
const query = buildQuery({
1179
+
subjectUri,
1180
+
type: params.type,
1181
+
cursor: params.cursor,
1182
+
limit: params.limit,
1183
+
})
1184
+
return apiFetch<ReactionsResponse>(`/api/reactions${query}`, options)
1127
1185
}
1128
1186
1129
1187
export { ApiError }