From 7eda3db311dc4e1e8f17872bf1a9d6d46372e1f2 Mon Sep 17 00:00:00 2001
From: Scarlett <hao.sijia04@gmail.com>
Date: Mon, 7 Oct 2024 18:40:23 -0400
Subject: [PATCH 1/7] ex-1-add control to text area; render four radio buttons
 and control them using state;

---
 package-lock.json                             | 12 +++----
 .../ToastPlayground/ToastPlayground.js        | 35 ++++++++++++-------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 20c9a8b2b..c155807cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4832,9 +4832,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001523",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001523.tgz",
-      "integrity": "sha512-I5q5cisATTPZ1mc588Z//pj/Ox80ERYDfR71YnvY7raS/NOk8xXlZcB0sF7JdqaV//kOaa6aus7lRfpdnt1eBA==",
+      "version": "1.0.30001667",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz",
+      "integrity": "sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==",
       "funding": [
         {
           "type": "opencollective",
@@ -12013,9 +12013,9 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "caniuse-lite": {
-      "version": "1.0.30001523",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001523.tgz",
-      "integrity": "sha512-I5q5cisATTPZ1mc588Z//pj/Ox80ERYDfR71YnvY7raS/NOk8xXlZcB0sF7JdqaV//kOaa6aus7lRfpdnt1eBA=="
+      "version": "1.0.30001667",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz",
+      "integrity": "sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw=="
     },
     "chalk": {
       "version": "4.1.2",
diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index e1c6c6eb2..47f40f353 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -7,6 +7,11 @@ import styles from './ToastPlayground.module.css';
 const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
+  const [message, setMessage] = React.useState("")
+  const [optionValue, setOptionValue] = React.useState('notice')
+
+
+
   return (
     <div className={styles.wrapper}>
       <header>
@@ -24,7 +29,9 @@ function ToastPlayground() {
             Message
           </label>
           <div className={styles.inputWrapper}>
-            <textarea id="message" className={styles.messageInput} />
+            <textarea id="message" className={styles.messageInput} value={message}
+              onChange={(e) => setMessage(e.target.value)}
+            />
           </div>
         </div>
 
@@ -33,17 +40,21 @@ function ToastPlayground() {
           <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 */}
+            {VARIANT_OPTIONS.map((option) => (
+              <label htmlFor={`variant-${option}`}>
+                <input
+                  id={`variat-${option}`}
+                  type='radio'
+                  name='variant'
+                  value={option}
+                  key={`variat-${option}`}
+                  onChange={(e) => setOptionValue(e.target.value)}
+                  checked={optionValue === option}
+                />
+                {option}
+              </label>
+            ))}
+            {/* TODO Other Variant radio buttons here: 'warning', 'success', 'error' */}
           </div>
         </div>
 

From 292acc1b13f22d702c2bf3fe18046481ed19e615 Mon Sep 17 00:00:00 2001
From: Scarlett <hao.sijia04@gmail.com>
Date: Tue, 8 Oct 2024 16:44:58 -0400
Subject: [PATCH 2/7] ex-2-add preview and toggle function

---
 src/components/Toast/Toast.js                   | 14 +++++++++-----
 .../ToastPlayground/ToastPlayground.js          | 15 ++++++++++-----
 .../ToastPlayground/ToastPlayground.module.css  |  4 ++++
 src/utils/useToggle.jsx                         | 17 +++++++++++++++++
 4 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/useToggle.jsx

diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index 96af6012c..f7c9452c3 100644
--- a/src/components/Toast/Toast.js
+++ b/src/components/Toast/Toast.js
@@ -18,16 +18,20 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast() {
+function Toast({ children, variant, toggleIsToastOpen }) {
+  const className = `${styles.toast} ${styles[variant]}`
+  console.log(className);
+  const Icon = ICONS_BY_VARIANT[variant]
+
   return (
-    <div className={`${styles.toast} ${styles.notice}`}>
+    <div className={className}>
       <div className={styles.iconContainer}>
-        <Info size={24} />
+        <Icon size={24} />
       </div>
       <p className={styles.content}>
-        16 photos have been uploaded
+        {children}
       </p>
-      <button className={styles.closeButton}>
+      <button className={styles.closeButton} onClick={toggleIsToastOpen}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>
diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index 47f40f353..3d846fa30 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -1,16 +1,16 @@
 import React from 'react';
 
 import Button from '../Button';
-
+import Toast from '../Toast/Toast'
 import styles from './ToastPlayground.module.css';
+import useToggle from "../../utils/useToggle"
 
 const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
   const [message, setMessage] = React.useState("")
   const [optionValue, setOptionValue] = React.useState('notice')
-
-
+  const [isToastOpen, toggleIsToastOpen] = useToggle(false)
 
   return (
     <div className={styles.wrapper}>
@@ -18,7 +18,12 @@ function ToastPlayground() {
         <img alt="Cute toast mascot" src="/toast.png" />
         <h1>Toast Playground</h1>
       </header>
-
+      {
+        isToastOpen &&
+        <Toast variant={optionValue} toggleIsToastOpen={toggleIsToastOpen}>
+          {message}
+          </Toast>
+      }
       <div className={styles.controlsWrapper}>
         <div className={styles.row}>
           <label
@@ -63,7 +68,7 @@ function ToastPlayground() {
           <div
             className={`${styles.inputWrapper} ${styles.radioWrapper}`}
           >
-            <Button>Pop Toast!</Button>
+            <Button onClick={toggleIsToastOpen}>Pop Toast!</Button>
           </div>
         </div>
       </div>
diff --git a/src/components/ToastPlayground/ToastPlayground.module.css b/src/components/ToastPlayground/ToastPlayground.module.css
index 0b9d27683..7d650efea 100644
--- a/src/components/ToastPlayground/ToastPlayground.module.css
+++ b/src/components/ToastPlayground/ToastPlayground.module.css
@@ -106,3 +106,7 @@
   width: 100%;
   height: 4rem;
 }
+
+.hidden {
+  display: none;
+}
\ No newline at end of file
diff --git a/src/utils/useToggle.jsx b/src/utils/useToggle.jsx
new file mode 100644
index 000000000..44e697c30
--- /dev/null
+++ b/src/utils/useToggle.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default function useToggle(initialValue = false) {
+    if (typeof initialValue !== 'boolean') {
+      console.warn('Invalid type for useToggle');
+    }
+  
+    const [value, setValue] = React.useState(
+      initialValue
+    );
+  
+    const toggleValue = React.useCallback(() => {
+      setValue((currentValue) => !currentValue);
+    }, []);
+  
+    return [value, toggleValue];
+  }
\ No newline at end of file

From f450e8b4f6c4227a2defc42c0f502c5c8281c0ae Mon Sep 17 00:00:00 2001
From: Scarlett <hao.sijia04@gmail.com>
Date: Wed, 9 Oct 2024 19:23:29 -0400
Subject: [PATCH 3/7] ex-3: finish ex 3 to create multiple toasts and controls

---
 package-lock.json                             | 20 ++++++-
 package.json                                  |  3 +-
 src/components/Toast/Toast.js                 |  7 +--
 .../ToastPlayground/ToastPlayground.js        | 60 ++++++++++++++-----
 src/components/ToastShelf/ToastShelf.js       | 15 ++---
 5 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c155807cb..8f001bf90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-feather": "2.0.10",
-        "rimraf": "^5.0.1"
+        "rimraf": "^5.0.1",
+        "uuid": "^10.0.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -8726,6 +8727,18 @@
         "node": ">= 4"
       }
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/weak-lru-cache": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
@@ -14681,6 +14694,11 @@
       "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
       "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw=="
     },
+    "uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ=="
+    },
     "weak-lru-cache": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
diff --git a/package.json b/package.json
index 0f1de3265..6dba38a7c 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-feather": "2.0.10",
-    "rimraf": "^5.0.1"
+    "rimraf": "^5.0.1",
+    "uuid": "^10.0.0"
   },
   "scripts": {
     "predev": "rimraf .parcel-cache dist",
diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index f7c9452c3..744c45817 100644
--- a/src/components/Toast/Toast.js
+++ b/src/components/Toast/Toast.js
@@ -18,20 +18,19 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast({ children, variant, toggleIsToastOpen }) {
+function Toast({ children, variant, id, handleDismiss}) {
   const className = `${styles.toast} ${styles[variant]}`
-  console.log(className);
   const Icon = ICONS_BY_VARIANT[variant]
 
   return (
-    <div className={className}>
+    <div className={className} id={id}>
       <div className={styles.iconContainer}>
         <Icon size={24} />
       </div>
       <p className={styles.content}>
         {children}
       </p>
-      <button className={styles.closeButton} onClick={toggleIsToastOpen}>
+      <button className={styles.closeButton} onClick={()=>handleDismiss(id)}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>
diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index 3d846fa30..de839ed96 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -4,13 +4,49 @@ import Button from '../Button';
 import Toast from '../Toast/Toast'
 import styles from './ToastPlayground.module.css';
 import useToggle from "../../utils/useToggle"
+import ToastShelf from '../ToastShelf/ToastShelf'
+
 
 const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
   const [message, setMessage] = React.useState("")
-  const [optionValue, setOptionValue] = React.useState('notice')
-  const [isToastOpen, toggleIsToastOpen] = useToggle(false)
+  const [variant, setVariant] = React.useState('notice')
+  // const [isToastOpen, toggleIsToastOpen] = useToggle(false)
+  const [toasts, setToasts] = React.useState([
+    {
+      id: crypto.randomUUID(),
+      message: 'Please enter the information',
+      variant: 'error'
+    },
+    {
+      id: crypto.randomUUID(),
+      message: 'Please enter the information',
+      variant: 'notice'
+    }
+  ])
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    if (message !== '' && variant !== '') {
+      setToasts([
+        ...toasts,
+        {
+          id: crypto.randomUUID(),
+          message: message,
+          variant: variant,
+        }
+      ])
+    }
+    setMessage('')
+    setVariant('')
+  }
+
+  function handleDismiss(id) {
+    const nextToasts = toasts.filter(toast => {return toast.id !== id})
+    setToasts(nextToasts)
+  }
 
   return (
     <div className={styles.wrapper}>
@@ -18,13 +54,10 @@ function ToastPlayground() {
         <img alt="Cute toast mascot" src="/toast.png" />
         <h1>Toast Playground</h1>
       </header>
-      {
-        isToastOpen &&
-        <Toast variant={optionValue} toggleIsToastOpen={toggleIsToastOpen}>
-          {message}
-          </Toast>
-      }
-      <div className={styles.controlsWrapper}>
+      <ToastShelf toasts={toasts} handleDismiss={handleDismiss}/>
+      <form className={styles.controlsWrapper}
+        onSubmit={handleSubmit}
+      >
         <div className={styles.row}>
           <label
             htmlFor="message"
@@ -53,13 +86,12 @@ function ToastPlayground() {
                   name='variant'
                   value={option}
                   key={`variat-${option}`}
-                  onChange={(e) => setOptionValue(e.target.value)}
-                  checked={optionValue === option}
+                  onChange={(e) => setVariant(e.target.value)}
+                  checked={variant === option}
                 />
                 {option}
               </label>
             ))}
-            {/* TODO Other Variant radio buttons here: 'warning', 'success', 'error' */}
           </div>
         </div>
 
@@ -68,10 +100,10 @@ function ToastPlayground() {
           <div
             className={`${styles.inputWrapper} ${styles.radioWrapper}`}
           >
-            <Button onClick={toggleIsToastOpen}>Pop Toast!</Button>
+            <Button type='submit' >Pop Toast!</Button>
           </div>
         </div>
-      </div>
+      </form>
     </div>
   );
 }
diff --git a/src/components/ToastShelf/ToastShelf.js b/src/components/ToastShelf/ToastShelf.js
index 1c5e8089d..d916251c9 100644
--- a/src/components/ToastShelf/ToastShelf.js
+++ b/src/components/ToastShelf/ToastShelf.js
@@ -3,15 +3,16 @@ import React from 'react';
 import Toast from '../Toast';
 import styles from './ToastShelf.module.css';
 
-function ToastShelf() {
+function ToastShelf({ toasts, handleDismiss }) {
   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>
+      {
+        toasts.map(({id, variant, message}) => (
+          <li className={styles.toastWrapper} key={id}>
+            <Toast variant={variant} id={id} handleDismiss={handleDismiss}>{message}</Toast>
+          </li>
+        ))
+      }
     </ol>
   );
 }

From f7d282944557fe38400692c32b10f1af7dbd3282 Mon Sep 17 00:00:00 2001
From: Scarlett <hao.sijia04@gmail.com>
Date: Fri, 11 Oct 2024 21:02:19 -0400
Subject: [PATCH 4/7] ex-4-refactor using context

---
 src/components/App/App.js                     |  5 +-
 src/components/Toast/Toast.js                 |  4 +-
 .../ToastPlayground/ToastPlayground.js        | 51 +++++--------------
 src/components/ToastProvider/ToastProvider.js | 43 ++++++++++++++++
 src/components/ToastProvider/index.js         |  2 +
 src/components/ToastShelf/ToastShelf.js       |  6 ++-
 6 files changed, 68 insertions(+), 43 deletions(-)
 create mode 100644 src/components/ToastProvider/ToastProvider.js
 create mode 100644 src/components/ToastProvider/index.js

diff --git a/src/components/App/App.js b/src/components/App/App.js
index 785b62a67..c81678aea 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -2,11 +2,14 @@ import React from 'react';
 
 import ToastPlayground from '../ToastPlayground';
 import Footer from '../Footer';
+import ToastProvider from '../ToastProvider/ToastProvider';
 
 function App() {
   return (
     <>
-      <ToastPlayground />
+      <ToastProvider>
+        <ToastPlayground />
+      </ToastProvider>
       <Footer />
     </>
   );
diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index 744c45817..087a733f5 100644
--- a/src/components/Toast/Toast.js
+++ b/src/components/Toast/Toast.js
@@ -10,6 +10,7 @@ import {
 import VisuallyHidden from '../VisuallyHidden';
 
 import styles from './Toast.module.css';
+import { ToastContext } from '../ToastProvider/ToastProvider';
 
 const ICONS_BY_VARIANT = {
   notice: Info,
@@ -19,6 +20,7 @@ const ICONS_BY_VARIANT = {
 };
 
 function Toast({ children, variant, id, handleDismiss}) {
+  const dismissToast = React.useContext(ToastContext)
   const className = `${styles.toast} ${styles[variant]}`
   const Icon = ICONS_BY_VARIANT[variant]
 
@@ -30,7 +32,7 @@ function Toast({ children, variant, id, handleDismiss}) {
       <p className={styles.content}>
         {children}
       </p>
-      <button className={styles.closeButton} onClick={()=>handleDismiss(id)}>
+      <button className={styles.closeButton} onClick={()=>dismissToast(id)}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>
diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index de839ed96..b4c45bcef 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -1,51 +1,24 @@
 import React from 'react';
-
 import Button from '../Button';
-import Toast from '../Toast/Toast'
 import styles from './ToastPlayground.module.css';
-import useToggle from "../../utils/useToggle"
 import ToastShelf from '../ToastShelf/ToastShelf'
-
+import { ToastContext } from '../ToastProvider/ToastProvider';
 
 const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
   const [message, setMessage] = React.useState("")
-  const [variant, setVariant] = React.useState('notice')
-  // const [isToastOpen, toggleIsToastOpen] = useToggle(false)
-  const [toasts, setToasts] = React.useState([
-    {
-      id: crypto.randomUUID(),
-      message: 'Please enter the information',
-      variant: 'error'
-    },
-    {
-      id: crypto.randomUUID(),
-      message: 'Please enter the information',
-      variant: 'notice'
-    }
-  ])
+  const [variant, setVariant] = React.useState(VARIANT_OPTIONS[0])
+  const { createToast } = React.useContext(ToastContext)
 
   function handleSubmit(e) {
     e.preventDefault();
 
     if (message !== '' && variant !== '') {
-      setToasts([
-        ...toasts,
-        {
-          id: crypto.randomUUID(),
-          message: message,
-          variant: variant,
-        }
-      ])
+      createToast(message, variant)
     }
     setMessage('')
-    setVariant('')
-  }
-
-  function handleDismiss(id) {
-    const nextToasts = toasts.filter(toast => {return toast.id !== id})
-    setToasts(nextToasts)
+    setVariant(VARIANT_OPTIONS[0])
   }
 
   return (
@@ -54,7 +27,7 @@ function ToastPlayground() {
         <img alt="Cute toast mascot" src="/toast.png" />
         <h1>Toast Playground</h1>
       </header>
-      <ToastShelf toasts={toasts} handleDismiss={handleDismiss}/>
+      <ToastShelf />
       <form className={styles.controlsWrapper}
         onSubmit={handleSubmit}
       >
@@ -78,20 +51,20 @@ function ToastPlayground() {
           <div
             className={`${styles.inputWrapper} ${styles.radioWrapper}`}
           >
-            {VARIANT_OPTIONS.map((option) => (
-              <label htmlFor={`variant-${option}`}>
+            {VARIANT_OPTIONS.map((option) => {
+              const id = `variant-${option}`
+              return (<label htmlFor={id} key={id}>
                 <input
-                  id={`variat-${option}`}
+                  id={id}
                   type='radio'
                   name='variant'
                   value={option}
-                  key={`variat-${option}`}
                   onChange={(e) => setVariant(e.target.value)}
                   checked={variant === option}
                 />
                 {option}
-              </label>
-            ))}
+              </label>)
+            })}
           </div>
         </div>
 
diff --git a/src/components/ToastProvider/ToastProvider.js b/src/components/ToastProvider/ToastProvider.js
new file mode 100644
index 000000000..1aca1fba5
--- /dev/null
+++ b/src/components/ToastProvider/ToastProvider.js
@@ -0,0 +1,43 @@
+import React, { Children } from 'react';
+
+export const ToastContext = React.createContext()
+
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React.useState([
+    {
+      id: crypto.randomUUID(),
+      message: 'Please enter the information',
+      variant: 'error'
+    },
+    {
+      id: crypto.randomUUID(),
+      message: 'Please enter the information',
+      variant: 'notice'
+    }
+  ])
+
+  const createToast = (message,variant) => {
+    const nextToasts = [
+      ...toasts,
+      {
+        id: crypto.randomUUID(),
+        message,
+        variant,
+      }
+    ]
+    setToasts(nextToasts)
+  }
+
+  const dismissToast = (id) => {
+    const nextToasts = toasts.filter((toast) => { return toast.id !== id })
+    setToasts(nextToasts)
+  }
+
+  return (
+    <ToastContext.Provider value={{ toasts, createToast, dismissToast }} >
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+export default ToastProvider;
diff --git a/src/components/ToastProvider/index.js b/src/components/ToastProvider/index.js
new file mode 100644
index 000000000..e6c22f60b
--- /dev/null
+++ b/src/components/ToastProvider/index.js
@@ -0,0 +1,2 @@
+export * from './ToastProvider';
+export { default } from './ToastProvider';
diff --git a/src/components/ToastShelf/ToastShelf.js b/src/components/ToastShelf/ToastShelf.js
index d916251c9..ee6e79f2b 100644
--- a/src/components/ToastShelf/ToastShelf.js
+++ b/src/components/ToastShelf/ToastShelf.js
@@ -2,14 +2,16 @@ import React from 'react';
 
 import Toast from '../Toast';
 import styles from './ToastShelf.module.css';
+import { ToastContext } from '../ToastProvider/ToastProvider';
 
-function ToastShelf({ toasts, handleDismiss }) {
+function ToastShelf() {
+  const {toasts} = React.useContext(ToastContext)
   return (
     <ol className={styles.wrapper}>
       {
         toasts.map(({id, variant, message}) => (
           <li className={styles.toastWrapper} key={id}>
-            <Toast variant={variant} id={id} handleDismiss={handleDismiss}>{message}</Toast>
+            <Toast variant={variant} id={id}>{message}</Toast>
           </li>
         ))
       }

From b309013bca218a4203ed24bd573a6495ae020666 Mon Sep 17 00:00:00 2001
From: Scarlett <hao.sijia04@gmail.com>
Date: Mon, 14 Oct 2024 12:40:13 -0400
Subject: [PATCH 5/7] ex-4-using context to control toast message display

---
 src/components/Toast/Toast.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index 087a733f5..714590bea 100644
--- a/src/components/Toast/Toast.js
+++ b/src/components/Toast/Toast.js
@@ -10,7 +10,7 @@ import {
 import VisuallyHidden from '../VisuallyHidden';
 
 import styles from './Toast.module.css';
-import { ToastContext } from '../ToastProvider/ToastProvider';
+import { ToastContext } from '../ToastProvider/ToastProvider.js';
 
 const ICONS_BY_VARIANT = {
   notice: Info,
@@ -19,8 +19,8 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast({ children, variant, id, handleDismiss}) {
-  const dismissToast = React.useContext(ToastContext)
+function Toast({ children, variant, id}) {
+  const {dismissToast} = React.useContext(ToastContext)
   const className = `${styles.toast} ${styles[variant]}`
   const Icon = ICONS_BY_VARIANT[variant]
 
@@ -32,7 +32,7 @@ function Toast({ children, variant, id, handleDismiss}) {
       <p className={styles.content}>
         {children}
       </p>
-      <button className={styles.closeButton} onClick={()=>dismissToast(id)}>
+      <button className={styles.closeButton} onClick={()=> dismissToast(id)}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>

From d52e9fa275f2072b23649c8e9db0bd1c5ff17237 Mon Sep 17 00:00:00 2001
From: Scarlett <hao.sijia04@gmail.com>
Date: Mon, 14 Oct 2024 21:47:13 -0400
Subject: [PATCH 6/7] ex-6:extract custom hook for escape key control

---
 src/components/ToastProvider/ToastProvider.js | 12 +++++++++---
 src/hooks/useEscapeKey.js                     | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useEscapeKey.js

diff --git a/src/components/ToastProvider/ToastProvider.js b/src/components/ToastProvider/ToastProvider.js
index 1aca1fba5..b5cec4eed 100644
--- a/src/components/ToastProvider/ToastProvider.js
+++ b/src/components/ToastProvider/ToastProvider.js
@@ -1,5 +1,5 @@
-import React, { Children } from 'react';
-
+import React, { Children, useCallback } from 'react';
+import useEscapeKey from '../../hooks/useEscapeKey.js'
 export const ToastContext = React.createContext()
 
 function ToastProvider({ children }) {
@@ -16,7 +16,13 @@ function ToastProvider({ children }) {
     }
   ])
 
-  const createToast = (message,variant) => {
+  const handleEscape = useCallback(() => {
+    setToasts([])
+  }, [])
+
+  useEscapeKey(handleEscape)
+
+  const createToast = (message, variant) => {
     const nextToasts = [
       ...toasts,
       {
diff --git a/src/hooks/useEscapeKey.js b/src/hooks/useEscapeKey.js
new file mode 100644
index 000000000..1e027c975
--- /dev/null
+++ b/src/hooks/useEscapeKey.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function useEscapeKey(callback) {
+    React.useEffect(() => {
+        function handleKeyDown(event) {
+            if (event.code === 'Escape') {
+                callback(event)
+            }
+        }
+
+        window.addEventListener('keydown', handleKeyDown)
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [callback])
+}
\ No newline at end of file

From 5f89f11484ed736c47cfb79f36d7b0116cd0d304 Mon Sep 17 00:00:00 2001
From: Scarlett <hao.sijia04@gmail.com>
Date: Mon, 14 Oct 2024 22:05:04 -0400
Subject: [PATCH 7/7] ex-6-improve user experience for screen reader

---
 src/components/Toast/Toast.js           | 12 ++++++++----
 src/components/ToastShelf/ToastShelf.js | 11 ++++++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index 714590bea..f9b9308b4 100644
--- a/src/components/Toast/Toast.js
+++ b/src/components/Toast/Toast.js
@@ -19,8 +19,8 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast({ children, variant, id}) {
-  const {dismissToast} = React.useContext(ToastContext)
+function Toast({ children, variant, id }) {
+  const { dismissToast } = React.useContext(ToastContext)
   const className = `${styles.toast} ${styles[variant]}`
   const Icon = ICONS_BY_VARIANT[variant]
 
@@ -30,11 +30,15 @@ function Toast({ children, variant, id}) {
         <Icon size={24} />
       </div>
       <p className={styles.content}>
+        <VisuallyHidden>{variant} -</VisuallyHidden>
         {children}
       </p>
-      <button className={styles.closeButton} onClick={()=> dismissToast(id)}>
+      <button className={styles.closeButton}
+        onClick={() => dismissToast(id)}
+        aria-label='Dismiss message'
+        aria-live='off'
+      >
         <X size={24} />
-        <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>
     </div>
   );
diff --git a/src/components/ToastShelf/ToastShelf.js b/src/components/ToastShelf/ToastShelf.js
index ee6e79f2b..adb094180 100644
--- a/src/components/ToastShelf/ToastShelf.js
+++ b/src/components/ToastShelf/ToastShelf.js
@@ -5,11 +5,16 @@ import styles from './ToastShelf.module.css';
 import { ToastContext } from '../ToastProvider/ToastProvider';
 
 function ToastShelf() {
-  const {toasts} = React.useContext(ToastContext)
+  const { toasts } = React.useContext(ToastContext)
   return (
-    <ol className={styles.wrapper}>
+    <ol
+      className={styles.wrapper}
+      role='region'
+      aria-live='polite'
+      aria-label='Notification'
+    >
       {
-        toasts.map(({id, variant, message}) => (
+        toasts.map(({ id, variant, message }) => (
           <li className={styles.toastWrapper} key={id}>
             <Toast variant={variant} id={id}>{message}</Toast>
           </li>