2020-09-04 05:59:35 -07:00
|
|
|
import React from "react";
|
2020-09-11 20:41:39 -07:00
|
|
|
import { Box, Wrap } from "@chakra-ui/core";
|
2020-09-04 05:59:35 -07:00
|
|
|
import gql from "graphql-tag";
|
|
|
|
import { useParams } from "react-router-dom";
|
|
|
|
import { useQuery } from "@apollo/client";
|
|
|
|
|
|
|
|
import HangerSpinner from "./components/HangerSpinner";
|
|
|
|
import { Heading1 } from "./util";
|
2020-09-11 20:41:39 -07:00
|
|
|
import ItemCard, {
|
|
|
|
ItemBadgeList,
|
2020-09-11 21:53:57 -07:00
|
|
|
ItemCardList,
|
2020-09-11 20:41:39 -07:00
|
|
|
NcBadge,
|
|
|
|
NpBadge,
|
2020-09-11 21:45:38 -07:00
|
|
|
YouOwnThisBadge,
|
|
|
|
YouWantThisBadge,
|
2020-09-11 20:41:39 -07:00
|
|
|
} from "./components/ItemCard";
|
2020-09-04 05:59:35 -07:00
|
|
|
import useCurrentUser from "./components/useCurrentUser";
|
|
|
|
|
|
|
|
function ItemsPage() {
|
|
|
|
const { userId } = useParams();
|
|
|
|
const currentUser = useCurrentUser();
|
|
|
|
const isCurrentUser = currentUser.id === userId;
|
|
|
|
|
|
|
|
const { loading, error, data } = useQuery(
|
|
|
|
gql`
|
|
|
|
query ItemsPage($userId: ID!) {
|
|
|
|
user(id: $userId) {
|
|
|
|
id
|
|
|
|
username
|
2020-09-11 21:34:28 -07:00
|
|
|
|
2020-09-04 05:59:35 -07:00
|
|
|
itemsTheyOwn {
|
|
|
|
id
|
2020-09-11 20:41:39 -07:00
|
|
|
isNc
|
2020-09-04 05:59:35 -07:00
|
|
|
name
|
|
|
|
thumbnailUrl
|
|
|
|
}
|
2020-09-11 21:34:28 -07:00
|
|
|
|
|
|
|
itemsTheyWant {
|
|
|
|
id
|
|
|
|
isNc
|
|
|
|
name
|
|
|
|
thumbnailUrl
|
|
|
|
}
|
2020-09-04 05:59:35 -07:00
|
|
|
}
|
2020-09-11 21:45:38 -07:00
|
|
|
|
|
|
|
currentUser {
|
|
|
|
itemsTheyOwn {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
|
|
|
|
itemsTheyWant {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
}
|
2020-09-04 05:59:35 -07:00
|
|
|
}
|
|
|
|
`,
|
|
|
|
{ variables: { userId } }
|
|
|
|
);
|
|
|
|
|
|
|
|
if (loading) {
|
|
|
|
return (
|
2020-09-06 18:12:34 -07:00
|
|
|
<Box display="flex" justifyContent="center">
|
2020-09-10 03:06:44 -07:00
|
|
|
<HangerSpinner />
|
2020-09-04 05:59:35 -07:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (error) {
|
2020-09-06 18:12:34 -07:00
|
|
|
return <Box color="red.400">{error.message}</Box>;
|
2020-09-04 05:59:35 -07:00
|
|
|
}
|
|
|
|
|
2020-09-11 21:45:38 -07:00
|
|
|
const itemIdsYouOwn = new Set(data.currentUser.itemsTheyOwn.map((i) => i.id));
|
|
|
|
const itemIdsYouWant = new Set(
|
|
|
|
data.currentUser.itemsTheyWant.map((i) => i.id)
|
|
|
|
);
|
|
|
|
|
2020-09-04 05:59:35 -07:00
|
|
|
return (
|
2020-09-06 18:45:20 -07:00
|
|
|
<Box>
|
2020-09-06 18:12:34 -07:00
|
|
|
<Heading1 marginBottom="8">
|
2020-09-04 05:59:35 -07:00
|
|
|
{isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
|
|
|
|
</Heading1>
|
2020-09-11 21:53:57 -07:00
|
|
|
<ItemCardList>
|
2020-09-04 05:59:35 -07:00
|
|
|
{data.user.itemsTheyOwn.map((item) => (
|
2020-09-11 20:41:39 -07:00
|
|
|
<ItemCard
|
|
|
|
key={item.id}
|
|
|
|
item={item}
|
|
|
|
badges={
|
|
|
|
<ItemBadgeList>
|
|
|
|
{item.isNc ? <NcBadge /> : <NpBadge />}
|
2020-09-11 21:45:38 -07:00
|
|
|
{
|
|
|
|
// This helps you compare your owns/wants to other users.
|
|
|
|
!isCurrentUser && itemIdsYouWant.has(item.id) && (
|
|
|
|
<YouWantThisBadge />
|
|
|
|
)
|
|
|
|
}
|
2020-09-11 20:41:39 -07:00
|
|
|
</ItemBadgeList>
|
|
|
|
}
|
|
|
|
/>
|
2020-09-04 05:59:35 -07:00
|
|
|
))}
|
2020-09-11 21:53:57 -07:00
|
|
|
</ItemCardList>
|
2020-09-11 21:34:28 -07:00
|
|
|
|
|
|
|
<Heading1 marginBottom="8" marginTop="8">
|
|
|
|
{isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`}
|
|
|
|
</Heading1>
|
2020-09-11 21:53:57 -07:00
|
|
|
<ItemCardList>
|
2020-09-11 21:34:28 -07:00
|
|
|
{data.user.itemsTheyWant.map((item) => (
|
|
|
|
<ItemCard
|
|
|
|
key={item.id}
|
|
|
|
item={item}
|
|
|
|
badges={
|
|
|
|
<ItemBadgeList>
|
|
|
|
{item.isNc ? <NcBadge /> : <NpBadge />}
|
2020-09-11 21:45:38 -07:00
|
|
|
{
|
|
|
|
// This helps you compare your owns/wants to other users.
|
|
|
|
!isCurrentUser && itemIdsYouOwn.has(item.id) && (
|
|
|
|
<YouOwnThisBadge />
|
|
|
|
)
|
|
|
|
}
|
2020-09-11 21:34:28 -07:00
|
|
|
</ItemBadgeList>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
))}
|
2020-09-11 21:53:57 -07:00
|
|
|
</ItemCardList>
|
2020-09-04 05:59:35 -07:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ItemsPage;
|