Improve component resources cleanup

examples/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { DiscussionEmbed, CommentCount, CommentEmbed, Recommendations } from 'disqus-react';
+import { DiscussionEmbed, CommentCount, CommentEmbed } from 'disqus-react';
 
 /* eslint-disable max-len */
 const ARTICLES = {
@@ -114,7 +114,6 @@ class Article extends React.Component {
                 <div className="article-body">
                     <h1>{data.title}</h1>
                     <p>{data.body}</p>
-                    <Recommendations shortname={this.props.disqusShortname} />
                     <DiscussionEmbed shortname={this.props.disqusShortname} config={threadConfig} />
                 </div>
             </div>
@@ -148,12 +147,28 @@ class App extends React.Component {
         });
     }
 
+    navigateHome() {
+        this.setState({
+            articleId: null,
+        });
+    }
+
     render() {
         return (
             <div className="container">
                 {this.state.articleId ?
-                    <Article id={this.state.articleId} disqusShortname={this.state.disqusShortname} />
-                    : <Home disqusShortname={this.state.disqusShortname} />
+                    <div>
+                        <Article
+                            id={this.state.articleId}
+                            disqusShortname={this.state.disqusShortname}
+                        />
+                        <div className="button-wrapper">
+                            <button onClick={this.navigateHome.bind(this)}>Back</button>
+                        </div>
+                    </div>
+                    : <Home
+                        disqusShortname={this.state.disqusShortname}
+                    />
                 }
                 <div className="button-wrapper">
                     <button onClick={this.changeShortname.bind(this)}>Change shortname</button>

src/CommentCount.jsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { insertScript, removeScript, debounce, shallowComparison } from './utils';
+import {
+    insertScript,
+    removeScript,
+    debounce,
+    shallowComparison,
+    removeResources,
+} from './utils';
 // Constants
 import {
     COMMENT_COUNT_CLASS,
@@ -48,6 +54,7 @@ export class CommentCount extends React.Component {
 
         // count.js only reassigns this window object if it's undefined.
         window.DISQUSWIDGETS = undefined;
+        removeResources();
     }
 
     render() {

src/DiscussionEmbed.jsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { insertScript, removeScript, shallowComparison } from './utils';
+import {
+    insertScript,
+    removeResources,
+    removeScript,
+    shallowComparison,
+} from './utils';
 // Constants
 import {
     CALLBACKS,
@@ -64,6 +69,7 @@ export class DiscussionEmbed extends React.Component {
             while (disqusThread.hasChildNodes())
                 disqusThread.removeChild(disqusThread.firstChild);
         }
+        removeResources();
     }
 
     getDisqusConfig(config) {

src/Recommendations.jsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { insertScript, removeScript, shallowComparison } from './utils';
+import {
+    insertScript,
+    removeScript,
+    shallowComparison,
+    removeResources,
+} from './utils';
 // Constants
 import {
     RECOMMENDATIONS_ID,
@@ -72,6 +77,7 @@ export class Recommendations extends React.Component {
             while (recommendations.hasChildNodes())
                 recommendations.removeChild(recommendations.firstChild);
         }
+        removeResources();
     }
 
     render() {

src/utils.js

@@ -16,6 +16,15 @@ export function removeScript(id, parentElement) {
         parentElement.removeChild(script);
 }
 
+export function removeResources() {
+    // Remove the bundles that the Disqus scripts add to prevent duplicated resources when navigating between pages
+    const disqusResources = window.document.querySelectorAll(
+        // eslint-disable-next-line max-len
+        'link[href*="disquscdn.com/next/embed"], link[href*="disquscdn.com/next/recommendations"], link[href*="disqus.com/next/config.js"], script[src*="disquscdn.com/next/embed"], script[src*="disqus.com/count-data.js"], iframe[title="Disqus"]'
+    );
+    disqusResources.forEach(el => el.remove());
+}
+
 export function debounce(func, wait, runOnFirstCall) {
     let timeout;
     return function () {

tests/CommentCount.js

@@ -80,6 +80,9 @@ test('Cleans script and window attributes on unmount', () => {
     const scriptQuery = baseElement.querySelectorAll(`#${COMMENT_COUNT_SCRIPT_ID}`);
     // Make sure the script is removed
     expect(scriptQuery.length).toEqual(0);
+    // Make sure the resources created by the count script are removed
+    const resourcesQuery = baseElement.querySelectorAll('script[src*="disqus.com/count-data.js"]');
+    expect(resourcesQuery.length).toEqual(0);
     // Make sure window.DISQUSWIDGETS is removed
     expect(global.window.DISQUSWIDGETS).toBeUndefined();
 });

tests/DiscussionEmbed.js

@@ -52,8 +52,11 @@ test('Cleans script and window attributes on unmount', () => {
     const { baseElement, unmount } = render(<Component config={DISQUS_CONFIG} />);
     unmount();
     const scriptQuery = baseElement.querySelectorAll(`#${EMBED_SCRIPT_ID}`);
-    // Make sure the script is removed
+    // Make sure the embed script is removed
     expect(scriptQuery.length).toEqual(0);
+    // Make sure the resources created by the embed script are removed
+    const resourcesQuery = baseElement.querySelectorAll('link[href*="disquscdn.com/next/embed"], link[href*="disqus.com/next/config.js"], script[src*="disquscdn.com/next/embed"]');
+    expect(resourcesQuery.length).toEqual(0);
     // Make sure window.DISQUS is removed
     expect(global.window.DISQUS).toBeUndefined();
 });

tests/Recommendations.js

@@ -54,6 +54,9 @@ test('Cleans script and window attributes on unmount', () => {
     const scriptQuery = baseElement.querySelectorAll(`#${RECOMMENDATIONS_SCRIPT_ID}`);
     // Make sure the script is removed
     expect(scriptQuery.length).toEqual(0);
+    // Make sure the resources created by the embed script are removed
+    const resourcesQuery = baseElement.querySelectorAll('link[href*="disquscdn.com/next/recommendations"]');
+    expect(resourcesQuery.length).toEqual(0);
     // Make sure window.DISQUS is removed
     expect(global.window.DISQUS_RECOMMENDATIONS).toBeUndefined();
 });