OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

sort trades by user activity (will refine later)

Browse source 
I think a plain sort by last update is too game-y, so I have some ideas how to make this a bit more random but still usefully sorted
This commit is contained in:
Emi Matchu 2020-11-24 14:58:11 -08:00
parent c8af209012
commit 1f2e83e11e
1 changed files with 52 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/app/ItemTradesPage.js
View file

@ -143,6 +143,11 @@ function ItemTradesTable({
md: "18ex", md: "18ex",
}; };
const trades = [...(data?.item?.trades || [])].sort(
(a, b) =>
new Date(b.user.lastTradeActivity) - new Date(a.user.lastTradeActivity)
);
return ( return (
<Box <Box
as="table" as="table"
@ -157,35 +162,45 @@ function ItemTradesTable({
> >
<Box as="thead" fontSize={{ base: "xs", sm: "sm" }}> <Box as="thead" fontSize={{ base: "xs", sm: "sm" }}>
<Box as="tr"> <Box as="tr">
<ItemTradesTableCell as="th">List</ItemTradesTableCell>
<ItemTradesTableCell as="th" width={minorColumnWidth}>
{userHeading}
</ItemTradesTableCell>
<ItemTradesTableCell as="th" width={minorColumnWidth}> <ItemTradesTableCell as="th" width={minorColumnWidth}>
{/* A small wording tweak to fit better on the xsmall screens! */} {/* A small wording tweak to fit better on the xsmall screens! */}
<Box display={{ base: "none", sm: "block" }}>Last active</Box> <Box display={{ base: "none", sm: "block" }}>Last active</Box>
<Box display={{ base: "block", sm: "none" }}>Active at</Box> <Box display={{ base: "block", sm: "none" }}>Active at</Box>
</ItemTradesTableCell> </ItemTradesTableCell>
<ItemTradesTableCell as="th" width={minorColumnWidth}>
{userHeading}
</ItemTradesTableCell>
{shouldShowCompareColumn && ( {shouldShowCompareColumn && (
<ItemTradesTableCell as="th" width={minorColumnWidth}> <ItemTradesTableCell as="th" width={minorColumnWidth}>
Compare Compare
</ItemTradesTableCell> </ItemTradesTableCell>
)} )}
<ItemTradesTableCell as="th">List</ItemTradesTableCell>
</Box> </Box>
</Box> </Box>
<Box as="tbody"> <Box as="tbody">
{loading && ( {loading && (
<> <>
<ItemTradesTableRowSkeleton /> <ItemTradesTableRowSkeleton
<ItemTradesTableRowSkeleton /> shouldShowCompareColumn={shouldShowCompareColumn}
<ItemTradesTableRowSkeleton /> />
<ItemTradesTableRowSkeleton /> <ItemTradesTableRowSkeleton
<ItemTradesTableRowSkeleton /> shouldShowCompareColumn={shouldShowCompareColumn}
/>
<ItemTradesTableRowSkeleton
shouldShowCompareColumn={shouldShowCompareColumn}
/>
<ItemTradesTableRowSkeleton
shouldShowCompareColumn={shouldShowCompareColumn}
/>
<ItemTradesTableRowSkeleton
shouldShowCompareColumn={shouldShowCompareColumn}
/>
</> </>
)} )}
{!loading && {!loading &&
data.item.trades.length > 0 && trades.length > 0 &&
data.item.trades.map((trade) => ( trades.map((trade) => (
<ItemTradesTableRow <ItemTradesTableRow
key={trade.id} key={trade.id}
compareListHeading={compareListHeading} compareListHeading={compareListHeading}
@ -196,7 +211,7 @@ function ItemTradesTable({
shouldShowCompareColumn={shouldShowCompareColumn} shouldShowCompareColumn={shouldShowCompareColumn}
/> />
))} ))}
{!loading && data.item.trades.length === 0 && ( {!loading && trades.length === 0 && (
<Box as="tr"> <Box as="tr">
<ItemTradesTableCell <ItemTradesTableCell
colSpan="4" colSpan="4"
@ -232,31 +247,15 @@ function ItemTradesTableRow({
_focusWithin={{ background: focusBackground }} _focusWithin={{ background: focusBackground }}
onClick={onClick} onClick={onClick}
> >
<ItemTradesTableCell overflowWrap="break-word" fontSize="sm">
<Box
as="a"
href={href}
className={css`
&:hover,
&:focus,
tr:hover &,
tr:focus-within & {
text-decoration: underline;
}
`}
>
{listName}
</Box>
</ItemTradesTableCell>
<ItemTradesTableCell overflowWrap="break-word" fontSize="xs">
{username}
</ItemTradesTableCell>
<ItemTradesTableCell fontSize="xs"> <ItemTradesTableCell fontSize="xs">
{new Intl.DateTimeFormat("en", { {new Intl.DateTimeFormat("en", {
month: "short", month: "short",
year: "numeric", year: "numeric",
}).format(new Date(lastTradeActivity))} }).format(new Date(lastTradeActivity))}
</ItemTradesTableCell> </ItemTradesTableCell>
<ItemTradesTableCell overflowWrap="break-word" fontSize="xs">
{username}
</ItemTradesTableCell>
{shouldShowCompareColumn && ( {shouldShowCompareColumn && (
<ItemTradesTableCell fontSize="xs"> <ItemTradesTableCell fontSize="xs">
<Tooltip <Tooltip
@ -294,11 +293,27 @@ function ItemTradesTableRow({
</Tooltip> </Tooltip>
</ItemTradesTableCell> </ItemTradesTableCell>
)} )}
<ItemTradesTableCell overflowWrap="break-word" fontSize="sm">
<Box
as="a"
href={href}
className={css`
&:hover,
&:focus,
tr:hover &,
tr:focus-within & {
text-decoration: underline;
}
`}
>
{listName}
</Box>
</ItemTradesTableCell>
</Box> </Box>
); );
} }
function ItemTradesTableRowSkeleton() { function ItemTradesTableRowSkeleton({ shouldShowCompareColumn }) {
return ( return (
<Box as="tr"> <Box as="tr">
<ItemTradesTableCell> <ItemTradesTableCell>
@ -310,9 +325,11 @@ function ItemTradesTableRowSkeleton() {
<ItemTradesTableCell> <ItemTradesTableCell>
<Skeleton width="100%">X</Skeleton> <Skeleton width="100%">X</Skeleton>
</ItemTradesTableCell> </ItemTradesTableCell>
<ItemTradesTableCell> {shouldShowCompareColumn && (
<Skeleton width="100%">X</Skeleton> <ItemTradesTableCell>
</ItemTradesTableCell> <Skeleton width="100%">X</Skeleton>
</ItemTradesTableCell>
)}
</Box> </Box>
); );
} }