toasts

client/src/index.ts

@@ -1,4 +1,6 @@
+import 'izitoast/dist/css/iziToast.min.css';
 import './style/index.less';
+
 import App from './app';
 
 export default App;

client/src/routes/list.tsx

@@ -4,23 +4,20 @@ import { useSelector } from 'react-redux'
 import { route } from 'preact-router';
 
 import { State } from './../store'
+import * as toast from './../toast';
 
 import Want from './../components/want';
 
-interface Props {
-    user: any,
-    wants: any[],
-    getUserOffers: (userId: string) => void,
-}
-
-const List = ({ user }: Props) => {
+const List = () => {
     const wants = useSelector((state: State) => state.wants);
+    const user = useSelector((state: State) => state.user);
 
     if (!wants) {
         return <div> loading... </div>;
     }
 
     if (!wants.length) {
+        toast.info('List Empty', 'You have no items in your list, add some with search.');
         route('/search');
     }
 

client/src/routes/offers.tsx

@@ -1,18 +1,17 @@
 import { h } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
 import { route } from 'preact-router';
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-import http from './../http';
-import { State, offersState } from './../store';
+import { State } from './../store';
+import * as toast from './../toast';
 
 import OfferGroup from './../components/offer.group';
 
 function Home() {
-    const dispatch = useDispatch()
     const offers = useSelector((state: State) => state.offers);
 
     if (offers && offers.length === 0) {
+        toast.info('no offers', 'You have no offers yet, search for some more items.');
         route('/search');
     }
 

client/src/style/index.less

@@ -541,3 +541,21 @@ header {
     }
 }
 
+
+// ------------
+// toasts
+
+.iziToast {
+    border-radius: 0;
+    border-color: var(--base-border-color);
+
+    .iziToast-body {
+        font-family: var(--base-font-family);
+        font-size: var(--base-font-size);
+    }
+
+    .iziToast-title {
+        font-family: var(--secondary-font-family);
+        text-transform: uppercase;
+    }
+}

client/src/toast.tsx

@@ -0,0 +1,15 @@
+import toast from 'izitoast';
+
+export function info(title, message) {
+    toast.info({
+        title,
+        message,
+        position: 'bottomCenter',
+        color: '#1f2128',
+        titleColor: '#F4F1D0',
+        messageColor: '#F4F1D0',
+        iconColor: '#F4F1D0',
+        icon: '',
+        theme: 'dark',
+    });
+}