import React from "react";
import { Box, Center, Flex, Wrap, WrapItem } from "@chakra-ui/react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import { Link } from "react-router-dom";
import { ErrorMessage, Heading1, useCommonStyles } from "./util";
import {
getVisibleLayers,
petAppearanceFragmentForGetVisibleLayers,
itemAppearanceFragmentForGetVisibleLayers,
} from "./components/useOutfitAppearance";
import HangerSpinner from "./components/HangerSpinner";
import useRequireLogin from "./components/useRequireLogin";
import WIPCallout from "./components/WIPCallout";
function UserOutfitsPage() {
return (
Your outfits
);
}
function UserOutfitsPageContent() {
const { isLoading: userLoading } = useRequireLogin();
const { loading: queryLoading, error, data } = useQuery(
gql`
query UserOutfitsPageContent($size: LayerImageSize) {
currentUser {
id
outfits {
id
name
petAppearance {
id
layers {
id
svgUrl
imageUrl(size: $size)
}
...PetAppearanceForGetVisibleLayers
}
itemAppearances {
id
layers {
id
svgUrl
imageUrl(size: $size)
}
...ItemAppearanceForGetVisibleLayers
}
}
}
}
${petAppearanceFragmentForGetVisibleLayers}
${itemAppearanceFragmentForGetVisibleLayers}
`,
{ variables: { size: "SIZE_" + getBestImageSize() }, skip: userLoading }
);
if (userLoading || queryLoading) {
return (
);
}
if (error) {
return Error loading outfits: {error.message};
}
const outfits = data.currentUser.outfits;
if (outfits.length === 0) {
return (
You don't have any outfits yet. Maybe you can create some!
);
}
return (
{outfits.map((outfit) => (
))}
);
}
function OutfitCard({ outfit }) {
const thumbnailUrl = buildOutfitThumbnailUrl(
outfit.petAppearance,
outfit.itemAppearances
);
const { brightBackground } = useCommonStyles();
return (
{outfit.name}
);
}
function buildOutfitThumbnailUrl(petAppearance, itemAppearances) {
const size = getBestImageSize();
const visibleLayers = getVisibleLayers(petAppearance, itemAppearances);
const layerUrls = visibleLayers.map(
(layer) => layer.svgUrl || layer.imageUrl
);
return `/api/outfitImage?size=${size}&layerUrls=${layerUrls.join(",")}`;
}
/**
* getBestImageSize returns the right image size to render at 150x150, for the
* current device.
*
* On high-DPI devices, we'll download a 300x300 image to render at 150x150
* scale. On standard-DPI devices, we'll download a 150x150 image, to save
* bandwidth.
*/
function getBestImageSize() {
if (window.devicePixelRatio > 1) {
return 300;
} else {
return 150;
}
}
export default UserOutfitsPage;