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

add lookup/neomail links to user item pages

Browse source
This commit is contained in:
Emi Matchu 2020-10-24 00:08:22 -07:00
parent 274a4f716f
commit b28d8256b8
1 changed files with 47 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/app/UserItemsPage.js
View file

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { Box, Center } from "@chakra-ui/core"; import { Badge, Box, Center, Wrap } from "@chakra-ui/core";
import { EmailIcon } from "@chakra-ui/icons";
import gql from "graphql-tag"; import gql from "graphql-tag";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
@ -116,10 +117,32 @@ function UserItemsPage() {
<Box float="right"> <Box float="right">
<WIPCallout details="These lists are simplified and read-only for now. Full power coming soon!" /> <WIPCallout details="These lists are simplified and read-only for now. Full power coming soon!" />
</Box> </Box>
<Heading1 marginBottom="4"> <Heading1>
{isCurrentUser ? "Your items" : `${data.user.username}'s items`} {isCurrentUser ? "Your items" : `${data.user.username}'s items`}
</Heading1> </Heading1>
<Heading2 marginBottom="6"> {data.user.contactNeopetsUsername && (
<Wrap spacing="2" opacity="0.7">
<Badge
as="a"
href={`http://www.neopets.com/userlookup.phtml?user=${data.user.contactNeopetsUsername}`}
display="inline-flex"
alignItems="center"
>
<NeopetsStarIcon marginRight="1" />
{data.user.contactNeopetsUsername}
</Badge>
<Badge
as="a"
href={`http://www.neopets.com/neomessages.phtml?type=send&recipient=${data.user.contactNeopetsUsername}`}
display="inline-flex"
alignItems="center"
>
<EmailIcon marginRight="1" />
Neomail
</Badge>
</Wrap>
)}
<Heading2 marginTop="4" marginBottom="6">
{isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`} {isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
</Heading2> </Heading2>
<ItemCardList> <ItemCardList>
@ -168,4 +191,25 @@ function UserItemsPage() {
); );
} }
function NeopetsStarIcon(props) {
return (
<Box {...props}>
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 160 160"
preserveAspectRatio="xMidYMid meet"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M85 129 L60 108 40 119 C11 135,7 132,24 108 L39 86 23 68 L6 50 32 50 L58 50 73 29 L88 8 94 29 L101 50 128 50 L155 50 131 68 L107 86 113 118 C121 155,118 156,85 129 "
/>
</svg>
</Box>
);
}
export default UserItemsPage; export default UserItemsPage;