From b1cbefb73456fb4ed1bc417028beda94fc038603 Mon Sep 17 00:00:00 2001
From: Kevin Kipp <kkipp@cloudflare.com>
Date: Fri, 9 Aug 2024 17:57:49 -0500
Subject: [PATCH] A few tweaks on proposed changes

- Move to using ComponentProps instead of IntrinsicElements
- Remove void checking of functions
- Use arrow function for inner function
---
 .eslintrc.cjs                                 |  8 ++++
 app/components/AudioInputSelector.tsx         |  1 -
 app/components/Button.tsx                     |  4 +-
 app/components/Icon/Icon.tsx                  | 10 +++--
 .../Icon/custom/MicrophoneSlashIcon.tsx       |  6 +--
 app/components/Input.tsx                      | 45 +++++++++----------
 app/components/Participant.tsx                |  4 +-
 app/components/TextArea.tsx                   |  4 +-
 app/components/VideoSrcObject.tsx             |  7 +--
 app/hooks/useBroadcastStatus.ts               |  3 +-
 app/utils/blurVideoTrack.ts                   |  1 -
 app/utils/rxjs/getUserMediaTrack$.ts          |  2 -
 12 files changed, 47 insertions(+), 48 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 253c6ce4..9b5d474d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -30,6 +30,14 @@ module.exports = {
 				argsIgnorePattern: '^_',
 			},
 		],
+		'@typescript-eslint/no-misused-promises': [
+			'error',
+			{
+				checksConditionals: true,
+				checksVoidReturn: false,
+				checksSpreads: true,
+			},
+		],
 	},
 	root: true,
 }
diff --git a/app/components/AudioInputSelector.tsx b/app/components/AudioInputSelector.tsx
index 33442046..627d85c7 100644
--- a/app/components/AudioInputSelector.tsx
+++ b/app/components/AudioInputSelector.tsx
@@ -29,7 +29,6 @@ export const AudioInputSelector: FC<{ id?: string }> = ({ id }) => {
 
 	return (
 		<div className="max-w-[40ch]">
-			{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
 			<Select id={id} value={audioDeviceId} onValueChange={setAudioDeviceId}>
 				{audioInputDevices.map((d) => (
 					<Option key={d.deviceId} value={d.deviceId}>
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index ccab1b89..714a4e36 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -1,6 +1,6 @@
 import type { LinkProps } from '@remix-run/react'
 import { Link } from '@remix-run/react'
-import { forwardRef } from 'react'
+import { forwardRef, type ComponentProps } from 'react'
 import { cn } from '~/utils/style'
 
 const displayTypeMap = {
@@ -26,7 +26,7 @@ const displayTypeMap = {
 	],
 }
 
-export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'ref'> & {
+export type ButtonProps = ComponentProps<'button'> & {
 	displayType?: keyof typeof displayTypeMap
 }
 
diff --git a/app/components/Icon/Icon.tsx b/app/components/Icon/Icon.tsx
index 158c796f..6ddae527 100644
--- a/app/components/Icon/Icon.tsx
+++ b/app/components/Icon/Icon.tsx
@@ -26,7 +26,7 @@ import {
 	WifiIcon,
 	XCircleIcon,
 } from '@heroicons/react/20/solid'
-import type { FC } from 'react'
+import type { ComponentProps, FC } from 'react'
 import { cn } from '~/utils/style'
 import { MicrophoneSlashIcon } from './custom/MicrophoneSlashIcon'
 
@@ -64,9 +64,11 @@ interface IconProps {
 	type: keyof typeof iconMap
 }
 
-export const Icon: FC<
-	IconProps & Omit<React.JSX.IntrinsicElements['svg'], 'ref'>
-> = ({ type, className, ...rest }) => {
+export const Icon: FC<IconProps & ComponentProps<'svg'>> = ({
+	type,
+	className,
+	...rest
+}) => {
 	const Component = iconMap[type]
 	return <Component className={cn('h-[1em]', className)} {...rest} />
 }
diff --git a/app/components/Icon/custom/MicrophoneSlashIcon.tsx b/app/components/Icon/custom/MicrophoneSlashIcon.tsx
index ac741dda..580ad941 100644
--- a/app/components/Icon/custom/MicrophoneSlashIcon.tsx
+++ b/app/components/Icon/custom/MicrophoneSlashIcon.tsx
@@ -1,8 +1,6 @@
-import type { FC } from 'react'
+import type { ComponentProps, FC } from 'react'
 
-export const MicrophoneSlashIcon: FC<React.JSX.IntrinsicElements['svg']> = (
-	props
-) => {
+export const MicrophoneSlashIcon: FC<ComponentProps<'svg'>> = (props) => {
 	return (
 		<svg
 			aria-hidden="true"
diff --git a/app/components/Input.tsx b/app/components/Input.tsx
index 7b3a9273..3c9e36ec 100644
--- a/app/components/Input.tsx
+++ b/app/components/Input.tsx
@@ -1,27 +1,26 @@
-import { forwardRef } from 'react'
+import { forwardRef, type ComponentProps } from 'react'
 import { cn } from '~/utils/style'
 
-export const Input = forwardRef<
-	HTMLInputElement,
-	React.JSX.IntrinsicElements['input']
->(({ className, ...rest }, ref) => (
-	<input
-		className={cn(
-			'w-full',
-			'rounded',
-			'border-2',
-			'border-zinc-500',
-			'text-zinc-900',
-			'dark:text-zinc-50',
-			'bg-zinc-50',
-			'dark:bg-zinc-700',
-			'px-2',
-			'py-1',
-			className
-		)}
-		{...rest}
-		ref={ref}
-	/>
-))
+export const Input = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
+	({ className, ...rest }, ref) => (
+		<input
+			className={cn(
+				'w-full',
+				'rounded',
+				'border-2',
+				'border-zinc-500',
+				'text-zinc-900',
+				'dark:text-zinc-50',
+				'bg-zinc-50',
+				'dark:bg-zinc-700',
+				'px-2',
+				'py-1',
+				className
+			)}
+			{...rest}
+			ref={ref}
+		/>
+	)
+)
 
 Input.displayName = 'Input'
diff --git a/app/components/Participant.tsx b/app/components/Participant.tsx
index 5037ab8f..4f35bd4c 100644
--- a/app/components/Participant.tsx
+++ b/app/components/Participant.tsx
@@ -1,5 +1,5 @@
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import { forwardRef, useEffect } from 'react'
+import { forwardRef, useEffect, type ComponentProps } from 'react'
 import { Flipped } from 'react-flip-toolkit'
 import { useDeadPulledTrackMonitor } from '~/hooks/useDeadPulledTrackMonitor'
 import { useRoomContext } from '~/hooks/useRoomContext'
@@ -19,7 +19,7 @@ import { VideoSrcObject } from './VideoSrcObject'
 
 export const Participant = forwardRef<
 	HTMLDivElement,
-	React.JSX.IntrinsicElements['div'] & {
+	ComponentProps<'div'> & {
 		flipId: string
 		isScreenShare?: boolean
 		user: User
diff --git a/app/components/TextArea.tsx b/app/components/TextArea.tsx
index 3e32cd5f..79a4e46a 100644
--- a/app/components/TextArea.tsx
+++ b/app/components/TextArea.tsx
@@ -1,9 +1,9 @@
-import { forwardRef } from 'react'
+import { forwardRef, type ComponentProps } from 'react'
 import { cn } from '~/utils/style'
 
 export const TextArea = forwardRef<
 	HTMLTextAreaElement,
-	React.JSX.IntrinsicElements['textarea']
+	ComponentProps<'textarea'>
 >(({ className, ...rest }, ref) => (
 	<textarea
 		ref={ref}
diff --git a/app/components/VideoSrcObject.tsx b/app/components/VideoSrcObject.tsx
index 33054408..9c161a0d 100644
--- a/app/components/VideoSrcObject.tsx
+++ b/app/components/VideoSrcObject.tsx
@@ -1,10 +1,7 @@
-import { forwardRef, useEffect, useRef } from 'react'
+import { forwardRef, useEffect, useRef, type ComponentProps } from 'react'
 import { cn } from '~/utils/style'
 
-export type VideoSrcObjectProps = Omit<
-	React.JSX.IntrinsicElements['video'],
-	'ref'
-> & {
+export type VideoSrcObjectProps = ComponentProps<'video'> & {
 	videoTrack?: MediaStreamTrack
 }
 
diff --git a/app/hooks/useBroadcastStatus.ts b/app/hooks/useBroadcastStatus.ts
index 23eacc3b..c334e03c 100644
--- a/app/hooks/useBroadcastStatus.ts
+++ b/app/hooks/useBroadcastStatus.ts
@@ -52,8 +52,7 @@ export default function useBroadcastStatus({
 				},
 			}
 
-			// eslint-disable-next-line no-inner-declarations
-			function sendUserUpdate() {
+			const sendUserUpdate = () => {
 				websocket.send(
 					JSON.stringify({
 						type: 'userUpdate',
diff --git a/app/utils/blurVideoTrack.ts b/app/utils/blurVideoTrack.ts
index 9a1f622c..c35ccfc2 100644
--- a/app/utils/blurVideoTrack.ts
+++ b/app/utils/blurVideoTrack.ts
@@ -62,7 +62,6 @@ export default async function blurVideoTrack(
 	let t = -1
 	async function tick() {
 		await drawBlur()
-		// eslint-disable-next-line @typescript-eslint/no-misused-promises
 		t = window.setTimeout(tick, 1000 / 30) // 30fps
 	}
 
diff --git a/app/utils/rxjs/getUserMediaTrack$.ts b/app/utils/rxjs/getUserMediaTrack$.ts
index 1f1a7f67..d17b5fe5 100644
--- a/app/utils/rxjs/getUserMediaTrack$.ts
+++ b/app/utils/rxjs/getUserMediaTrack$.ts
@@ -81,7 +81,6 @@ function acquireTrack(
 				const cleanup = () => {
 					console.log('🛑 Stopping track')
 					track.stop()
-					// eslint-disable-next-line @typescript-eslint/no-misused-promises
 					document.removeEventListener('visibilitychange', onVisibleHandler)
 				}
 				const onVisibleHandler = async () => {
@@ -92,7 +91,6 @@ function acquireTrack(
 					cleanup()
 					acquireTrack(subscriber, device, constraints, cleanupRef)
 				}
-				// eslint-disable-next-line @typescript-eslint/no-misused-promises
 				document.addEventListener('visibilitychange', onVisibleHandler)
 				cleanupRef.current = cleanup
 				subscriber.next(track)