import React from "react"; import { Badge, Box, Tooltip } 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, NcBadge, YouOwnThisBadge, } from "./components/ItemCard"; function ModelingPage() { usePageTitle("Modeling Hub"); return ( Modeling Hub ); } function ItemModelsSection() { const { loading, error, data } = useQuery(gql` query ModelingPage { standardItems: itemsThatNeedModels { ...ItemFields speciesThatNeedModels { id name } } babyItems: itemsThatNeedModels(colorId: "6") { ...ItemFields speciesThatNeedModels(colorId: "6") { id name } } maraquanItems: itemsThatNeedModels(colorId: "44") { ...ItemFields speciesThatNeedModels(colorId: "44") { id name } } mutantItems: itemsThatNeedModels(colorId: "46") { ...ItemFields speciesThatNeedModels(colorId: "46") { id name } } currentUser { itemsTheyOwn { id } } } fragment ItemFields on Item { id name thumbnailUrl isNc createdAt } `); if (loading) { return ( <> Items we need modeled Checking all the items… ); } if (error) { return {error.message}; } const ownedItemIds = new Set( data.currentUser?.itemsTheyOwn?.map((item) => item.id) ); return ( <> Items we need modeled Items we need modeled on Baby pets Items we need modeled on Maraquan pets Items we need modeled on Mutant pets ); } function ItemModelsColorSection({ items, ownedItemIds }) { items = items // enough MMEs are broken that I just don't want to deal right now! // TODO: solve this with our new database omission feature instead? .filter((item) => !item.name.includes("MME")) .sort((a, b) => { // This is a cute sort hack. We sort first by, bringing "New!" to the // top, and then sorting by name _within_ those two groups. const aName = `${itemIsNew(a) ? "000" : "999"} ${a.name}`; const bName = `${itemIsNew(b) ? "000" : "999"} ${b.name}`; return aName.localeCompare(bName); }); return ( {items.map((item) => ( ))} ); } function ItemModelCard({ item, currentUserOwnsItem, ...props }) { const badges = ( ); return ; } function ItemModelBadges({ item, currentUserOwnsItem }) { return ( {itemIsNew(item) && } {item.isNc && } {currentUserOwnsItem && } {item.speciesThatNeedModels.map((species) => ( {species.name} ))} ); } const fullDateFormatter = new Intl.DateTimeFormat("en-US", { dateStyle: "long", }); function NewItemBadge({ createdAt }) { const date = new Date(createdAt); return ( New! ); } function itemIsNew(item) { const date = new Date(item.createdAt); const oneMonthAgo = new Date(); oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1); return date > oneMonthAgo; } export default ModelingPage;