feature/Make snippets on user profile searchable

Author: LewisYoul

app/controllers/snippets_controller.rb

@@ -6,8 +6,9 @@ class SnippetsController < ApplicationController
   UNFILE_CONFIRM_TEXT = "Are you sure you want to unfile this snippet? It will be removed from your collection.".freeze
 
   def index
+    @user = User.find_by(id: params[:user_id]) || current_user
     @display_popover = true
-    @snippets = current_user.filed_snippets.includes(:user)
+    @snippets = @user.filed_snippets.includes(:user)
 
     # TODO: Extract this logic to model/service
     @snippets = @snippets.where('description ILIKE ?', "%#{params[:search]}%") if params[:search]

app/controllers/users_controller.rb

@@ -5,6 +5,10 @@ def show
     @is_following = current_user ? current_user.following?(@user) : false
     @followers = @user.followers
     @following = @user.following
+    @display_popover = true
+    @snippets = @user.filed_snippets
+      .order(created_at: :desc)
+      .paginate(page: 1, per_page: 6)
   end
 
   def hovercard

app/views/users/show.html.erb

@@ -10,7 +10,7 @@
     <div></div>
     <div class="tabs--headers-wrapper">
       <div data-target="tabs.tab" data-action="click->tabs#change" class="tabs--header tabs--header-active">
-        <span><%= @user.snippets.size %> Snippets</span>
+        <span><%= @user.filed_snippets.size %> Snippets</span>
       </div>
       <div data-target="tabs.tab" data-action="click->tabs#change" class="tabs--header">
         <span><%= @followers.size %> Followers</span>
@@ -23,12 +23,32 @@
 
   <div class="tabs-details">
     <div data-target="tabs.panel">
-      <% @user.snippets.order(created_at: :desc).each do |snippet| %>
-        <snippet-preview
-          :key="<%= snippet.id %>"
-          :snippet="<%= snippet.serialize(current_user).to_json %>">
-        </snippet-preview>
-      <% end %>
+      <div data-controller="infinite-scroll" data-infinite-scroll-base-url="<%= user_snippets_path(@user) %>">
+        <div style="display: flex; align-items: center; justify-content: space-between;" class="margin-top">
+
+            <div class="searchbar">
+              <input autofocus
+                type="text"
+                placeholder="Search"
+                data-action="input->infinite-scroll#search"
+                data-target="infinite-scroll.input"
+              />
+              <img src="/icons/search.svg">
+            </div>
+
+        </div>
+
+        <div class="margin-top"
+          data-target="infinite-scroll.entries"
+          data-action="scroll@window->infinite-scroll#scroll"
+        >
+          <%= render 'snippets/snippets' %>
+        </div>
+
+        <div data-target="infinite-scroll.pagination" class="hidden">
+          <%= will_paginate @snippets, container: false, params: { controller: "snippets", action: "index" } %>
+        </div>
+      </div>
     </div>
 
     <div data-target="tabs.panel" class="hidden">

config/routes.rb

@@ -43,6 +43,8 @@
     post :follow, on: :member
     post :unfollow, on: :member
     get :hovercard, on: :member
+
+    resources :snippets, only: :index
   end
 
   resources :likes, only: :create