From f659f4f0ff08da0526eacc35cce54596410bb62f Mon Sep 17 00:00:00 2001
From: tokiyskiygruz <GreatRichardd@gmai.com>
Date: Mon, 20 Nov 2023 09:31:52 +0200
Subject: [PATCH 1/6] Ex 1 && 2

---
 src/components/Toast/Toast.js                 | 22 +++----
 .../ToastPlayground/ToastPlayground.js        | 63 ++++++++++++-------
 2 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index 96af6012..f2e0011e 100644
--- a/src/components/Toast/Toast.js
+++ b/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 VisuallyHidden from "../VisuallyHidden";
 
-import styles from './Toast.module.css';
+import styles from "./Toast.module.css";
 
 const ICONS_BY_VARIANT = {
   notice: Info,
@@ -18,16 +18,16 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast() {
+function Toast({ content, variant, handleDismiss }) {
+  const IconTag = ICONS_BY_VARIANT[variant];
+
   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} className={styles.closeButton}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>
diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index e1c6c6eb..229a2190 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -1,12 +1,17 @@
-import React from 'react';
+import React from "react";
 
-import Button from '../Button';
+import Button from "../Button";
+import Toast from "../Toast";
 
-import styles from './ToastPlayground.module.css';
+import styles from "./ToastPlayground.module.css";
 
-const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
+const VARIANT_OPTIONS = ["notice", "warning", "success", "error"];
 
 function ToastPlayground() {
+  const [message, setMessage] = React.useState("");
+  const [variant, setVariant] = React.useState("notice");
+  const [isToastOpen, toogleIsToastOpen] = React.useState(false);
+
   return (
     <div className={styles.wrapper}>
       <header>
@@ -14,45 +19,57 @@ function ToastPlayground() {
         <h1>Toast Playground</h1>
       </header>
 
+      {isToastOpen && (
+        <Toast
+          content={message}
+          handleDismiss={() => toogleIsToastOpen(false)}
+          variant={variant}
+        ></Toast>
+      )}
+
       <div 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>
-
+          <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>
+            ))}
             {/* TODO Other Variant radio buttons here */}
           </div>
         </div>
 
         <div className={styles.row}>
           <div className={styles.label} />
-          <div
-            className={`${styles.inputWrapper} ${styles.radioWrapper}`}
-          >
-            <Button>Pop Toast!</Button>
+          <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
+            <Button onClick={() => toogleIsToastOpen(true)}>Pop Toast!</Button>
           </div>
         </div>
       </div>

From f895d4352b515497418738af0189eb2a6a5ffc48 Mon Sep 17 00:00:00 2001
From: tokiyskiygruz <GreatRichardd@gmai.com>
Date: Mon, 20 Nov 2023 15:13:00 +0200
Subject: [PATCH 2/6] ex 3

---
 src/components/Toast/Toast.js                 |  4 +-
 .../ToastPlayground/ToastPlayground.js        | 47 ++++++++++++++-----
 src/components/ToastShelf/ToastShelf.js       | 24 ++++++----
 3 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index f2e0011e..1c6d9619 100644
--- a/src/components/Toast/Toast.js
+++ b/src/components/Toast/Toast.js
@@ -18,7 +18,7 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast({ content, variant, handleDismiss }) {
+function Toast({ content, variant, id, handleDismiss }) {
   const IconTag = ICONS_BY_VARIANT[variant];
 
   return (
@@ -27,7 +27,7 @@ function Toast({ content, variant, handleDismiss }) {
         <IconTag size={24} />
       </div>
       <p className={styles.content}>{content}</p>
-      <button onClick={handleDismiss} className={styles.closeButton}>
+      <button onClick={() => handleDismiss(id)} className={styles.closeButton}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>
diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index 229a2190..a57c6029 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -1,8 +1,7 @@
 import React from "react";
 
 import Button from "../Button";
-import Toast from "../Toast";
-
+import ToastShelf from "../ToastShelf";
 import styles from "./ToastPlayground.module.css";
 
 const VARIANT_OPTIONS = ["notice", "warning", "success", "error"];
@@ -10,7 +9,25 @@ const VARIANT_OPTIONS = ["notice", "warning", "success", "error"];
 function ToastPlayground() {
   const [message, setMessage] = React.useState("");
   const [variant, setVariant] = React.useState("notice");
-  const [isToastOpen, toogleIsToastOpen] = React.useState(false);
+  const [toastList, setToastList] = React.useState([]);
+
+  const addToastItem = (message, variant) => {
+    const newItem = {
+      message,
+      variant,
+      id: Math.random(),
+    };
+    const nextList = [...toastList, newItem];
+    setToastList(nextList);
+  };
+
+  const handleDismiss = (id) => {
+    const nextToasts = toastList.filter((toast) => {
+      return toast.id !== id;
+    });
+
+    setToastList(nextToasts);
+  };
 
   return (
     <div className={styles.wrapper}>
@@ -19,15 +36,19 @@ function ToastPlayground() {
         <h1>Toast Playground</h1>
       </header>
 
-      {isToastOpen && (
-        <Toast
-          content={message}
-          handleDismiss={() => toogleIsToastOpen(false)}
-          variant={variant}
-        ></Toast>
-      )}
+      <ToastShelf data={toastList} handleDismiss={handleDismiss}></ToastShelf>
+
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+
+          addToastItem(message, variant);
 
-      <div className={styles.controlsWrapper}>
+          setMessage("");
+          setVariant("");
+        }}
+        className={styles.controlsWrapper}
+      >
         <div className={styles.row}>
           <label
             htmlFor="message"
@@ -69,10 +90,10 @@ function ToastPlayground() {
         <div className={styles.row}>
           <div className={styles.label} />
           <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
-            <Button onClick={() => toogleIsToastOpen(true)}>Pop Toast!</Button>
+            <Button>Pop Toast!</Button>
           </div>
         </div>
-      </div>
+      </form>
     </div>
   );
 }
diff --git a/src/components/ToastShelf/ToastShelf.js b/src/components/ToastShelf/ToastShelf.js
index 1c5e8089..40954c29 100644
--- a/src/components/ToastShelf/ToastShelf.js
+++ b/src/components/ToastShelf/ToastShelf.js
@@ -1,17 +1,21 @@
-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";
 
-function ToastShelf() {
+function ToastShelf({ data, 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>
+      {data.map((toast) => (
+        <li key={toast.id} className={styles.toastWrapper}>
+          <Toast
+            variant={toast.variant}
+            content={toast.message}
+            id={toast.id}
+            handleDismiss={handleDismiss}
+          ></Toast>
+        </li>
+      ))}
     </ol>
   );
 }

From e1640a6ba861623f7a909729b8ab807d28ad8eed Mon Sep 17 00:00:00 2001
From: tokiyskiygruz <GreatRichardd@gmai.com>
Date: Mon, 20 Nov 2023 15:58:24 +0200
Subject: [PATCH 3/6] ex 4

---
 src/components/App/App.js                     | 12 +++----
 .../ToastPlayground/ToastPlayground.js        | 24 ++-----------
 src/components/ToastProvider/ToastProvider.js | 35 +++++++++++++++++++
 src/components/ToastProvider/index.js         |  2 ++
 src/components/ToastShelf/ToastShelf.js       |  6 ++--
 5 files changed, 50 insertions(+), 29 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 785b62a6..b4b1135d 100644
--- a/src/components/App/App.js
+++ b/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>
   );
 }
 
diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index a57c6029..28d92faf 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -3,31 +3,13 @@ import React from "react";
 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 [toastList, setToastList] = React.useState([]);
-
-  const addToastItem = (message, variant) => {
-    const newItem = {
-      message,
-      variant,
-      id: Math.random(),
-    };
-    const nextList = [...toastList, newItem];
-    setToastList(nextList);
-  };
-
-  const handleDismiss = (id) => {
-    const nextToasts = toastList.filter((toast) => {
-      return toast.id !== id;
-    });
-
-    setToastList(nextToasts);
-  };
+  const { addToastItem } = React.useContext(ToastContext);
 
   return (
     <div className={styles.wrapper}>
@@ -36,7 +18,7 @@ function ToastPlayground() {
         <h1>Toast Playground</h1>
       </header>
 
-      <ToastShelf data={toastList} handleDismiss={handleDismiss}></ToastShelf>
+      <ToastShelf></ToastShelf>
 
       <form
         onSubmit={(event) => {
diff --git a/src/components/ToastProvider/ToastProvider.js b/src/components/ToastProvider/ToastProvider.js
new file mode 100644
index 00000000..6d3e95e3
--- /dev/null
+++ b/src/components/ToastProvider/ToastProvider.js
@@ -0,0 +1,35 @@
+import React from "react";
+
+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 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;
diff --git a/src/components/ToastProvider/index.js b/src/components/ToastProvider/index.js
new file mode 100644
index 00000000..e6c22f60
--- /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 40954c29..3705cf20 100644
--- a/src/components/ToastShelf/ToastShelf.js
+++ b/src/components/ToastShelf/ToastShelf.js
@@ -2,11 +2,13 @@ import React from "react";
 
 import Toast from "../Toast";
 import styles from "./ToastShelf.module.css";
+import { ToastContext } from "../ToastProvider";
 
-function ToastShelf({ data, handleDismiss }) {
+function ToastShelf() {
+  const { toastList, handleDismiss } = React.useContext(ToastContext);
   return (
     <ol className={styles.wrapper}>
-      {data.map((toast) => (
+      {toastList.map((toast) => (
         <li key={toast.id} className={styles.toastWrapper}>
           <Toast
             variant={toast.variant}

From 61c7bd971fb979b335438f54a8cbcdab96ecfd06 Mon Sep 17 00:00:00 2001
From: tokiyskiygruz <GreatRichardd@gmai.com>
Date: Mon, 20 Nov 2023 19:08:27 +0200
Subject: [PATCH 4/6] Toast context fixes

---
 src/components/Toast/Toast.js           | 5 +++--
 src/components/ToastShelf/ToastShelf.js | 3 +--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index 1c6d9619..de145ca1 100644
--- a/src/components/Toast/Toast.js
+++ b/src/components/Toast/Toast.js
@@ -8,7 +8,7 @@ import {
 } from "react-feather";
 
 import VisuallyHidden from "../VisuallyHidden";
-
+import { ToastContext } from "../ToastProvider";
 import styles from "./Toast.module.css";
 
 const ICONS_BY_VARIANT = {
@@ -18,8 +18,9 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast({ content, variant, id, handleDismiss }) {
+function Toast({ id, variant, content }) {
   const IconTag = ICONS_BY_VARIANT[variant];
+  const { handleDismiss } = React.useContext(ToastContext);
 
   return (
     <div className={`${styles.toast} ${styles[variant]}`}>
diff --git a/src/components/ToastShelf/ToastShelf.js b/src/components/ToastShelf/ToastShelf.js
index 3705cf20..88b302ab 100644
--- a/src/components/ToastShelf/ToastShelf.js
+++ b/src/components/ToastShelf/ToastShelf.js
@@ -5,7 +5,7 @@ import styles from "./ToastShelf.module.css";
 import { ToastContext } from "../ToastProvider";
 
 function ToastShelf() {
-  const { toastList, handleDismiss } = React.useContext(ToastContext);
+  const { toastList } = React.useContext(ToastContext);
   return (
     <ol className={styles.wrapper}>
       {toastList.map((toast) => (
@@ -14,7 +14,6 @@ function ToastShelf() {
             variant={toast.variant}
             content={toast.message}
             id={toast.id}
-            handleDismiss={handleDismiss}
           ></Toast>
         </li>
       ))}

From aa56e83e07404940fea3a951dc620a0f37fcbebf Mon Sep 17 00:00:00 2001
From: tokiyskiygruz <GreatRichardd@gmai.com>
Date: Thu, 23 Nov 2023 00:37:37 +0200
Subject: [PATCH 5/6] esc futton functionality

---
 .../ToastPlayground/ToastPlayground.js          | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index 28d92faf..b6575c1a 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -9,7 +9,21 @@ 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);
+  const { addToastItem, setToastList } = React.useContext(ToastContext);
+
+  React.useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.code === "Escape") {
+        setToastList([]);
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [setToastList]);
 
   return (
     <div className={styles.wrapper}>
@@ -65,7 +79,6 @@ function ToastPlayground() {
                 {option}
               </label>
             ))}
-            {/* TODO Other Variant radio buttons here */}
           </div>
         </div>
 

From 07b04d4c327340476011917ceacc0f89ddc31d80 Mon Sep 17 00:00:00 2001
From: tokiyskiygruz <GreatRichardd@gmai.com>
Date: Thu, 23 Nov 2023 00:50:08 +0200
Subject: [PATCH 6/6] use-keydown hook && fixes

---
 .../ToastPlayground/ToastPlayground.js        | 16 +---------------
 src/components/ToastProvider/ToastProvider.js |  8 +++++++-
 src/hooks/use-keydown.js                      | 19 +++++++++++++++++++
 3 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 src/hooks/use-keydown.js

diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index b6575c1a..e3abfbb1 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -9,21 +9,7 @@ const VARIANT_OPTIONS = ["notice", "warning", "success", "error"];
 function ToastPlayground() {
   const [message, setMessage] = React.useState("");
   const [variant, setVariant] = React.useState("notice");
-  const { addToastItem, setToastList } = React.useContext(ToastContext);
-
-  React.useEffect(() => {
-    function handleKeyDown(event) {
-      if (event.code === "Escape") {
-        setToastList([]);
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [setToastList]);
+  const { addToastItem } = React.useContext(ToastContext);
 
   return (
     <div className={styles.wrapper}>
diff --git a/src/components/ToastProvider/ToastProvider.js b/src/components/ToastProvider/ToastProvider.js
index 6d3e95e3..2ecf2a4d 100644
--- a/src/components/ToastProvider/ToastProvider.js
+++ b/src/components/ToastProvider/ToastProvider.js
@@ -1,5 +1,5 @@
 import React from "react";
-
+import useKeydown from "../../hooks/use-keydown";
 export const ToastContext = React.createContext();
 
 function ToastProvider({ children }) {
@@ -15,6 +15,12 @@ function ToastProvider({ children }) {
     setToastList(nextList);
   };
 
+  const handleEscape = React.useCallback(() => {
+    setToastList([]);
+  }, []);
+
+  useKeydown("Escape", handleEscape);
+
   const handleDismiss = (id) => {
     const nextToasts = toastList.filter((toast) => {
       return toast.id !== id;
diff --git a/src/hooks/use-keydown.js b/src/hooks/use-keydown.js
new file mode 100644
index 00000000..97f968d2
--- /dev/null
+++ b/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;