diff --git a/examples/index.jsx b/examples/index.jsx index e3402d3..fac013b 100644 --- a/examples/index.jsx +++ b/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 {

{data.title}

{data.body}

-
@@ -148,12 +147,28 @@ class App extends React.Component { }); } + navigateHome() { + this.setState({ + articleId: null, + }); + } + render() { return (
{this.state.articleId ? -
- : +
+
+
+ +
+
+ : }
diff --git a/src/CommentCount.jsx b/src/CommentCount.jsx index 182ab8b..51eeae7 100644 --- a/src/CommentCount.jsx +++ b/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() { diff --git a/src/DiscussionEmbed.jsx b/src/DiscussionEmbed.jsx index 7fc5f0c..bc29ee6 100644 --- a/src/DiscussionEmbed.jsx +++ b/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) { diff --git a/src/Recommendations.jsx b/src/Recommendations.jsx index c9a348a..42a4f19 100644 --- a/src/Recommendations.jsx +++ b/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() { diff --git a/src/utils.js b/src/utils.js index 56c69a4..7741ec0 100644 --- a/src/utils.js +++ b/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 () { diff --git a/tests/CommentCount.js b/tests/CommentCount.js index 3547646..38b0c59 100644 --- a/tests/CommentCount.js +++ b/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(); }); diff --git a/tests/DiscussionEmbed.js b/tests/DiscussionEmbed.js index d1630e0..d647ca2 100644 --- a/tests/DiscussionEmbed.js +++ b/tests/DiscussionEmbed.js @@ -52,8 +52,11 @@ test('Cleans script and window attributes on unmount', () => { const { baseElement, unmount } = render(); 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(); }); diff --git a/tests/Recommendations.js b/tests/Recommendations.js index f811949..43cc4f5 100644 --- a/tests/Recommendations.js +++ b/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(); });