Merge pull request LucasBassetti#191 from pascalgagneur/Removed-React-unsafe-lifecycle-methods

Removed react unsafe lifecycle methods

Author: LucasBassetti

example/components/Example.jsx

@@ -24,7 +24,9 @@ const steps = [
 
 const ThemedExample = () => (
   <ThemeProvider theme={otherFontTheme}>
+    <React.StrictMode>
     <ChatBot steps={steps} />
+    </React.StrictMode>
   </ThemeProvider>
 );
 

lib/ChatBot.jsx

@@ -55,7 +55,7 @@ class ChatBot extends Component {
     this.speak = speakFn(props.speechSynthesis);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const { steps } = this.props;
     const {
       botDelay,
@@ -98,6 +98,23 @@ class ChatBot extends Component {
       chatSteps[firstStep.id].message = firstStep.message;
     }
 
+    const { recognitionEnable } = this.state;
+    const { recognitionLang } = this.props;
+
+    if (recognitionEnable) {
+      this.recognition = new Recognition(
+        this.onRecognitionChange,
+        this.onRecognitionEnd,
+        this.onRecognitionStop,
+        recognitionLang
+      );
+    }
+
+    if (this.content) {
+      this.content.addEventListener('DOMNodeInserted', this.onNodeInserted);
+      window.addEventListener('resize', this.onResize);
+    }
+
     const { currentStep, previousStep, previousSteps, renderedSteps } = storage.getData(
       {
         cacheName,
@@ -127,31 +144,15 @@ class ChatBot extends Component {
     });
   }
 
-  componentDidMount() {
-    const { recognitionEnable } = this.state;
-    const { recognitionLang } = this.props;
-
-    if (recognitionEnable) {
-      this.recognition = new Recognition(
-        this.onRecognitionChange,
-        this.onRecognitionEnd,
-        this.onRecognitionStop,
-        recognitionLang
-      );
-    }
-
-    if (this.content) {
-      this.content.addEventListener('DOMNodeInserted', this.onNodeInserted);
-      window.addEventListener('resize', this.onResize);
-    }
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-    const { opened } = nextProps;
-
-    if (opened !== undefined && opened !== nextState.opened) {
-      this.setState({ opened });
+  static getDerivedStateFromProps(props, state) {
+    const { opened, toggleFloating } = props;
+    if (toggleFloating !== undefined && opened !== undefined && opened !== state.opened) {
+      return {
+        ...state,
+        opened
+      };
     }
+    return state;
   }
 
   componentWillUnmount() {