Merge pull request #20 from emilkowalski/fix-promise-data

Pass props correctly

src/index.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import './styles.css';
 import { getAsset, Loader } from './assets';
-import { HeightT, Position, ToastT, ToastToDismiss } from './types';
+import { HeightT, Position, PromiseData, ToastT, ToastToDismiss } from './types';
 import { ToastState, toast } from './state';
 
 // Visible toasts amount
@@ -202,17 +202,21 @@ const Toast = (props: ToastProps) => {
   }, [toast.delete]);
 
   const promiseTitle = React.useMemo(() => {
+    const isPromise = (toast: ToastT): toast is PromiseData & { id: number } => Boolean(toast.promise);
+
+    if (!isPromise(toast)) return null;
+
     switch (promiseStatus) {
       case 'loading':
-        return toast.promiseData.loading;
+        return toast.loading;
       case 'success':
-        return toast.promiseData.success;
+        return toast.success;
       case 'error':
-        return toast.promiseData.error;
+        return toast.error;
       default:
         return null;
     }
-  }, [toast.promiseData, promiseStatus]);
+  }, [promiseStatus]);
 
   return (
     <li

src/state.ts

@@ -49,7 +49,7 @@ class Observer {
 
   promise = (promise: PromiseT, data?: PromiseData) => {
     const id = toastsCounter++;
-    this.publish({ promiseData: data, promise, id });
+    this.publish({ ...data, promise, id });
     return id;
   };
 

src/types.ts

@@ -2,14 +2,14 @@ import React from 'react';
 
 export type ToastTypes = 'normal' | 'action' | 'success' | 'error' | 'loading';
 
-export type PromiseData = {
-  loading: string;
+export type PromiseT = Promise<any> | (() => Promise<any>);
+
+export type PromiseData = ExternalToast & {
+  loading: string | React.ReactNode;
   success: string | React.ReactNode;
   error: string | React.ReactNode;
 };
 
-export type PromiseT = Promise<any> | (() => Promise<any>);
-
 export interface ToastT {
   id: number;
   title?: string | React.ReactNode;
@@ -30,7 +30,6 @@ export interface ToastT {
     onClick?: () => void;
   };
   promise?: PromiseT;
-  promiseData?: PromiseData;
   style?: React.CSSProperties;
   className?: string;
   descriptionClassName?: string;

website/app/globals.css

@@ -131,6 +131,6 @@ code {
 
 @media (max-width: 600px) {
   .buttons {
-    mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
+    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
   }
 }

website/src/components/Footer/footer.module.css

@@ -26,3 +26,10 @@
 .p a:hover {
   text-decoration: underline;
 }
+
+@media (max-width: 600px) {
+  .wrapper {
+    margin-top: 128px;
+    padding: 16px 0;
+  }
+}