Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 0905864

Browse files
t3chguyt3chguy
authored
Preparations for React 18 (#12860)
* Add missing types Signed-off-by: Michael Telatynski <[email protected]> * Eagerly add `children` to props in prep for React 18 Signed-off-by: Michael Telatynski <[email protected]> * Avoid assuming that setState immediately sets `this.state` values Signed-off-by: Michael Telatynski <[email protected]> * Add missing context declaration Signed-off-by: Michael Telatynski <[email protected]> * Fix UserFriendlyError types to work with React 18 Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent accbe07 commit 0905864

File tree

17 files changed

+63
-44
lines changed

17 files changed

+63
-44
lines changed

‎src/components/structures/GenericDropdownMenu.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,12 @@ type WithKeyFunction<T> = T extends Key
9797
toKey: (key: T) => Key;
9898
};
9999

100+
export interface AdditionalOptionsProps {
101+
menuDisplayed: boolean;
102+
closeMenu: () => void;
103+
openMenu: () => void;
104+
}
105+
100106
type IProps<T> = WithKeyFunction<T> & {
101107
value: T;
102108
options: readonly GenericDropdownMenuOption<T>[] | readonly GenericDropdownMenuGroup<T>[];
@@ -105,11 +111,7 @@ type IProps<T> = WithKeyFunction<T> & {
105111
onOpen?: (ev: ButtonEvent) => void;
106112
onClose?: (ev: ButtonEvent) => void;
107113
className?: string;
108-
AdditionalOptions?: FunctionComponent<{
109-
menuDisplayed: boolean;
110-
closeMenu: () => void;
111-
openMenu: () => void;
112-
}>;
114+
AdditionalOptions?: FunctionComponent<AdditionalOptionsProps>;
113115
};
114116

115117
export function GenericDropdownMenu<T>({

‎src/components/structures/ThreadPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export const ThreadPanelHeader: React.FC<{
117117
) : null;
118118

119119
const onMarkAllThreadsReadClick = React.useCallback(
120-
(e) => {
120+
(e: React.MouseEvent) => {
121121
PosthogTrackers.trackInteraction("WebThreadsMarkAllReadButton", e);
122122
if (!roomContext.room) {
123123
logger.error("No room in context to mark all threads read");

‎src/components/structures/auth/Registration.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -248,15 +248,20 @@ export default class Registration extends React.Component<IProps, IState> {
248248
logger.error("Failed to get login flows to check for SSO support", e);
249249
}
250250

251-
this.setState(({ flows }) => ({
252-
matrixClient: cli,
253-
ssoFlow,
254-
oidcNativeFlow,
255-
// if we are using oidc native we won't continue with flow discovery on HS
256-
// so set an empty array to indicate flows are no longer loading
257-
flows: oidcNativeFlow ? [] : flows,
258-
busy: false,
259-
}));
251+
await new Promise<void>((resolve) => {
252+
this.setState(
253+
({ flows }) => ({
254+
matrixClient: cli,
255+
ssoFlow,
256+
oidcNativeFlow,
257+
// if we are using oidc native we won't continue with flow discovery on HS
258+
// so set an empty array to indicate flows are no longer loading
259+
flows: oidcNativeFlow ? [] : flows,
260+
busy: false,
261+
}),
262+
resolve,
263+
);
264+
});
260265

261266
// don't need to check with homeserver for login flows
262267
// since we are going to use OIDC native flow

‎src/components/views/avatars/BaseAvatar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ limitations under the License.
1919

2020
import React, { forwardRef, useCallback, useContext, useEffect, useState } from "react";
2121
import classNames from "classnames";
22-
import { ClientEvent } from "matrix-js-sdk/src/matrix";
22+
import { ClientEvent, SyncState } from "matrix-js-sdk/src/matrix";
2323
import { Avatar } from "@vector-im/compound-web";
2424

2525
import SettingsStore from "../../../settings/SettingsStore";
@@ -80,7 +80,7 @@ const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [
8080
}, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
8181

8282
const cli = useContext(MatrixClientContext);
83-
const onClientSync = useCallback((syncState, prevState) => {
83+
const onClientSync = useCallback((syncState: SyncState, prevState: SyncState | null) => {
8484
// Consider the client reconnected if there is no error with syncing.
8585
// This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
8686
const reconnected = syncState !== "ERROR" && prevState !== syncState;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ interface OptionProps {
2626
id?: string;
2727
className?: string;
2828
onClick: ((ev: ButtonEvent) => void) | null;
29+
children?: ReactNode;
2930
}
3031

3132
export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment, className, ...props }) => {

‎src/components/views/directory/NetworkDropdown.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,11 @@ import SdkConfig from "../../../SdkConfig";
2626
import { SettingLevel } from "../../../settings/SettingLevel";
2727
import SettingsStore from "../../../settings/SettingsStore";
2828
import { Protocols } from "../../../utils/DirectoryUtils";
29-
import { GenericDropdownMenu, GenericDropdownMenuItem } from "../../structures/GenericDropdownMenu";
29+
import {
30+
AdditionalOptionsProps,
31+
GenericDropdownMenu,
32+
GenericDropdownMenuItem,
33+
} from "../../structures/GenericDropdownMenu";
3034
import TextInputDialog from "../dialogs/TextInputDialog";
3135
import AccessibleButton from "../elements/AccessibleButton";
3236
import withValidation from "../elements/Validation";
@@ -181,7 +185,7 @@ export const NetworkDropdown: React.FC<IProps> = ({ protocols, config, setConfig
181185
}));
182186

183187
const addNewServer = useCallback(
184-
({ closeMenu }) => (
188+
({ closeMenu }: AdditionalOptionsProps) => (
185189
<>
186190
<span className="mx_GenericDropdownMenu_divider" />
187191
<MenuItemRadio

‎src/components/views/elements/PersistentApp.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
1515
limitations under the License.
1616
*/
1717

18-
import React, { ContextType, CSSProperties, MutableRefObject } from "react";
18+
import React, { ContextType, CSSProperties, MutableRefObject, ReactNode } from "react";
1919
import { Room } from "matrix-js-sdk/src/matrix";
2020

2121
import WidgetUtils from "../../../utils/WidgetUtils";
@@ -28,6 +28,7 @@ interface IProps {
2828
persistentRoomId: string;
2929
pointerEvents?: CSSProperties["pointerEvents"];
3030
movePersistedElement: MutableRefObject<(() => void) | undefined>;
31+
children?: ReactNode;
3132
}
3233

3334
export default class PersistentApp extends React.Component<IProps> {

‎src/components/views/messages/RoomPredecessorTile.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ limitations under the License.
1717

1818
import React, { useCallback, useContext } from "react";
1919
import { logger } from "matrix-js-sdk/src/logger";
20-
import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
20+
import { MatrixEvent, Room, RoomState } from "matrix-js-sdk/src/matrix";
2121

2222
import dis from "../../../dispatcher/dispatcher";
2323
import { Action } from "../../../dispatcher/actions";
@@ -52,7 +52,7 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
5252
const predecessor = useRoomState(
5353
roomContext.room,
5454
useCallback(
55-
(state) => state.findPredecessor(msc3946ProcessDynamicPredecessor),
55+
(state: RoomState) => state.findPredecessor(msc3946ProcessDynamicPredecessor),
5656
[msc3946ProcessDynamicPredecessor],
5757
),
5858
);
@@ -63,9 +63,9 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
6363

6464
dis.dispatch<ViewRoomPayload>({
6565
action: Action.ViewRoom,
66-
event_id: predecessor.eventId,
66+
event_id: predecessor?.eventId,
6767
highlighted: true,
68-
room_id: predecessor.roomId,
68+
room_id: predecessor?.roomId,
6969
metricsTrigger: "Predecessor",
7070
metricsViaKeyboard: e.type !== "click",
7171
});
@@ -126,7 +126,7 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
126126

127127
const predecessorPermalink = prevRoom
128128
? createLinkWithRoom(prevRoom, predecessor.roomId, predecessor.eventId)
129-
: createLinkWithoutRoom(predecessor.roomId, predecessor.viaServers, predecessor.eventId);
129+
: createLinkWithoutRoom(predecessor.roomId, predecessor?.viaServers ?? [], predecessor.eventId);
130130

131131
const link = (
132132
<a href={predecessorPermalink} onClick={onLinkClicked}>

‎src/components/views/messages/TextualEvent.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ interface IProps {
2727

2828
export default class TextualEvent extends React.Component<IProps> {
2929
public static contextType = RoomContext;
30+
public declare context: React.ContextType<typeof RoomContext>;
3031

3132
public render(): React.ReactNode {
3233
const text = TextForEvent.textForEvent(

‎src/components/views/messages/TimelineSeparator.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
import React from "react";
17+
import React, { ReactNode } from "react";
1818

1919
interface Props {
2020
label: string;
21+
children?: ReactNode;
2122
}
2223

2324
export const enum SeparatorKind {

0 commit comments

Comments
 (0)