Exercise 1 && 2 && 3 Done

src/components/App/App.js

@@ -1,14 +1,14 @@
-import React from 'react';
-
-import ToastPlayground from '../ToastPlayground';
-import Footer from '../Footer';
+import React from "react";
 
+import ToastPlayground from "../ToastPlayground";
+import Footer from "../Footer";
+import ToastProvider from "../ToastProvider";
 function App() {
   return (
-    <>
+    <ToastProvider>
       <ToastPlayground />
       <Footer />
-    </>
+    </ToastProvider>
   );
 }
 

src/components/Toast/Toast.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import React from "react";
 import {
   AlertOctagon,
   AlertTriangle,
   CheckCircle,
   Info,
   X,
-} from 'react-feather';
+} from "react-feather";
 
-import VisuallyHidden from '../VisuallyHidden';
-
-import styles from './Toast.module.css';
+import VisuallyHidden from "../VisuallyHidden";
+import { ToastContext } from "../ToastProvider";
+import styles from "./Toast.module.css";
 
 const ICONS_BY_VARIANT = {
   notice: Info,
@@ -18,16 +18,17 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast() {
+function Toast({ id, variant, content }) {
+  const IconTag = ICONS_BY_VARIANT[variant];
+  const { handleDismiss } = React.useContext(ToastContext);
+
   return (
-    <div className={`${styles.toast} ${styles.notice}`}>
+    <div className={`${styles.toast} ${styles[variant]}`}>
       <div className={styles.iconContainer}>
-        <Info size={24} />
+        <IconTag size={24} />
       </div>
-      <p className={styles.content}>
-        16 photos have been uploaded
-      </p>
-      <button className={styles.closeButton}>
+      <p className={styles.content}>{content}</p>
+      <button onClick={() => handleDismiss(id)} className={styles.closeButton}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>

src/components/ToastPlayground/ToastPlayground.js

@@ -1,61 +1,80 @@
-import React from 'react';
+import React from "react";
 
-import Button from '../Button';
-
-import styles from './ToastPlayground.module.css';
-
-const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
+import Button from "../Button";
+import ToastShelf from "../ToastShelf";
+import styles from "./ToastPlayground.module.css";
+import { ToastContext } from "../ToastProvider";
+const VARIANT_OPTIONS = ["notice", "warning", "success", "error"];
 
 function ToastPlayground() {
+  const [message, setMessage] = React.useState("");
+  const [variant, setVariant] = React.useState("notice");
+  const { addToastItem } = React.useContext(ToastContext);
+
   return (
     <div className={styles.wrapper}>
       <header>
         <img alt="Cute toast mascot" src="/toast.png" />
         <h1>Toast Playground</h1>
       </header>
 
-      <div className={styles.controlsWrapper}>
+      <ToastShelf></ToastShelf>
+
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+
+          addToastItem(message, variant);
+
+          setMessage("");
+          setVariant("");
+        }}
+        className={styles.controlsWrapper}
+      >
         <div className={styles.row}>
           <label
             htmlFor="message"
             className={styles.label}
-            style={{ alignSelf: 'baseline' }}
+            style={{ alignSelf: "baseline" }}
           >
             Message
           </label>
           <div className={styles.inputWrapper}>
-            <textarea id="message" className={styles.messageInput} />
+            <textarea
+              value={message}
+              onChange={(event) => setMessage(event.target.value)}
+              id="message"
+              className={styles.messageInput}
+            />
           </div>
         </div>
 
         <div className={styles.row}>
           <div className={styles.label}>Variant</div>
-          <div
-            className={`${styles.inputWrapper} ${styles.radioWrapper}`}
-          >
-            <label htmlFor="variant-notice">
-              <input
-                id="variant-notice"
-                type="radio"
-                name="variant"
-                value="notice"
-              />
-              notice
-            </label>
-
-            {/* TODO Other Variant radio buttons here */}
+          <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
+            {VARIANT_OPTIONS.map((option) => (
+              <label key={option} htmlFor={`variant-${option}`}>
+                <input
+                  id={`variant-${option}`}
+                  type="radio"
+                  name="variant"
+                  value={option}
+                  checked={variant === option}
+                  onChange={(event) => setVariant(event.target.value)}
+                />
+                {option}
+              </label>
+            ))}
           </div>
         </div>
 
         <div className={styles.row}>
           <div className={styles.label} />
-          <div
-            className={`${styles.inputWrapper} ${styles.radioWrapper}`}
-          >
+          <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
             <Button>Pop Toast!</Button>
           </div>
         </div>
-      </div>
+      </form>
     </div>
   );
 }

src/components/ToastProvider/ToastProvider.js

@@ -0,0 +1,41 @@
+import React from "react";
+import useKeydown from "../../hooks/use-keydown";
+export const ToastContext = React.createContext();
+
+function ToastProvider({ children }) {
+  const [toastList, setToastList] = React.useState([]);
+
+  const addToastItem = (message, variant) => {
+    const newItem = {
+      message,
+      variant,
+      id: Math.random(),
+    };
+    const nextList = [...toastList, newItem];
+    setToastList(nextList);
+  };
+
+  const handleEscape = React.useCallback(() => {
+    setToastList([]);
+  }, []);
+
+  useKeydown("Escape", handleEscape);
+
+  const handleDismiss = (id) => {
+    const nextToasts = toastList.filter((toast) => {
+      return toast.id !== id;
+    });
+
+    setToastList(nextToasts);
+  };
+
+  return (
+    <ToastContext.Provider
+      value={{ toastList, setToastList, addToastItem, handleDismiss }}
+    >
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+export default ToastProvider;

src/components/ToastProvider/index.js

@@ -0,0 +1,2 @@
+export * from './ToastProvider';
+export { default } from './ToastProvider';

src/components/ToastShelf/ToastShelf.js

@@ -1,17 +1,22 @@
-import React from 'react';
+import React from "react";
 
-import Toast from '../Toast';
-import styles from './ToastShelf.module.css';
+import Toast from "../Toast";
+import styles from "./ToastShelf.module.css";
+import { ToastContext } from "../ToastProvider";
 
 function ToastShelf() {
+  const { toastList } = React.useContext(ToastContext);
   return (
     <ol className={styles.wrapper}>
-      <li className={styles.toastWrapper}>
-        <Toast variant="notice">Example notice toast</Toast>
-      </li>
-      <li className={styles.toastWrapper}>
-        <Toast variant="error">Example error toast</Toast>
-      </li>
+      {toastList.map((toast) => (
+        <li key={toast.id} className={styles.toastWrapper}>
+          <Toast
+            variant={toast.variant}
+            content={toast.message}
+            id={toast.id}
+          ></Toast>
+        </li>
+      ))}
     </ol>
   );
 }

src/hooks/use-keydown.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+const useKeydown = (key, callback) => {
+  React.useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.code === key) {
+        callback(event);
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [key, callback]);
+};
+
+export default useKeydown;