import React from "react";
import { Badge, Box } from "@chakra-ui/core";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import { Delay } from "./util";
import HangerSpinner from "./components/HangerSpinner";
import { Heading1, Heading2, usePageTitle } from "./util";
import ItemCard, {
ItemBadgeList,
ItemCardList,
YouOwnThisBadge,
} from "./components/ItemCard";
function ModelingPage() {
usePageTitle("Modeling Hub");
return (
Modeling Hub
Item models we need
);
}
function ItemModelsList() {
const { loading, error, data } = useQuery(gql`
query ModelingPage {
itemsThatNeedModels {
id
name
thumbnailUrl
speciesThatNeedModels {
id
name
}
}
currentUser {
itemsTheyOwn {
id
}
}
}
`);
if (loading) {
return (
Checking all the items…
);
}
if (error) {
return {error.message};
}
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));
const ownedItemIds = new Set(
data.currentUser?.itemsTheyOwn?.map((item) => item.id)
);
return (
{items.map((item) => (
))}
);
}
function ItemModelCard({ item, currentUserOwnsItem, ...props }) {
const badges = (
);
return ;
}
function ItemModelBadges({ item, currentUserOwnsItem }) {
return (
{currentUserOwnsItem && }
{item.speciesThatNeedModels.map((species) => (
{species.name}
))}
);
}
export default ModelingPage;