Upgrade target to es2022 (#12852)

* Upgrade target to es2021

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

* Upgrade to es2022

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

* Fix babel config

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

* Fix React contexts

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

* Fix types

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

* Fix React state

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

* Iterate

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

---------

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

src/components/views/rooms/Autocomplete.tsx

@@ -56,7 +56,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     private containerRef = createRef<HTMLDivElement>();
 
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);

src/components/views/rooms/EditMessageComposer.tsx

@@ -129,7 +129,7 @@ interface IState {
 
 class EditMessageComposer extends React.Component<IEditMessageComposerProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private readonly editorRef = createRef<BasicMessageComposer>();
     private readonly dispatcherRef: string;
@@ -138,7 +138,6 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
 
     public constructor(props: IEditMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);
-        this.context = context; // otherwise React will only set it prior to render due to type def above
 
         const isRestored = this.createEditorModel();
         const ev = this.props.editState.getEvent();

src/components/views/rooms/EventTile.tsx

@@ -297,7 +297,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
     };
 
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private unmounted = false;
 

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -493,7 +493,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
     };
 
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
     private readonly client = this.props.room.client;
     private readonly featureAskToJoinWatcher: string;
 

src/components/views/rooms/MemberList.tsx

@@ -82,7 +82,7 @@ export default class MemberList extends React.Component<IProps, IState> {
     private mounted = false;
 
     public static contextType = SDKContext;
-    public context!: React.ContextType<typeof SDKContext>;
+    public declare context: React.ContextType<typeof SDKContext>;
     private tiles: Map<string, MemberTile> = new Map();
 
     public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {

src/components/views/rooms/MessageComposer.tsx

@@ -119,7 +119,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
     private _voiceRecording: Optional<VoiceMessageRecording>;
 
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public static defaultProps = {
         compact: false,

src/components/views/rooms/MessageComposerButtons.tsx

@@ -298,7 +298,7 @@ interface IPollButtonProps {
 
 class PollButton extends React.PureComponent<IPollButtonProps> {
     public static contextType = OverflowMenuContext;
-    public context!: React.ContextType<typeof OverflowMenuContext>;
+    public declare context: React.ContextType<typeof OverflowMenuContext>;
 
     private onCreateClick = (): void => {
         this.context?.(); // close overflow menu

src/components/views/rooms/PinnedEventTile.tsx

@@ -40,7 +40,7 @@ const AVATAR_SIZE = "24px";
 
 export default class PinnedEventTile extends React.Component<IProps> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     private onTileClicked = (): void => {
         dis.dispatch<ViewRoomPayload>({

src/components/views/rooms/ReplyPreview.tsx

@@ -39,7 +39,7 @@ interface IProps {
 
 export default class ReplyPreview extends React.Component<IProps> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public render(): JSX.Element | null {
         if (!this.props.replyToEvent) return null;

src/components/views/rooms/RoomList.tsx

@@ -432,7 +432,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     private treeRef = createRef<HTMLDivElement>();
 
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);

src/components/views/rooms/RoomUpgradeWarningBar.tsx

@@ -33,7 +33,7 @@ interface IState {
 
 export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);

src/components/views/rooms/SearchResultTile.tsx

@@ -44,7 +44,7 @@ interface IProps {
 
 export default class SearchResultTile extends React.Component<IProps> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     // A map of <callId, LegacyCallEventGrouper>
     private callEventGroupers = new Map<string, LegacyCallEventGrouper>();

src/components/views/rooms/SendMessageComposer.tsx

@@ -254,7 +254,7 @@ interface ISendMessageComposerProps extends MatrixClientProps {
 
 export class SendMessageComposer extends React.Component<ISendMessageComposerProps> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private readonly prepareToEncrypt?: DebouncedFunc<() => void>;
     private readonly editorRef = createRef<BasicMessageComposer>();
@@ -269,7 +269,6 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
 
     public constructor(props: ISendMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
         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(

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -63,7 +63,7 @@ interface IState {
  */
 export default class VoiceRecordComposerTile extends React.PureComponent<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
     private voiceRecordingId: string;
 
     public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {