feature/Add snippets/followers/following to tabs on profile page

Author: LewisYoul

app/assets/stylesheets/follow.scss

@@ -7,6 +7,16 @@
 }
 
 .follow {
+  &--container {
+    display: block;
+    padding: 8px;
+    
+    &:hover {
+      background-color: $color-light;
+      text-decoration: none;
+    }
+  }
+
   &--description {
     display: block;
     margin-top: 8px;

app/assets/stylesheets/user-preview.scss

@@ -16,8 +16,8 @@
 
     &-name {
       display: block;
-      font-weight: bold;
-      font-size: 14px;
+      font-weight: 500;
+      font-size: 16px;
       font-family: Helvetica, sans-serif;
     }
 

app/assets/stylesheets/variables.scss

@@ -2,7 +2,7 @@ $color-primary: #3AAFA9;
 $color-secondary: #2B7A78;
 $color-purple: #b853ba;
 $color-light: #DEF2F1;
-$color-lighter: #FEFFFF;
+$color-lighter: #c5ece5;
 $color-white: white;
 $color-black: #17252A;
 $color-grey: #808080;

app/controllers/users_controller.rb

@@ -1,20 +1,9 @@
 class UsersController < ApplicationController
   def show
-    @user = User.find_by(id: params[:id])
-    @following = current_user.following?(@user)
-  end
-
-  def followers
     @user = User.find_by(id: params[:id])
     @serialized_user = @user.serialize.to_json
     @is_following = current_user.following?(@user)
     @followers = @user.followers
-  end
-
-  def following
-    @user = User.find_by(id: params[:id])
-    @serialized_user = @user.serialize.to_json
-    @is_following = current_user.following?(@user)
     @following = @user.following
   end
 

app/javascript/packs/snippet_app.js

@@ -76,6 +76,8 @@ import SnippetListItem from '../snippet-list-item.vue'
 import Snipt from '../snipt.vue'
 import SnippetPreview from '../snippet-preview.vue'
 import SnippetShow from '../snippet-show.vue'
+import Tabs from '../tabs.vue';
+import Tab from '../tab.vue';
 import Toast from '../toast.vue';
 import UserPreview from '../user-preview.vue';
 import UserProfile from '../user-profile.vue'
@@ -110,6 +112,8 @@ document.addEventListener('DOMContentLoaded', () => {
         SnippetListItem,
         SnippetPreview,
         SnippetShow,
+        Tab,
+        Tabs,
         Toast,
         UserPreview,
         UserProfile

app/views/users/followers.html.erb

@@ -1,13 +1,41 @@
 <card>
   <user-profile
-    :user="<%= @user.serialize.to_json %>"
-    :is-following="<%= @following %>"
+    :user="<%= @serialized_user %>"
+    :is-following="<%= @is_following %>"
   />
 </card>
 
-<% @user.snippets.order(created_at: :desc).each do |snippet| %>
-  <snippet-preview
-    :key="<%= snippet.id %>"
-    :snippet="<%= snippet.serialize(current_user).to_json %>">
-  </snippet-preview>
-<% end %>
+<card>
+  <tabs>
+    <tab name="<%= @user.snippets_count %> Snippets" selected="true">
+      <% @user.snippets.order(created_at: :desc).each do |snippet| %>
+        <snippet-preview
+          :key="<%= snippet.id %>"
+          :snippet="<%= snippet.serialize(current_user).to_json %>">
+        </snippet-preview>
+      <% end %>
+    </tab>
+    <tab name="<%= @followers.size %> Followers">
+      <% @followers.each_with_index do |follower, index| %>
+        <% if index > 0 %>
+          <div class="horizontal-line"></div>
+        <% end %>
+        <a href="<%= user_path(follower)%>" class="follow--container">
+          <user-preview :user="<%= follower.serialize.to_json %>"></user-preview>
+          <span class="follow--description"><%= follower.description %></span>
+        </a>
+      <% end %>
+    </tab>
+    <tab name="<%= @following.size %> Following">
+      <% @following.each_with_index do |following_user, index| %>
+        <% if index > 0 %>
+          <div class="horizontal-line"></div>
+        <% end %>
+        <a href="<%= user_path(following_user)%>" class="follow--container">
+          <user-preview :user="<%= following_user.serialize.to_json %>"></user-preview>
+          <span class="follow--description"><%= following_user.description %></span>
+        </a>
+      <% end %>
+    </tab>
+  </tabs>
+</card>