2020-09-06 23:32:04 -07:00
|
|
|
import React from "react";
|
2020-09-07 00:03:46 -07:00
|
|
|
import { Badge, Box, SimpleGrid, useColorModeValue } from "@chakra-ui/core";
|
2020-09-06 23:58:18 -07:00
|
|
|
import { StarIcon } from "@chakra-ui/icons";
|
2020-09-06 23:32:04 -07:00
|
|
|
import gql from "graphql-tag";
|
|
|
|
import { useQuery } from "@apollo/client";
|
|
|
|
|
|
|
|
import HangerSpinner from "./components/HangerSpinner";
|
2020-09-06 23:49:04 -07:00
|
|
|
import { Heading1, Heading2 } from "./util";
|
|
|
|
import ItemSummary, { ItemSummaryBadgeList } from "./components/ItemSummary";
|
2020-09-06 23:32:04 -07:00
|
|
|
|
|
|
|
function ModelingPage() {
|
|
|
|
return (
|
|
|
|
<Box>
|
|
|
|
<Heading1 marginBottom="2">Modeling Hub</Heading1>
|
2020-09-06 23:49:04 -07:00
|
|
|
<Heading2 marginBottom="2">Item models we need</Heading2>
|
2020-09-06 23:32:04 -07:00
|
|
|
<ItemModelsList />
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function ItemModelsList() {
|
|
|
|
const { loading, error, data } = useQuery(gql`
|
|
|
|
query ModelingPage {
|
|
|
|
itemsThatNeedModels {
|
|
|
|
id
|
|
|
|
name
|
|
|
|
thumbnailUrl
|
|
|
|
speciesThatNeedModels {
|
|
|
|
id
|
|
|
|
name
|
|
|
|
}
|
|
|
|
}
|
2020-09-06 23:58:18 -07:00
|
|
|
|
|
|
|
currentUser {
|
|
|
|
itemsTheyOwn {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
}
|
2020-09-06 23:32:04 -07:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
if (loading) {
|
|
|
|
return (
|
|
|
|
<Box display="flex" justifyContent="center">
|
|
|
|
<HangerSpinner />
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (error) {
|
|
|
|
return <Box color="red.400">{error.message}</Box>;
|
|
|
|
}
|
|
|
|
|
2020-09-06 23:49:04 -07:00
|
|
|
const items = data.itemsThatNeedModels
|
|
|
|
// enough MMEs are broken that I just don't want to deal right now!
|
|
|
|
.filter((item) => !item.name.includes("MME"))
|
|
|
|
.sort((a, b) => a.name.localeCompare(b.name));
|
2020-09-06 23:32:04 -07:00
|
|
|
|
2020-09-06 23:58:18 -07:00
|
|
|
const ownedItemIds = new Set(
|
|
|
|
data.currentUser?.itemsTheyOwn?.map((item) => item.id)
|
|
|
|
);
|
|
|
|
|
2020-09-06 23:32:04 -07:00
|
|
|
return (
|
2020-09-06 23:49:04 -07:00
|
|
|
<SimpleGrid columns={{ sm: 1, lg: 2 }} spacing="6">
|
2020-09-06 23:32:04 -07:00
|
|
|
{items.map((item) => (
|
2020-09-06 23:58:18 -07:00
|
|
|
<ItemModelCard
|
|
|
|
key={item.id}
|
|
|
|
item={item}
|
|
|
|
currentUserOwnsItem={ownedItemIds.has(item.id)}
|
|
|
|
/>
|
2020-09-06 23:32:04 -07:00
|
|
|
))}
|
2020-09-06 23:49:04 -07:00
|
|
|
</SimpleGrid>
|
2020-09-06 23:32:04 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-06 23:58:18 -07:00
|
|
|
function ItemModelCard({ item, currentUserOwnsItem, ...props }) {
|
2020-09-07 00:03:46 -07:00
|
|
|
const borderColor = useColorModeValue("transparent", "green.500");
|
|
|
|
|
2020-09-06 23:32:04 -07:00
|
|
|
return (
|
2020-09-06 23:51:51 -07:00
|
|
|
<Box
|
|
|
|
as="a"
|
|
|
|
href={`https://impress.openneo.net/items/${item.id}`}
|
|
|
|
p="2"
|
|
|
|
boxShadow="lg"
|
|
|
|
borderRadius="lg"
|
|
|
|
width="400px"
|
2020-09-07 00:03:46 -07:00
|
|
|
border="1px"
|
|
|
|
borderColor={borderColor}
|
2020-09-07 00:14:44 -07:00
|
|
|
className="item-model-card"
|
2020-09-06 23:51:51 -07:00
|
|
|
{...props}
|
|
|
|
>
|
2020-09-06 23:58:18 -07:00
|
|
|
<ItemSummary
|
|
|
|
item={item}
|
|
|
|
badges={
|
|
|
|
<ItemModelBadges
|
|
|
|
item={item}
|
|
|
|
currentUserOwnsItem={currentUserOwnsItem}
|
|
|
|
/>
|
|
|
|
}
|
2020-09-07 00:14:44 -07:00
|
|
|
focusSelector=".item-model-card:hover &, .item-model-card:focus &"
|
2020-09-06 23:58:18 -07:00
|
|
|
/>
|
2020-09-06 23:32:04 -07:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-06 23:58:18 -07:00
|
|
|
function ItemModelBadges({ item, currentUserOwnsItem }) {
|
2020-09-06 23:49:04 -07:00
|
|
|
return (
|
|
|
|
<ItemSummaryBadgeList>
|
2020-09-06 23:58:18 -07:00
|
|
|
{currentUserOwnsItem && (
|
|
|
|
<Badge colorScheme="yellow" display="flex" alignItems="center">
|
|
|
|
<StarIcon aria-label="Star" marginRight="1" />
|
|
|
|
You own this!
|
|
|
|
</Badge>
|
|
|
|
)}
|
2020-09-06 23:49:04 -07:00
|
|
|
{item.speciesThatNeedModels.map((species) => (
|
|
|
|
<Badge>{species.name}</Badge>
|
|
|
|
))}
|
|
|
|
</ItemSummaryBadgeList>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-06 23:32:04 -07:00
|
|
|
export default ModelingPage;
|