Small updates to experimental home (#870)

* Line clamp question in prob change table

* Tweaks

* Expand option for daily movers

* Snap scrolling for carousel

* Add arrows to section headers

* Remove carousel from experimental/home

* React querify fetching your groups

* Edit home is its own page

* Add daily profit and balance

* Merge branch 'main' into new-home

* Make experimental search by your followed groups/creators

* Just submit, allow xs on pills

* Weigh in

* Use next/future/image component to optimize avatar images

* Inga/challenge icon (#857)

* changed challenge icon to custom icon
* fixed tip button alignment

* weighing in and trading "weigh in" for "trade"

* Delete closing soon, mark new as New for you, trending is site-wide

* Delete your trades. Factor out section item

* Don't allow hiding of home sections

* Convert daily movers into a section

* Tweaks for loading daily movers

* Prob change table shows variable number of rows

* Fix double negative

Co-authored-by: Ian Philips <iansphilips@gmail.com>
Co-authored-by: Austin Chen <akrolsmir@gmail.com>
Co-authored-by: ingawei <46611122+ingawei@users.noreply.github.com>
Co-authored-by: mantikoros <sgrugett@gmail.com>

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

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[] }
+  homeSections: string[]
-  setHomeSections: (homeSections: {
+  setHomeSections: (sections: string[]) => void
-    visible: string[]
-    hidden: string[]
-  }) => void
 }) {
   const { user, homeSections, setHomeSections } = props
 
   const groups = useMemberGroups(user?.id) ?? []
-  const { itemsById, visibleItems, hiddenItems } = getHomeItems(
+  const { itemsById, sections } = getHomeItems(groups, homeSections)
-    groups,
-    homeSections
-  )
 
   return (
     <DragDropContext
@@ -35,23 +29,16 @@ export function ArrangeHome(props: {
 
         const item = itemsById[draggableId]
 
-        const newHomeSections = {
+        const newHomeSections = sections.map((section) => section.id)
-          visible: visibleItems.map((item) => item.id),
-          hidden: hiddenItems.map((item) => item.id),
-        }
 
-        const sourceSection = source.droppableId as 'visible' | 'hidden'
+        newHomeSections.splice(source.index, 1)
-        newHomeSections[sourceSection].splice(source.index, 1)
+        newHomeSections.splice(destination.index, 0, item.id)
-
-        const destSection = destination.droppableId as 'visible' | 'hidden'
-        newHomeSections[destSection].splice(destination.index, 0, item.id)
 
         setHomeSections(newHomeSections)
       }}
     >
-      <Row className="relative max-w-lg gap-4">
+      <Row className="relative max-w-md gap-4">
-        <DraggableList items={visibleItems} title="Visible" />
+        <DraggableList items={sections} title="Sections" />
-        <DraggableList items={hiddenItems} title="Hidden" />
       </Row>
     </DragDropContext>
   )
@@ -64,16 +51,13 @@ function DraggableList(props: {
   const { title, items } = props
   return (
     <Droppable droppableId={title.toLowerCase()}>
-      {(provided, snapshot) => (
+      {(provided) => (
         <Col
           {...provided.droppableProps}
           ref={provided.innerRef}
-          className={clsx(
+          className={clsx('flex-1 items-stretch gap-1 rounded bg-gray-100 p-4')}
-            'width-[220px] flex-1 items-start rounded bg-gray-50 p-2',
-            snapshot.isDraggingOver && 'bg-gray-100'
-          )}
         >
-          <Subtitle text={title} className="mx-2 !my-2" />
+          <Subtitle text={title} className="mx-2 !mt-0 !mb-4" />
           {items.map((item, index) => (
             <Draggable key={item.id} draggableId={item.id} index={index}>
               {(provided, snapshot) => (
@@ -82,16 +66,13 @@ function DraggableList(props: {
                   {...provided.draggableProps}
                   {...provided.dragHandleProps}
                   style={provided.draggableProps.style}
-                  className={clsx(
-                    'flex flex-row items-center gap-4 rounded bg-gray-50 p-2',
-                    snapshot.isDragging && 'z-[9000] bg-gray-300'
-                  )}
                 >
-                  <MenuIcon
+                  <SectionItem
-                    className="h-5 w-5 flex-shrink-0 text-gray-500"
+                    className={clsx(
-                    aria-hidden="true"
+                      snapshot.isDragging && 'z-[9000] bg-gray-200'
-                  />{' '}
+                    )}
-                  {item.label}
+                    item={item}
+                  />
                 </div>
               )}
             </Draggable>
@@ -103,15 +84,33 @@ function DraggableList(props: {
   )
 }
 
-export const getHomeItems = (
+const SectionItem = (props: {
-  groups: Group[],
+  item: { id: string; label: string }
-  homeSections: { visible: string[]; hidden: string[] }
+  className?: string
-) => {
+}) => {
+  const { item, className } = props
+
+  return (
+    <div
+      className={clsx(
+        className,
+        'flex flex-row items-center gap-4 rounded bg-gray-50 p-2'
+      )}
+    >
+      <MenuIcon
+        className="h-5 w-5 flex-shrink-0 text-gray-500"
+        aria-hidden="true"
+      />{' '}
+      {item.label}
+    </div>
+  )
+}
+
+export const getHomeItems = (groups: Group[], sections: string[]) => {
   const items = [
+    { label: 'Daily movers', id: 'daily-movers' },
     { label: 'Trending', id: 'score' },
-    { label: 'Newest', id: 'newest' },
+    { label: 'New for you', id: 'newest' },
-    { label: 'Close date', id: 'close-date' },
-    { label: 'Your trades', id: 'your-bets' },
     ...groups.map((g) => ({
       label: g.name,
       id: g.id,
@@ -119,23 +118,13 @@ export const getHomeItems = (
   ]
   const itemsById = keyBy(items, 'id')
 
-  const { visible, hidden } = homeSections
+  const sectionItems = filterDefined(sections.map((id) => itemsById[id]))
 
-  const [visibleItems, hiddenItems] = [
+  // Add unmentioned items to the end.
-    filterDefined(visible.map((id) => itemsById[id])),
+  sectionItems.push(...items.filter((item) => !sectionItems.includes(item)))
-    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,
+    sections: sectionItems,
-    hiddenItems,
     itemsById,
   }
 }

web/components/contract/prob-change-table.tsx

@@ -2,37 +2,39 @@ import clsx from 'clsx'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { CPMMContract } from 'common/contract'
 import { formatPercent } from 'common/util/format'
-import { useProbChanges } from 'web/hooks/use-prob-changes'
+import { SiteLink } from '../site-link'
-import { linkClass, SiteLink } from '../site-link'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
-import { useState } from 'react'
+import { LoadingIndicator } from '../loading-indicator'
 
-export function ProbChangeTable(props: { userId: string | undefined }) {
+export function ProbChangeTable(props: {
-  const { userId } = props
+  changes:
+    | { positiveChanges: CPMMContract[]; negativeChanges: CPMMContract[] }
+    | undefined
+}) {
+  const { changes } = props
 
-  const changes = useProbChanges(userId ?? '')
+  if (!changes) return <LoadingIndicator />
-  const [expanded, setExpanded] = useState(false)
-
-  if (!changes) {
-    return null
-  }
-
-  const count = expanded ? 16 : 4
 
   const { positiveChanges, negativeChanges } = changes
-  const filteredPositiveChanges = positiveChanges.slice(0, count / 2)
+
-  const filteredNegativeChanges = negativeChanges.slice(0, count / 2)
+  const threshold = 0.075
-  const filteredChanges = [
+  const countOverThreshold = Math.max(
-    ...filteredPositiveChanges,
+    positiveChanges.findIndex((c) => c.probChanges.day < threshold) + 1,
-    ...filteredNegativeChanges,
+    negativeChanges.findIndex((c) => c.probChanges.day > -threshold) + 1
-  ]
+  )
+  const maxRows = Math.min(positiveChanges.length, negativeChanges.length)
+  const rows = Math.min(3, Math.min(maxRows, countOverThreshold))
+
+  const filteredPositiveChanges = positiveChanges.slice(0, rows)
+  const filteredNegativeChanges = negativeChanges.slice(0, rows)
+
+  if (rows === 0) return <div className="px-4 text-gray-500">None</div>
 
   return (
-    <Col>
     <Col className="mb-4 w-full divide-x-2 divide-y rounded-lg bg-white shadow-md md:flex-row md:divide-y-0">
       <Col className="flex-1 divide-y">
-          {filteredChanges.slice(0, count / 2).map((contract) => (
+        {filteredPositiveChanges.map((contract) => (
           <Row className="items-center hover:bg-gray-100">
             <ProbChange
               className="p-4 text-right text-xl"
@@ -48,7 +50,7 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
         ))}
       </Col>
       <Col className="flex-1 divide-y">
-          {filteredChanges.slice(count / 2).map((contract) => (
+        {filteredNegativeChanges.map((contract) => (
           <Row className="items-center hover:bg-gray-100">
             <ProbChange
               className="p-4 text-right text-xl"
@@ -64,13 +66,6 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
         ))}
       </Col>
     </Col>
-      <div
-        className={clsx(linkClass, 'cursor-pointer self-end')}
-        onClick={() => setExpanded(!expanded)}
-      >
-        {expanded ? 'Show less' : 'Show more'}
-      </div>
-    </Col>
   )
 }
 

web/pages/experimental/home/edit.tsx

@@ -16,14 +16,9 @@ export default function Home() {
 
   useTracking('edit home')
 
-  const [homeSections, setHomeSections] = useState(
+  const [homeSections, setHomeSections] = useState(user?.homeSections ?? [])
-    user?.homeSections ?? { visible: [], hidden: [] }
-  )
 
-  const updateHomeSections = (newHomeSections: {
+  const updateHomeSections = (newHomeSections: string[]) => {
-    visible: string[]
-    hidden: string[]
-  }) => {
     if (!user) return
     updateUser(user.id, { homeSections: newHomeSections })
     setHomeSections(newHomeSections)
@@ -31,7 +26,7 @@ export default function Home() {
 
   return (
     <Page>
-      <Col className="pm:mx-10 gap-4 px-4 pb-12">
+      <Col className="pm:mx-10 gap-4 px-4 pb-6 pt-2">
         <Row className={'w-full items-center justify-between'}>
           <Title text="Edit your home page" />
           <DoneButton />

web/pages/experimental/home/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Router from 'next/router'
 import {
   PencilIcon,
@@ -28,6 +28,7 @@ import { groupPath } from 'web/lib/firebase/groups'
 import { usePortfolioHistory } from 'web/hooks/use-portfolio-history'
 import { calculatePortfolioProfit } from 'common/calculate-metrics'
 import { formatMoney } from 'common/util/format'
+import { useProbChanges } from 'web/hooks/use-prob-changes'
 
 const Home = () => {
   const user = useUser()
@@ -38,10 +39,7 @@ const Home = () => {
 
   const groups = useMemberGroups(user?.id) ?? []
 
-  const [homeSections] = useState(
+  const { sections } = getHomeItems(groups, user?.homeSections ?? [])
-    user?.homeSections ?? { visible: [], hidden: [] }
-  )
-  const { visibleItems } = getHomeItems(groups, homeSections)
 
   return (
     <Page>
@@ -54,29 +52,19 @@ const Home = () => {
 
         <DailyProfitAndBalance userId={user?.id} />
 
-        <div className="text-xl text-gray-800">Daily movers</div>
+        {sections.map((item) => {
-        <ProbChangeTable userId={user?.id} />
-
-        {visibleItems.map((item) => {
           const { id } = item
-          if (id === 'your-bets') {
+          if (id === 'daily-movers') {
-            return (
+            return <DailyMoversSection key={id} userId={user?.id} />
-              <SearchSection
-                key={id}
-                label={'Your trades'}
-                sort={'newest'}
-                user={user}
-                yourBets
-              />
-            )
           }
           const sort = SORTS.find((sort) => sort.value === id)
           if (sort)
             return (
               <SearchSection
                 key={id}
-                label={sort.label}
+                label={sort.value === 'newest' ? 'New for you' : sort.label}
                 sort={sort.value}
+                followed={sort.value === 'newest'}
                 user={user}
               />
             )
@@ -103,11 +91,12 @@ const Home = () => {
 
 function SearchSection(props: {
   label: string
-  user: User | null | undefined
+  user: User | null | undefined | undefined
   sort: Sort
   yourBets?: boolean
+  followed?: boolean
 }) {
-  const { label, user, sort, yourBets } = props
+  const { label, user, sort, yourBets, followed } = props
   const href = `/home?s=${sort}`
 
   return (
@@ -122,7 +111,13 @@ function SearchSection(props: {
       <ContractSearch
         user={user}
         defaultSort={sort}
-        additionalFilter={yourBets ? { yourBets: true } : { followed: true }}
+        additionalFilter={
+          yourBets
+            ? { yourBets: true }
+            : followed
+            ? { followed: true }
+            : undefined
+        }
         noControls
         maxResults={6}
         persistPrefix={`experimental-home-${sort}`}
@@ -131,7 +126,10 @@ function SearchSection(props: {
   )
 }
 
-function GroupSection(props: { group: Group; user: User | null | undefined }) {
+function GroupSection(props: {
+  group: Group
+  user: User | null | undefined | undefined
+}) {
   const { group, user } = props
 
   return (
@@ -155,6 +153,24 @@ function GroupSection(props: { group: Group; user: User | null | undefined }) {
   )
 }
 
+function DailyMoversSection(props: { userId: string | null | undefined }) {
+  const { userId } = props
+  const changes = useProbChanges(userId ?? '')
+
+  return (
+    <Col className="gap-2">
+      <SiteLink className="text-xl" href={'/daily-movers'}>
+        Daily movers{' '}
+        <ArrowSmRightIcon
+          className="mb-0.5 inline h-6 w-6 text-gray-500"
+          aria-hidden="true"
+        />
+      </SiteLink>
+      <ProbChangeTable changes={changes} />
+    </Col>
+  )
+}
+
 function EditButton(props: { className?: string }) {
   const { className } = props
 
@@ -186,14 +202,14 @@ function DailyProfitAndBalance(props: {
   return (
     <div className={clsx(className, 'text-lg')}>
       <span className={clsx(profit >= 0 ? 'text-green-500' : 'text-red-500')}>
-        {profit >= 0 ? '+' : '-'}
+        {profit >= 0 && '+'}
         {formatMoney(profit)}
       </span>{' '}
       profit and{' '}
       <span
         className={clsx(balanceChange >= 0 ? 'text-green-500' : 'text-red-500')}
       >
-        {balanceChange >= 0 ? '+' : '-'}
+        {balanceChange >= 0 && '+'}
         {formatMoney(balanceChange)}
       </span>{' '}
       balance today