gui.do / barazo-web
Barazo default frontend barazo.forum
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(homepage): add popular topics section, limit to 10 (#121)

* feat(homepage): add popular topics section, limit to 10

Fetch both recent and popular topics (10 each) in parallel.
Renders "Popular Topics" below "Recent Topics" on the homepage.
Popular list only shown when topics exist.

* fix(test): use getAllByText for topic appearing in both lists

The homepage now renders the same topics in both Recent and Popular
sections (from mock data), so getByText fails with multiple matches.
Switch to getAllByText which correctly handles duplicates.

authored by

Guido X Jansen and committed by
GitHub 092e96c3 066b40f8

+15 -5
+2 -1
src/app/page.test.tsx
··· 78 78 it('renders recent topics', async () => { 79 79 const page = await HomePage() 80 80 render(page) 81 - expect(screen.getByText('Welcome to Barazo Forums')).toBeInTheDocument() 81 + const matches = screen.getAllByText('Welcome to Barazo Forums') 82 + expect(matches.length).toBeGreaterThan(0) 82 83 }) 83 84 84 85 it('renders category navigation', async () => {
+13 -4
src/app/page.tsx
··· 25 25 26 26 export default async function HomePage() { 27 27 let categoriesResult: CategoriesResponse = { categories: [] } 28 - let topicsResult: TopicsResponse = { topics: [], cursor: null } 28 + let recentTopics: TopicsResponse = { topics: [], cursor: null } 29 + let popularTopics: TopicsResponse = { topics: [], cursor: null } 29 30 let publicSettings: PublicSettings | null = null 30 31 let apiError = false 31 32 32 33 try { 33 - ;[categoriesResult, topicsResult, publicSettings] = await Promise.all([ 34 + ;[categoriesResult, recentTopics, popularTopics, publicSettings] = await Promise.all([ 34 35 getCategories(), 35 - getTopics({ limit: 20, sort: 'latest' }), 36 + getTopics({ limit: 10, sort: 'latest' }), 37 + getTopics({ limit: 10, sort: 'popular' }), 36 38 getPublicSettings(), 37 39 ]) 38 40 } catch { ··· 96 98 )} 97 99 98 100 {/* Recent Topics */} 99 - <TopicList topics={topicsResult.topics} heading="Recent Topics" /> 101 + <TopicList topics={recentTopics.topics} heading="Recent Topics" /> 102 + 103 + {/* Popular Topics */} 104 + {popularTopics.topics.length > 0 && ( 105 + <div className="mt-8"> 106 + <TopicList topics={popularTopics.topics} heading="Popular Topics" /> 107 + </div> 108 + )} 100 109 </> 101 110 )} 102 111 </ForumLayout>