diff --git a/src/app/ItemTradesPage.js b/src/app/ItemTradesPage.js index e32724d..c55807d 100644 --- a/src/app/ItemTradesPage.js +++ b/src/app/ItemTradesPage.js @@ -128,10 +128,6 @@ function ItemTradesTable({ variables: { itemId }, }); - if (error) { - return {error.message}; - } - // HACK: I'm pretty much hiding this for now, because it's not ready. But /// it's visible at #show-compare-column! const shouldShowCompareColumn = window.location.href.includes( @@ -143,10 +139,27 @@ function ItemTradesTable({ md: "18ex", }; - const trades = [...(data?.item?.trades || [])].sort( - (a, b) => - new Date(b.user.lastTradeActivity) - new Date(a.user.lastTradeActivity) - ); + // We partially randomize trade sorting, but we want it to stay stable across + // re-renders. To do this, we can use `getTradeSortKey`, which will either + // build a new sort key for the trade, or return the cached one from the + // `tradeSortKeys` map. + const tradeSortKeys = React.useMemo(() => new Map(), []); + const getTradeSortKey = (trade) => { + if (!tradeSortKeys.has(trade.id)) { + tradeSortKeys.set( + trade.id, + getVaguelyRandomizedSortKeyForDate(trade.user.lastTradeActivity) + ); + } + return tradeSortKeys.get(trade.id); + }; + + const trades = [...(data?.item?.trades || [])]; + trades.sort((a, b) => getTradeSortKey(b).localeCompare(getTradeSortKey(a))); + + if (error) { + return {error.message}; + } return ( - {new Intl.DateTimeFormat("en", { - month: "short", - year: "numeric", - }).format(new Date(lastTradeActivity))} + {formatVagueDate(lastTradeActivity)} {username} @@ -383,3 +393,39 @@ function ItemTradesTableCell({ children, as = "td", ...props }) { ); } + +function isThisWeek(date) { + const startOfThisWeek = new Date(); + startOfThisWeek.setDate(startOfThisWeek.getDate() - 7); + return date > startOfThisWeek; +} + +const shortMonthYearFormatter = new Intl.DateTimeFormat("en", { + month: "short", + year: "numeric", +}); + +function formatVagueDate(dateString) { + const date = new Date(dateString); + + if (isThisWeek(date)) { + return "This week"; + } + + return shortMonthYearFormatter.format(date); +} + +function getVaguelyRandomizedSortKeyForDate(dateString) { + const date = new Date(dateString); + + // "This week" sorts after all other dates, but with a random factor! I don't + // want people worrying about gaming themselves up to the very top, just be + // active and trust the system 😅 (I figure that, if you care enough to "game" + // the system by faking activity every week, you probably also care enough to + // be... making real trades every week lmao) + if (isThisWeek(date)) { + return `ZZZthisweekZZZ-${Math.random()}`; + } + + return dateString; +}