2020-09-11 23:56:47 -07:00
|
|
|
import React from "react";
|
2020-09-12 17:56:31 -07:00
|
|
|
import {
|
|
|
|
AspectRatio,
|
|
|
|
Badge,
|
|
|
|
Box,
|
|
|
|
Center,
|
|
|
|
VStack,
|
|
|
|
useColorModeValue,
|
|
|
|
} from "@chakra-ui/core";
|
2020-09-11 23:56:47 -07:00
|
|
|
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
|
|
|
import gql from "graphql-tag";
|
|
|
|
import { useQuery } from "@apollo/client";
|
|
|
|
import { useParams } from "react-router-dom";
|
|
|
|
|
|
|
|
import HangerSpinner from "./components/HangerSpinner";
|
|
|
|
import {
|
|
|
|
ItemBadgeList,
|
|
|
|
ItemThumbnail,
|
|
|
|
NcBadge,
|
|
|
|
NpBadge,
|
|
|
|
} from "./components/ItemCard";
|
|
|
|
import { Heading1, usePageTitle } from "./util";
|
2020-09-12 17:56:31 -07:00
|
|
|
import OutfitPreview from "./components/OutfitPreview";
|
2020-09-11 23:56:47 -07:00
|
|
|
|
|
|
|
function ItemPage() {
|
|
|
|
const { itemId } = useParams();
|
|
|
|
|
|
|
|
const { loading, error, data } = useQuery(
|
|
|
|
gql`
|
|
|
|
query ItemPage($itemId: ID!) {
|
|
|
|
item(id: $itemId) {
|
|
|
|
id
|
|
|
|
name
|
|
|
|
isNc
|
|
|
|
thumbnailUrl
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
{ variables: { itemId } }
|
|
|
|
);
|
|
|
|
|
|
|
|
usePageTitle(data?.item?.name);
|
|
|
|
|
|
|
|
if (loading) {
|
|
|
|
return (
|
|
|
|
<Center>
|
|
|
|
<HangerSpinner />
|
|
|
|
</Center>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (error) {
|
|
|
|
return <Box color="red.400">{error.message}</Box>;
|
|
|
|
}
|
|
|
|
|
|
|
|
const { item } = data;
|
|
|
|
|
2020-09-12 17:27:00 -07:00
|
|
|
return (
|
2020-09-12 17:56:31 -07:00
|
|
|
<VStack spacing="6">
|
2020-09-12 17:27:00 -07:00
|
|
|
<ItemPageHeader item={item} />
|
2020-09-12 17:56:31 -07:00
|
|
|
<ItemPageOutfitPreview itemId={itemId} />
|
|
|
|
</VStack>
|
2020-09-12 17:27:00 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function ItemPageHeader({ item }) {
|
2020-09-11 23:56:47 -07:00
|
|
|
return (
|
|
|
|
<Box display="flex" alignItems="center">
|
|
|
|
<ItemThumbnail
|
|
|
|
item={item}
|
|
|
|
size="lg"
|
|
|
|
isActive
|
|
|
|
marginRight="4"
|
|
|
|
flex="0 0 auto"
|
|
|
|
/>
|
|
|
|
<Box>
|
|
|
|
<Heading1 lineHeight="1.1">{item.name}</Heading1>
|
2020-09-12 17:27:00 -07:00
|
|
|
<ItemPageBadges item={item} />
|
2020-09-11 23:56:47 -07:00
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-12 17:27:00 -07:00
|
|
|
function ItemPageBadges({ item }) {
|
|
|
|
return (
|
|
|
|
<ItemBadgeList>
|
|
|
|
{item.isNc ? <NcBadge /> : <NpBadge />}
|
|
|
|
<LinkBadge
|
|
|
|
href={
|
|
|
|
"https://items.jellyneo.net/search/?name=" +
|
|
|
|
encodeURIComponent(item.name) +
|
|
|
|
"&name_type=3"
|
|
|
|
}
|
|
|
|
>
|
|
|
|
Jellyneo
|
|
|
|
</LinkBadge>
|
|
|
|
{!item.isNc && (
|
|
|
|
<LinkBadge
|
|
|
|
href={
|
|
|
|
"http://www.neopets.com/market.phtml?type=wizard&string=" +
|
|
|
|
encodeURIComponent(item.name)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
Shop Wiz
|
|
|
|
</LinkBadge>
|
|
|
|
)}
|
|
|
|
{!item.isNc && (
|
|
|
|
<LinkBadge
|
|
|
|
href={
|
|
|
|
"http://www.neopets.com/portal/supershopwiz.phtml?string=" +
|
|
|
|
encodeURIComponent(item.name)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
Super Wiz
|
|
|
|
</LinkBadge>
|
|
|
|
)}
|
|
|
|
{!item.isNc && (
|
|
|
|
<LinkBadge
|
|
|
|
href={
|
|
|
|
"http://www.neopets.com/island/tradingpost.phtml?type=browse&criteria=item_exact&search_string=" +
|
|
|
|
encodeURIComponent(item.name)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
Trades
|
|
|
|
</LinkBadge>
|
|
|
|
)}
|
|
|
|
{!item.isNc && (
|
|
|
|
<LinkBadge
|
|
|
|
href={
|
|
|
|
"http://www.neopets.com/genie.phtml?type=process_genie&criteria=exact&auctiongenie=" +
|
|
|
|
encodeURIComponent(item.name)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
Auctions
|
|
|
|
</LinkBadge>
|
|
|
|
)}
|
|
|
|
</ItemBadgeList>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-11 23:56:47 -07:00
|
|
|
function LinkBadge({ children, href }) {
|
|
|
|
return (
|
|
|
|
<Badge as="a" href={href} display="flex" alignItems="center">
|
|
|
|
{children}
|
|
|
|
<ExternalLinkIcon marginLeft="1" />
|
|
|
|
</Badge>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-12 17:56:31 -07:00
|
|
|
function ItemPageOutfitPreview({ itemId }) {
|
|
|
|
const borderColor = useColorModeValue("green.700", "green.400");
|
|
|
|
|
|
|
|
return (
|
|
|
|
<AspectRatio
|
|
|
|
width="100%"
|
|
|
|
maxWidth="300px"
|
|
|
|
ratio="1"
|
|
|
|
border="1px"
|
|
|
|
borderColor={borderColor}
|
|
|
|
borderRadius="lg"
|
|
|
|
boxShadow="lg"
|
|
|
|
overflow="hidden"
|
|
|
|
>
|
|
|
|
<Box>
|
|
|
|
<OutfitPreview
|
|
|
|
speciesId="1"
|
|
|
|
colorId="8"
|
|
|
|
pose="HAPPY_FEM"
|
|
|
|
wornItemIds={[itemId]}
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
</AspectRatio>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-11 23:56:47 -07:00
|
|
|
export default ItemPage;
|