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', + }); +}