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

90
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
items={data.standardItems} title="Items we need modeled"
ownedItemIds={ownedItemIds} items={data.standardItems}
/> ownedItemIds={ownedItemIds}
<Heading2 marginTop="6" marginBottom="2"> />
Items we need modeled on Baby pets )}
</Heading2> {data.babyItems.length > 0 && (
<ItemModelsColorSection <ItemModelsColorSection
items={data.babyItems} title="Items we need modeled on Baby pets"
ownedItemIds={ownedItemIds} items={data.babyItems}
/> ownedItemIds={ownedItemIds}
<Heading2 marginTop="6" marginBottom="2"> />
Items we need modeled on Maraquan pets )}
</Heading2> {data.maraquanItems.length > 0 && (
<ItemModelsColorSection <ItemModelsColorSection
items={data.maraquanItems} title="Items we need modeled on Maraquan pets"
ownedItemIds={ownedItemIds} items={data.maraquanItems}
/> ownedItemIds={ownedItemIds}
<Heading2 marginTop="6">Items we need modeled on Mutant pets</Heading2> />
<ItemModelsColorSection )}
items={data.mutantItems} {data.mutantItems.length > 0 && (
ownedItemIds={ownedItemIds} <ItemModelsColorSection
/> title="Items we need modeled on Mutant pets"
</> items={data.mutantItems}
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,15 +178,18 @@ function ItemModelsColorSection({ items, ownedItemIds }) {
}); });
return ( return (
<ItemCardList> <Box {...props}>
{items.map((item) => ( <Heading2 marginBottom="2">{title}</Heading2>
<ItemModelCard <ItemCardList>
key={item.id} {items.map((item) => (
item={item} <ItemModelCard
currentUserOwnsItem={ownedItemIds.has(item.id)} key={item.id}
/> item={item}
))} currentUserOwnsItem={ownedItemIds.has(item.id)}
</ItemCardList> />
))}
</ItemCardList>
</Box>
); );
} }