Add your bets section to /experimental/home

web/components/arrange-home.tsx

@@ -9,6 +9,7 @@ import { useMemberGroups } from 'web/hooks/use-group'
 import { filterDefined } from 'common/util/array'
 import { keyBy } from 'lodash'
 import { User } from 'common/user'
+import { Group } from 'common/group'
 
 export function ArrangeHome(props: {
   user: User | null
@@ -18,35 +19,12 @@ export function ArrangeHome(props: {
     hidden: string[]
   }) => void
 }) {
-  const {
+  const { user, homeSections, setHomeSections } = props
-    user,
-    homeSections: { visible, hidden },
-    setHomeSections,
-  } = props
 
-  const memberGroups = useMemberGroups(user?.id) ?? []
+  const groups = useMemberGroups(user?.id) ?? []
-
+  const { itemsById, visibleItems, hiddenItems } = getHomeItems(
-  const items = [
+    groups,
-    { label: 'Trending', id: 'score' },
+    homeSections
-    { label: 'Newest', id: 'newest' },
-    { label: 'Close date', id: 'close-date' },
-    ...memberGroups.map((g) => ({
-      label: g.name,
-      id: g.id,
-    })),
-  ]
-  const itemsById = keyBy(items, '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)
-    )
   )
 
   return (
@@ -125,3 +103,40 @@ function DraggableList(props: {
     </Droppable>
   )
 }
+
+export const getHomeItems = (
+  groups: Group[],
+  homeSections: { visible: string[]; hidden: string[] }
+) => {
+  const items = [
+    { label: 'Trending', id: 'score' },
+    { label: 'Newest', id: 'newest' },
+    { label: 'Close date', id: 'close-date' },
+    { label: 'Your bets', id: 'your-bets' },
+    ...groups.map((g) => ({
+      label: g.name,
+      id: g.id,
+    })),
+  ]
+  const itemsById = keyBy(items, 'id')
+
+  const { visible, hidden } = homeSections
+
+  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)
+    )
+  )
+
+  return {
+    visibleItems,
+    hiddenItems,
+    itemsById,
+  }
+}

web/components/contract-search.tsx

@@ -65,6 +65,7 @@ type AdditionalFilter = {
   tag?: string
   excludeContractIds?: string[]
   groupSlug?: string
+  yourBets?: boolean
 }
 
 export function ContractSearch(props: {
@@ -296,6 +297,10 @@ function ContractSearchControls(props: {
     additionalFilter?.groupSlug
       ? `groupLinks.slug:${additionalFilter.groupSlug}`
       : '',
+    additionalFilter?.yourBets && user
+      ? // Show contracts bet on by the user
+        `uniqueBettorIds:${user.id}`
+      : '',
   ]
   const facetFilters = query
     ? additionalFilters

web/pages/experimental/home/index.tsx

@@ -22,7 +22,7 @@ import { useMemberGroups } from 'web/hooks/use-group'
 import { DoubleCarousel } from '../../../components/double-carousel'
 import clsx from 'clsx'
 import { Button } from 'web/components/button'
-import { ArrangeHome } from '../../../components/arrange-home'
+import { ArrangeHome, getHomeItems } from '../../../components/arrange-home'
 import { Title } from 'web/components/title'
 import { Row } from 'web/components/layout/row'
 
@@ -39,11 +39,12 @@ const Home = (props: { auth: { user: User } | null }) => {
 
   useSaveReferral()
 
-  const memberGroups = useMemberGroups(user?.id) ?? []
+  const groups = useMemberGroups(user?.id) ?? []
 
   const [homeSections, setHomeSections] = useState(
     user?.homeSections ?? { visible: [], hidden: [] }
   )
+  const { visibleItems } = getHomeItems(groups, homeSections)
 
   const updateHomeSections = (newHomeSections: {
     visible: string[]
@@ -74,19 +75,33 @@ const Home = (props: { auth: { user: User } | null }) => {
             />
           </>
         ) : (
-          homeSections.visible.map((id) => {
+          visibleItems.map((item) => {
+            const { id } = item
+            if (id === 'your-bets') {
+              return (
+                <SearchSection
+                  key={id}
+                  label={'Your bets'}
+                  sort={'newest'}
+                  user={user}
+                  yourBets
+                />
+              )
+            }
             const sort = SORTS.find((sort) => sort.value === id)
             if (sort)
               return (
                 <SearchSection
+                  key={id}
                   label={sort.label}
                   sort={sort.value}
                   user={user}
                 />
               )
 
-            const group = memberGroups.find((g) => g.id === id)
+            const group = groups.find((g) => g.id === id)
-            if (group) return <GroupSection group={group} user={user} />
+            if (group)
+              return <GroupSection key={id} group={group} user={user} />
 
             return null
           })
@@ -110,8 +125,9 @@ function SearchSection(props: {
   label: string
   user: User | null
   sort: Sort
+  yourBets?: boolean
 }) {
-  const { label, user, sort } = props
+  const { label, user, sort, yourBets } = props
   const href = `/home?s=${sort}`
 
   return (
@@ -122,6 +138,7 @@ function SearchSection(props: {
       <ContractSearch
         user={user}
         defaultSort={sort}
+        additionalFilter={yourBets ? { yourBets: true } : undefined}
         noControls
         // persistPrefix={`experimental-home-${sort}`}
         renderContracts={(contracts, loadMore) =>