Barazo default frontend
barazo.forum
fix(reactions): wire LikeButton into TopicView and ReplyCard (#141)
The LikeButton component was built in #130 but never actually replaced
the static heart spans in TopicView and ReplyCard, so clicking the
heart on staging did nothing. Replace the display-only spans with the
interactive LikeButton and add missing onboarding context mocks to
tests that now render it.
authored by
Guido X Jansen
and committed by
GitHub
f91f96e4
cbef38e8
+42
-18
+5
src/app/t/[slug]/[rkey]/page.test.tsx
+5
src/app/t/[slug]/[rkey]/page.test.tsx
···
6
6
import { render, screen } from '@testing-library/react'
7
7
import TopicPage from './page'
8
8
import { mockTopics, mockReplies, mockCategories } from '@/mocks/data'
9
+
import { createMockOnboardingContext } from '@/test/mock-onboarding'
10
+
11
+
vi.mock('@/context/onboarding-context', () => ({
12
+
useOnboardingContext: () => createMockOnboardingContext(),
13
+
}))
9
14
10
15
vi.mock('@/hooks/use-toast', () => ({
11
16
useToast: () => ({ toast: vi.fn() }),
+10
-1
src/components/reply-card.test.tsx
+10
-1
src/components/reply-card.test.tsx
···
11
11
import { useAuth } from '@/hooks/use-auth'
12
12
import { updateReply } from '@/lib/api/client'
13
13
import type { Reply } from '@/lib/api/types'
14
+
import { createMockOnboardingContext } from '@/test/mock-onboarding'
14
15
15
16
// Mock useAuth
16
17
vi.mock('@/hooks/use-auth', () => ({
···
34
35
useToast: () => ({ toast: mockToast, dismiss: vi.fn() }),
35
36
}))
36
37
37
-
// Mock updateReply
38
+
// Mock onboarding context
39
+
vi.mock('@/context/onboarding-context', () => ({
40
+
useOnboardingContext: () => createMockOnboardingContext(),
41
+
}))
42
+
43
+
// Mock API client
38
44
vi.mock('@/lib/api/client', () => ({
39
45
updateReply: vi.fn(),
46
+
getReactions: vi.fn().mockResolvedValue({ reactions: [], cursor: null }),
47
+
createReaction: vi.fn().mockResolvedValue({ uri: 'at://test', cid: 'bafyrei-test' }),
48
+
deleteReaction: vi.fn().mockResolvedValue(undefined),
40
49
}))
41
50
42
51
const reply = mockReplies[0]!
+9
-9
src/components/reply-card.tsx
+9
-9
src/components/reply-card.tsx
···
11
11
import { useState, useCallback } from 'react'
12
12
import Link from 'next/link'
13
13
import Image from 'next/image'
14
-
import { Heart, Clock, Link as LinkIcon, ChatCircle, PencilSimple } from '@phosphor-icons/react'
14
+
import { Clock, Link as LinkIcon, ChatCircle, PencilSimple } from '@phosphor-icons/react'
15
15
import type { Reply } from '@/lib/api/types'
16
16
import { cn } from '@/lib/utils'
17
-
import { formatRelativeTime, formatCompactNumber, isEdited } from '@/lib/format'
17
+
import { formatRelativeTime, isEdited } from '@/lib/format'
18
18
import { updateReply } from '@/lib/api/client'
19
19
import { useAuth } from '@/hooks/use-auth'
20
20
import { useToast } from '@/hooks/use-toast'
21
21
import { MarkdownContent } from './markdown-content'
22
22
import { MarkdownEditor } from './markdown-editor'
23
+
import { LikeButton } from './like-button'
23
24
import { ReactionBar } from './reaction-bar'
24
25
import { ReportDialog, type ReportSubmission } from './report-dialog'
25
26
import { SelfLabelIndicator } from './self-label-indicator'
···
234
235
{reactions && onReactionToggle && (
235
236
<ReactionBar reactions={reactions} onToggle={onReactionToggle} />
236
237
)}
237
-
<span
238
-
className="flex items-center gap-1"
239
-
aria-label={`${formatCompactNumber(reply.reactionCount)} reactions`}
240
-
>
241
-
<Heart className="h-3.5 w-3.5" weight="regular" aria-hidden="true" />
242
-
{formatCompactNumber(reply.reactionCount)}
243
-
</span>
238
+
<LikeButton
239
+
subjectUri={reply.uri}
240
+
subjectCid={reply.cid}
241
+
initialCount={reply.reactionCount}
242
+
size="sm"
243
+
/>
244
244
<span className="flex items-center gap-1">
245
245
<Clock className="h-3.5 w-3.5" weight="regular" aria-hidden="true" />
246
246
{formatRelativeTime(reply.createdAt)}
+6
src/components/reply-thread.test.tsx
+6
src/components/reply-thread.test.tsx
···
7
7
import { axe } from 'vitest-axe'
8
8
import { ReplyThread } from './reply-thread'
9
9
import { mockReplies } from '@/mocks/data'
10
+
import { createMockOnboardingContext } from '@/test/mock-onboarding'
11
+
12
+
// Mock onboarding context (required by LikeButton via ReplyCard)
13
+
vi.mock('@/context/onboarding-context', () => ({
14
+
useOnboardingContext: () => createMockOnboardingContext(),
15
+
}))
10
16
11
17
// Mock useAuth (required by ReplyCard)
12
18
vi.mock('@/hooks/use-auth', () => ({
+5
src/components/topic-view.test.tsx
+5
src/components/topic-view.test.tsx
···
8
8
import { axe } from 'vitest-axe'
9
9
import { TopicView } from './topic-view'
10
10
import { mockTopics, mockUsers, mockAuthorDeletedTopic, mockModDeletedTopic } from '@/mocks/data'
11
+
import { createMockOnboardingContext } from '@/test/mock-onboarding'
11
12
12
13
vi.mock('@/hooks/use-toast', () => ({
13
14
useToast: () => ({ toast: vi.fn() }),
15
+
}))
16
+
17
+
vi.mock('@/context/onboarding-context', () => ({
18
+
useOnboardingContext: () => createMockOnboardingContext(),
14
19
}))
15
20
16
21
vi.mock('@/hooks/use-auth', () => ({
+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, PencilSimple } from '@phosphor-icons/react/dist/ssr'
9
+
import { ChatCircle, Clock, Tag, PencilSimple } 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, isEdited } from '@/lib/format'
13
13
import { MarkdownContent } from './markdown-content'
14
+
import { LikeButton } from './like-button'
14
15
import { ReactionBar } from './reaction-bar'
15
16
import { ModerationControls, type ModerationAction } from './moderation-controls'
16
17
import { ReportDialog, type ReportSubmission } from './report-dialog'
···
167
168
<ChatCircle className="h-4 w-4" weight="regular" aria-hidden="true" />
168
169
{formatCompactNumber(topic.replyCount)}
169
170
</span>
170
-
<span
171
-
className="flex items-center gap-1.5"
172
-
aria-label={`${formatCompactNumber(topic.reactionCount)} reactions`}
173
-
>
174
-
<Heart className="h-4 w-4" weight="regular" aria-hidden="true" />
175
-
{formatCompactNumber(topic.reactionCount)}
176
-
</span>
171
+
<LikeButton
172
+
subjectUri={topic.uri}
173
+
subjectCid={topic.cid}
174
+
initialCount={topic.reactionCount}
175
+
/>
177
176
<span className="flex items-center gap-1.5">
178
177
<Clock className="h-4 w-4" weight="regular" aria-hidden="true" />
179
178
Last activity {formatRelativeTime(topic.lastActivityAt)}