Merge pull request #6 from saurabhnemade/component-unmount-slow-network

Component unmount slow network
saurabhnemade · Oct 23, 2018 · a7f0dda · a7f0dda
2 parents ad9ab83 + cc3a29f
commit a7f0dda
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-twitter-embed",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React Twitter Embed Components",
   "main": "dist/index.js",
   "author": "Saurabh Nemade",

diff --git a/src/components/TwitterDMButton.js b/src/components/TwitterDMButton.js
@@ -24,14 +24,20 @@ export default class TwitterDMButton extends Component {
         return;
       }
 
-      window.twttr.widgets.createDMButton(
-        this.props.id,
-        this.refs.embedContainer,
-        this.props.options
-      );
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createDMButton(
+          this.props.id,
+          this.refs.embedContainer,
+          this.props.options
+        );
+      }
     });
   }
 
+  componentWillUnmount() {
+    this.isMountCanceled = true;
+  }
+
   render() {
     return (
       <div ref="embedContainer" />

diff --git a/src/components/TwitterFollowButton.js b/src/components/TwitterFollowButton.js
@@ -23,15 +23,21 @@ export default class TwitterFollowButton extends Component {
         console.error('Failure to load window.twttr, aborting load.');
         return;
       }
-
-      window.twttr.widgets.createFollowButton(
-                this.props.screenName,
-                this.refs.embedContainer,
-                this.props.options
-            );
+
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createFollowButton(
+                  this.props.screenName,
+                  this.refs.embedContainer,
+                  this.props.options
+              );
+      }
     });
   }
 
+  componentWillUnmount() {
+    this.isMountCanceled = true;
+  }
+
   render() {
     return (
       <div ref="embedContainer" />

diff --git a/src/components/TwitterHashtagButton.js b/src/components/TwitterHashtagButton.js
@@ -24,14 +24,20 @@ export default class TwitterHashtagButton extends Component {
         return;
       }
 
-      window.twttr.widgets.createHashtagButton(
-                this.props.tag,
-                this.refs.embedContainer,
-                this.props.options
-            );
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createHashtagButton(
+                  this.props.tag,
+                  this.refs.embedContainer,
+                  this.props.options
+              );
+      }
     });
   }
 
+  componentWillUnmount() {
+    this.isMountCanceled = true;
+  }
+
   render() {
     return (
       <div ref="embedContainer" />

diff --git a/src/components/TwitterMentionButton.js b/src/components/TwitterMentionButton.js
@@ -24,14 +24,20 @@ export default class TwitterMentionButton extends Component {
         return;
       }
 
-      window.twttr.widgets.createMentionButton(
-        this.props.screenName,
-        this.refs.embedContainer,
-        this.props.options
-      );
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createMentionButton(
+          this.props.screenName,
+          this.refs.embedContainer,
+          this.props.options
+        );
+      }
     });
   }
 
+  componentWillUnmount() {
+    this.isMountCanceled = true;
+  }
+
   render() {
     return (
       <div ref="embedContainer" />

diff --git a/src/components/TwitterMomentShare.js b/src/components/TwitterMomentShare.js
@@ -24,14 +24,20 @@ export default class TwitterMomentShare extends Component {
         return;
       }
 
-      window.twttr.widgets.createMoment(
-        this.props.momentId,
-        this.refs.shareMoment,
-        this.props.options
-      );
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createMoment(
+          this.props.momentId,
+          this.refs.shareMoment,
+          this.props.options
+        );
+      }
     });
   }
 
+  componentWillUnmount() {
+    this.isMountCanceled = true;
+  }
+
   render() {
     return (
       <div ref="shareMoment" />

diff --git a/src/components/TwitterOnAirButton.js b/src/components/TwitterOnAirButton.js
@@ -24,14 +24,20 @@ export default class TwitterOnAirButton extends Component {
         return;
       }
 
-      window.twttr.widgets.createPeriscopeOnAirButton(
-        this.props.username,
-        this.refs.embedContainer,
-        this.props.options
-      );
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createPeriscopeOnAirButton(
+          this.props.username,
+          this.refs.embedContainer,
+          this.props.options
+        );
+      }
     });
   }
 
+  componentWillUnmount() {
+    this.isMountCanceled = true;
+  }
+
   render() {
     return (
       <div ref="embedContainer" />

diff --git a/src/components/TwitterShareButton.js b/src/components/TwitterShareButton.js
@@ -24,14 +24,20 @@ export default class TwitterShareButton extends Component {
         return;
       }
 
-      window.twttr.widgets.createShareButton(
-                this.props.url,
-                this.refs.embedContainer,
-                this.props.options
-            );
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createShareButton(
+                  this.props.url,
+                  this.refs.embedContainer,
+                  this.props.options
+              );
+      }
     });
   }
 
+  componentWillUnmount() {
+    this.isMountCanceled = true;
+  }
+
   render() {
     return (
       <div ref="embedContainer" />

diff --git a/src/components/TwitterTimelineEmbed.js b/src/components/TwitterTimelineEmbed.js
@@ -140,22 +140,28 @@ export default class TwitterTimelineEmbed extends Component {
         options.chrome = options.chrome + ' transparent';
       }
 
-      window.twttr.widgets.createTimeline(
-        {
-          sourceType: this.props.sourceType,
-          screenName: this.props.screenName,
-          userId: this.props.userId,
-          ownerScreenName: this.props.ownerScreenName,
-          slug: this.props.slug,
-          id: this.props.id || this.props.widgetId,
-          url: this.props.url
-        },
-        this.refs.embedContainer,
-        options
-      );
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createTimeline(
+          {
+            sourceType: this.props.sourceType,
+            screenName: this.props.screenName,
+            userId: this.props.userId,
+            ownerScreenName: this.props.ownerScreenName,
+            slug: this.props.slug,
+            id: this.props.id || this.props.widgetId,
+            url: this.props.url
+          },
+          this.refs.embedContainer,
+          options
+        );
+      }
     });
   }
 
+  componentWillUnmount() {
+    this.isMountCanceled = true;
+  }
+
   render() {
     return (
       <div ref="embedContainer"/>

diff --git a/src/components/TwitterVideoEmbed.js b/src/components/TwitterVideoEmbed.js
@@ -20,13 +20,19 @@ export default class TwitterVideoEmbed extends Component {
         return;
       }
 
-      window.twttr.widgets.createVideo(
-        this.props.id,
-        this.refs.embedContainer
-      );
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createVideo(
+          this.props.id,
+          this.refs.embedContainer
+        );
+      }
     });
   }
 
+  componentWillUnmount() {
+    this.isMountCanceled = true;
+  }
+
   render() {
     return (
       <div ref="embedContainer" />