[15 min fix] Show pinned article to logged out users (#14219)

* Show pinned article to logged out users

* Check if pinned is defined

* Update app/views/articles/_single_story.html.erb

Co-authored-by: Michael Kohl <citizen428@dev.to>

Co-authored-by: Michael Kohl <citizen428@dev.to>

app/controllers/stories_controller.rb

@@ -150,6 +150,10 @@ class StoriesController < ApplicationController
     render template: "articles/index"
   end
 
+  def pinned_article
+    @pinned_article ||= PinnedArticle.get
+  end
+
   def featured_story
     @featured_story ||= Articles::Feeds::LargeForemExperimental.find_featured_story(@stories)
   end
@@ -239,6 +243,7 @@ class StoriesController < ApplicationController
 
   def assign_feed_stories
     feed = Articles::Feeds::LargeForemExperimental.new(page: @page, tag: params[:tag])
+
     if params[:timeframe].in?(Timeframe::FILTER_TIMEFRAMES)
       @stories = feed.top_articles_by_timeframe(timeframe: params[:timeframe])
     elsif params[:timeframe] == Timeframe::LATEST_TIMEFRAME
@@ -247,7 +252,10 @@ class StoriesController < ApplicationController
       @default_home_feed = true
       @featured_story, @stories = feed.default_home_feed_and_featured_story(user_signed_in: user_signed_in?)
     end
+
+    @pinned_article = pinned_article&.decorate
     @featured_story = (featured_story || Article.new)&.decorate
+
     @stories = ArticleDecorator.decorate_collection(@stories)
   end
 

app/views/articles/_single_story.html.erb

@@ -48,6 +48,14 @@
           <a href="<%= story.path %>" class="crayons-story__tertiary fs-xs"><time datetime="<%= story.published_timestamp %>"><%= story.readable_publish_date %></time><span class="time-ago-indicator-initial-placeholder" data-seconds="<%= story.published_at_int %>"></span></a>
         </div>
       </div>
+
+      <% if local_assigns[:pinned] == true %>
+        <div
+          class="pinned color-accent-brand fw-bold"
+          data-testid="pinned-article">
+          <%= inline_svg_tag("pin.svg", alt: "", aria_hidden: true, class: "mr-1 align-text-bottom color-accent-brand") %>Pinned <span class="hidden s:inline">post</span>
+        </div>
+      <% end %>
     </div>
 
     <div class="crayons-story__indention">

app/views/stories/_main_stories_feed.html.erb

@@ -1,5 +1,9 @@
-<% if @featured_story.id %>
-  <%= render "articles/single_story", story: @featured_story, featured: true %>
+<% if @pinned_article %>
+  <%= render partial: "articles/single_story", locals: { story: @pinned_article, pinned: true, featured: @pinned_article.id == @featured_story.id } %>
+<% end %>
+
+<% if @featured_story.id && @pinned_article&.id != @featured_story.id %>
+  <%= render partial: "articles/single_story", locals: { story: @featured_story, featured: true, pinned: false } %>
 <% end %>
 
 <div id="article-index-podcast-div"></div>
@@ -8,10 +12,12 @@
   <% if @stories.any? %>
     <% @stories.each_with_index do |story, i| %>
       <% next if story.id == @featured_story.id %>
+      <% next if story.id == @pinned_article&.id %>
+
       <% if !user_signed_in? && i == 4 %>
         <%= render "stories/sign_in_invitation" %>
       <% end %>
-      <%= render "articles/single_story", story: story, featured: false %>
+      <%= render partial: "articles/single_story", locals: { story: story, featured: false, pinned: false } %>
     <% end %>
     <% if @stories.size > 1 %>
       <div class="placeholder-div"></div>

cypress/integration/articleFlows/pinArticle.spec.js

@@ -208,4 +208,17 @@ describe('Pin an article - Admin User', () => {
         .should('exist');
     });
   });
+
+  it('should show the pinned post to a logged out user', () => {
+    cy.findByRole('main').within(() => {
+      cy.findAllByRole('button', { name: 'Pin Post' }).first().click();
+
+      // check the button has changed to "Unpin Post"
+      cy.findAllByRole('button', { name: 'Unpin Post' }).first();
+    });
+
+    cy.signOutUser();
+
+    cy.findByRole('main').findByTestId('pinned-article').should('be.visible');
+  });
 });