imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove all usages of UNSAFE_* React methods (#9583)

Browse source
This commit is contained in:
Michael Telatynski 2022-11-18 09:22:43 +00:00 • committed by GitHub
parent 38dbe8ed33
commit 590b845f3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 585 additions and 413 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/views/rooms/EventTile.tsx
View file

@ -369,12 +369,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
return true;
}
// TODO: [REACT-WARNING] Move into constructor
// eslint-disable-next-line
UNSAFE_componentWillMount() {
this.verifyEvent(this.props.mxEvent);
}
componentDidMount() {
this.suppressReadReceiptAnimation = false;
const client = MatrixClientPeg.get();
@ -405,6 +399,8 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
const room = client.getRoom(this.props.mxEvent.getRoomId());
room?.on(ThreadEvent.New, this.onNewThread);
this.verifyEvent(this.props.mxEvent);
}
private get supportsThreadNotifications(): boolean {
@ -451,16 +447,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
this.setState({ thread });
};
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
// eslint-disable-next-line
UNSAFE_componentWillReceiveProps(nextProps: EventTileProps) {
// re-check the sender verification as outgoing events progress through
// the send process.
if (nextProps.eventSendStatus !== this.props.eventSendStatus) {
this.verifyEvent(nextProps.mxEvent);
}
}
shouldComponentUpdate(nextProps: EventTileProps, nextState: IState): boolean {
if (objectHasDiff(this.state, nextState)) {
return true;
@ -490,12 +476,16 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
}
}
componentDidUpdate() {
componentDidUpdate(prevProps: Readonly<EventTileProps>) {
// If we're not listening for receipts and expect to be, register a listener.
if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
MatrixClientPeg.get().on(RoomEvent.Receipt, this.onRoomReceipt);
this.isListeningForReceipts = true;
}
// re-check the sender verification as outgoing events progress through the send process.
if (prevProps.eventSendStatus !== this.props.eventSendStatus) {
this.verifyEvent(this.props.mxEvent);
}
}
private onNewThread = (thread: Thread) => {

5
src/components/views/rooms/MemberList.tsx
View file

@ -96,8 +96,7 @@ export default class MemberList extends React.Component<IProps, IState> {
this.showPresence = enablePresenceByHsUrl?.[hsUrl] ?? true;
}
// eslint-disable-next-line
UNSAFE_componentWillMount() {
public componentDidMount() {
const cli = MatrixClientPeg.get();
this.mounted = true;
if (cli.hasLazyLoadMembersEnabled()) {
@ -121,7 +120,7 @@ export default class MemberList extends React.Component<IProps, IState> {
cli.on(UserEvent.CurrentlyActive, this.onUserPresenceChange);
}
componentWillUnmount() {
public componentWillUnmount() {
this.mounted = false;
const cli = MatrixClientPeg.get();
if (cli) {

19
src/components/views/rooms/SendMessageComposer.tsx
View file

@ -159,7 +159,9 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
};
constructor(props: ISendMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
super(props);
super(props, context);
this.context = context; // otherwise React will only set it prior to render due to type def above
if (this.props.mxClient.isCryptoEnabled() && this.props.mxClient.isRoomEncrypted(this.props.room.roomId)) {
this.prepareToEncrypt = throttle(() => {
this.props.mxClient.prepareToEncrypt(this.props.room);
@ -167,6 +169,12 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
}
window.addEventListener("beforeunload", this.saveStoredEditorState);
const partCreator = new CommandPartCreator(this.props.room, this.props.mxClient);
const parts = this.restoreStoredEditorState(partCreator) || [];
this.model = new EditorModel(parts, partCreator);
this.dispatcherRef = dis.register(this.onAction);
this.sendHistoryManager = new SendHistoryManager(this.props.room.roomId, 'mx_cider_history_');
}
public componentDidUpdate(prevProps: ISendMessageComposerProps): void {
@ -456,15 +464,6 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
this.saveStoredEditorState();
}
// TODO: [REACT-WARNING] Move this to constructor
UNSAFE_componentWillMount() { // eslint-disable-line
const partCreator = new CommandPartCreator(this.props.room, this.props.mxClient);
const parts = this.restoreStoredEditorState(partCreator) || [];
this.model = new EditorModel(parts, partCreator);
this.dispatcherRef = dis.register(this.onAction);
this.sendHistoryManager = new SendHistoryManager(this.props.room.roomId, 'mx_cider_history_');
}
private get editorStateKey() {
let key = `mx_cider_state_${this.props.room.roomId}`;
if (this.props.relation?.rel_type === THREAD_RELATION_TYPE.name) {