From a92f1291da08c9ed66eaa282d996d1c7cd304a98 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 9 Jan 2020 18:44:05 +0200
Subject: [PATCH] storybook SimpleToast improved

---
 .../stories/Toast/SimpleToast/SimpleToast.js  | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/storybook/stories/Toast/SimpleToast/SimpleToast.js b/storybook/stories/Toast/SimpleToast/SimpleToast.js
index 65eb04376..4facc5297 100644
--- a/storybook/stories/Toast/SimpleToast/SimpleToast.js
+++ b/storybook/stories/Toast/SimpleToast/SimpleToast.js
@@ -2,11 +2,12 @@ const React = require('react');
 const { storiesOf } = require('@storybook/react');
 const { Toast } = require('stremio/common');
 const styles = require('./styles');
+const { ToastsContainerProvider } = require('stremio/common/ToastsContainerContext');
 
 storiesOf('Toast', module).add('SimpleToast', () => {
     const toastRef = React.useRef(null);
 
-    const showToast = (message) => React.useCallback(() => {
+    const showToast = React.useCallback((message) => {
         toastRef.current.show({
             title: 'Something to take your attention',
             timeout: 0,
@@ -17,7 +18,7 @@ storiesOf('Toast', module).add('SimpleToast', () => {
         });
     }, [toastRef.current]);
 
-    const clickSuccess = showToast({
+    const clickSuccess = () => showToast({
         title: 'You clicked it',
         text: 'Congratulations! Click event handled successfully.',
         type: 'success',
@@ -27,16 +28,18 @@ storiesOf('Toast', module).add('SimpleToast', () => {
 
     return (
         <div className={styles['root-container']}>
-            <button onClick={showToast({ text: 'Longer message that contains a lot of words but it does not state anything. The idea is to test the handling of long messages.' })}>Long message</button>
-            <button onClick={showToast({ text: 'This will close after 3 seconds', timeout: 3e3 })}>Timeout 3s</button>
-            <button onClick={showToast({ text: 'Click me and see what happens later', title: 'Click here!', onClick: clickSuccess })}>Clickable</button>
-            <button onClick={showToast({ text: 'Type success', type: 'success', icon: 'ic_check' })}>Success</button>
-            <button onClick={showToast({ text: 'Type alert', type: 'alert', icon: 'ic_warning' })}>Alert</button>
-            <button onClick={showToast({ text: 'Type error', type: 'error', icon: 'ic_x' })}>Error</button>
-            <button onClick={showToast({ text: 'No title', type: 'info', title: null, icon: null })}>No title</button>
+            <button onClick={() => showToast({ text: 'Longer message that contains a lot of words but it does not state anything. The idea is to test the handling of long messages.' })}>Long message</button>
+            <button onClick={() => showToast({ text: 'This will close after 3 seconds', timeout: 3e3 })}>Timeout 3s</button>
+            <button onClick={() => showToast({ text: 'Click me and see what happens later', title: 'Click here!', onClick: clickSuccess })}>Clickable</button>
+            <button onClick={() => showToast({ text: 'Type success', type: 'success', icon: 'ic_check' })}>Success</button>
+            <button onClick={() => showToast({ text: 'Type alert', type: 'alert', icon: 'ic_warning' })}>Alert</button>
+            <button onClick={() => showToast({ text: 'Type error', type: 'error', icon: 'ic_x' })}>Error</button>
+            <button onClick={() => showToast({ text: 'No title', type: 'info', title: null, icon: null })}>No title</button>
             <button onClick={() => toastRef.current.show({})}>Empty</button>
             <button onClick={() => toastRef.current.hideAll()}>Close all</button>
-            <Toast ref={toastRef} className={styles['toasts-container']} />
+            <ToastsContainerProvider>
+                <Toast ref={toastRef} className={styles['toasts-container']} />
+            </ToastsContainerProvider>
         </div>
     );
 });