diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx
index ebbe716e..d9c7dc9e 100644
--- a/web/pages/experimental/home/index.tsx
+++ b/web/pages/experimental/home/index.tsx
@@ -79,28 +79,7 @@ export default function Home() {
- {sections.map((item) => {
- const { id } = item
- if (id === 'daily-movers') {
- return
- }
- const sort = SORTS.find((sort) => sort.value === id)
- if (sort)
- return (
-
- )
-
- const group = groups.find((g) => g.id === id)
- if (group) return
-
- return null
- })}
+ {sections.map((section) => renderSection(section, user, groups))}
@@ -118,14 +97,19 @@ export default function Home() {
)
}
+const HOME_SECTIONS = [
+ { label: 'Daily movers', id: 'daily-movers' },
+ { label: 'Trending', id: 'score' },
+ { label: 'New', id: 'newest' },
+ { label: 'New for you', id: 'new-for-you' },
+]
+
export const getHomeItems = (groups: Group[], sections: string[]) => {
// Accommodate old home sections.
if (!isArray(sections)) sections = []
const items = [
- { label: 'Trending', id: 'score' },
- { label: 'New for you', id: 'newest' },
- { label: 'Daily movers', id: 'daily-movers' },
+ ...HOME_SECTIONS,
...groups.map((g) => ({
label: g.name,
id: g.id,
@@ -144,6 +128,37 @@ export const getHomeItems = (groups: Group[], sections: string[]) => {
}
}
+function renderSection(
+ section: { id: string; label: string },
+ user: User | null | undefined,
+ groups: Group[]
+) {
+ const { id, label } = section
+ if (id === 'daily-movers') {
+ return
+ }
+ if (id === 'new-for-you')
+ return (
+
+ )
+ const sort = SORTS.find((sort) => sort.value === id)
+ if (sort)
+ return (
+
+ )
+
+ const group = groups.find((g) => g.id === id)
+ if (group) return
+
+ return null
+}
+
function SectionHeader(props: {
label: string
href: string