feat(toasts): change toast interface

BREAKING CHANGE: Toasts public interface relied on useContext hook, now it has its own hook interface:

```javascript
import { useToasts } from 'react-bootstrap-utils';

function Component() {
 const { showToast, closeAllToasts } = useToasts();
 //...
}
```

Author: assisrafael

demo/ToastsExamples.jsx

@@ -1,17 +1,18 @@
-import React, { useContext } from 'react';
-import { ToastsContext } from '../dist/main';
+import React from 'react';
+import { useToasts } from '../dist/main';
 
 export function ToastsExamples() {
-  const toastsState = useContext(ToastsContext);
+  const { showToast, closeAllToasts } = useToasts();
 
   return (
     <div className="row">
       <div className="col-6 mb-5">
         <h1 className="h4">Top left </h1>
         <button
+          type="button"
           className="btn btn-info"
           onClick={() => {
-            toastsState.show('Top left toast!', {
+            showToast('Top left toast!', {
               position: 'TOP_LEFT',
             });
           }}
@@ -22,9 +23,10 @@ export function ToastsExamples() {
       <div className="col-6 mb-5">
         <h1 className="h4">Top right (default)</h1>
         <button
+          type="button"
           className="btn btn-success"
           onClick={() => {
-            toastsState.show('Top right toast!', { autoClose: false, type: 'success' });
+            showToast('Top right toast!', { autoClose: false, type: 'success' });
           }}
         >
           Show top right toast
@@ -33,9 +35,10 @@ export function ToastsExamples() {
       <div className="col-6 mb-5">
         <h1 className="h4">Bottom left </h1>
         <button
+          type="button"
           className="btn btn-danger"
           onClick={() => {
-            toastsState.show('Bottom left toast!', {
+            showToast('Bottom left toast!', {
               position: 'BOTTOM_LEFT',
               type: 'danger',
             });
@@ -47,9 +50,10 @@ export function ToastsExamples() {
       <div className="col-6 mb-5">
         <h1 className="h4">Bottom right </h1>
         <button
+          type="button"
           className="btn btn-warning"
           onClick={() => {
-            toastsState.show('Bottom right toast!', {
+            showToast('Bottom right toast!', {
               position: 'BOTTOM_RIGHT',
               type: 'warning',
             });
@@ -58,6 +62,11 @@ export function ToastsExamples() {
           Show bottom right toast
         </button>
       </div>
+      <div className="col-12">
+        <button type="button" className="btn btn-secondary" onClick={closeAllToasts}>
+          Close all
+        </button>
+      </div>
     </div>
   );
 }

src/toasts/ToastsContainer.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ToastsContext, toastPositions } from './toasts-helpers';
+import { ToastsContext, TOASTS_CLASSNAME_BY_POSITION } from './toasts-helpers';
 import { ToastsRegion } from './ToastsRegion';
-import { useToast } from './useToast';
+import { useToastState } from './useToastState';
 
 export function ToastsContainer({ children, unique, noStyle }) {
-  const toastsState = useToast({ unique });
+  const toastsState = useToastState({ unique });
 
   return (
     <ToastsContext.Provider value={toastsState}>
       {children}
 
       <div className="toast-container">
-        {toastPositions.map(({ name, className }) => (
+        {TOASTS_CLASSNAME_BY_POSITION.map(({ name, className }) => (
           <ToastsRegion key={name} name={name} className={className} toasts={toastsState.get(name)} noStyle={noStyle} />
         ))}
       </div>

src/toasts/ToastsRegion.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Toast } from './Toast';
-import { toastsDefaultStylesByPosition } from './toasts-helpers';
+import { TOASTS_DEFAULT_STYLES_BY_POSITION, TOASTS_DEFAULT_STYLE } from './toasts-helpers';
 
 export function ToastsRegion({ name, className, toasts, noStyle }) {
   return (
@@ -12,10 +12,8 @@ export function ToastsRegion({ name, className, toasts, noStyle }) {
         noStyle
           ? null
           : {
-              position: 'fixed',
-              zIndex: 9999,
-              maxWidth: '50%',
-              ...toastsDefaultStylesByPosition[name],
+              ...TOASTS_DEFAULT_STYLE,
+              ...TOASTS_DEFAULT_STYLES_BY_POSITION[name],
             }
       }
     >

src/toasts/index.js

@@ -1,2 +1,3 @@
 export * from './toasts-helpers';
 export * from './ToastsContainer';
+export * from './useToasts';

src/toasts/toasts-helpers.js

@@ -2,7 +2,11 @@ import React from 'react';
 
 export const ToastsContext = React.createContext(null);
 
-export const toastPositions = [
+export const TOASTS_VALID_POSITIONS = ['TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', 'BOTTOM_RIGHT'];
+
+export const TOASTS_VALID_TYPES = ['info', 'success', 'danger', 'warning'];
+
+export const TOASTS_CLASSNAME_BY_POSITION = [
   {
     name: 'TOP_LEFT',
     className: 'top-left',
@@ -21,7 +25,13 @@ export const toastPositions = [
   },
 ];
 
-export const toastsDefaultStylesByPosition = {
+export const TOASTS_DEFAULT_STYLE = {
+  position: 'fixed',
+  zIndex: 9999,
+  maxWidth: '50%',
+};
+
+export const TOASTS_DEFAULT_STYLES_BY_POSITION = {
   TOP_RIGHT: {
     top: '25px',
     right: '25px',

src/toasts/useToast.js

@@ -0,0 +1,86 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { useArrayValueMap } from '../utils/useValueMap';
+import { TOASTS_VALID_TYPES, TOASTS_VALID_POSITIONS } from './toasts-helpers';
+
+export function useToastState({ unique }) {
+  const [nextId, setNextId] = useState(0);
+  const timeoutRefs = useRef({});
+
+  const { push, unset, get, reset } = useArrayValueMap(
+    unique && {
+      equalityComparator: (a) => (b) => a.message === b.message,
+    }
+  );
+
+  const show = useCallback(
+    (message, { type = 'info', autoClose = 5000, position = 'TOP_RIGHT' } = {}) => {
+      if (!TOASTS_VALID_TYPES.includes(type)) {
+        throw new Error(`Invalid toast type ${type}. Must be ${TOASTS_VALID_TYPES}`);
+      }
+
+      if (!TOASTS_VALID_POSITIONS.includes(position)) {
+        throw new Error(`Invalid toast position ${position}. Must be ${TOASTS_VALID_POSITIONS}`);
+      }
+
+      const toastId = nextId;
+
+      push(position, {
+        id: toastId,
+        message,
+        type,
+        position,
+        closeControl: !autoClose,
+      });
+
+      if (typeof autoClose === 'number' && !isNaN(autoClose)) {
+        const timeoutId = setTimeout(() => {
+          close(position, toastId);
+        }, autoClose);
+
+        timeoutRefs.current[toastId] = { timeoutId, position };
+        // setToastTimeout(toastId, timeout);
+      }
+
+      setNextId((prevId) => prevId + 1);
+
+      return toastId;
+    },
+    [close, nextId, push]
+  );
+
+  const close = useCallback(
+    (position, toastId) => {
+      const { timeoutId } = timeoutRefs.current[toastId];
+
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+
+      delete timeoutRefs.current[toastId];
+
+      unset(position, (toast) => toast.id !== toastId);
+    },
+    [unset]
+  );
+
+  const closeAll = useCallback(() => {
+    for (const [toastId, { position }] of Object.entries(timeoutRefs.current)) {
+      close(position, toastId);
+    }
+
+    reset();
+  }, [close, reset]);
+
+  useEffect(
+    () => closeAll,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return {
+    show,
+    close,
+    closeAll,
+    get,
+  };
+}

src/toasts/useToastState.js

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { ToastsContext } from './toasts-helpers';
+
+export function useToasts() {
+  const toastsState = useContext(ToastsContext);
+
+  return {
+    showToast(message, { type = 'info', autoClose = 5000, position = 'TOP_RIGHT' } = {}) {
+      const toastId = toastsState.show(message, { type, autoClose, position });
+
+      return function closeToast() {
+        toastsState.close(position, toastId);
+      };
+    },
+    closeAllToasts() {
+      toastsState.closeAll();
+    },
+  };
+}

src/toasts/useToasts.js

@@ -1,9 +1,9 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
 export function useValueMap() {
   const [valueMap, updateValueMap] = useState({});
 
-  function setValue(key, _value) {
+  const setValue = useCallback((key, _value) => {
     updateValueMap((prevValueMap) => {
       let value = _value;
 
@@ -16,11 +16,9 @@ export function useValueMap() {
         [key]: value,
       };
     });
-  }
+  }, []);
 
-  function getValue(key) {
-    return valueMap[key];
-  }
+  const getValue = useCallback((key) => valueMap[key], [valueMap]);
 
   return {
     setValue,
@@ -33,11 +31,17 @@ export function useValueMap() {
         setValue(key, value);
       }
     },
+    unsetKey(key) {
+      updateValueMap(({ [key]: _, ...prevValueMap }) => prevValueMap);
+    },
+    reset() {
+      updateValueMap({});
+    },
   };
 }
 
 export function useArrayValueMap({ unique = true, equalityComparator = (a) => (b) => a === b } = {}) {
-  const { getAllKeys, getValue, setValue } = useValueMap();
+  const { getAllKeys, getValue, setValue, reset } = useValueMap();
 
   return {
     push(key, value) {
@@ -56,9 +60,10 @@ export function useArrayValueMap({ unique = true, equalityComparator = (a) => (b
       });
     },
     unset(key, filterfn) {
-      setValue(key, (prevValues) => prevValues.filter(filterfn));
+      setValue(key, (prevValues) => prevValues && prevValues.filter(filterfn));
     },
     get: getValue,
     getAllKeys,
+    reset,
   };
 }