diff --git a/common/user.ts b/common/user.ts
index 0e333278..f15865cf 100644
--- a/common/user.ts
+++ b/common/user.ts
@@ -34,7 +34,7 @@ export type User = {
followerCountCached: number
followedCategories?: string[]
- homeSections?: { visible: string[]; hidden: string[] }
+ homeSections?: string[]
referredByUserId?: string
referredByContractId?: string
diff --git a/web/components/arrange-home.tsx b/web/components/arrange-home.tsx
index 9c44e516..01746c1a 100644
--- a/web/components/arrange-home.tsx
+++ b/web/components/arrange-home.tsx
@@ -13,19 +13,13 @@ import { Group } from 'common/group'
export function ArrangeHome(props: {
user: User | null | undefined
- homeSections: { visible: string[]; hidden: string[] }
- setHomeSections: (homeSections: {
- visible: string[]
- hidden: string[]
- }) => void
+ homeSections: string[]
+ setHomeSections: (sections: string[]) => void
}) {
const { user, homeSections, setHomeSections } = props
const groups = useMemberGroups(user?.id) ?? []
- const { itemsById, visibleItems, hiddenItems } = getHomeItems(
- groups,
- homeSections
- )
+ const { itemsById, sections } = getHomeItems(groups, homeSections)
return (
item.id),
- hidden: hiddenItems.map((item) => item.id),
- }
+ const newHomeSections = sections.map((section) => section.id)
- const sourceSection = source.droppableId as 'visible' | 'hidden'
- newHomeSections[sourceSection].splice(source.index, 1)
-
- const destSection = destination.droppableId as 'visible' | 'hidden'
- newHomeSections[destSection].splice(destination.index, 0, item.id)
+ newHomeSections.splice(source.index, 1)
+ newHomeSections.splice(destination.index, 0, item.id)
setHomeSections(newHomeSections)
}}
>
-
-
-
+
+
)
@@ -64,16 +51,13 @@ function DraggableList(props: {
const { title, items } = props
return (
- {(provided, snapshot) => (
+ {(provided) => (
-
+
{items.map((item, index) => (
{(provided, snapshot) => (
@@ -85,7 +69,7 @@ function DraggableList(props: {
>
@@ -122,10 +106,7 @@ const SectionItem = (props: {
)
}
-export const getHomeItems = (
- groups: Group[],
- homeSections: { visible: string[]; hidden: string[] }
-) => {
+export const getHomeItems = (groups: Group[], sections: string[]) => {
const items = [
{ label: 'Trending', id: 'score' },
{ label: 'New for you', id: 'newest' },
@@ -136,23 +117,13 @@ export const getHomeItems = (
]
const itemsById = keyBy(items, 'id')
- const { visible, hidden } = homeSections
+ const sectionItems = filterDefined(sections.map((id) => itemsById[id]))
- const [visibleItems, hiddenItems] = [
- filterDefined(visible.map((id) => itemsById[id])),
- filterDefined(hidden.map((id) => itemsById[id])),
- ]
-
- // Add unmentioned items to the visible list.
- visibleItems.push(
- ...items.filter(
- (item) => !visibleItems.includes(item) && !hiddenItems.includes(item)
- )
- )
+ // Add unmentioned items to the end.
+ sectionItems.push(...items.filter((item) => !sectionItems.includes(item)))
return {
- visibleItems,
- hiddenItems,
+ sections: sectionItems,
itemsById,
}
}
diff --git a/web/pages/experimental/home/edit.tsx b/web/pages/experimental/home/edit.tsx
index 2cba3f19..2ed9d2dd 100644
--- a/web/pages/experimental/home/edit.tsx
+++ b/web/pages/experimental/home/edit.tsx
@@ -16,14 +16,9 @@ export default function Home() {
useTracking('edit home')
- const [homeSections, setHomeSections] = useState(
- user?.homeSections ?? { visible: [], hidden: [] }
- )
+ const [homeSections, setHomeSections] = useState(user?.homeSections ?? [])
- const updateHomeSections = (newHomeSections: {
- visible: string[]
- hidden: string[]
- }) => {
+ const updateHomeSections = (newHomeSections: string[]) => {
if (!user) return
updateUser(user.id, { homeSections: newHomeSections })
setHomeSections(newHomeSections)
@@ -31,7 +26,7 @@ export default function Home() {
return (
-
+
diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx
index 3068ff5d..60474ded 100644
--- a/web/pages/experimental/home/index.tsx
+++ b/web/pages/experimental/home/index.tsx
@@ -38,10 +38,8 @@ const Home = () => {
const groups = useMemberGroups(user?.id) ?? []
- const [homeSections] = useState(
- user?.homeSections ?? { visible: [], hidden: [] }
- )
- const { visibleItems } = getHomeItems(groups, homeSections)
+ const [homeSections] = useState(user?.homeSections ?? [])
+ const { sections } = getHomeItems(groups, homeSections)
return (
@@ -57,7 +55,7 @@ const Home = () => {
Daily movers
- {visibleItems.map((item) => {
+ {sections.map((item) => {
const { id } = item
if (id === 'your-bets') {
return (