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

sort trade list matches to the top of item lists

Browse source 
Items with the "You want this!" or "You own this!" badge will now sort to the top of their respective lists!
This commit is contained in:
Emi Matchu 2020-09-11 22:04:37 -07:00
parent 5546b21c27
commit d1262f77d7
1 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/app/ItemsPage.js
View file

@ -74,25 +74,44 @@ function ItemsPage() {
data.currentUser.itemsTheyWant.map((i) => i.id)
);
// This helps you compare your owns/wants to other users! If they own
// something, and you want it, we say "You own this!". And if they want
// something, and you own it, we say "You want this!".
const showYouOwnThisBadge = (item) =>
!isCurrentUser && itemIdsYouOwn.has(item.id);
const showYouWantThisBadge = (item) =>
!isCurrentUser && itemIdsYouWant.has(item.id);
const sortedItemsTheyOwn = [...data.user.itemsTheyOwn].sort((a, b) => {
// This is a cute sort hack. We sort first by, bringing "You want this!" to
// the top, and then sorting by name _within_ those two groups.
const aName = `${showYouWantThisBadge(a) ? "000" : "999"} ${a.name}`;
const bName = `${showYouWantThisBadge(b) ? "000" : "999"} ${b.name}`;
return aName.localeCompare(bName);
});
const sortedItemsTheyWant = [...data.user.itemsTheyWant].sort((a, b) => {
// This is a cute sort hack. We sort first by, bringing "You own this!" to
// the top, and then sorting by name _within_ those two groups.
const aName = `${showYouOwnThisBadge(a) ? "000" : "999"} ${a.name}`;
const bName = `${showYouOwnThisBadge(b) ? "000" : "999"} ${b.name}`;
return aName.localeCompare(bName);
});
return (
<Box>
<Heading1 marginBottom="8">
{isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
</Heading1>
<ItemCardList>
{data.user.itemsTheyOwn.map((item) => (
{sortedItemsTheyOwn.map((item) => (
<ItemCard
key={item.id}
item={item}
badges={
<ItemBadgeList>
{item.isNc ? <NcBadge /> : <NpBadge />}
{
// This helps you compare your owns/wants to other users.
!isCurrentUser && itemIdsYouWant.has(item.id) && (
<YouWantThisBadge />
)
}
{showYouWantThisBadge(item) && <YouWantThisBadge />}
</ItemBadgeList>
}
/>
@ -103,19 +122,14 @@ function ItemsPage() {
{isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`}
</Heading1>
<ItemCardList>
{data.user.itemsTheyWant.map((item) => (
{sortedItemsTheyWant.map((item) => (
<ItemCard
key={item.id}
item={item}
badges={
<ItemBadgeList>
{item.isNc ? <NcBadge /> : <NpBadge />}
{
// This helps you compare your owns/wants to other users.
!isCurrentUser && itemIdsYouOwn.has(item.id) && (
<YouOwnThisBadge />
)
}
{showYouOwnThisBadge(item) && <YouOwnThisBadge />}
</ItemBadgeList>
}
/>