Update to React 18

src/apps/experimental/components/AppToolbar/RemotePlayButton.tsx

@@ -33,7 +33,7 @@ const RemotePlayButton = () => {
     const [ remotePlayMenuAnchorEl, setRemotePlayMenuAnchorEl ] = useState<null | HTMLElement>(null);
     const isRemotePlayMenuOpen = Boolean(remotePlayMenuAnchorEl);
 
-    const onRemotePlayButtonClick = useCallback((event) => {
+    const onRemotePlayButtonClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
         setRemotePlayMenuAnchorEl(event.currentTarget);
     }, [ setRemotePlayMenuAnchorEl ]);
 
@@ -44,7 +44,7 @@ const RemotePlayButton = () => {
     const [ remotePlayActiveMenuAnchorEl, setRemotePlayActiveMenuAnchorEl ] = useState<null | HTMLElement>(null);
     const isRemotePlayActiveMenuOpen = Boolean(remotePlayActiveMenuAnchorEl);
 
-    const onRemotePlayActiveButtonClick = useCallback((event) => {
+    const onRemotePlayActiveButtonClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
         setRemotePlayActiveMenuAnchorEl(event.currentTarget);
     }, [ setRemotePlayActiveMenuAnchorEl ]);
 

src/apps/experimental/components/AppToolbar/SyncPlayButton.tsx

@@ -17,7 +17,7 @@ const SyncPlayButton = () => {
     const [ syncPlayMenuAnchorEl, setSyncPlayMenuAnchorEl ] = useState<null | HTMLElement>(null);
     const isSyncPlayMenuOpen = Boolean(syncPlayMenuAnchorEl);
 
-    const onSyncPlayButtonClick = useCallback((event) => {
+    const onSyncPlayButtonClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
         setSyncPlayMenuAnchorEl(event.currentTarget);
     }, [ setSyncPlayMenuAnchorEl ]);
 

src/apps/experimental/components/AppToolbar/menus/SyncPlayMenu.tsx

@@ -22,7 +22,7 @@ import { useApi } from 'hooks/useApi';
 import { useSyncPlayGroups } from 'hooks/useSyncPlayGroups';
 import globalize from 'scripts/globalize';
 import { PluginType } from 'types/plugin';
-import Events from 'utils/events';
+import Events, { Event } from 'utils/events';
 
 export const ID = 'app-sync-play-menu';
 
@@ -136,7 +136,7 @@ const SyncPlayMenu: FC<SyncPlayMenuProps> = ({
         }
     }, [ __legacyApiClient__, onMenuClose, syncPlay ]);
 
-    const updateSyncPlayGroup = useCallback((_e, enabled) => {
+    const updateSyncPlayGroup = useCallback((_e: Event, enabled: boolean) => {
         if (syncPlay && enabled) {
             setCurrentGroup(syncPlay.Manager.getGroupInfo() ?? undefined);
         } else {

src/apps/experimental/routes/home.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import globalize from '../../../scripts/globalize';
@@ -25,7 +25,7 @@ type ControllerProps = {
     destroy: () => void;
 };
 
-const Home: FunctionComponent = () => {
+const Home = () => {
     const [ searchParams ] = useSearchParams();
     const initialTabIndex = parseInt(searchParams.get('tab') ?? '0', 10);
 

src/apps/experimental/routes/user/display/hooks/useDisplaySettingForm.ts

@@ -6,6 +6,11 @@ import globalize from 'scripts/globalize';
 import { DisplaySettingsValues } from '../types';
 import { useDisplaySettings } from './useDisplaySettings';
 
+type UpdateField = {
+    name: keyof DisplaySettingsValues;
+    value: string | boolean;
+};
+
 export function useDisplaySettingForm() {
     const [urlParams] = useSearchParams();
     const {
@@ -21,7 +26,7 @@ export function useDisplaySettingForm() {
         }
     }, [formValues, loading, displaySettings]);
 
-    const updateField = useCallback(({ name, value }) => {
+    const updateField = useCallback(({ name, value }: UpdateField) => {
         if (formValues) {
             setFormValues({
                 ...formValues,