import React from "react";
import {
Box,
Editable,
EditablePreview,
EditableInput,
Flex,
Grid,
Heading,
Icon,
IconButton,
Image,
Input,
InputGroup,
InputLeftElement,
InputRightElement,
PseudoBox,
Stack,
Text,
useToast,
} from "@chakra-ui/core";
import useOutfitState from "./useOutfitState.js";
import { ITEMS } from "./data";
function WardrobePage() {
const [data, wearItemRaw] = useOutfitState();
const [searchQuery, setSearchQuery] = React.useState("");
const toast = useToast();
const [hasSentToast, setHasSentToast] = React.useState(false);
const wearItem = React.useCallback(
(itemIdToAdd) => {
wearItemRaw(itemIdToAdd);
if (!hasSentToast) {
setTimeout(() => {
toast({
title: "So, the outfit didn't change ๐
",
description:
"This is a prototype, and the outfit preview is static right " +
"now! But the list animation is good, yeah? Nice and smooth ๐",
status: "warning",
isClosable: true,
duration: 10000,
position: window.innerWidth < 992 ? "top" : "bottom-left",
});
}, 3000);
setHasSentToast(true);
}
},
[toast, wearItemRaw, hasSentToast, setHasSentToast]
);
return (
{searchQuery ? (
) : (
)}
);
}
function OutfitPreview() {
return (
);
}
function SearchToolbar({ query, onChange }) {
return (
onChange(e.target.value)}
/>
{query && (
onChange("")}
/>
)}
);
}
function SearchPanel({ query, wornItemIds, onWearItem }) {
const normalize = (s) => s.toLowerCase();
const results = ITEMS.filter((item) =>
normalize(item.name).includes(normalize(query))
);
results.sort((a, b) => a.name.localeCompare(b.name));
const resultsSection =
results.length > 0 ? (
) : (
We couldn't find any matching items{" "}
๐ค
{" "}
Try again?
);
return (
Searching for "{query}"
{resultsSection}
);
}
function ItemsPanel({ zonesAndItems, onWearItem }) {
return (
{zonesAndItems.map(({ zoneName, items, wornItemId }) => (
))}
);
}
function OutfitHeading() {
return (
{({ isEditing, onRequestEdit }) => (
<>
{!isEditing && (
)}
>
)}
);
}
function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) {
return (
{zoneName}
);
}
function ItemList({ items, wornItemIds, onWearItem }) {
return (
{items.map((item) => (
- onWearItem(item.id)}
/>
))}
);
}
function Item({ item, isWorn, onWear }) {
return (
{item.name}
);
}
export default WardrobePage;