diff --git a/client/src/index.ts b/client/src/index.ts
index 3df1e43..bacf557 100644
--- a/client/src/index.ts
+++ b/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;
diff --git a/client/src/routes/list.tsx b/client/src/routes/list.tsx
index 6cbf31c..d154df2 100644
--- a/client/src/routes/list.tsx
+++ b/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
loading...
;
}
if (!wants.length) {
+ toast.info('List Empty', 'You have no items in your list, add some with search.');
route('/search');
}
diff --git a/client/src/routes/offers.tsx b/client/src/routes/offers.tsx
index 98fd108..8852cfc 100644
--- a/client/src/routes/offers.tsx
+++ b/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');
}
diff --git a/client/src/style/index.less b/client/src/style/index.less
index 33e679b..4141623 100644
--- a/client/src/style/index.less
+++ b/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;
+ }
+}
diff --git a/client/src/toast.tsx b/client/src/toast.tsx
new file mode 100644
index 0000000..81fe9f2
--- /dev/null
+++ b/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',
+ });
+}