Refactor arrange home

web/components/arrange-home.tsx

@@ -5,21 +5,15 @@ import { MenuIcon } from '@heroicons/react/solid'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Subtitle } from 'web/components/subtitle'
-import { useMemberGroups } from 'web/hooks/use-group'
+import { keyBy } from 'lodash'
-import { filterDefined } from 'common/util/array'
-import { isArray, keyBy } from 'lodash'
-import { User } from 'common/user'
-import { Group } from 'common/group'
 
 export function ArrangeHome(props: {
-  user: User | null | undefined
+  sections: { label: string; id: string }[]
-  homeSections: string[]
+  setSectionIds: (sections: string[]) => void
-  setHomeSections: (sections: string[]) => void
 }) {
-  const { user, homeSections, setHomeSections } = props
+  const { sections, setSectionIds } = props
 
-  const groups = useMemberGroups(user?.id) ?? []
+  const sectionsById = keyBy(sections, 'id')
-  const { itemsById, sections } = getHomeItems(groups, homeSections)
 
   return (
     <DragDropContext
@@ -27,14 +21,14 @@ export function ArrangeHome(props: {
         const { destination, source, draggableId } = e
         if (!destination) return
 
-        const item = itemsById[draggableId]
+        const section = sectionsById[draggableId]
 
-        const newHomeSections = sections.map((section) => section.id)
+        const newSectionIds = sections.map((section) => section.id)
 
-        newHomeSections.splice(source.index, 1)
+        newSectionIds.splice(source.index, 1)
-        newHomeSections.splice(destination.index, 0, item.id)
+        newSectionIds.splice(destination.index, 0, section.id)
 
-        setHomeSections(newHomeSections)
+        setSectionIds(newSectionIds)
       }}
     >
       <Row className="relative max-w-md gap-4">
@@ -105,29 +99,3 @@ const SectionItem = (props: {
     </div>
   )
 }
-
-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' },
-    ...groups.map((g) => ({
-      label: g.name,
-      id: g.id,
-    })),
-  ]
-  const itemsById = keyBy(items, 'id')
-
-  const sectionItems = filterDefined(sections.map((id) => itemsById[id]))
-
-  // Add unmentioned items to the end.
-  sectionItems.push(...items.filter((item) => !sectionItems.includes(item)))
-
-  return {
-    sections: sectionItems,
-    itemsById,
-  }
-}

web/pages/experimental/home/edit.tsx

@@ -7,9 +7,11 @@ import { Row } from 'web/components/layout/row'
 import { Page } from 'web/components/page'
 import { SiteLink } from 'web/components/site-link'
 import { Title } from 'web/components/title'
+import { useMemberGroups } from 'web/hooks/use-group'
 import { useTracking } from 'web/hooks/use-tracking'
 import { useUser } from 'web/hooks/use-user'
 import { updateUser } from 'web/lib/firebase/users'
+import { getHomeItems } from '.'
 
 export default function Home() {
   const user = useUser()
@@ -24,6 +26,9 @@ export default function Home() {
     setHomeSections(newHomeSections)
   }
 
+  const groups = useMemberGroups(user?.id) ?? []
+  const { sections } = getHomeItems(groups, homeSections)
+
   return (
     <Page>
       <Col className="pm:mx-10 gap-4 px-4 pb-6 pt-2">
@@ -32,11 +37,7 @@ export default function Home() {
           <DoneButton />
         </Row>
 
-        <ArrangeHome
+        <ArrangeHome sections={sections} setSectionIds={updateHomeSections} />
-          user={user}
-          homeSections={homeSections}
-          setHomeSections={updateHomeSections}
-        />
       </Col>
     </Page>
   )

web/pages/experimental/home/index.tsx

@@ -26,7 +26,6 @@ import {
   useTrendingGroups,
 } from 'web/hooks/use-group'
 import { Button } from 'web/components/button'
-import { getHomeItems } from '../../../components/arrange-home'
 import { Row } from 'web/components/layout/row'
 import { ProbChangeTable } from 'web/components/contract/prob-change-table'
 import {
@@ -47,6 +46,7 @@ import { ContractsGrid } from 'web/components/contract/contracts-grid'
 import { PillButton } from 'web/components/buttons/pill-button'
 import { filterDefined } from 'common/util/array'
 import { updateUser } from 'web/lib/firebase/users'
+import { isArray, keyBy } from 'lodash'
 
 export default function Home() {
   const user = useUser()
@@ -118,6 +118,32 @@ export default function Home() {
   )
 }
 
+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' },
+    ...groups.map((g) => ({
+      label: g.name,
+      id: g.id,
+    })),
+  ]
+  const itemsById = keyBy(items, 'id')
+
+  const sectionItems = filterDefined(sections.map((id) => itemsById[id]))
+
+  // Add unmentioned items to the end.
+  sectionItems.push(...items.filter((item) => !sectionItems.includes(item)))
+
+  return {
+    sections: sectionItems,
+    itemsById,
+  }
+}
+
 function SectionHeader(props: {
   label: string
   href: string