Merge pull request #15 from nhanluongoe/feaet/promise-support

Add support for promise

src/components/icons.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from 'goober';
+import { keyframes, styled } from 'goober';
 
 const StyledCheck = styled('i')`
   & {
@@ -44,6 +44,8 @@ const StyledClose = styled('i')`
     border: 2px solid transparent;
     border-radius: 40px;
     color: #ff4b4b;
+    border: 2px solid red;
+    border-radius: 9999px;
   }
   &::after,
   &::before {
@@ -56,8 +58,8 @@ const StyledClose = styled('i')`
     height: 3px;
     background: currentColor;
     transform: rotate(45deg);
-    top: 10px;
-    left: 4px;
+    top: 12px;
+    left: 3px;
   }
   &::after {
     transform: rotate(-45deg);
@@ -66,3 +68,73 @@ const StyledClose = styled('i')`
 export const Close: React.FC = () => {
   return <StyledClose />;
 };
+
+const spinnerTwoAltAnimation = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const StyledSpinner = styled('i')`
+  position: relative;
+  &,
+  &::before {
+    box-sizing: border-box;
+    display: block;
+    width: 30px;
+    height: 30px;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    border-radius: 100px;
+    animation: ${spinnerTwoAltAnimation} 1s cubic-bezier(0.6, 0, 0.4, 1)
+      infinite;
+    border: 3px solid #5fbdff;
+    border-bottom-color: transparent;
+    border-top-color: transparent;
+  }
+`;
+export const Spinner: React.FC = () => {
+  return <StyledSpinner />;
+};
+
+const StyledWarning = styled('i')`
+  & {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: 2px solid;
+    border-radius: 40px;
+    color: #f6d776;
+  }
+  &::after,
+  &::before {
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    border-radius: 3px;
+    width: 3px;
+    background: currentColor;
+    left: 11.5px;
+    color: #f6d776;
+  }
+  &::after {
+    top: 4px;
+    height: 14px;
+  }
+  &::before {
+    height: 3px;
+    bottom: 3px;
+    width: 3px;
+    border-radius: 9999px;
+  }
+`;
+export const Warning: React.FC = () => {
+  return <StyledWarning />;
+};

src/components/toast-icon.tsx

@@ -1,7 +1,7 @@
 import { keyframes, styled } from 'goober';
 import React from 'react';
 import { Toast } from '../core/types';
-import { Check, Close } from './icons';
+import { Check, Close, Spinner, Warning } from './icons';
 
 interface ToastIconProps {
   icon?: Toast['icon'];
@@ -42,6 +42,12 @@ const ToastIcon: React.FC<ToastIconProps> = (props) => {
     if (type === 'error') {
       return <Close />;
     }
+    if (type === 'loading') {
+      return <Spinner />;
+    }
+    if (type === 'warning') {
+      return <Warning />;
+    }
     return null;
   };
 

src/components/toaster.tsx

@@ -7,7 +7,7 @@ import ToastIcon from './toast-icon';
 
 setup(React.createElement);
 
-interface ToasterProps {
+export interface ToasterProps {
   position?: 'left' | 'center' | 'right';
   toastOptions?: ToastsOptions;
 }

src/core/store.ts

@@ -1,10 +1,15 @@
 import React from 'react';
 import { Toast, ToastsOptions } from './types';
 
+export const TOAST_EXPIRE_DISMISS_DELAY = 1000;
+const TOAST_LIMIT = 3;
+
 type ActionType = {
   ADD_TOAST: 'ADD_TOAST';
   REMOVE_TOAST: 'REMOVE_TOAST';
   DISMISS_TOAST: 'DISMISS_TOAST';
+  UPSERT_TOAST: 'UPSERT_TOAST';
+  UPDATE_TOAST: 'UPDATE_TOAST';
   PAUSE: 'PAUSE';
   RESUME: 'RESUME';
 };
@@ -22,6 +27,14 @@ type Action =
       toastId?: Toast['id'];
       type: ActionType['REMOVE_TOAST'];
     }
+  | {
+      type: ActionType['UPSERT_TOAST'];
+      toast: Toast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<Toast>;
+    }
   | {
       type: ActionType['PAUSE'];
       time: number;
@@ -39,9 +52,6 @@ interface State {
 
 const toastTimeouts = new Map<Toast['id'], ReturnType<typeof setTimeout>>();
 
-export const TOAST_EXPIRE_DISMISS_DELAY = 0;
-const TOAST_LIMIT = 3;
-
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
     return;
@@ -58,6 +68,13 @@ const addToRemoveQueue = (toastId: string) => {
   toastTimeouts.set(toastId, timeout);
 };
 
+const clearFromRemoveQueue = (toastId: string) => {
+  const timeout = toastTimeouts.get(toastId);
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+};
+
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
     case 'ADD_TOAST': {
@@ -70,7 +87,6 @@ export const reducer = (state: State, action: Action): State => {
     case 'DISMISS_TOAST': {
       const { toastId } = action;
 
-      // ! Side effects ! - This could be execrated into a dismissToast() action, but I'll keep it here for simplicity
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {
@@ -107,6 +123,25 @@ export const reducer = (state: State, action: Action): State => {
       };
     }
 
+    case 'UPSERT_TOAST':
+      const { toast } = action;
+      return state.toasts.find((t) => t.id === toast.id)
+        ? reducer(state, { type: 'UPDATE_TOAST', toast })
+        : reducer(state, { type: 'ADD_TOAST', toast });
+
+    case 'UPDATE_TOAST': {
+      if (action.toast.id) {
+        clearFromRemoveQueue(action.toast.id);
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+    }
+
     case 'PAUSE': {
       return {
         ...state,

src/core/types.ts

@@ -1,6 +1,11 @@
 import React, { CSSProperties } from 'react';
 
-export type ToasterType = 'success' | 'error' | 'default';
+export type ToasterType =
+  | 'success'
+  | 'error'
+  | 'default'
+  | 'loading'
+  | 'warning';
 
 export type Toast = {
   id: string;

src/core/use-toast.ts

@@ -4,12 +4,15 @@ import { dispatch, useStore } from './store';
 import {
   Toast,
   ToastArg,
+  ToastOptions,
   ToasterType,
   ToastsOptions,
   isFunction,
 } from './types';
 import { genId } from './utils';
 
+const DEFAULT_DURATION = 3 * 1000;
+
 function createToast(type: ToasterType = 'default', arg: ToastArg): Toast {
   if (isFunction(arg)) {
     const id = genId();
@@ -45,7 +48,7 @@ function createHandler(type?: ToasterType) {
   return (options: ToastArg) => {
     const toast = createToast(type, options);
     dispatch({
-      type: 'ADD_TOAST',
+      type: 'UPSERT_TOAST',
       toast,
     });
     return toast.id;
@@ -55,6 +58,28 @@ function createHandler(type?: ToasterType) {
 const toast = (opts: ToastArg) => createHandler('default')(opts);
 toast.error = createHandler('error');
 toast.success = createHandler('success');
+toast.loading = createHandler('loading');
+toast.warning = createHandler('warning');
+
+toast.promise = <T>(
+  promise: Promise<T>,
+  content: {
+    loading: ToastOptions;
+    success: ToastOptions;
+    error: ToastOptions;
+  }
+) => {
+  const id = toast.loading(content.loading);
+  promise
+    .then((p) => {
+      toast.success({ ...content.success, id });
+      return p;
+    })
+    .catch(() => {
+      toast.error({ ...content.error, id });
+    });
+  return promise;
+};
 
 toast.dismiss = (toastId?: string) => {
   dispatch({
@@ -63,8 +88,6 @@ toast.dismiss = (toastId?: string) => {
   });
 };
 
-const DEFAULT_DURATION = 3 * 1000;
-
 const pause = () => {
   dispatch({
     type: 'PAUSE',