import React from "react";
import { Box, Image, Wrap } from "@chakra-ui/core";
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";
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
name
thumbnailUrl
}
}
}
`,
{ variables: { userId } }
);
if (loading) {
return (
);
}
if (error) {
return {error.message};
}
return (
{isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
{data.user.itemsTheyOwn.map((item) => (
{item.name}
))}
);
}
export default ItemsPage;