From 82ab9f820b2c371a5f28c913608f2303d7740dfa Mon Sep 17 00:00:00 2001
From: Mac Siri <krairit.siri@gmail.com>
Date: Thu, 7 May 2020 10:23:30 -0400
Subject: [PATCH] [deploy] Move first-nav-link from dynamic JS to erb (#7698)

---
 .../initializers/initializeBaseUserData.js    | 23 ++++++++-----------
 app/views/layouts/_nav_menu.html.erb          |  9 +++++++-
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/initializers/initializeBaseUserData.js b/app/assets/javascripts/initializers/initializeBaseUserData.js
index 71f39fa82..19a9552ca 100644
--- a/app/assets/javascripts/initializers/initializeBaseUserData.js
+++ b/app/assets/javascripts/initializers/initializeBaseUserData.js
@@ -1,15 +1,15 @@
-'use strict';
-
 /* global filterXSS */
 
 function initializeUserProfileContent(user) {
-  document.getElementById('sidebar-profile--avatar').src = user.profile_image_90;
+  document.getElementById('sidebar-profile--avatar').src =
+    user.profile_image_90;
   document.getElementById('sidebar-profile--avatar').alt = user.username;
 
   document.getElementById('sidebar-profile--name').innerHTML = filterXSS(
     user.name,
   );
-  document.getElementById('sidebar-profile--username').innerHTML = '@' + user.username;
+  document.getElementById('sidebar-profile--username').innerHTML =
+    '@' + user.username;
   document.getElementById('sidebar-profile').href = '/' + user.username;
 }
 
@@ -23,7 +23,7 @@ function initializeUserSidebar(user) {
       ? 'Follow tags to improve your feed'
       : 'Other Popular Tags';
 
-  followedTags.forEach(tag => {
+  followedTags.forEach((tag) => {
     const element = document.getElementById(
       'default-sidebar-element-' + tag.name,
     );
@@ -99,15 +99,12 @@ function addRelevantButtonsToComments(user) {
 
 function initializeBaseUserData() {
   const user = userData();
-  const userProfileLinkHTML =
-    '<a href="/' + user.username + '" id="first-nav-link" class="crayons-link crayons-link--block"><div>' +
-    '<span class="fw-medium block">' + user.name +'</span>' +
-    '<small class="fs-s color-base-50">@' + user.username + '</small>' +
-    '</div></a>';
-  document.getElementById(
-    'user-profile-link-placeholder',
-  ).innerHTML = userProfileLinkHTML;
+  const userNavLink = document.getElementById('first-nav-link');
+  userNavLink.href = `/${user.username}`;
+  userNavLink.querySelector('span').textContent = user.name;
+  userNavLink.querySelector('small').textContent = `@${user.username}`;
   document.getElementById('nav-profile-image').src = user.profile_image_90;
+
   initializeUserSidebar(user);
   addRelevantButtonsToArticle(user);
   addRelevantButtonsToComments(user);
diff --git a/app/views/layouts/_nav_menu.html.erb b/app/views/layouts/_nav_menu.html.erb
index a2a608bca..7b9fd1516 100644
--- a/app/views/layouts/_nav_menu.html.erb
+++ b/app/views/layouts/_nav_menu.html.erb
@@ -1,6 +1,13 @@
 <div class="crayons-dropdown left-2 right-2 s:left-auto p-0 top-bar__menu__dropdown">
   <% if user_signed_in? %>
-    <div id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-1">...</div>
+    <div id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-1">
+      <a id="first-nav-link" class="crayons-link crayons-link--block">
+        <div>
+          <span class="fw-medium block">...</span>
+          <small class="fs-s color-base-50"></small>
+        </div>
+      </a>
+    </div>
 
     <div class="border-0 border-b-1 border-solid border-base-20 p-1">
       <a href="<%= dashboard_path %>" class="crayons-link crayons-link--block">Dashboard</a>