From 56ebd9dafcf8b8417abd5948cd8f035ce8c565c2 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 1 Feb 2020 10:46:00 +0200
Subject: [PATCH] Toast refactored to not use modals context

---
 src/App/App.js                                |  6 +-
 src/common/Toast/ToastContext.js              | 10 +++
 .../Toast.js => Toast/ToastItem/ToastItem.js} | 17 +++--
 src/common/Toast/ToastItem/index.js           |  3 +
 .../Toast => Toast/ToastItem}/styles.less     |  4 +-
 src/common/Toast/ToastProvider.js             | 72 +++++++++++++++++++
 src/common/Toast/index.js                     |  7 ++
 src/common/Toast/useToast.js                  |  8 +++
 src/common/Toasts/Toast/index.js              |  3 -
 src/common/Toasts/Toasts.js                   | 57 ---------------
 .../ToastsContainerContext.js                 |  7 --
 .../ToastsContainerProvider.js                | 20 ------
 .../Toasts/ToastsContainerContext/index.js    |  7 --
 .../useToastsContainer.js                     |  8 ---
 src/common/Toasts/index.js                    |  3 -
 src/common/index.js                           |  5 +-
 16 files changed, 119 insertions(+), 118 deletions(-)
 create mode 100644 src/common/Toast/ToastContext.js
 rename src/common/{Toasts/Toast/Toast.js => Toast/ToastItem/ToastItem.js} (78%)
 create mode 100644 src/common/Toast/ToastItem/index.js
 rename src/common/{Toasts/Toast => Toast/ToastItem}/styles.less (97%)
 create mode 100644 src/common/Toast/ToastProvider.js
 create mode 100644 src/common/Toast/index.js
 create mode 100644 src/common/Toast/useToast.js
 delete mode 100644 src/common/Toasts/Toast/index.js
 delete mode 100644 src/common/Toasts/Toasts.js
 delete mode 100644 src/common/Toasts/ToastsContainerContext/ToastsContainerContext.js
 delete mode 100644 src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
 delete mode 100644 src/common/Toasts/ToastsContainerContext/index.js
 delete mode 100644 src/common/Toasts/ToastsContainerContext/useToastsContainer.js
 delete mode 100644 src/common/Toasts/index.js

diff --git a/src/App/App.js b/src/App/App.js
index 82b12d898..c7d23c300 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -2,7 +2,7 @@ require('spatial-navigation-polyfill');
 const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, KeyboardNavigation, ServicesProvider, Shell } = require('stremio/services');
-const { Toasts } = require('stremio/common');
+const { ToastProvider } = require('stremio/common');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
@@ -51,14 +51,14 @@ const App = () => {
             <ServicesProvider services={services}>
                 {
                     shellInitialized && coreInitialized ?
-                        <Toasts.ContainerProvider className={styles['toasts-container']}>
+                        <ToastProvider className={styles['toasts-container']}>
                             <Router
                                 className={styles['router']}
                                 homePath={'/'}
                                 viewsConfig={routerViewsConfig}
                                 onPathNotMatch={onPathNotMatch}
                             />
-                        </Toasts.ContainerProvider>
+                        </ToastProvider>
                         :
                         <div className={styles['app-loader']} />
                 }
diff --git a/src/common/Toast/ToastContext.js b/src/common/Toast/ToastContext.js
new file mode 100644
index 000000000..7418affbd
--- /dev/null
+++ b/src/common/Toast/ToastContext.js
@@ -0,0 +1,10 @@
+const React = require('react');
+
+const ToastContext = React.createContext({
+    show: () => { },
+    clear: () => { }
+});
+
+ToastContext.displayName = 'ToastContext';
+
+module.exports = ToastContext;
diff --git a/src/common/Toasts/Toast/Toast.js b/src/common/Toast/ToastItem/ToastItem.js
similarity index 78%
rename from src/common/Toasts/Toast/Toast.js
rename to src/common/Toast/ToastItem/ToastItem.js
index 8b4470c02..04ddbebe6 100644
--- a/src/common/Toasts/Toast/Toast.js
+++ b/src/common/Toast/ToastItem/ToastItem.js
@@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
-const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
+const ToastItem = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
     const toastOnClick = React.useCallback((event) => {
         if (!event.nativeEvent.selectPrevented && typeof onSelect === 'function') {
             onSelect({
@@ -28,7 +28,7 @@ const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
         }
     }, [dataset, onClose]);
     return (
-        <Button className={classnames(styles['toast-container'], styles['alert'], styles[type])} tabIndex={-1} onClick={toastOnClick}>
+        <Button className={classnames(styles['toast-item-container'], styles['success'], styles[type])} tabIndex={-1} onClick={toastOnClick}>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <div className={styles['icon-container']}>
@@ -44,7 +44,12 @@ const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
                         :
                         null
                 }
-                <div className={styles['message-container']}>{message}</div>
+                {
+                    typeof message === 'string' && message.length > 0 ?
+                        <div className={styles['message-container']}>{message}</div>
+                        :
+                        null
+                }
             </div>
             <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={closeButtonOnClick}>
                 <Icon className={styles['icon']} icon={'ic_x'} />
@@ -53,14 +58,14 @@ const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
     );
 };
 
-Toast.propTypes = {
+ToastItem.propTypes = {
     type: PropTypes.oneOf(['success', 'alert', 'error']),
     title: PropTypes.string,
     message: PropTypes.string,
     icon: PropTypes.string,
-    dataset: PropTypes.objectOf(PropTypes.string),
+    dataset: PropTypes.object,
     onSelect: PropTypes.func,
     onClose: PropTypes.func
 };
 
-module.exports = Toast;
+module.exports = ToastItem;
diff --git a/src/common/Toast/ToastItem/index.js b/src/common/Toast/ToastItem/index.js
new file mode 100644
index 000000000..c00d404b2
--- /dev/null
+++ b/src/common/Toast/ToastItem/index.js
@@ -0,0 +1,3 @@
+const ToastItem = require('./ToastItem');
+
+module.exports = ToastItem;
diff --git a/src/common/Toasts/Toast/styles.less b/src/common/Toast/ToastItem/styles.less
similarity index 97%
rename from src/common/Toasts/Toast/styles.less
rename to src/common/Toast/ToastItem/styles.less
index 41ff0ca39..4c09f6cff 100644
--- a/src/common/Toasts/Toast/styles.less
+++ b/src/common/Toast/ToastItem/styles.less
@@ -1,8 +1,8 @@
-.toast-container {
+.toast-item-container {
     display: flex;
     flex-direction: row;
+    width: 25rem;
     min-height: 6rem;
-    max-width: 25rem;
     margin-bottom: 1rem;
     border: thin solid;
     background-color: var(--color-surfacelighter);
diff --git a/src/common/Toast/ToastProvider.js b/src/common/Toast/ToastProvider.js
new file mode 100644
index 000000000..cb91f34ee
--- /dev/null
+++ b/src/common/Toast/ToastProvider.js
@@ -0,0 +1,72 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const ToastItem = require('./ToastItem');
+const ToastContext = require('./ToastContext');
+
+const DEFAULT_TIMEOUT = 3000;
+
+const ToastProvider = ({ className, children }) => {
+    const [container, setContainer] = React.useState(null);
+    const [items, dispatch] = React.useReducer(
+        (items, action) => {
+            switch (action.type) {
+                case 'add':
+                    return items.concat(action.item);
+                case 'remove':
+                    return items.filter((item) => item.id !== action.id);
+                case 'clear':
+                    return [];
+                default:
+                    return items;
+            }
+        },
+        []
+    );
+    const itemOnClose = React.useCallback((event) => {
+        clearTimeout(event.dataset.id);
+        dispatch({ type: 'remove', id: event.dataset.id });
+    }, []);
+    const toast = React.useMemo(() => ({
+        show: (item) => {
+            const timeout = typeof item.timeout === 'number' && !isNaN(item.timeout) ?
+                item.timeout
+                :
+                DEFAULT_TIMEOUT;
+            const id = setTimeout(() => {
+                dispatch({ type: 'remove', id });
+            }, timeout);
+            dispatch({
+                type: 'add',
+                item: {
+                    ...item,
+                    id,
+                    dataset: {
+                        ...item.dataset,
+                        id
+                    },
+                    onClose: itemOnClose
+                }
+            });
+        },
+        clear: () => {
+            dispatch({ type: 'clear' });
+        }
+    }), []);
+    return (
+        <ToastContext.Provider value={toast}>
+            {container instanceof HTMLElement ? children : null}
+            <div ref={setContainer} className={className}>
+                {items.map((item, index) => (
+                    <ToastItem key={index} {...item} />
+                ))}
+            </div>
+        </ToastContext.Provider>
+    );
+};
+
+ToastProvider.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node
+};
+
+module.exports = ToastProvider;
diff --git a/src/common/Toast/index.js b/src/common/Toast/index.js
new file mode 100644
index 000000000..516e30a1e
--- /dev/null
+++ b/src/common/Toast/index.js
@@ -0,0 +1,7 @@
+const ToastProvider = require('./ToastProvider');
+const useToast = require('./useToast');
+
+module.exports = {
+    ToastProvider,
+    useToast
+};
diff --git a/src/common/Toast/useToast.js b/src/common/Toast/useToast.js
new file mode 100644
index 000000000..76ba83914
--- /dev/null
+++ b/src/common/Toast/useToast.js
@@ -0,0 +1,8 @@
+const React = require('react');
+const ToastContext = require('./ToastContext');
+
+const useToast = () => {
+    return React.useContext(ToastContext);
+};
+
+module.exports = useToast;
diff --git a/src/common/Toasts/Toast/index.js b/src/common/Toasts/Toast/index.js
deleted file mode 100644
index 37050e200..000000000
--- a/src/common/Toasts/Toast/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const Toast = require('./Toast');
-
-module.exports = Toast;
diff --git a/src/common/Toasts/Toasts.js b/src/common/Toasts/Toasts.js
deleted file mode 100644
index be964f6b4..000000000
--- a/src/common/Toasts/Toasts.js
+++ /dev/null
@@ -1,57 +0,0 @@
-const React = require('react');
-const { Modal } = require('stremio-router');
-const { ModalsContainerContext } = require('stremio-router');
-const { useToastsContainer, ToastsContainerProvider } = require('./ToastsContainerContext');
-const Toast = require('./Toast');
-
-const DEFAULT_TIMEOUT = 2000;
-
-const Toasts = React.forwardRef(({ className }, ref) => {
-    const toastsContainer = useToastsContainer();
-    const [toasts, dispatch] = React.useReducer(
-        (state, action) => {
-            switch (action.type) {
-                case 'add':
-                    return state.concat([action.item]);
-                case 'remove':
-                    return state.filter(item => item !== action.item);
-                case 'removeAll':
-                    state.forEach(item => clearTimeout(item.timerId));
-                    return [];
-                default:
-                    return state;
-            }
-        }, []
-    );
-    const hideAll = React.useCallback(() => {
-        dispatch({ type: 'removeAll' });
-    }, []);
-    const show = React.useCallback(({ type, icon, title, text, closeButton, timeout, onClick }) => {
-        timeout = timeout !== null && !isNaN(timeout) ? timeout : DEFAULT_TIMEOUT;
-        const close = () => {
-            clearTimeout(newItem.timerId);
-            dispatch({ type: 'remove', item: newItem });
-        };
-
-        const newItem = { type, icon, title, text, closeButton, timeout, onClick, onClose: close };
-
-        if (timeout !== 0) {
-            newItem.timerId = setTimeout(close, timeout);
-        }
-        dispatch({ type: 'add', item: newItem });
-        return close;
-    }, []);
-    React.useImperativeHandle(ref, () => ({ show, hideAll }));
-
-    return toasts.length === 0 ? null : (
-        <ModalsContainerContext.Provider value={toastsContainer}>
-            <Modal className={className} disabled={true}>
-                {toasts.map((toast, index) => (<Toast {...toast} key={index} />))}
-            </Modal>
-        </ModalsContainerContext.Provider>
-    );
-});
-
-Toasts.ContainerProvider = ToastsContainerProvider;
-
-module.exports = Toasts;
diff --git a/src/common/Toasts/ToastsContainerContext/ToastsContainerContext.js b/src/common/Toasts/ToastsContainerContext/ToastsContainerContext.js
deleted file mode 100644
index fdff8212f..000000000
--- a/src/common/Toasts/ToastsContainerContext/ToastsContainerContext.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const React = require('react');
-
-const ToastsContainerContext = React.createContext(null);
-
-ToastsContainerContext.displayName = 'ToastsContainerContext';
-
-module.exports = ToastsContainerContext;
diff --git a/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js b/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
deleted file mode 100644
index eb6f5dafa..000000000
--- a/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const ToastsContainerContext = require('./ToastsContainerContext');
-
-const ToastsContainerProvider = ({ className, children }) => {
-    const [container, setContainer] = React.useState(null);
-    return (
-        <ToastsContainerContext.Provider value={container}>
-            {container instanceof HTMLElement ? children : null}
-            <div ref={setContainer} className={className} />
-        </ToastsContainerContext.Provider>
-    );
-};
-
-ToastsContainerProvider.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-};
-
-module.exports = ToastsContainerProvider;
diff --git a/src/common/Toasts/ToastsContainerContext/index.js b/src/common/Toasts/ToastsContainerContext/index.js
deleted file mode 100644
index 55ef960ec..000000000
--- a/src/common/Toasts/ToastsContainerContext/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const ToastsContainerProvider = require('./ToastsContainerProvider');
-const useToastsContainer = require('./useToastsContainer');
-
-module.exports = {
-    ToastsContainerProvider,
-    useToastsContainer
-};
diff --git a/src/common/Toasts/ToastsContainerContext/useToastsContainer.js b/src/common/Toasts/ToastsContainerContext/useToastsContainer.js
deleted file mode 100644
index 0f32d0d4c..000000000
--- a/src/common/Toasts/ToastsContainerContext/useToastsContainer.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const React = require('react');
-const ToastsContainerContext = require('./ToastsContainerContext');
-
-const useToastsContainer = () => {
-    return React.useContext(ToastsContainerContext);
-};
-
-module.exports = useToastsContainer;
diff --git a/src/common/Toasts/index.js b/src/common/Toasts/index.js
deleted file mode 100644
index b06087a3a..000000000
--- a/src/common/Toasts/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const Toasts = require('./Toasts');
-
-module.exports = Toasts;
diff --git a/src/common/index.js b/src/common/index.js
index 40a3a9e90..bc5bb3c37 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -16,7 +16,7 @@ const Popup = require('./Popup');
 const SharePrompt = require('./SharePrompt');
 const Slider = require('./Slider');
 const TextInput = require('./TextInput');
-const Toasts = require('./Toasts');
+const { ToastProvider, useToast } = require('./Toast');
 const routesRegexp = require('./routesRegexp');
 const useAnimationFrame = require('./useAnimationFrame');
 const useBinaryState = require('./useBinaryState');
@@ -47,7 +47,8 @@ module.exports = {
     SharePrompt,
     Slider,
     TextInput,
-    Toasts,
+    ToastProvider,
+    useToast,
     routesRegexp,
     useAnimationFrame,
     useBinaryState,