Skip to content

Commit

Permalink
fix: clean up Disqus comments when component is destroyed
Browse files Browse the repository at this point in the history
  • Loading branch information
@brandonroberts
brandonroberts committed Jun 28, 2020
1 parent a6e4fba commit 987a43d
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 116 deletions.
4 changes: 4 additions & 0 deletions src/app/blog/comments.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ export class PostCommentsComponent implements AfterViewInit {
this.commentsService.initialize(config, this.renderer, this.el);
});
}

ngOnDestroy() {
this.commentsService.cleanupComments(this.el);
}
}

@NgModule({
Expand Down
50 changes: 35 additions & 15 deletions src/app/blog/comments.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,15 @@ export const WINDOW_TOKEN = new InjectionToken<WindowDisqus>('Window', {
},
});

export const DISQUS_TOKEN = new InjectionToken<Disqus>('DISQUS', {
providedIn: 'root',
factory: () => {
return (window as any).DISQUS;
},
});

@Injectable({
providedIn: 'root',
})
export class CommentsService {
readonly containerId = 'comments_thread';
private readonly scriptId = 'disqus-src';

constructor(
@Inject(WINDOW_TOKEN) private window: WindowDisqus,
@Inject(DISQUS_TOKEN) private disqus: Disqus
@Inject(WINDOW_TOKEN) private window: WindowDisqus
) {}

initialize(
Expand All @@ -71,24 +64,53 @@ export class CommentsService {
reset(page: DisqusConfig) {
const config = this.getConfig(page);

this.disqus.reset({
this.window.DISQUS.reset({
reload: true,
config,
});
}

/**
* Cleans up the Disqus script and comments,
* so switching between posts loads the correct comments.
* Code adapted from disqus-react:
*
* https://github.com/disqus/disqus-react/blob/master/src/DiscussionEmbed.jsx#L53
*
* @param el ElementRef that contains the Disqus comments
*/
cleanupComments(el: ElementRef) {
const disqusScript = document.getElementById(this.scriptId);

el.nativeElement.removeChild(disqusScript);
this.window.DISQUS.reset({});

try {
delete this.window.DISQUS;
} catch (error) {
this.window.DISQUS = undefined;
}

const thread = document.getElementById(this.containerId);

while(thread.hasChildNodes()) {
thread.removeChild(thread.firstChild);
}
}

private initialized() {
return !!this.disqus;
return !!this.window.DISQUS;
}

private initializeComments(
page: DisqusConfig,
renderer: Renderer2,
element: ElementRef
) {
this.getConfig(page);
this.window.disqus_config = this.getConfig(page);

const disqusScript = renderer.createElement('script');
disqusScript.id = this.scriptId;
disqusScript.src = `//${environment.disqusConfig.shortname}.disqus.com/embed.js`;
disqusScript.async = true;
disqusScript.type = 'text/javascript';
Expand All @@ -102,10 +124,8 @@ export class CommentsService {
}

private getConfig(page: DisqusConfig) {
this.window.disqus_config = function () {
return function () {
this.page = page;
};

return this.window.disqus_config;
}
}
102 changes: 1 addition & 101 deletions src/assets/scully-routes.json
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1 @@
[
{
"route": "/about",
"title": "About Me",
"description": "About Me",
"published": true,
"slug": "about",
"sourceFile": "about.md"
},
{
"route": "/talks",
"title": "Tech Talks and Appearances",
"description": "Stuff",
"published": true,
"slug": "talks",
"sourceFile": "talks.md"
},
{
"route": "/blog/posts/2019-03-04-handling-error-states-with-ngrx",
"title": "Handling Error States with NgRx",
"description": "Handling Error States with NgRx",
"published": true,
"slug": "2019-03-04-handling-error-states-with-ngrx",
"publishedDate": "2019-03-04T00:00:00.000Z",
"sourceFile": "2019-03-04-handling-error-states-with-ngrx.md"
},
{
"route": "/blog/posts/2019-03-27-custom-route-matching-angular-router",
"title": "Custom Route Matching with the Angular Router",
"description": "Custom Route Matching with the Angular Router",
"published": true,
"slug": "2019-03-27-custom-route-matching-angular-router",
"publishedDate": "2019-03-27T00:00:00.000Z",
"sourceFile": "2019-03-27-custom-route-matching-angular-router.md"
},
{
"route": "/blog/posts/2020-05-14-angular-unfiltered-001",
"title": "Angular Unfiltered Episode 001: Angular Forms w/Mike Ryan",
"description": "Chatting with Mike Ryan about Forms in Angular",
"published": true,
"slug": "2020-05-14-angular-unfiltered-001",
"publishedDate": "2020-05-14 02:00 PM CST",
"sourceFile": "2020-05-14-angular-unfiltered-001.md"
},
{
"route": "/blog/posts/2020-05-14-mixing-action-styles-ngrx",
"title": "Mixing Action Styles in NgRx State",
"description": "Mixing Action Styles in NgRx State",
"published": true,
"slug": "2020-05-14-mixing-action-styles-ngrx",
"publishedDate": "2020-05-14 02:00 PM CST",
"sourceFile": "2020-05-14-mixing-action-styles-ngrx.md"
},
{
"route": "/blog/posts/2020-05-15-angular-unfiltered-002",
"title": "Angular Unfiltered Episode 002: Angular Forms Pt. 2 w/Zack DeRose",
"description": "Chatting with Zack DeRose about Forms in Angular",
"published": true,
"slug": "2020-05-15-angular-unfiltered-002",
"publishedDate": "2020-05-15 02:00 PM CST",
"sourceFile": "2020-05-15-angular-unfiltered-002.md"
},
{
"route": "/blog/posts/2020-05-22-angular-unfiltered-003",
"title": "Angular Unfiltered Episode 003: Quick Chat w/Austin Akers",
"description": "Chatting with Austin Akers",
"published": true,
"slug": "2020-05-22-angular-unfiltered-003",
"publishedDate": "2020-05-22 02:00 PM CST",
"sourceFile": "2020-05-22-angular-unfiltered-003.md"
},
{
"route": "/blog/posts/2020-05-22-angular-unfiltered-004",
"title": "Angular Unfiltered Episode 004: Quick Chat w/Devin Shoemaker",
"description": "Chatting with Devin Shoemaker",
"published": true,
"slug": "2020-05-22-angular-unfiltered-004",
"publishedDate": "2020-06-12 02:00 PM CST",
"sourceFile": "2020-06-12-angular-unfiltered-004.md"
},
{
"route": "/blog/posts/2020-06-19-angular-unfiltered-005",
"title": "Angular Unfiltered Episode 005: Quick Chat w/Luke Howell",
"description": "Chatting with Luke Howell",
"published": true,
"slug": "2020-06-19-angular-unfiltered-005",
"publishedDate": "2020-06-19 02:00 PM CST",
"sourceFile": "2020-06-19-angular-unfiltered-005.md"
},
{
"route": "/blog/posts/2020-06-26-angular-unfiltered-006",
"title": "Angular Unfiltered Episode 006: Quick Chat w/Bryan Wilhite",
"description": "Chatting with Bryan Wilhite",
"published": true,
"slug": "2020-06-26-angular-unfiltered-006",
"publishedDate": "2020-06-26 02:00 PM CST",
"sourceFile": "2020-06-26-angular-unfiltered-006.md"
},
{ "route": "/blog" },
{ "route": "/" }
]
[{"route":"/about","title":"About Me","description":"About Me","published":true,"slug":"about","sourceFile":"about.md"},{"route":"/talks","title":"Tech Talks and Appearances","description":"Stuff","published":true,"slug":"talks","sourceFile":"talks.md"},{"route":"/blog/posts/2019-03-04-handling-error-states-with-ngrx","title":"Handling Error States with NgRx","description":"Handling Error States with NgRx","published":true,"slug":"2019-03-04-handling-error-states-with-ngrx","publishedDate":"2019-03-04T00:00:00.000Z","sourceFile":"2019-03-04-handling-error-states-with-ngrx.md"},{"route":"/blog/posts/2019-03-27-custom-route-matching-angular-router","title":"Custom Route Matching with the Angular Router","description":"Custom Route Matching with the Angular Router","published":true,"slug":"2019-03-27-custom-route-matching-angular-router","publishedDate":"2019-03-27T00:00:00.000Z","sourceFile":"2019-03-27-custom-route-matching-angular-router.md"},{"route":"/blog/posts/2020-05-14-angular-unfiltered-001","title":"Angular Unfiltered Episode 001: Angular Forms w/Mike Ryan","description":"Chatting with Mike Ryan about Forms in Angular","published":true,"slug":"2020-05-14-angular-unfiltered-001","publishedDate":"2020-05-14 02:00 PM CST","sourceFile":"2020-05-14-angular-unfiltered-001.md"},{"route":"/blog/posts/2020-05-14-mixing-action-styles-ngrx","title":"Mixing Action Styles in NgRx State","description":"Mixing Action Styles in NgRx State","published":true,"slug":"2020-05-14-mixing-action-styles-ngrx","publishedDate":"2020-05-14 02:00 PM CST","sourceFile":"2020-05-14-mixing-action-styles-ngrx.md"},{"route":"/blog/posts/2020-05-15-angular-unfiltered-002","title":"Angular Unfiltered Episode 002: Angular Forms Pt. 2 w/Zack DeRose","description":"Chatting with Zack DeRose about Forms in Angular","published":true,"slug":"2020-05-15-angular-unfiltered-002","publishedDate":"2020-05-15 02:00 PM CST","sourceFile":"2020-05-15-angular-unfiltered-002.md"},{"route":"/blog/posts/2020-05-22-angular-unfiltered-003","title":"Angular Unfiltered Episode 003: Quick Chat w/Austin Akers","description":"Chatting with Austin Akers","published":true,"slug":"2020-05-22-angular-unfiltered-003","publishedDate":"2020-05-22 02:00 PM CST","sourceFile":"2020-05-22-angular-unfiltered-003.md"},{"route":"/blog/posts/2020-05-22-angular-unfiltered-004","title":"Angular Unfiltered Episode 004: Quick Chat w/Devin Shoemaker","description":"Chatting with Devin Shoemaker","published":true,"slug":"2020-05-22-angular-unfiltered-004","publishedDate":"2020-06-12 02:00 PM CST","sourceFile":"2020-06-12-angular-unfiltered-004.md"},{"route":"/blog/posts/2020-06-19-angular-unfiltered-005","title":"Angular Unfiltered Episode 005: Quick Chat w/Luke Howell","description":"Chatting with Luke Howell","published":true,"slug":"2020-06-19-angular-unfiltered-005","publishedDate":"2020-06-19 02:00 PM CST","sourceFile":"2020-06-19-angular-unfiltered-005.md"},{"route":"/blog/posts/2020-06-26-angular-unfiltered-006","title":"Angular Unfiltered Episode 006: Quick Chat w/Bryan Wilhite","description":"Chatting with Bryan Wilhite","published":true,"slug":"2020-06-26-angular-unfiltered-006","publishedDate":"2020-06-26 02:00 PM CST","sourceFile":"2020-06-26-angular-unfiltered-006.md"},{"route":"/blog"},{"route":"/"}]

0 comments on commit 987a43d

Please sign in to comment.