Preparations for React 18 (matrix-org#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>

Author: t3chguy

src/components/structures/GenericDropdownMenu.tsx

@@ -97,6 +97,12 @@ type WithKeyFunction<T> = T extends Key
  toKey: (key: T) => Key;
  };
 
+export interface AdditionalOptionsProps {
+ menuDisplayed: boolean;
+ closeMenu: () => void;
+ openMenu: () => void;
+}
+
 type IProps<T> = WithKeyFunction<T> & {
  value: T;
  options: readonly GenericDropdownMenuOption<T>[] | readonly GenericDropdownMenuGroup<T>[];
@@ -105,11 +111,7 @@ type IProps<T> = WithKeyFunction<T> & {
  onOpen?: (ev: ButtonEvent) => void;
  onClose?: (ev: ButtonEvent) => void;
  className?: string;
- AdditionalOptions?: FunctionComponent<{
- menuDisplayed: boolean;
- closeMenu: () => void;
- openMenu: () => void;
- }>;
+ AdditionalOptions?: FunctionComponent<AdditionalOptionsProps>;
 };
 
 export function GenericDropdownMenu<T>({

src/components/structures/ThreadPanel.tsx

@@ -117,7 +117,7 @@ export const ThreadPanelHeader: React.FC<{
  ) : null;
 
  const onMarkAllThreadsReadClick = React.useCallback(
- (e) => {
+ (e: React.MouseEvent) => {
  PosthogTrackers.trackInteraction("WebThreadsMarkAllReadButton", e);
  if (!roomContext.room) {
  logger.error("No room in context to mark all threads read");

src/components/structures/auth/Registration.tsx

@@ -248,15 +248,20 @@ export default class Registration extends React.Component<IProps, IState> {
  logger.error("Failed to get login flows to check for SSO support", e);
  }
 
- this.setState(({ flows }) => ({
- matrixClient: cli,
- ssoFlow,
- oidcNativeFlow,
- // if we are using oidc native we won't continue with flow discovery on HS
- // so set an empty array to indicate flows are no longer loading
- flows: oidcNativeFlow ? [] : flows,
- busy: false,
- }));
+ await new Promise<void>((resolve) => {
+ this.setState(
+ ({ flows }) => ({
+ matrixClient: cli,
+ ssoFlow,
+ oidcNativeFlow,
+ // if we are using oidc native we won't continue with flow discovery on HS
+ // so set an empty array to indicate flows are no longer loading
+ flows: oidcNativeFlow ? [] : flows,
+ busy: false,
+ }),
+ resolve,
+ );
+ });
 
  // don't need to check with homeserver for login flows
  // since we are going to use OIDC native flow

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 {