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,
|
|
|
|
NcBadge,
|
|
|
|
NpBadge,
|
|
|
|
} 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
|
|
|
|
itemsTheyOwn {
|
|
|
|
id
|
2020-09-11 20:41:39 -07:00
|
|
|
isNc
|
2020-09-04 05:59:35 -07:00
|
|
|
name
|
|
|
|
thumbnailUrl
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
{ 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
|
|
|
}
|
|
|
|
|
|
|
|
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>
|
|
|
|
<Wrap justify="center">
|
|
|
|
{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 />}
|
|
|
|
</ItemBadgeList>
|
|
|
|
}
|
|
|
|
/>
|
2020-09-04 05:59:35 -07:00
|
|
|
))}
|
|
|
|
</Wrap>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ItemsPage;
|