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) => (
+
+ ))}
+
+
);
}