From 433d255391adae9143197877dd9266f6d26917fd Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Wed, 22 Apr 2020 02:57:58 -0700
Subject: [PATCH] add temporary toast explaining outfit is static

---
 app/src/WardrobePage.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/app/src/WardrobePage.js b/app/src/WardrobePage.js
index 767dcdd..cb809dc 100644
--- a/app/src/WardrobePage.js
+++ b/app/src/WardrobePage.js
@@ -17,15 +17,39 @@ import {
   PseudoBox,
   Stack,
   Text,
+  useToast,
 } from "@chakra-ui/core";
 
 import useOutfitState from "./useOutfitState.js";
 import { ITEMS } from "./data";
 
 function WardrobePage() {
-  const [data, wearItem] = useOutfitState();
+  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) {
+        toast({
+          title: "Not yet implemented",
+          description:
+            "The outfit preview is static right now, we'll update it " +
+            "to change later! But the list animation is good, yeah? 😊",
+          status: "warning",
+          isClosable: true,
+          duration: 10000,
+          position: window.innerWidth < 992 ? "top" : "bottom-left",
+        });
+        setHasSentToast(true);
+      }
+    },
+    [toast, wearItemRaw, hasSentToast, setHasSentToast]
+  );
+
   return (
     <Grid
       // Fullscreen, split into a vertical stack on smaller screens