Uncaught TypeError: Cannot read property 'find' of undefined

[ifvictr]

This occurs very rarely, but when it does, the entire page crashes. Pretty sure the issue is somewhere in here:

iora/app/src/components/Event.tsx

Lines 97 to 214 in dea58c2

	export const EVENTS: Record<EventType, EventInfo> = {
	media: {
	emoji: '🖼️',
	color: theme.colors.orange,
	description: payload => {
	const { type } = payload.includes.media![0]
	return `posted a ${type === 'animated_gif' ? 'GIF' : type}`
	},
	rawDescription: payload => {
	const { type } = payload.includes.media![0]
	return `posted a ${type === 'animated_gif' ? 'GIF' : type}`
	},
	transformText: payload => payload.data.text
	},
	poll: {
	emoji: '🗳️',
	color: theme.colors.purple,
	description: () => 'started a poll',
	rawDescription: () => 'started a poll',
	transformText: payload => payload.data.text
	},
	reply: {
	emoji: '💬',
	color: 'transparent',
	description: payload => {
	const recipient = payload.includes.users.find(
	user => user.id === payload.data.in_reply_to_user_id
	)
	return (
	<>
	replied to{' '}
	{!!recipient ? (
	<>
	<Link
	target="_blank"
	href={`https://twitter.com/${recipient.username}`}
	sx={{ color: 'inherit', fontWeight: 'bold' }}
	onClick={e => {
	e.stopPropagation()
	}}
	>
	{recipient.name}
	</Link>
	</>
	) : (
	'a tweet'
	)}
	</>
	)
	},
	rawDescription: payload => {
	const recipient = payload.includes.users.find(
	user => user.id === payload.data.in_reply_to_user_id
	)
	return (
	'replied to ' + (!!recipient ? `@${recipient.username}` : 'a tweet')
	)
	},
	transformText: payload => payload.data.text
	},
	retweet: {
	emoji: '🔁',
	color: theme.colors.green,
	description: payload => {
	const retweetReference = payload.data.referenced_tweets!.find(
	referencedTweet => referencedTweet.type === 'retweeted'
	)
	const originalTweet = payload.includes.tweets?.find(
	includedTweet => includedTweet.id === retweetReference?.id
	)
	const author = payload.includes.users.find(
	user => user.id === originalTweet?.author_id
	)
	return (
	<>
	retweeted{' '}
	{!!author ? (
	<>
	<Link
	target="_blank"
	href={`https://twitter.com/${author.username}`}
	sx={{ color: 'inherit', fontWeight: 'bold' }}
	onClick={e => {
	e.stopPropagation()
	}}
	>
	{author.name}
	</Link>
	’s tweet
	</>
	) : (
	'a tweet'
	)}
	</>
	)
	},
	rawDescription: payload => {
	const retweetReference = payload.data.referenced_tweets!.find(
	referencedTweet => referencedTweet.type === 'retweeted'
	)
	const originalTweet = payload.includes.tweets?.find(
	includedTweet => includedTweet.id === retweetReference?.id
	)
	const author = payload.includes.users.find(
	user => user.id === originalTweet?.author_id
	)
	return `retweeted ${!!author ? `@${author.username}’s tweet` : 'a tweet'}`
	},
	transformText: payload => payload.data.text.replace(RETWEET_PATTERN, '') // Remove the RT @user prefix
	},
	tweet: {
	emoji: '📢',
	color: '#1da0f2',
	description: () => 'tweeted',
	rawDescription: () => 'tweeted',
	transformText: payload => payload.data.text
	}
	}