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

Simplify modeling output when there's no items

Browse source 
This'll both hide sections that are empty (which just wasn't plausible for a long time), and print a happy lil message if there's no sections to show at all!
This commit is contained in:
Emi Matchu 2022-10-12 12:09:15 -07:00
parent 0a99668f00
commit 3428254318
1 changed files with 53 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/app/ModelingPage.js
View file

@ -1,5 +1,5 @@
import React from "react"; 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 gql from "graphql-tag";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
@ -121,37 +121,50 @@ function ItemModelsSection() {
userData?.currentUser?.itemsTheyOwn?.map((item) => item.id) 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 <p>All items seem to be fully modeled! Good job, everyone! 🥳</p>;
}
return ( return (
<> <VStack spacing="6" align="flex-start">
<Heading2 marginBottom="2">Items we need modeled</Heading2> {data.standardItems.length > 0 && (
<ItemModelsColorSection <ItemModelsColorSection
title="Items we need modeled"
items={data.standardItems} items={data.standardItems}
ownedItemIds={ownedItemIds} ownedItemIds={ownedItemIds}
/> />
<Heading2 marginTop="6" marginBottom="2"> )}
Items we need modeled on Baby pets {data.babyItems.length > 0 && (
</Heading2>
<ItemModelsColorSection <ItemModelsColorSection
title="Items we need modeled on Baby pets"
items={data.babyItems} items={data.babyItems}
ownedItemIds={ownedItemIds} ownedItemIds={ownedItemIds}
/> />
<Heading2 marginTop="6" marginBottom="2"> )}
Items we need modeled on Maraquan pets {data.maraquanItems.length > 0 && (
</Heading2>
<ItemModelsColorSection <ItemModelsColorSection
title="Items we need modeled on Maraquan pets"
items={data.maraquanItems} items={data.maraquanItems}
ownedItemIds={ownedItemIds} ownedItemIds={ownedItemIds}
/> />
<Heading2 marginTop="6">Items we need modeled on Mutant pets</Heading2> )}
{data.mutantItems.length > 0 && (
<ItemModelsColorSection <ItemModelsColorSection
title="Items we need modeled on Mutant pets"
items={data.mutantItems} items={data.mutantItems}
ownedItemIds={ownedItemIds} ownedItemIds={ownedItemIds}
/> />
</> )}
</VStack>
); );
} }
function ItemModelsColorSection({ items, ownedItemIds }) { function ItemModelsColorSection({ title, items, ownedItemIds, ...props }) {
items = items items = items
// enough MMEs are broken that I just don't want to deal right now! // enough MMEs are broken that I just don't want to deal right now!
// TODO: solve this with our new database omission feature instead? // TODO: solve this with our new database omission feature instead?
@ -165,6 +178,8 @@ function ItemModelsColorSection({ items, ownedItemIds }) {
}); });
return ( return (
<Box {...props}>
<Heading2 marginBottom="2">{title}</Heading2>
<ItemCardList> <ItemCardList>
{items.map((item) => ( {items.map((item) => (
<ItemModelCard <ItemModelCard
@ -174,6 +189,7 @@ function ItemModelsColorSection({ items, ownedItemIds }) {
/> />
))} ))}
</ItemCardList> </ItemCardList>
</Box>
); );
} }