Preparations for React 18 (#12860)

* Add missing types

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Eagerly add `children` to props in prep for React 18

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Avoid assuming that setState immediately sets `this.state` values

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add missing context declaration

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix UserFriendlyError types to work with React 18

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/avatars/BaseAvatar.tsx

@@ -19,7 +19,7 @@ limitations under the License.
 
 import React, { forwardRef, useCallback, useContext, useEffect, useState } from "react";
 import classNames from "classnames";
-import { ClientEvent } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, SyncState } from "matrix-js-sdk/src/matrix";
 import { Avatar } from "@vector-im/compound-web";
 
 import SettingsStore from "../../../settings/SettingsStore";
@@ -80,7 +80,7 @@ const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [
     }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const cli = useContext(MatrixClientContext);
-    const onClientSync = useCallback((syncState, prevState) => {
+    const onClientSync = useCallback((syncState: SyncState, prevState: SyncState | null) => {
         // Consider the client reconnected if there is no error with syncing.
         // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
         const reconnected = syncState !== "ERROR" && prevState !== syncState;

src/components/views/dialogs/spotlight/Option.tsx

@@ -26,6 +26,7 @@ interface OptionProps {
     id?: string;
     className?: string;
     onClick: ((ev: ButtonEvent) => void) | null;
+    children?: ReactNode;
 }
 
 export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment, className, ...props }) => {

src/components/views/directory/NetworkDropdown.tsx

@@ -26,7 +26,11 @@ import SdkConfig from "../../../SdkConfig";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import SettingsStore from "../../../settings/SettingsStore";
 import { Protocols } from "../../../utils/DirectoryUtils";
-import { GenericDropdownMenu, GenericDropdownMenuItem } from "../../structures/GenericDropdownMenu";
+import {
+    AdditionalOptionsProps,
+    GenericDropdownMenu,
+    GenericDropdownMenuItem,
+} from "../../structures/GenericDropdownMenu";
 import TextInputDialog from "../dialogs/TextInputDialog";
 import AccessibleButton from "../elements/AccessibleButton";
 import withValidation from "../elements/Validation";
@@ -181,7 +185,7 @@ export const NetworkDropdown: React.FC<IProps> = ({ protocols, config, setConfig
     }));
 
     const addNewServer = useCallback(
-        ({ closeMenu }) => (
+        ({ closeMenu }: AdditionalOptionsProps) => (
             <>
                 <span className="mx_GenericDropdownMenu_divider" />
                 <MenuItemRadio

src/components/views/elements/PersistentApp.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ContextType, CSSProperties, MutableRefObject } from "react";
+import React, { ContextType, CSSProperties, MutableRefObject, ReactNode } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import WidgetUtils from "../../../utils/WidgetUtils";
@@ -28,6 +28,7 @@ interface IProps {
     persistentRoomId: string;
     pointerEvents?: CSSProperties["pointerEvents"];
     movePersistedElement: MutableRefObject<(() => void) | undefined>;
+    children?: ReactNode;
 }
 
 export default class PersistentApp extends React.Component<IProps> {

src/components/views/messages/RoomPredecessorTile.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React, { useCallback, useContext } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { MatrixEvent, Room, RoomState } from "matrix-js-sdk/src/matrix";
 
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
@@ -52,7 +52,7 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
     const predecessor = useRoomState(
         roomContext.room,
         useCallback(
-            (state) => state.findPredecessor(msc3946ProcessDynamicPredecessor),
+            (state: RoomState) => state.findPredecessor(msc3946ProcessDynamicPredecessor),
             [msc3946ProcessDynamicPredecessor],
         ),
     );
@@ -63,9 +63,9 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
 
             dis.dispatch<ViewRoomPayload>({
                 action: Action.ViewRoom,
-                event_id: predecessor.eventId,
+                event_id: predecessor?.eventId,
                 highlighted: true,
-                room_id: predecessor.roomId,
+                room_id: predecessor?.roomId,
                 metricsTrigger: "Predecessor",
                 metricsViaKeyboard: e.type !== "click",
             });
@@ -126,7 +126,7 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
 
     const predecessorPermalink = prevRoom
         ? createLinkWithRoom(prevRoom, predecessor.roomId, predecessor.eventId)
-        : createLinkWithoutRoom(predecessor.roomId, predecessor.viaServers, predecessor.eventId);
+        : createLinkWithoutRoom(predecessor.roomId, predecessor?.viaServers ?? [], predecessor.eventId);
 
     const link = (
         <a href={predecessorPermalink} onClick={onLinkClicked}>

src/components/views/messages/TextualEvent.tsx

@@ -27,6 +27,7 @@ interface IProps {
 
 export default class TextualEvent extends React.Component<IProps> {
     public static contextType = RoomContext;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public render(): React.ReactNode {
         const text = TextForEvent.textForEvent(

src/components/views/messages/TimelineSeparator.tsx

@@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 
 interface Props {
     label: string;
+    children?: ReactNode;
 }
 
 export const enum SeparatorKind {

src/components/views/pips/WidgetPip.tsx

@@ -34,6 +34,7 @@ import { WidgetType } from "../../../widgets/WidgetType";
 import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
 import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions";
+import { ButtonEvent } from "../elements/AccessibleButton";
 
 interface Props {
     widgetId: string;
@@ -62,7 +63,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
     const call = useCallForWidget(widgetId, room.roomId);
 
     const onBackClick = useCallback(
-        (ev) => {
+        (ev: ButtonEvent) => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -87,7 +88,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
     );
 
     const onLeaveClick = useCallback(
-        (ev) => {
+        (ev: ButtonEvent) => {
             ev.preventDefault();
             ev.stopPropagation();
 

src/components/views/right_panel/UserInfo.tsx

@@ -424,6 +424,7 @@ export const UserOptionsSection: React.FC<{
     member: Member;
     canInvite: boolean;
     isSpace?: boolean;
+    children?: ReactNode;
 }> = ({ member, canInvite, isSpace, children }) => {
     const cli = useContext(MatrixClientContext);
 
@@ -1036,7 +1037,7 @@ const IgnoreToggleButton: React.FC<{
     }, [cli, member.userId]);
     // Recheck also if we receive new accountData m.ignored_user_list
     const accountDataHandler = useCallback(
-        (ev) => {
+        (ev: MatrixEvent) => {
             if (ev.getType() === "m.ignored_user_list") {
                 setIsIgnored(cli.isUserIgnored(member.userId));
             }

src/components/views/rooms/RoomHeader.tsx

@@ -116,7 +116,10 @@ export default function RoomHeader({
 
     const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join");
 
-    const videoClick = useCallback((ev) => videoCallClick(ev, callOptions[0]), [callOptions, videoCallClick]);
+    const videoClick = useCallback(
+        (ev: React.MouseEvent) => videoCallClick(ev, callOptions[0]),
+        [callOptions, videoCallClick],
+    );
 
     const toggleCallButton = (
         <Tooltip label={isViewingCall ? _t("voip|minimise_call") : _t("voip|maximise_call")}>

src/components/views/settings/UserProfileSettings.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
+import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
 import { Icon as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
@@ -37,7 +37,7 @@ import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { Flex } from "../../utils/Flex";
 
-const SpinnerToast: React.FC = ({ children }) => (
+const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>
         <InlineSpinner />
         {children}

src/components/views/spaces/QuickSettingsButton.tsx

@@ -45,7 +45,7 @@ const QuickSettingsButton: React.FC<{
         useSettingValue<Record<MetaSpace, boolean>>("Spaces.enabledMetaSpaces");
 
     const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
-    const developerModeEnabled = useSettingValue("developerMode");
+    const developerModeEnabled = useSettingValue<boolean>("developerMode");
 
     let contextMenu: JSX.Element | undefined;
     if (menuDisplayed && handle.current) {