feature/Add ability to filter connectable users

Author: LewisYoul

app/controllers/home_controller.rb

@@ -32,23 +32,23 @@ def connect
 
     @users = if user_signed_in?
       current_user.not_following
+      .paginate(page: params[:page] || 1, per_page: 8)
     else
       User.order(updated_at: :desc)
+      .paginate(page: params[:page] || 1, per_page: 8)
     end
 
-    # @users = current_user.not_following
+    # TODO: Extract this logic to model/service
+    @users = @users.where('name ILIKE ?', "%#{params[:search]}%") if params[:search]
 
-    # @users = @users
-    #   .order(created_at: :desc)
-    #   .paginate(page: params[:page] || 1, per_page: 15)
-
-    # respond_to do |format|
-    #   format.json do
-    #     render json: {
-    #       entries: render_to_string(partial: 'snippets/snippets', formats: [:html]),
-    #       pagination: view_context.will_paginate(@users)
-    #     }
-    #   end
-    # end
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          entries: render_to_string(partial: 'users/follow_previews', formats: [:html]),
+          pagination: view_context.will_paginate(@users)
+        }
+      end
+    end
   end
 end

app/views/home/connect.html.erb

@@ -1,3 +1,25 @@
-<% @users.each do |user| %>
-  <%= render partial: 'users/follow_preview', locals: { user: user } %>
-<% end %>
+<div data-controller="infinite-scroll snippets-list" data-infinite-scroll-base-url="<%= connect_path %>">
+  <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 'users/follow_previews' %>
+  </div>
+
+  <div data-target="infinite-scroll.pagination" class="hidden">
+    <%= will_paginate @users, container: false %>
+  </div>
+</div>

app/views/snippets/index.html.erb

@@ -16,7 +16,7 @@
 
   <div class="margin-top"
     data-target="infinite-scroll.entries"
-    data-action="scroll@window->infinite-scroll#scroll ssnippet-created@window->infinite-scroll#add nippet-updated@window->snippets-list#update"
+    data-action="scroll@window->infinite-scroll#scroll snippet-created@window->infinite-scroll#add snippet-updated@window->snippets-list#update"
   >
     <%= render 'snippets/snippets' %>
   </div>

app/views/users/_follow_previews.html.erb

@@ -0,0 +1,3 @@
+<% @users.each do |user| %>
+  <%= render partial: 'users/follow_preview', locals: { user: user } %>
+<% end %>