From c1287a4a25afa7f9406929eca95420c72ba7c7c9 Mon Sep 17 00:00:00 2001 From: James Grugett Date: Mon, 12 Sep 2022 00:39:04 -0500 Subject: [PATCH] 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 Co-authored-by: Austin Chen Co-authored-by: ingawei <46611122+ingawei@users.noreply.github.com> Co-authored-by: mantikoros --- common/user.ts | 2 +- web/components/arrange-home.tsx | 103 +++++++--------- web/components/contract/prob-change-table.tsx | 113 +++++++++--------- web/pages/experimental/home/edit.tsx | 11 +- web/pages/experimental/home/index.tsx | 68 +++++++---- 5 files changed, 146 insertions(+), 151 deletions(-) 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 ae02e3ea..25e814b8 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) => ( @@ -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' - )} > - @@ -103,15 +84,33 @@ function DraggableList(props: { ) } -export const getHomeItems = ( - groups: Group[], - homeSections: { visible: string[]; hidden: string[] } -) => { +const SectionItem = (props: { + item: { id: string; label: string } + className?: string +}) => { + const { item, className } = props + + return ( +
+
+ ) +} + +export const getHomeItems = (groups: Group[], sections: string[]) => { const items = [ + { label: 'Daily movers', id: 'daily-movers' }, { label: 'Trending', id: 'score' }, - { label: 'Newest', id: 'newest' }, - { label: 'Close date', id: 'close-date' }, - { label: 'Your trades', id: 'your-bets' }, + { label: 'New for you', id: 'newest' }, ...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] = [ - 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/components/contract/prob-change-table.tsx b/web/components/contract/prob-change-table.tsx index f973d260..49216b88 100644 --- a/web/components/contract/prob-change-table.tsx +++ b/web/components/contract/prob-change-table.tsx @@ -2,74 +2,69 @@ 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 { linkClass, SiteLink } from '../site-link' +import { 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 }) { - const { userId } = props +export function ProbChangeTable(props: { + changes: + | { positiveChanges: CPMMContract[]; negativeChanges: CPMMContract[] } + | undefined +}) { + const { changes } = props - const changes = useProbChanges(userId ?? '') - const [expanded, setExpanded] = useState(false) - - if (!changes) { - return null - } - - const count = expanded ? 16 : 4 + if (!changes) return const { positiveChanges, negativeChanges } = changes - const filteredPositiveChanges = positiveChanges.slice(0, count / 2) - const filteredNegativeChanges = negativeChanges.slice(0, count / 2) - const filteredChanges = [ - ...filteredPositiveChanges, - ...filteredNegativeChanges, - ] + + const threshold = 0.075 + const countOverThreshold = Math.max( + positiveChanges.findIndex((c) => c.probChanges.day < threshold) + 1, + 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
None
return ( - - - - {filteredChanges.slice(0, count / 2).map((contract) => ( - - - - {contract.question} - - - ))} - - - {filteredChanges.slice(count / 2).map((contract) => ( - - - - {contract.question} - - - ))} - + + + {filteredPositiveChanges.map((contract) => ( + + + + {contract.question} + + + ))} + + + {filteredNegativeChanges.map((contract) => ( + + + + {contract.question} + + + ))} -
setExpanded(!expanded)} - > - {expanded ? 'Show less' : 'Show more'} -
) } 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 ( - + <DoneButton /> diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx index 90b4f888..08f502b6 100644 --- a/web/pages/experimental/home/index.tsx +++ b/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( - user?.homeSections ?? { visible: [], hidden: [] } - ) - const { visibleItems } = getHomeItems(groups, homeSections) + const { sections } = getHomeItems(groups, user?.homeSections ?? []) return ( <Page> @@ -54,29 +52,19 @@ const Home = () => { <DailyProfitAndBalance userId={user?.id} /> - <div className="text-xl text-gray-800">Daily movers</div> - <ProbChangeTable userId={user?.id} /> - - {visibleItems.map((item) => { + {sections.map((item) => { const { id } = item - if (id === 'your-bets') { - return ( - <SearchSection - key={id} - label={'Your trades'} - sort={'newest'} - user={user} - yourBets - /> - ) + if (id === 'daily-movers') { + return <DailyMoversSection key={id} userId={user?.id} /> } 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