Remove usage of legacy and soon deprecated lifecycle methods

lib/components/notification.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {NotificationProps} from '../hyper';
+import {NotificationProps, NotificationState} from '../hyper';
 
-export default class Notification extends React.PureComponent<NotificationProps, {dismissing: boolean}> {
+export default class Notification extends React.PureComponent<NotificationProps, NotificationState> {
   dismissTimer!: NodeJS.Timeout;
   constructor(props: NotificationProps) {
     super(props);
@@ -15,15 +15,15 @@ export default class Notification extends React.PureComponent<NotificationProps,
       this.setDismissTimer();
     }
   }
-  //TODO: Remove usage of legacy and soon deprecated lifecycle methods
-  UNSAFE_componentWillReceiveProps(next: NotificationProps) {
+
+  componentDidUpdate(prevProps: NotificationProps, prevState: NotificationState) {
     // if we have a timer going and the notification text
     // changed we reset the timer
-    if (next.text !== this.props.text) {
-      if (this.props.dismissAfter) {
+    if (this.props.text !== prevProps.text) {
+      if (prevProps.dismissAfter) {
         this.resetDismissTimer();
       }
-      if (this.state.dismissing) {
+      if (prevState.dismissing) {
         this.setState({dismissing: false});
       }
     }

lib/components/term.js

@@ -354,65 +354,6 @@ export default class Term extends React.PureComponent {
     }
   }
 
-  //TODO: Remove usage of legacy and soon deprecated lifecycle methods
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!this.props.cleared && nextProps.cleared) {
-      this.clear();
-    }
-
-    const nextTermOptions = getTermOptions(nextProps);
-
-    // Use bellSound in nextProps if it exists
-    // otherwise use the default sound found in xterm.
-    nextTermOptions.bellSound = nextProps.bellSound || this.termDefaultBellSound;
-
-    if (!this.props.search && nextProps.search) {
-      this.search();
-    }
-
-    // Update only options that have changed.
-    Object.keys(nextTermOptions)
-      .filter(option => option !== 'theme' && nextTermOptions[option] !== this.termOptions[option])
-      .forEach(option => {
-        try {
-          this.term.setOption(option, nextTermOptions[option]);
-        } catch (e) {
-          if (/The webgl renderer only works with the webgl char atlas/i.test(e.message)) {
-            // Ignore this because the char atlas will also be changed
-          } else {
-            throw e;
-          }
-        }
-      });
-
-    // Do we need to update theme?
-    const shouldUpdateTheme =
-      !this.termOptions.theme ||
-      nextTermOptions.rendererType !== this.termOptions.rendererType ||
-      Object.keys(nextTermOptions.theme).some(
-        option => nextTermOptions.theme[option] !== this.termOptions.theme[option]
-      );
-    if (shouldUpdateTheme) {
-      this.term.setOption('theme', nextTermOptions.theme);
-    }
-
-    this.termOptions = nextTermOptions;
-
-    if (
-      this.props.fontSize !== nextProps.fontSize ||
-      this.props.fontFamily !== nextProps.fontFamily ||
-      this.props.lineHeight !== nextProps.lineHeight ||
-      this.props.letterSpacing !== nextProps.letterSpacing
-    ) {
-      // resize to fit the container
-      this.fitResize();
-    }
-
-    if (nextProps.rows !== this.props.rows || nextProps.cols !== this.props.cols) {
-      this.resize(nextProps.cols, nextProps.rows);
-    }
-  }
-
   onTermWrapperRef = component => {
     this.termWrapperRef = component;
 

lib/containers/hyper.tsx

@@ -13,27 +13,26 @@ import {HyperState, HyperProps, HyperDispatch} from '../hyper';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
-class Hyper extends React.PureComponent<HyperProps, {lastConfigUpdate: number}> {
+class Hyper extends React.PureComponent<HyperProps> {
   mousetrap!: MousetrapInstance;
   terms: any;
   constructor(props: HyperProps) {
     super(props);
-    this.state = {
-      lastConfigUpdate: 0
-    };
   }
-  //TODO: Remove usage of legacy and soon deprecated lifecycle methods
-  UNSAFE_componentWillReceiveProps(next: HyperProps) {
-    if (this.props.backgroundColor !== next.backgroundColor) {
+
+  componentDidUpdate(prev: HyperProps) {
+    if (this.props.backgroundColor !== prev.backgroundColor) {
       // this can be removed when `setBackgroundColor` in electron
       // starts working again
-      document.body.style.backgroundColor = next.backgroundColor;
+      document.body.style.backgroundColor = this.props.backgroundColor;
     }
-    const {lastConfigUpdate} = next;
-    if (lastConfigUpdate && lastConfigUpdate !== this.state.lastConfigUpdate) {
-      this.setState({lastConfigUpdate});
+    const {lastConfigUpdate} = this.props;
+    if (lastConfigUpdate && lastConfigUpdate !== prev.lastConfigUpdate) {
       this.attachKeyListeners();
     }
+    if (prev.activeSession !== this.props.activeSession) {
+      this.handleFocusActive(this.props.activeSession!);
+    }
   }
 
   handleFocusActive = (uid: string) => {
@@ -87,12 +86,6 @@ class Hyper extends React.PureComponent<HyperProps, {lastConfigUpdate: number}>
     window.focusActiveTerm = this.handleFocusActive;
   };
 
-  componentDidUpdate(prev: HyperProps) {
-    if (prev.activeSession !== this.props.activeSession) {
-      this.handleFocusActive(this.props.activeSession!);
-    }
-  }
-
   componentWillUnmount() {
     document.body.style.backgroundColor = 'inherit';
     this.mousetrap && this.mousetrap.reset();

lib/hyper.d.ts

@@ -252,6 +252,10 @@ export type NotificationProps = {
   userDismissColor?: string;
 } & extensionProps;
 
+export type NotificationState = {
+  dismissing: boolean;
+};
+
 export type SplitPaneProps = {
   borderColor: string;
   direction: 'horizontal' | 'vertical';