diff --git a/src/app/ModelingPage.js b/src/app/ModelingPage.js index 0666eb6..6466ae1 100644 --- a/src/app/ModelingPage.js +++ b/src/app/ModelingPage.js @@ -1,5 +1,5 @@ import React from "react"; -import { Badge, Box, Tooltip } from "@chakra-ui/react"; +import { Badge, Box, Tooltip, VStack } from "@chakra-ui/react"; import gql from "graphql-tag"; import { useQuery } from "@apollo/client"; @@ -121,37 +121,50 @@ function ItemModelsSection() { userData?.currentUser?.itemsTheyOwn?.map((item) => item.id) ); + if ( + data.standardItems.length === 0 && + data.babyItems.length === 0 && + data.maraquanItems.length === 0 && + data.mutantItems.length === 0 + ) { + return

All items seem to be fully modeled! Good job, everyone! 🥳

; + } + 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 - - + + {data.standardItems.length > 0 && ( + + )} + {data.babyItems.length > 0 && ( + + )} + {data.maraquanItems.length > 0 && ( + + )} + {data.mutantItems.length > 0 && ( + + )} + ); } -function ItemModelsColorSection({ items, ownedItemIds }) { +function ItemModelsColorSection({ title, items, ownedItemIds, ...props }) { 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? @@ -165,15 +178,18 @@ function ItemModelsColorSection({ items, ownedItemIds }) { }); return ( - - {items.map((item) => ( - - ))} - + + {title} + + {items.map((item) => ( + + ))} + + ); }