Implement MVP frontend for Algolia search (#20909)

* Add proper frontend for Algolia search

* Update app/models/concerns/algolia_searchable/searchable_comment.rb

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update app/models/concerns/algolia_searchable/searchable_article.rb

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Fix formatting

* Fix: copy to clipboard message (#20898)

* fix: copy to clipboard message

* chore: deletion of unused imports

* Pick winner in header field test (#20911)

* Updated the twitter icon to X icon - solved icon issue #20356  (#20910)

* changed the twitter icon to X icon in assets/images/twitter.svg

* Changed the twitter icon to X in assets/images/twitter.svg

* Add field test for Digest article list design (#20912)

* Add field test for Digest article list design

* Add check for cached user

* Include cached user in select (#20913)

* Include cached user in select

* Add tags

* update style for new follower email (#20908)

* Fix #19037 (#20917)

* Add alternate returns for html

* Remove console log

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Iasmim Pereira <100351576+IasmimCristina@users.noreply.github.com>
Co-authored-by: Darshan Padia <darshanpadia5@gmail.com>
Co-authored-by: Philip How <philip.j.how@gmail.com>

app/assets/javascripts/utilities/buildArticleHTML.js

@@ -86,6 +86,45 @@ function buildArticleHTML(article, currentUserId = null) {
     return parsedDocument.body.innerHTML;
   }
 
+  if (article && article.class_name === 'User' && article.user === undefined) { // Represents different return values for how users are fetched.
+    const html = `
+      <article class="crayons-story">
+        <div class="crayons-story__body flex items-start gap-2">
+          <a href="${article.username}" class="crayons-podcast-episode__cover">
+            <img src="${article.profile_image.url}" alt="" loading="lazy" />
+          </a>
+          <div>
+            <h3 class="crayons-subtitle-2 lh-tight py-1">
+              <a href="${article.username}" class="c-link"> ${article.name} </a>
+            </h3>
+            <p class="crayons-story__slug-segment">@${article.username}</p>
+            ${
+              article.summary
+                ? `<div class="truncate-at-3 top-margin-4">${article.summary}</div>`
+                : ''
+            }
+          </div>
+          <div class="print-hidden" style="margin-left: auto">
+            <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info=''>Follow</button>
+          </div>
+        </div>
+      </article>
+    `;
+
+    const parser = new DOMParser();
+    const parsedDocument = parser.parseFromString(html, 'text/html');
+    parsedDocument.querySelector('img').alt = article.name;
+    parsedDocument.querySelector('button').dataset.info = JSON.stringify({
+      id: article.id,
+      name: article.name,
+      className: 'User',
+      style: 'full',
+    });
+
+    return parsedDocument.body.innerHTML;
+  }
+
+
   if (article) {
     var container = document.getElementById('index-container');
 

app/javascript/packs/searchParams.js

@@ -181,7 +181,7 @@ function search(query, filters, sortBy, sortDirection) {
   });
 
   // Run Algolia code only if the ID is live.
-  if (document.body.dataset.algoliaId?.length > 0) {
+  if (document.body.dataset.algoliaId?.length > 0 && !searchParams.toString().includes('MY_POSTS')) {
     algoliaSearch(searchParams.toString());
     return;
   }
@@ -243,9 +243,6 @@ function algoliaSearch(searchParams) {
         story.class_name = paramsObj.class_name;
         story.id = story.objectID;
         // Add profile_image_90 to story object from profile image if profile_image_90 is not present
-        story.profile_image_90 = story.profile_image;
-        story.profile_image = { url: story.profile_image }
-        console.log(story) /* eslint-disable-line */
         resultDivs.push(buildArticleHTML(story, currentUserId));
       });
       document.getElementById('substories').innerHTML = resultDivs.join('');

app/models/concerns/algolia_searchable/searchable_article.rb

@@ -7,18 +7,21 @@ module AlgoliaSearchable
 
       algoliasearch(**DEFAULT_ALGOLIA_SETTINGS, if: :indexable) do
         attribute :user do
-          { name: user.name, username: user.username, profile_image: user.profile_image_90 }
+          { name: user.name,
+            username: user.username,
+            profile_image: user.profile_image_90,
+            id: user.id,
+            profile_image_90: user.profile_image_90 }
         end
 
         attribute :title, :tag_list, :reading_time, :score, :featured, :comments_count,
-                  :positive_reactions_count, :path, :main_image
+                  :positive_reactions_count, :path, :main_image, :user_id
 
         add_attribute(:published_at) { published_at.to_i }
+        add_attribute(:readable_publish_date) { readable_publish_date }
         add_attribute(:timestamp) { published_at.to_i }
-
         add_replica("Article_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
         add_replica("Article_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }
-
       end
     end
 

app/models/concerns/algolia_searchable/searchable_comment.rb

@@ -6,7 +6,7 @@ module AlgoliaSearchable
       include AlgoliaSearch
 
       algoliasearch(**DEFAULT_ALGOLIA_SETTINGS, unless: :bad_comment?) do
-        attribute :commentable_id, :commentable_type, :path, :parent_id
+        attribute :commentable_id, :commentable_type, :path, :parent_id, :title
         attribute :body do
           title
         end
@@ -16,8 +16,15 @@ module AlgoliaSearchable
         end
 
         attribute :user do
-          { name: user.name, username: user.username, profile_image: user.profile_image_90 }
+          { name: user.name,
+            username: user.username,
+            profile_image: user.profile_image_90,
+            profile_image_90: user.profile_image_90 }
         end
+
+        add_attribute(:timestamp) { created_at.to_i }
+        add_replica("Comment_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
+        add_replica("Comment_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }
       end
     end
 

app/models/concerns/algolia_searchable/searchable_organization.rb

@@ -6,8 +6,12 @@ module AlgoliaSearchable
       algoliasearch(**DEFAULT_ALGOLIA_SETTINGS) do
         attribute :name, :tag_line, :summary, :slug
         attribute :profile_image do
-          profile_image_90
+          { url: profile_image_90 }
         end
+
+        add_attribute(:timestamp) { created_at.to_i }
+        add_replica("Organization_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
+        add_replica("Organization_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }
       end
     end
 

app/models/concerns/algolia_searchable/searchable_podcast_episode.rb

@@ -13,6 +13,10 @@ module AlgoliaSearchable
         attribute :podcast_image do
           profile_image_url
         end
+
+        add_attribute(:timestamp) { published_at.to_i }
+        add_replica("PodcastEpisode_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
+        add_replica("PodcastEpisode_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }
       end
     end
 

app/models/concerns/algolia_searchable/searchable_user.rb

@@ -5,9 +5,12 @@ module AlgoliaSearchable
     included do
       algoliasearch(**DEFAULT_ALGOLIA_SETTINGS, unless: :bad_actor?) do
         attribute :name, :username
-        attribute :profile_image do
+
-          profile_image_90
+        add_attribute(:profile_image) { { url: profile_image_90 } }
-        end
+        # add_attribute(:profile_image_90) { profile_image_90 }
+        add_attribute(:timestamp) { registered_at.to_i }
+        add_replica("User_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
+        add_replica("User_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }
       end
     end
 

app/views/stories/articles_search/_nav_menu.html.erb

@@ -22,4 +22,7 @@
     <%= t("views.search.nav.my_posts") %>
   </a></li>
   <% end %>
+  <% if Settings::General.display_algolia_branding %>
+    <li class="ml-2 mt-3 fw-bold"><a href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank">Powered by Algolia</a></li>
+  <% end %>
 </ul>