import React from "react";
import {
Box,
Grid,
Icon,
IconButton,
Input,
InputGroup,
InputLeftElement,
InputRightElement,
useToast,
} from "@chakra-ui/core";
import ItemsPanel from "./ItemsPanel";
import OutfitPreview from "./OutfitPreview";
import SearchPanel from "./SearchPanel";
import useOutfitState from "./useOutfitState.js";
function WardrobePage() {
const { loading, error, outfitState, dispatchToOutfit } = useOutfitState();
const [searchQuery, setSearchQuery] = React.useState("");
const toast = useToast();
const searchContainerRef = React.useRef();
React.useEffect(() => {
if (error) {
console.log(error);
toast({
title: "We couldn't load this outfit 😖",
description: "Please reload the page to try again. Sorry!",
status: "error",
isClosable: true,
duration: 999999999,
});
}
}, [error, toast]);
React.useEffect(() => {
if (searchContainerRef.current) {
searchContainerRef.current.scrollTop = 0;
}
}, [searchQuery]);
return (
{searchQuery ? (
) : (
)}
);
}
function SearchToolbar({ query, onChange }) {
return (
onChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Escape") {
onChange("");
e.target.blur();
}
}}
/>
{query && (
onChange("")}
/>
)}
);
}
export default WardrobePage;