diff --git a/src/app/ItemTradesPage.js b/src/app/ItemTradesPage.js index 2148305..75c4e5c 100644 --- a/src/app/ItemTradesPage.js +++ b/src/app/ItemTradesPage.js @@ -1,6 +1,13 @@ import React from "react"; import { ClassNames } from "@emotion/react"; -import { Box, Skeleton, useColorModeValue, useToken } from "@chakra-ui/react"; +import { + Box, + Button, + Flex, + Skeleton, + useColorModeValue, + useToken, +} from "@chakra-ui/react"; import gql from "graphql-tag"; import { useQuery } from "@apollo/client"; import { Link, useHistory, useParams } from "react-router-dom"; @@ -8,6 +15,7 @@ import { Link, useHistory, useParams } from "react-router-dom"; import { Heading2, usePageTitle } from "./util"; import ItemPageLayout from "./ItemPageLayout"; import useCurrentUser from "./components/useCurrentUser"; +import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons"; export function ItemTradesOfferingPage() { return ( @@ -133,6 +141,10 @@ function ItemTradesTable({ context: { sendAuth: true }, }); + const [isShowingInactiveTrades, setIsShowingInactiveTrades] = React.useState( + false + ); + const shouldShowCompareColumn = isLoggedIn; // We partially randomize trade sorting, but we want it to stay stable across @@ -153,9 +165,21 @@ function ItemTradesTable({ return tradeSortKeys.get(trade.id); }; - const trades = [...(data?.item?.trades || [])]; + const allTrades = [...(data?.item?.trades || [])]; + + // Only trades from users active within the last 6 months are shown by + // default. The user can toggle to the full view, though! + const sixMonthsAgo = new Date(); + sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6); + const activeTrades = allTrades.filter( + (t) => new Date(t.user.lastTradeActivity) > sixMonthsAgo + ); + + const trades = isShowingInactiveTrades ? allTrades : activeTrades; trades.sort((a, b) => getTradeSortKey(b).localeCompare(getTradeSortKey(a))); + const numInactiveTrades = allTrades.length - activeTrades.length; + if (error) { return {error.message}; } @@ -168,83 +192,109 @@ function ItemTradesTable({ return ( {({ css }) => ( - - - - - {/* A small wording tweak to fit better on the xsmall screens! */} - Last active - Last edit - - {shouldShowCompareColumn && ( + + + + - - {compareColumnLabel} - - Matches + {/* A small wording tweak to fit better on the xsmall screens! */} + Last active + Last edit + {shouldShowCompareColumn && ( + + + {compareColumnLabel} + + Matches + + )} + + {userHeading} + + List + + + + {loading && ( + <> + + + + + + + )} + {!loading && + trades.length > 0 && + trades.map((trade) => ( + + ))} + {!loading && trades.length === 0 && ( + + + No trades yet! + + )} - - {userHeading} - - List - - {loading && ( - <> - - - - - - - )} - {!loading && - trades.length > 0 && - trades.map((trade) => ( - - ))} - {!loading && trades.length === 0 && ( - - - No trades yet! - - - )} - + {numInactiveTrades > 0 && ( + + + + )} )}