import React from "react";
import {
Box,
Editable,
EditablePreview,
EditableInput,
Grid,
Heading,
Icon,
IconButton,
Input,
InputGroup,
InputLeftElement,
InputRightElement,
PseudoBox,
Skeleton,
Stack,
Text,
useToast,
} from "@chakra-ui/core";
import { ITEMS } from "./data";
import ItemList, { ItemListSkeleton } from "./ItemList";
import useItemData from "./useItemData";
import useOutfitState from "./useOutfitState.js";
import OutfitPreview from "./OutfitPreview";
import { Delay } from "./util";
function WardrobePage() {
const { loading, error, data, wearItem } = useOutfitState();
const [searchQuery, setSearchQuery] = React.useState("");
const toast = useToast();
React.useEffect(() => {
if (error) {
toast({
title: "We couldn't load this outfit 😖",
description: "Please reload the page to try again. Sorry!",
status: "error",
isClosable: true,
duration: Infinity,
});
}
}, [error, toast]);
return (
{searchQuery ? (
) : (
)}
);
}
function SearchToolbar({ query, onChange }) {
return (
onChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Escape") {
onChange("");
e.target.blur();
}
}}
/>
{query && (
onChange("")}
/>
)}
);
}
function SearchPanel({ query, wornItemIds, onWearItem }) {
const { loading, error, itemsById } = useItemData(ITEMS.map((i) => i.id));
const normalize = (s) => s.toLowerCase();
const results = Object.values(itemsById).filter((item) =>
normalize(item.name).includes(normalize(query))
);
results.sort((a, b) => a.name.localeCompare(b.name));
return (
Searching for "{query}"
);
}
function SearchResults({ loading, error, results, wornItemIds, onWearItem }) {
if (loading) {
return ;
}
if (error) {
return (
We hit an error trying to load your search results
😓
{" "}
Try again?
);
}
if (results.length === 0) {
return (
We couldn't find any matching items{" "}
🤔
{" "}
Try again?
);
}
return (
);
}
function ItemsPanel({ zonesAndItems, loading, onWearItem }) {
return (
{loading &&
[1, 2, 3].map((i) => (
))}
{!loading &&
zonesAndItems.map(({ zoneName, items, wornItemId }) => (
{zoneName}
))}
);
}
function OutfitHeading() {
return (
{({ isEditing, onRequestEdit }) => (
<>
{!isEditing && (
)}
>
)}
);
}
function OutfitNameEditButton({ onRequestEdit }) {
return (
);
}
function Heading1({ children, ...props }) {
return (
{children}
);
}
function Heading2({ children, ...props }) {
return (
{children}
);
}
export default WardrobePage;