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