Homepage left side bar tags followed (#5918) [deploy]

* SASS formatting in action. * Unnested .sidebar-nav-element in SASS * Created the <TagsFollowed /> component. * Mini refactor. * Left side bar uses <TagsFollowed /> component now. * Accomodating InstantClick * Small refactor and added some comments. * The homepage webpacker pack only needs to be loaded once. * Added tests for the <TagsFollowed /> component. * Modified the receive InstantClick callback as per their docs. * Reverted the data-no-instant on he homepage bundle. It seems to cause issues in certain scenarios. * Just some tweaks to <TagsFollowed /> component. * Removed CSS for general img tag in context of sidebar as it does not appear to be used. * Fixed copy paste error from JSX to HTML. * Fixed <img /> styles for arbitrary sponsorship widget. * Fixed a regression that a Capybara test caught. * Fixed user followed tags on home page tests. * Fixed logic for loading user data on homepage.
forem · Feb 11, 2020 · 0119918 · 0119918
1 parent bc87646
commit 0119918
Show file tree

Hide file tree

Showing 10 changed files with 534 additions and 136 deletions.
diff --git a/app/assets/javascripts/initializers/initializeBaseUserData.js b/app/assets/javascripts/initializers/initializeBaseUserData.js
@@ -28,39 +28,18 @@ function initializeUserSidebar(user) {
     followedTags.length === 0
       ? 'Follow tags to improve your feed'
       : 'Other Popular Tags';
-  document.getElementById('tag-separator').innerHTML = tagSeparatorLabel;
-
-  // sort tags by descending weigth, descending popularity and name
-  followedTags.sort((tagA, tagB) => {
-    return (
-      tagB.points - tagA.points ||
-      tagB.hotness_score - tagA.hotness_score ||
-      tagA.name.localeCompare(tagB.name)
-    );
-  });
 
-  let tagHTML = '';
   followedTags.forEach(tag => {
-    var element = document.getElementById(
+    const element = document.getElementById(
       'default-sidebar-element-' + tag.name,
     );
-    tagHTML +=
-      tag.points > 0.0
-        ? '<div class="sidebar-nav-element" id="sidebar-element-' +
-          tag.name +
-          '">' +
-          '<a class="sidebar-nav-link" href="/t/' +
-          tag.name +
-          '">' +
-          '<span class="sidebar-nav-tag-text">#' +
-          tag.name +
-          '</span>' +
-          '</a>' +
-          '</div>'
-        : '';
-    if (element) element.remove();
+
+    if (element) {
+      element.remove();
+    }
   });
-  document.getElementById('sidebar-nav-followed-tags').innerHTML = tagHTML;
+
+  document.getElementById('tag-separator').innerHTML = tagSeparatorLabel;
   document.getElementById('sidebar-nav-default-tags').classList.add('showing');
 }
 
@@ -98,15 +77,21 @@ function addRelevantButtonsToComments(user) {
 
     for (let i = 0; i < settingsButts.length; i += 1) {
       let butt = settingsButts[i];
-      const { action, commentableUserId, userId } = butt.dataset
+      const { action, commentableUserId, userId } = butt.dataset;
 
       if (parseInt(userId, 10) === user.id) {
         butt.style.display = 'inline-block';
       }
-      if (action === 'hide-button' && parseInt(commentableUserId, 10) === user.id) {
+      if (
+        action === 'hide-button' &&
+        parseInt(commentableUserId, 10) === user.id
+      ) {
         butt.style.display = 'inline-block';
-      } else if (action === 'hide-button' && parseInt(commentableUserId, 10) !== user.id) {
-        butt.style.display = 'none'
+      } else if (
+        action === 'hide-button' &&
+        parseInt(commentableUserId, 10) !== user.id
+      ) {
+        butt.style.display = 'none';
       }
     }
 

diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss
@@ -111,11 +111,7 @@
             theme-container-accent-background,
             lighten($bold-blue, 8%)
           );
-          @include themeable(
-            color,
-            theme-color,
-            white
-          );
+          @include themeable(color, theme-color, white);
         }
       }
     }
@@ -330,11 +326,7 @@
             margin-left: 10px;
           }
           font-weight: 500;
-          @include themeable(
-            color,
-            theme-secondary-color,
-            $medium-gray
-          );
+          @include themeable(color, theme-secondary-color, $medium-gray);
           strong {
             display: block;
             margin-bottom: 4px;
@@ -343,11 +335,7 @@
             }
             padding-top: 0.2em;
             font-weight: 500;
-            @include themeable(
-              color,
-              theme-color,
-              $black
-            );
+            @include themeable(color, theme-color, $black);
           }
           display: block;
           padding: 4px 14px 7px;
@@ -808,7 +796,8 @@
         background: darken($purple, 38%);
         color: white;
         letter-spacing: 1px;
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           background: darken($purple, 50%);
         }
         .bm-success {
@@ -1089,62 +1078,6 @@
             display: block;
           }
         }
-        .sidebar-nav-element {
-          color: $black;
-          display: block;
-          position: relative;
-          @media screen and (min-width: 950px) {
-            .sidebar-nav-link-follow {
-              display: none;
-            }
-            &:hover {
-              .sidebar-nav-link-follow {
-                display: block;
-              }
-            }
-          }
-          img {
-            width: 30px;
-            height: 30px;
-            border: 0px;
-            vertical-align: -8px;
-            margin-right: 4px;
-          }
-          img.nav-emoji {
-            height: 19px;
-            width: 19px;
-            vertical-align: -2px;
-          }
-
-          a.sidebar-nav-link {
-            @include themeable(color, theme-container-color, $black);
-            padding: 5px;
-            display: inline-block;
-            width: calc(100% - 10px);
-            font-weight: 500;
-            padding: 7px 9px;
-            font-size: 1em;
-            &:hover {
-              @include themeable(
-                background,
-                theme-container-background-hover,
-                $light-gray
-              );
-            }
-          }
-          a.sidebar-nav-link-follow {
-            position: absolute;
-            color: $black;
-            right: 5px;
-            top: 50%;
-            transform: translateY(-50%);
-            text-align: center;
-            border-radius: 3px;
-            font-weight: 900;
-            font-size: 0.8em;
-            padding: 2px 8px;
-          }
-        }
       }
     }
     .sidebar-sponsorship-level {
@@ -1300,7 +1233,11 @@
           line-height: 1.4em;
         }
         &.widget-header-listings {
-          @include themeable(background, theme-container-accent-background, $light-gray);
+          @include themeable(
+            background,
+            theme-container-accent-background,
+            $light-gray
+          );
           padding: 10px 12px;
           margin: -10px -12px;
         }
@@ -1313,8 +1250,16 @@
           border-radius: 3px;
           font-size: 1.2em;
           line-height: 0.6em;
-          @include themeable(border, theme-secondary-color-border, 1px solid $light-medium-gray);
-          @include themeable(color, theme-secondary-color, darken($light-medium-gray, 10%));
+          @include themeable(
+            border,
+            theme-secondary-color-border,
+            1px solid $light-medium-gray
+          );
+          @include themeable(
+            color,
+            theme-secondary-color,
+            darken($light-medium-gray, 10%)
+          );
         }
       }
       .widget-body {
@@ -1410,18 +1355,34 @@
           width: 100%;
           margin-left: -12px;
           @include themeable(color, theme-color, $black);
-          @include themeable(border-bottom, theme-subtle-border, 1px solid $light-medium-gray);
+          @include themeable(
+            border-bottom,
+            theme-subtle-border,
+            1px solid $light-medium-gray
+          );
           &:first-child {
-            @include themeable(border-top, theme-subtle-border, 1px solid $light-medium-gray);
+            @include themeable(
+              border-top,
+              theme-subtle-border,
+              1px solid $light-medium-gray
+            );
           }
           .widget-listing-link-title {
             display: block;
             font-weight: 600;
           }
           .widget-listing-link-category {
             display: inline-block;
-            @include themeable(border, theme-container-border, 1px solid darken($light-medium-gray, 10%));
-            @include themeable(color, theme-secondary-color, lighten($medium-gray, 5%));
+            @include themeable(
+              border,
+              theme-container-border,
+              1px solid darken($light-medium-gray, 10%)
+            );
+            @include themeable(
+              color,
+              theme-secondary-color,
+              lighten($medium-gray, 5%)
+            );
 
             padding: 0px 5px;
             font-size: 0.77em;
@@ -1431,7 +1392,11 @@
           }
           &:hover {
             background: $lightest-gray;
-            @include themeable(background, theme-container-background-hover, $lightest-gray);
+            @include themeable(
+              background,
+              theme-container-background-hover,
+              $lightest-gray
+            );
           }
         }
         .widget-accent {
@@ -1564,7 +1529,7 @@
           opacity: 0.9;
         }
       }
-      img {
+      & + .widget-body--sponsorship-arbitrary img {
         width: 100%;
         border: 1px solid darken($light-gray, 4%);
       }
@@ -1844,3 +1809,61 @@
   opacity: 0.7;
   display: none;
 }
+
+// Left Side bar navigation links
+.sidebar-nav-element {
+  color: $black;
+  display: block;
+  position: relative;
+  @media screen and (min-width: 950px) {
+    .sidebar-nav-link-follow {
+      display: none;
+    }
+    &:hover {
+      .sidebar-nav-link-follow {
+        display: block;
+      }
+    }
+  }
+  img {
+    width: 30px;
+    height: 30px;
+    border: 0px;
+    vertical-align: -8px;
+    margin-right: 4px;
+  }
+  img.nav-emoji {
+    height: 19px;
+    width: 19px;
+    vertical-align: -2px;
+  }
+
+  a.sidebar-nav-link {
+    @include themeable(color, theme-container-color, $black);
+    padding: 5px;
+    display: inline-block;
+    width: calc(100% - 10px);
+    font-weight: 500;
+    padding: 7px 9px;
+    font-size: 1em;
+    &:hover {
+      @include themeable(
+        background,
+        theme-container-background-hover,
+        $light-gray
+      );
+    }
+  }
+  a.sidebar-nav-link-follow {
+    position: absolute;
+    color: $black;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    border-radius: 3px;
+    font-weight: 900;
+    font-size: 0.8em;
+    padding: 2px 8px;
+  }
+}
diff --git a/app/javascript/leftSidebar/TagsFollowed.jsx b/app/javascript/leftSidebar/TagsFollowed.jsx
@@ -0,0 +1,27 @@
+import { h } from 'preact';
+import PropTypes from 'prop-types';
+import { tagPropTypes } from '../src/components/common-prop-types';
+
+export const TagsFollowed = ({ tags = [] }) => {
+  // TODO: Once we're using Preact X >, we can replace the containing <div /> with a Fragment, <></>
+  return (
+    <div>
+      {tags.map(tag => (
+        <div
+          key={tag.id}
+          className="sidebar-nav-element"
+          id={`sidebar-element-${tag.name}`}
+        >
+          <a className="sidebar-nav-link" href={`/t/${tag.name}`}>
+            <span className="sidebar-nav-tag-text">{`#${tag.name}`}</span>
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+TagsFollowed.displayName = 'TagsFollowed';
+TagsFollowed.propTypes = {
+  tags: PropTypes.arrayOf(tagPropTypes).isRequired,
+};