Day 5 - Infinite scroll (#4)

Gemfile

@@ -66,3 +66,7 @@ end
 
 
 gem "devise", "~> 4.9"
+
+gem "faker", "~> 3.1"
+
+gem "pagy", "~> 6.0"

Gemfile.lock

@@ -86,6 +86,8 @@ GEM
       responders
       warden (~> 1.2.3)
     erubi (1.12.0)
+    faker (3.1.1)
+      i18n (>= 1.8.11, < 2)
     globalid (1.1.0)
       activesupport (>= 5.0)
     i18n (1.12.0)
@@ -121,6 +123,7 @@ GEM
     nokogiri (1.14.2-arm64-darwin)
       racc (~> 1.4)
     orm_adapter (0.5.0)
+    pagy (6.0.2)
     pg (1.4.5)
     puma (5.6.5)
       nio4r (~> 2.0)
@@ -198,7 +201,9 @@ DEPENDENCIES
   cssbundling-rails
   debug
   devise (~> 4.9)
+  faker (~> 3.1)
   jsbundling-rails
+  pagy (~> 6.0)
   pg (~> 1.1)
   puma (~> 5.0)
   rails (~> 7.0.4, >= 7.0.4.2)

app/controllers/tweets_controller.rb

@@ -0,0 +1,64 @@
+class TweetsController < ApplicationController
+  include Pagy::Backend
+  before_action :set_tweet, only: %i[ show edit update destroy ]
+
+  # GET /tweets
+  def index
+    @pagy, @tweets = pagy_countless(Tweet.all, items: 25)
+
+    respond_to do |format|
+      format.html
+      format.turbo_stream
+    end
+  end
+
+  # GET /tweets/1
+  def show
+  end
+
+  # GET /tweets/new
+  def new
+    @tweet = Tweet.new
+  end
+
+  # GET /tweets/1/edit
+  def edit
+  end
+
+  # POST /tweets
+  def create
+    @tweet = Tweet.new(tweet_params)
+
+    if @tweet.save
+      redirect_to @tweet, notice: "Tweet was successfully created."
+    else
+      render :new, status: :unprocessable_entity
+    end
+  end
+
+  # PATCH/PUT /tweets/1
+  def update
+    if @tweet.update(tweet_params)
+      redirect_to @tweet, notice: "Tweet was successfully updated."
+    else
+      render :edit, status: :unprocessable_entity
+    end
+  end
+
+  # DELETE /tweets/1
+  def destroy
+    @tweet.destroy
+    redirect_to tweets_url, notice: "Tweet was successfully destroyed."
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_tweet
+      @tweet = Tweet.find(params[:id])
+    end
+
+    # Only allow a list of trusted parameters through.
+    def tweet_params
+      params.fetch(:tweet, {})
+    end
+end

app/helpers/application_helper.rb

@@ -1,2 +1,3 @@
 module ApplicationHelper
+  include Pagy::Frontend
 end

app/helpers/tweets_helper.rb

@@ -0,0 +1,2 @@
+module TweetsHelper
+end

app/models/tweet.rb

@@ -0,0 +1,2 @@
+class Tweet < ApplicationRecord
+end

app/views/pages/kitchensink.html.erb

@@ -16,4 +16,10 @@
   <div class="mx-auto max-w-2xl my-20 flex items-center justify-center">
     <%= link_to "Open Modal", modal_path, data: {turbo_frame: "modal"}, class: "bg-indigo-500 text-white rounded px-3 py-2" %>
   </div>
+
+  <%= render "shared/divider", title: "Day 5/30 - Infinite scroll" %>
+
+  <div class="mx-auto max-w-2xl my-20 flex items-center justify-center">
+    <%= link_to "Infinite Scroll", tweets_path, class: "bg-indigo-500 text-white rounded px-3 py-2" %>
+  </div>
 </div>

app/views/pages/modal.html.erb

@@ -25,7 +25,4 @@
       </div>
     </div>
   </div>
-<% end %>
-
-
-z``
+<% end %>

app/views/tweets/_scroll_frame.html.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag "infinite_scroll",
+  src: tweets_path(page: page, format: :turbo_stream), loading: :lazy %>
+
+

app/views/tweets/_tweet.html.erb

@@ -0,0 +1,18 @@
+<li id="<%= dom_id(tweet) %>" class="relative bg-white py-5 px-4 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 hover:bg-gray-50">
+  <div class="flex justify-between space-x-3">
+    <div class="min-w-0 flex-1 flex items-center">
+      <div class="flex-shrink-0">
+        <img class="h-12 w-12 rounded-full" src="<%= Faker::LoremFlickr.image(size: "100x100", search_terms: ['star wars']) %>" alt="">
+      </div>
+      <div class="min-w-0 flex-1 ml-2">
+        <p class="truncate text-sm font-medium text-gray-900"><%= tweet.handle %></p>
+      </div>
+    </div>
+    <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
+  </div>
+  <div class="mt-1">
+    <p class="text-sm text-gray-600 line-clamp-2">
+      <%= tweet.content %>
+    </p>
+  </div>
+</li>

app/views/tweets/_tweets.html.erb

@@ -0,0 +1 @@
+<%= render partial: "tweets/tweet", collection: tweets %>

app/views/tweets/index.html.erb

@@ -0,0 +1,8 @@
+<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-5">
+  <div class="mx-auto max-w-2xl mt-5 flex items-center justify-center">
+    <ul id="tweets" role="list" class="divide-y divide-gray-200">
+    </ul>
+    <%= render 'tweets/scroll_frame', page: 1 %>
+  </div>
+</div>
+

app/views/tweets/index.turbo_stream.erb

@@ -0,0 +1,8 @@
+<%= turbo_stream.append "tweets", partial: "tweets/tweets", locals: { tweets: @tweets } %>
+ 
+<% if @pagy.next.present? %>
+  <%= turbo_stream.replace "infinite_scroll",
+    partial: "tweets/scroll_frame",
+    locals: { page: @pagy.next } %>
+<% end %>
+

config/initializers/pagy.rb

@@ -0,0 +1 @@
+require 'pagy/extras/countless'

config/routes.rb

@@ -1,4 +1,5 @@
 Rails.application.routes.draw do
+  resources :tweets
   devise_for :users
   root 'pages#kitchensink'
 

db/migrate/20230223133357_create_tweets.rb

@@ -0,0 +1,11 @@
+class CreateTweets < ActiveRecord::Migration[7.0]
+  def change
+    create_table :tweets do |t|
+      t.string :content
+      t.string :handle
+      t.string :image_url
+
+      t.timestamps
+    end
+  end
+end

db/seeds.rb

@@ -2,41 +2,49 @@
 Technology.destroy_all
 User.destroy_all
 
-web_dev_technologies = [
-  'HTML',
-  'CSS',
-  'JavaScript',
-  'React',
-  'Angular',
-  'Vue.js',
-  'Node.js',
-  'Express.js',
-  'Ruby on Rails',
-  'Django',
-  'Flask',
-  'ASP.NET',
-  'Laravel',
-  'Symfony',
-  'CodeIgniter',
-  'CakePHP',
-  'Spring',
-  'Struts',
-  'Hibernate',
-  'JSP'
-]
+# web_dev_technologies = [
+#   'HTML',
+#   'CSS',
+#   'JavaScript',
+#   'React',
+#   'Angular',
+#   'Vue.js',
+#   'Node.js',
+#   'Express.js',
+#   'Ruby on Rails',
+#   'Django',
+#   'Flask',
+#   'ASP.NET',
+#   'Laravel',
+#   'Symfony',
+#   'CodeIgniter',
+#   'CakePHP',
+#   'Spring',
+#   'Struts',
+#   'Hibernate',
+#   'JSP'
+# ]
 
-web_dev_technologies.each do |tech_name|
-  Technology.create(name: tech_name)
-end
+# web_dev_technologies.each do |tech_name|
+#   Technology.create(name: tech_name)
+# end
 
-usernames = ['lukeskywalker', 'princessleia', 'hansolo', 'chewbacca', 'obiwan']
+# usernames = ['lukeskywalker', 'princessleia', 'hansolo', 'chewbacca', 'obiwan']
 
-usernames.each do |username|
-  email = username + '@rebels.com'
-  User.create!(
-    email: email,
-    username: username,
-    password: "password",
-    password_confirmation: "password"
+# usernames.each do |username|
+#   email = username + '@rebels.com'
+#   User.create!(
+#     email: email,
+#     username: username,
+#     password: "password",
+#     password_confirmation: "password"
+#   )
+# end
+
+200.times do
+  Tweet.create(
+    content: [Faker::Movies::StarWars.quote, Faker::Movies::StarWars.wookiee_sentence].sample,
+    handle: Faker::Movies::StarWars.character,
+    image_url: Faker::LoremFlickr.image(size: "100x100", search_terms: ['dog'])
   )
 end