import React from "react";
import { Badge, Box, Tooltip, VStack } from "@chakra-ui/react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import { Delay } from "./util";
import HangerSpinner from "./components/HangerSpinner";
import { Heading1, Heading2 } from "./util";
import ItemCard, {
ItemBadgeList,
ItemCardList,
NcBadge,
YouOwnThisBadge,
} from "./components/ItemCard";
import useCurrentUser from "./components/useCurrentUser";
import Head from "next/head";
function ModelingPage() {
return (
<>
Modeling Hub | Dress to Impress
Modeling Hub
);
}
function ItemModelsSection() {
const { isLoggedIn } = useCurrentUser();
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
}
}
}
fragment ItemFields on Item {
id
name
thumbnailUrl
isNc
createdAt
}
`
);
// We're going to be silent about the loading/error states here, because it's
// not essential info anyway, and announcing the wait or the failure would be
// more confusing than anything.
const { data: userData } = useQuery(
gql`
query ModelingPage_UserData {
currentUser {
itemsTheyOwn {
id
}
}
}
`,
{ context: { sendAuth: true }, skip: !isLoggedIn }
);
if (loading) {
return (
<>
Items we need modeled
Checking all the itemsā¦
);
}
if (error) {
return {error.message};
}
const ownedItemIds = new Set(
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 (
{data.standardItems.length > 0 && (
)}
{data.babyItems.length > 0 && (
)}
{data.maraquanItems.length > 0 && (
)}
{data.mutantItems.length > 0 && (
)}
);
}
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?
.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 (
{title}
{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;