ruby-china · huacnlee · Jan 3, 2021 · Dec 22, 2020 · Dec 22, 2020 · Dec 23, 2020
diff --git a/Gemfile b/Gemfile
@@ -12,6 +12,8 @@ gem "turbolinks"
 gem "uglifier"
 gem "webpacker", "~> 5.x"
 
+gem "view_component", require: "view_component/engine"
+
 gem "pg"
 gem "jieba-rb"
 gem "pghero"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -426,6 +426,8 @@ GEM
       unf_ext
     unf_ext (0.0.7.7)
     unicode-display_width (1.7.0)
+    view_component (2.23.2)
+      activesupport (>= 5.0.0, < 7.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     webpacker (5.2.1)
@@ -510,6 +512,7 @@ DEPENDENCIES
   turbolinks
   twemoji
   uglifier
+  view_component
   webpacker (~> 5.x)
 
 BUNDLED WITH

diff --git a/app/components/application_component.rb b/app/components/application_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class ApplicationComponent < ViewComponent::Base
+  delegate :user_avatar_tag, :user_name_tag, :icon_tag, :icon_bold_tag, :owner?, :main_app, to: :helpers
+end
diff --git a/app/components/profile_card_component.html.erb b/app/components/profile_card_component.html.erb
@@ -0,0 +1,50 @@
+<div class="user-profile-card">
+  <div class="media">
+    <div class="avatar-box">
+      <%= user_avatar_tag(user, :md) %>
+    </div>
+    <div class="media-meta">
+      <%= link_to user, class: "name-box" do %>
+        <div class="fullname">
+          <%= user.name %>
+        </div>
+        <div class="login">
+          <%= "@#{user.login}" %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <% if user.tagline.present? %>
+    <div class="item tagline"><%= user.tagline %></div>
+  <% end %>
+  <hr />
+  <div class="item social">
+    <% if !user.twitter.blank? %>
+      <%= link_to icon_bold_tag("twitter"), user.twitter_url, class: "twitter", rel: "nofollow" %>
+    <% end %>
+    <% if Setting.has_module? :github %>
+      <% if !user.github.blank? %>
+        <%= link_to icon_bold_tag("github"), user.github_url, target: '_blank', rel: 'nofollow' %>
+      <% end %>
+    <% end %>
+    <% if !user.website.blank? %>
+      <%= link_to icon_tag("globe"), user.website_url, target: '_blank', rel: 'nofollow' %>
+    <% end %>
+  </div>
+  <% if !user.company.blank? %>
+    <div class="item company">
+      <%= user.company %>
+    </div>
+  <% end %>
+  <% if !user.location.blank? %>
+    <div class="item location">
+      <%= user.location %>
+    </div>
+  <% end %>
+  <% if !owner? user %>
+    <hr />
+    <div class="item buttons flex aic">
+      <%= follow_user_tag(user) %>
+    </div>
+  <% end %>
+</div>
diff --git a/app/components/profile_card_component.rb b/app/components/profile_card_component.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class ProfileCardComponent < ApplicationComponent
+  delegate :follow_user_tag, to: :helpers
+
+  attr_reader :user
+
+  def initialize(user:)
+    @user = user
+  end
+end
diff --git a/app/views/replies/_reply.html.erb → app/components/reply_component.html.erb b/app/views/replies/_reply.html.erb → app/components/reply_component.html.erb
@@ -1,15 +1,7 @@
 <% cache([reply, reply.user_avatar_raw, "raw:#{@show_raw}"]) do %>
-  <%
-  floor = reply_counter + 1
-  show_deleted = reply.deleted? && !@show_raw
-  class_names = ['reply']
-  class_names << 'popular' if reply.popular?
-  class_names << 'reply-system' if reply.system_event?
-  class_names << 'reply-deleted' if show_deleted
-%>
   <div class="<%= class_names.join(' ') %>" data-id="<%= reply.id %>" id="reply<%= floor %>">
     <div id="reply-<%= reply.id %>" data-floor="<%= floor %>">
-      <% if show_deleted %>
+      <% if show_deleted? %>
         <div class="deleted text-center"><%= floor %><%= t("common.floor")%> <%= t("common.has_deleted")%></div>
       <% elsif reply.system_event? %>
         <%= render '/replies/system_event', reply: reply %>
@@ -36,7 +28,7 @@
               <% end %>
             </span>
           </div>
-          <%= render 'replies/reply_to', reply: reply, show_body: false %>
+          <%= render ReplyToComponent.new(reply: reply, topic: @topic, show_body: false) %>
           <div class="markdown<%= ' deleted' if reply.deleted? %>">
             <%= reply.body_html %>
           </div>

diff --git a/app/components/reply_component.rb b/app/components/reply_component.rb
@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class ReplyComponent < ApplicationComponent
+  attr_reader :reply
+
+  delegate :timeago, :likeable_tag, to: :helpers
+
+  def initialize(reply:, topic:, reply_counter: 0, show_raw: false)
+    @reply = reply
+    @topic = topic
+    @show_raw = show_raw
+    @reply_counter = reply_counter
+  end
+
+  def show_deleted?
+    reply.deleted? && !@show_raw
+  end
+
+  def floor
+    @floor ||= @reply_counter + 1
+  end
+
+  def class_names
+    @class_names ||= begin
+      class_names = ["reply"]
+      class_names << "popular" if reply.popular?
+      class_names << "reply-system" if reply.system_event?
+      class_names << "reply-deleted" if show_deleted?
+      class_names
+    end
+  end
+end
diff --git a/app/views/replies/_reply_to.html.erb → app/components/reply_to_component.html.erb b/app/views/replies/_reply_to.html.erb → app/components/reply_to_component.html.erb
@@ -1,8 +1,4 @@
-<% if reply.reply_to && reply.reply_to&.user %>
-  <%
-    reply_to = reply.reply_to
-    user = reply_to.user
-  %>
+<% if reply_to && user %>
   <div class="reply-to-block" data-reply-to-id="<%= reply_to.id %>">
     <div class="info">
       对

diff --git a/app/components/reply_to_component.rb b/app/components/reply_to_component.rb
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class ReplyToComponent < ApplicationComponent
+  attr_reader :reply, :show_body
+
+  delegate :markdown, to: :helpers
+
+  def initialize(reply:, topic:, show_body: false)
+    @reply = reply
+    @topic = topic
+    @show_body = show_body
+  end
+
+  def reply_to
+    reply.reply_to
+  end
+
+  def user
+    reply_to&.user
+  end
+end
diff --git a/app/components/topic_component.html.erb b/app/components/topic_component.html.erb
@@ -0,0 +1,38 @@
+<% if topic %>
+  <% cache([topic, topic.user_avatar_raw, type]) do %>
+    <div class="topic media topic-<%= topic.id %>" data-prefetch="<%= main_app.topic_path(topic) %>">
+      <div class="avatar">
+        <%= user_avatar_tag(topic.user, :md) %>
+      </div>
+      <div class="infos media-body">
+        <div class="title media-heading">
+          <%= link_to(main_app.topic_path(topic), title: topic.title) do %>
+            <span class="node"><%= topic.node&.name %></span>
+            <%= topic.title %>
+          <% end %>
+          <% if type == "suggest" %>
+            <i class="fa fa-pin" title="置顶"></i>
+          <% end %>
+          <%= topic_excellent_tag(topic) %>
+          <%= topic_close_tag(topic) %>
+        </div>
+        <div class="info">
+          <%= user_name_tag(topic.user) %>
+          <span class="hidden-mobile">
+            •
+            <% if topic.last_reply_user_login.blank? %>
+              <%= raw t("common.created_at", time: timeago(topic.created_at))%>
+            <% else %>
+              <%= t("common.last_by")%> <%= user_name_tag(topic.last_reply_user_login) %> <%= raw t("common.reply_at", time: timeago(topic.replied_at))%>
+            <% end %>
+          </span>
+        </div>
+      </div>
+      <div class="count media-right">
+        <% if topic.replies_count > 0 %>
+          <%= link_to(topic.replies_count,"#{main_app.topic_path(topic)}#reply-#{topic.last_reply_id}", class: "state-false") %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>
diff --git a/app/components/topic_component.rb b/app/components/topic_component.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class TopicComponent < ApplicationComponent
+  attr_reader :topic, :type
+
+  delegate :topic_excellent_tag, :topic_close_tag, :timeago, to: :helpers
+
+  with_collection_parameter :topic
+
+  def initialize(topic:, type: "normal")
+    @topic = topic
+    @type = type
+  end
+end
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -7,17 +7,17 @@
 <% if !@excellent_topics.blank? %>
 <div class="home_suggest_topics card">
   <div class="card-body topics row">
-    <% cache(["home_suggest_topics", @excellent_topics]) do %>
-    <%
-      odd_topics, even_topics = @excellent_topics.partition.each_with_index { |t, i| i.odd?  }
-    %>
-    <div class="col-md-6 topics-group">
-      <%= render partial: "topics/topic", collection: even_topics, locals: { suggest: false } %>
-    </div>
+    <% cache(["home_suggest_topics2", @excellent_topics]) do %>
+      <%
+        odd_topics, even_topics = @excellent_topics.partition.each_with_index { |t, i| i.odd?  }
+      %>
+      <div class="col-md-6 topics-group">
+        <%= render TopicComponent.with_collection(even_topics) %>
+      </div>
 
-    <div class="col-md-6 topics-group">
-      <%= render partial: "topics/topic", collection: odd_topics, locals: { suggest: false } %>
-    </div>
+      <div class="col-md-6 topics-group">
+        <%= render TopicComponent.with_collection(odd_topics) %>
+      </div>
     <% end %>
   </div>
   <div class="card-footer hidden-mobile">

diff --git a/app/views/replies/_create_callback.js.erb b/app/views/replies/_create_callback.js.erb
@@ -3,7 +3,7 @@ if($("#replies").length == 0){
 } else {
   if ($(".reply[data-id=<%= reply.id %>]").length == 0) {
     var current_floor = parseInt($("#replies").data("last-floor")) + 1;
-    var dom = $('<%= j(render("reply", reply: reply, reply_counter: reply.topic.replies_count - 1, display_edit: true)) %>');
+    var dom = $('<%= j(render(ReplyComponent.new(reply: reply, topic: reply.topic, reply_counter: reply.topic.replies_count - 1))) %>');
     $("#replies .items").append(dom);
     $("#replies .total b").text('<%= reply.topic.replies_count %>');
     $('#topic-sidebar .total b').text('<%= reply.topic.replies_count %>');

diff --git a/app/views/replies/reply_to.js.erb b/app/views/replies/reply_to.js.erb
@@ -1 +1 @@
-$(".reply[data-id=<%= @reply.id %>] .reply-to-block").replaceWith("<%= j(render('reply_to', reply: @reply, show_body: true)) %>")
+$(".reply[data-id=<%= @reply.id %>] .reply-to-block").replaceWith("<%= j(render(ReplyToComponent.new(reply: @reply, topic: @topic, show_body: true))) %>")
diff --git a/app/views/teams/show.html.erb b/app/views/teams/show.html.erb
@@ -7,7 +7,7 @@
         <% if @topics.blank? %>
         <div class="topic"><div class="no-result">暂无任何话题</div></div>
         <% else %>
-        <%= render partial: '/topics/topic', collection: @topics, locals: { suggest: false }, cached: -> (topic) { [topic, 'normal'] } %>
+          <%= render TopicComponent.with_collection(@topics, type: "team") %>
         <% end %>
       </div>
       <div class="card-footer">

diff --git a/app/views/topics/_topic.html.erb b/app/views/topics/_topic.html.erb
@@ -1,36 +1 @@
-<% cache([topic, topic.user_avatar_raw, suggest]) do %>
-  <div class="topic media topic-<%= topic.id %>" data-prefetch="<%= main_app.topic_path(topic) %>">
-    <div class="avatar">
-      <%= user_avatar_tag(topic.user, :md) %>
-    </div>
-    <div class="infos media-body">
-      <div class="title media-heading">
-        <%= link_to(main_app.topic_path(topic), title: topic.title) do %>
-          <%= raw content_tag(:span, topic.node&.name, class: 'node') %>
-          <%= topic.title %>
-        <% end %>
-        <% if suggest %>
-          <i class="fa fa-pin" title="置顶"></i>
-        <% end %>
-        <%= topic_excellent_tag(topic) %>
-        <%= topic_close_tag(topic) %>
-      </div>
-      <div class="info">
-        <%= user_name_tag(topic.user) %>
-        <span class="hidden-mobile">
-          •
-          <% if topic.last_reply_user_login.blank? %>
-            <%= raw t("common.created_at", time: timeago(topic.created_at))%>
-          <% else %>
-            <%= t("common.last_by")%> <%= user_name_tag(topic.last_reply_user_login) %> <%= raw t("common.reply_at", time: timeago(topic.replied_at))%>
-          <% end %>
-        </span>
-      </div>
-    </div>
-    <div class="count media-right">
-      <% if topic.replies_count > 0 %>
-        <%= link_to(topic.replies_count,"#{main_app.topic_path(topic)}#reply-#{topic.last_reply_id}", class: "state-false") %>
-      <% end %>
-    </div>
-  </div>
-<% end %>
+<%= render TopicComponent.new(topic: topic, type: (suggest ? "suggest" : "normal")) %>
diff --git a/app/views/topics/_topic_sidebar.html.erb b/app/views/topics/_topic_sidebar.html.erb
@@ -1,7 +1,7 @@
 <div id="topic-sidebar" data-spy="affix" data-offset-bottom="65">
   <div class="card">
     <div class="card-body">
-      <%= render "users/profile_card", user: @topic.user %>
+      <%= render ProfileCardComponent.new(user: @topic.user) %>
     </div>
   </div>
   <div class="card">

diff --git a/app/views/topics/index.html.erb b/app/views/topics/index.html.erb
@@ -7,9 +7,9 @@
     <div class="topics topics-<%= action_name %> card">
       <div class="card-body item-list">
         <% if @suggest_topics.present? %>
-          <%= render partial: '/topics/topic', collection: @suggest_topics, locals: { suggest: true } %>
+          <%= render TopicComponent.with_collection(@suggest_topics, type: "suggest") %>
         <% end %>
-        <%= render partial: '/topics/topic', collection: @topics, locals: { suggest: false } %>
+        <%= render TopicComponent.with_collection(@topics) %>
       </div>
       <% if  @topics.total_pages > 1 %>
         <div class="card-footer clearfix">

diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
@@ -50,7 +50,7 @@
     <% else %>
       <div id="replies" class="card" data-last-floor="<%= @replies.count(:all) %>">
         <div class="items card-body">
-          <%= render partial: "/replies/reply", collection: @replies %>
+          <%= render ReplyComponent.with_collection(@replies, topic: @topic, show_raw: @show_raw) %>
         </div>
       </div>
     <% end %>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		$(".reply[data-id=<%= @reply.id %>] .reply-to-block").replaceWith("<%= j(render('reply_to', reply: @reply, show_body: true)) %>")
		$(".reply[data-id=<%= @reply.id %>] .reply-to-block").replaceWith("<%= j(render(ReplyToComponent.new(reply: @reply, topic: @topic, show_body: true))) %>")