feature/Add following + followers to respective pages

Author: LewisYoul

app/assets/stylesheets/follow.scss

@@ -0,0 +1,14 @@
+@import './variables.scss';
+
+.horizontal-line {
+  padding-top: 16px;
+  margin-top: 16px;
+  border-top: 1px solid $color-primary;
+}
+
+.follow {
+  &--description {
+    display: block;
+    margin-top: 8px;
+  }
+}

app/assets/stylesheets/user-preview.scss

@@ -8,7 +8,7 @@
   }
 
   &--img {
-    border-radius: 2px;
+    border-radius: 50%;
   }
 
   &--summary {

app/controllers/users_controller.rb

@@ -6,12 +6,16 @@ def show
 
   def followers
     @user = User.find_by(id: params[:id])
-    @following = current_user.following?(@user)
+    @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])
-    @following = current_user.following?(@user)
+    @serialized_user = @user.serialize.to_json
+    @is_following = current_user.following?(@user)
+    @following = @user.following
   end
 
   def follow

app/javascript/packs/snippet_app.js

@@ -77,6 +77,7 @@ import Snipt from '../snipt.vue'
 import SnippetPreview from '../snippet-preview.vue'
 import SnippetShow from '../snippet-show.vue'
 import Toast from '../toast.vue';
+import UserPreview from '../user-preview.vue';
 import UserProfile from '../user-profile.vue'
 
 // Vue.use(TurbolinksAdapter)
@@ -110,6 +111,7 @@ document.addEventListener('DOMContentLoaded', () => {
         SnippetPreview,
         SnippetShow,
         Toast,
+        UserPreview,
         UserProfile
       },
       created() {

app/javascript/user-preview.vue

@@ -7,7 +7,8 @@
       <a :href="`/users/${user.id}`">
         <span class="user-preview--summary-name">{{ user.name }}</span>
       </a>
-      <span class="user-preview--summary-time-ago">{{ snippet.created_at }}</span>
+      <span v-if="snippet" class="user-preview--summary-time-ago">{{ snippet.created_at }}</span>
+      <span v-else class="user-preview--summary-time-ago">@{{ user.name }}</span>
     </div>
   </div>
 </template>
@@ -16,7 +17,7 @@
 export default {
   props: {
     user: { type: Object, required: true },
-    snippet: { type: Object, required: true }
+    snippet: { type: Object, required: false }
   }
 }
 </script>

app/models/user.rb

@@ -28,6 +28,10 @@ class User < ApplicationRecord
   #TODO: Add tests for this
   after_create :create_default_folder
 
+  def description
+    'Software developer on the Integrated Biodiversity Assessment Tool and founder of Snippet.io. Can often be found playing tennis or riding a bike.'
+  end
+
   def follow(user)
     Follow.create(followed_user_id: user.id, follower_id: id)
   end

app/views/users/followers.html.erb

@@ -1,6 +1,18 @@
 <card>
   <user-profile
-    :user="<%= @user.serialize.to_json %>"
-    :is-following="<%= @following %>"
+    :user="<%= @serialized_user %>"
+    :is-following="<%= @is_following %>"
   />
 </card>
+
+<card>
+  <% @followers.each_with_index do |follower, index| %>
+    <% if index > 0 %>
+      <div class="horizontal-line"></div>
+    <% end %>
+    <div class="follow--container">
+      <user-preview :user="<%= @serialized_user %>"></user-preview>
+      <span class="follow--description"><%= follower.description %></span>
+    </div>
+  <% end %>
+</card>

app/views/users/following.html.erb

@@ -1,7 +1,19 @@
 <%# extract to partial %>
 <card>
   <user-profile
-    :user="<%= @user.serialize.to_json %>"
-    :is-following="<%= @following %>"
+    :user="<%= @serialized_user %>"
+    :is-following="<%= @is_following %>"
   />
 </card>
+
+<card>
+  <% @following.each_with_index do |follower, index| %>
+    <% if index > 0 %>
+      <div class="horizontal-line"></div>
+    <% end %>
+    <div class="follow--container">
+      <user-preview :user="<%= follower.serialize.to_json %>"></user-preview>
+      <span class="follow--description"><%= follower.description %></span>
+    </div>
+  <% end %>
+</card>