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 && (
+
+
+
+ )}
)}