import { useEffect, useState } from 'react' import * as React from 'react' import { Button } from '@zendeskgarden/react-buttons' import { Body, Chrome, Content, Footer, Header, Main, Nav, } from '@zendeskgarden/react-chrome' import { PALETTE, ThemeProvider } from '@zendeskgarden/react-theming' import { ReactComponent as ClearIcon } from '@zendeskgarden/svg-icons/src/16/arrow-reverse-stroke.svg' import { ReactComponent as ProductIcon } from '@zendeskgarden/svg-icons/src/16/box-3d-fill.svg' import { ReactComponent as MenuTrayIcon } from '@zendeskgarden/svg-icons/src/16/grid-2x2-stroke.svg' import { ReactComponent as HomeIcon } from '@zendeskgarden/svg-icons/src/16/home-fill.svg' import { ReactComponent as PersonIcon } from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg' import { ReactComponent as ZendeskIcon } from '@zendeskgarden/svg-icons/src/16/zendesk-fill.svg' // CYN: NEED UPDATE import { mockTickets } from './mockTickets' import { TicketList } from './TicketList' import { ticketOperationTracer } from './ticketOperationTracer' import { TicketView } from './TicketView' // simulate an event every 2 seconds const simulateEventPeriodically = (ticketId: number | null) => { const interval = setInterval(() => { performance.mark(`ticket-${ticketId}-event`) }, 4_000) return () => void clearInterval(interval) } export const App: React.FC = () => { const [selectedTicketId, setSelectedTicketId] = useState(null) const [selectedTicketIds, setSelectedTicketIds] = useState([]) useEffect( () => simulateEventPeriodically(selectedTicketId), [selectedTicketId], ) const handleTicketClick = (id: number) => { ticketOperationTracer.start({ relatedTo: { ticketId: id }, attributes: { exampleTraceAttribute: true }, variant: 'click', }) setSelectedTicketId(id) } const handleBack = () => { setSelectedTicketId(null) } return (
Products User
{selectedTicketId === null ? ( ) : ( { setSelectedTicketIds([ ...selectedTicketIds, selectedTicketId, ]) }} /> )}
) }