From c5a90173bd106e5d1935e5747a5eab24dd60393e Mon Sep 17 00:00:00 2001
From: Daniel Uber <dan@forem.com>
Date: Wed, 2 Mar 2022 09:56:53 -0600
Subject: [PATCH] handle getElementById failures in articlePage (#16743)

* when there is no div for it, don't render CommentSubscription

* Retrigger CI

* Retrigger CI

* don't write an error to the comment div if its gone

This fixes an issue seen in tests, where the page transitioned while
we were running the articlePage async handler, so the article-body
element was gone (can't access dataset of null), and the error handler
catch block tried to access the innerHTML of another getElementById.

* Use existing found element `root` when setting the error message

No need to find a new comment-subscription div to write the error to,
we already named the one we're interested in at the beginning of the function
---
 app/javascript/packs/articlePage.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/javascript/packs/articlePage.jsx b/app/javascript/packs/articlePage.jsx
index 6b011c577..df5107c4f 100644
--- a/app/javascript/packs/articlePage.jsx
+++ b/app/javascript/packs/articlePage.jsx
@@ -90,6 +90,9 @@ getCsrfToken().then(async () => {
   const root = document.getElementById('comment-subscription');
   const isLoggedIn = userStatus === 'logged-in';
 
+  if (!root) {
+    return;
+  }
   try {
     const {
       getCommentSubscriptionStatus,
@@ -124,7 +127,7 @@ getCsrfToken().then(async () => {
       root,
     );
   } catch (e) {
-    document.getElementById('comment-subscription').innerHTML =
+    root.innerHTML =
       '<p className="color-accent-danger">Unable to load Comment Subscription component.<br />Try refreshing the page.</p>';
   }
 });