import { Fragment, useEffect, useState } from 'react' import styled from '@emotion/styled' import Router from 'next/router' import { BadgeCheckIcon, BellIcon, TrashIcon } from '@heroicons/react/outline' import useAlertsStore from '../stores/useAlertsStore' import useLocalStorageState from '../hooks/useLocalStorageState' import { Popover, Transition } from '@headlessui/react' import { LinkButton } from './Button' import Loading from './Loading' import AlertsModal from './AlertsModal' import AlertItem from './AlertItem' const StyledAlertCount = styled.span` font-size: 0.6rem; ` const AlertsList = () => { const [openAlertModal, setOpenAlertModal] = useState(false) const [clearedAlerts, setClearedAlerts] = useState([]) const [ringBell, setRingBell] = useState(false) const activeAlerts = useAlertsStore((s) => s.activeAlerts) const triggeredAlerts = useAlertsStore((s) => s.triggeredAlerts) const loading = useAlertsStore((s) => s.loading) const [triggeredAlertsLength, setTriggeredAlertsLength] = useLocalStorageState('triggeredAlertsLength', null) const [alertsCount, setAlertsCount] = useLocalStorageState('alertsCount', 0) const [clearAlertsTimestamp, setClearAlertsTimestamp] = useLocalStorageState( 'clearAlertsTimestamp', null ) useEffect(() => { if (triggeredAlerts.length > 0) { if (!triggeredAlertsLength) { setTriggeredAlertsLength(triggeredAlerts.length) } if ( triggeredAlertsLength && triggeredAlerts.length > triggeredAlertsLength ) { setAlertsCount(alertsCount + 1) setTriggeredAlertsLength(triggeredAlerts.length) setRingBell(true) } } }, [triggeredAlerts]) useEffect(() => { if (clearAlertsTimestamp && !loading) { const filterByTimestamp = triggeredAlerts.filter( (alert) => alert.triggeredTimestamp > clearAlertsTimestamp && Object.keys(alert).includes('triggeredTimestamp') ) setClearedAlerts(filterByTimestamp) } }, [clearAlertsTimestamp, loading]) useEffect(() => { if (ringBell) { const bellTimer = setTimeout(() => { setRingBell(false) }, 1200) return () => clearTimeout(bellTimer) } }, [ringBell]) return ( <> {({ open }) => ( <> {alertsCount > 0 ? ( {alertsCount} ) : null} setAlertsCount(0)} > {loading ? ( ) : ( <> {triggeredAlerts.length === 0 && activeAlerts.length === 0 ? ( <> No Alerts Found Get notified when your account is in danger of liquidation. setOpenAlertModal(true)} className="w-full text-xs text-th-primary" > Create Liquidation Alert > ) : triggeredAlerts.length === 0 || (clearAlertsTimestamp && clearedAlerts.length === 0) ? ( <> Smooth Sailing None of your active liquidation alerts have been triggered. Router.push('/alerts')} className="w-full text-xs text-th-primary" > View All > ) : ( <> Triggered Alerts setClearAlertsTimestamp( triggeredAlerts[0].triggeredTimestamp ) } > Clear {activeAlerts.length === 0 ? ( You have no active alerts. ) : null} {clearAlertsTimestamp ? clearedAlerts.map((alert) => ( )) : triggeredAlerts.map((alert) => ( ))} Router.push('/alerts')} className="text-th-primary text-xs text-center" > View All > )} > )} > )} {openAlertModal ? ( setOpenAlertModal(false)} /> ) : null} > ) } export default AlertsList
Get notified when your account is in danger of liquidation.
None of your active liquidation alerts have been triggered.