Merge pull request #601 from pixelfed/frontend-ui-refactor

Frontend ui refactor

app/Http/Controllers/FollowerController.php

@@ -26,6 +26,11 @@ class FollowerController extends Controller
         ]);
         $item = $request->input('item');
         $this->handleFollowRequest($item);
+        if($request->wantsJson()) {
+            return response()->json([
+                200
+            ], 200);
+        }
         return redirect()->back();
     }
 

app/Http/Controllers/InternalApiController.php

@@ -136,34 +136,31 @@ class InternalApiController extends Controller
         });
         $following = array_merge($following, $filters);
 
-        $people = Cache::remember('feature:discover:people:'.$pid, 15, function() use ($following) {
+        $people = Profile::select('id', 'name', 'username')
-            return Profile::select('id', 'name', 'username')
             ->with('avatar')
-            ->inRandomOrder()
+            ->orderByRaw('rand()')
             ->whereHas('statuses')
             ->whereNull('domain')
             ->whereNotIn('id', $following)
             ->whereIsPrivate(false)
             ->take(3)
             ->get();
-        });
 
-        $posts = Cache::remember('feature:discover:posts:'.$pid, 60, function() use ($following) {
+        $posts = Status::select('id', 'caption', 'profile_id')
-            return Status::select('id', 'caption', 'profile_id')
               ->whereNull('in_reply_to_id')
               ->whereNull('reblog_of_id')
               ->whereIsNsfw(false)
               ->whereVisibility('public')
               ->whereNotIn('profile_id', $following)
-              ->withCount(['comments', 'likes'])
+              ->with('media')
               ->orderBy('created_at', 'desc')
               ->take(21)
               ->get();
-          });
 
         $res = [
             'people' => $people->map(function($profile) {
                 return [
+                    'id'    => $profile->id,
                     'avatar' => $profile->avatarUrl(),
                     'name' => $profile->name,
                     'username' => $profile->username,
@@ -174,8 +171,6 @@ class InternalApiController extends Controller
                 return [
                     'url' => $post->url(),
                     'thumb' => $post->thumb(),
-                    'comments_count' => $post->comments_count,
-                    'likes_count' => $post->likes_count,
                 ];
             })
         ];

app/Http/Controllers/ProfileController.php

@@ -37,7 +37,7 @@ class ProfileController extends Controller
             $settings->show_profile_follower_count = true;
             $settings->show_profile_following_count = true;
         } else {
-            $settings = User::whereUsername($username)->firstOrFail()->settings;
+            $settings = $user->user->settings;
         }
 
         if ($request->wantsJson() && config('pixelfed.activitypub_enabled')) {
@@ -101,7 +101,6 @@ class ProfileController extends Controller
         }
         
         return false;
-
     }
 
     protected function blockedProfileCheck(Profile $profile)
@@ -145,6 +144,7 @@ class ProfileController extends Controller
     public function followers(Request $request, $username)
     {
         $profile = $user = Profile::whereUsername($username)->firstOrFail();
+
         // TODO: fix $profile/$user mismatch in profile & follower templates
         $owner = Auth::check() && Auth::id() === $user->user_id;
         $is_following = ($owner == false && Auth::check()) ? $user->followedBy(Auth::user()->profile) : false;
@@ -161,7 +161,10 @@ class ProfileController extends Controller
             $settings = new \StdClass;
             $settings->crawlable = false;
         } else {
-            $settings = User::whereUsername($username)->firstOrFail()->settings;
+            $settings = $profile->user->settings;
+            if(!$settings->show_profile_follower_count && !$owner) {
+                abort(403);
+            }
         }
         return view('profile.followers', compact('user', 'profile', 'followers', 'owner', 'is_following', 'is_admin', 'settings'));
     }
@@ -185,7 +188,10 @@ class ProfileController extends Controller
             $settings = new \StdClass;
             $settings->crawlable = false;
         } else {
-            $settings = User::whereUsername($username)->firstOrFail()->settings;
+            $settings = $profile->user->settings;
+            if(!$settings->show_profile_follower_count && !$owner) {
+                abort(403);
+            }
         }
         return view('profile.following', compact('user', 'profile', 'following', 'owner', 'is_following', 'is_admin', 'settings'));
     }

app/Jobs/FollowPipeline/FollowPipeline.php

@@ -51,7 +51,7 @@ class FollowPipeline implements ShouldQueue
             $notification->save();
 
             Cache::forever('notification.'.$notification->id, $notification);
-
+            Cache::forget('feature:discover:people:'.$actor->id);
             $redis = Redis::connection();
 
             $nkey = config('cache.prefix').':user.'.$target->id.'.notifications';

app/Listeners/AuthLogin.php

@@ -2,24 +2,18 @@
 
 namespace App\Listeners;
 
-use DB;
+use DB, Cache;
-use App\User;
+use App\{
-use App\UserSetting;
+    Follower,
+    User,
+    UserFilter,
+    UserSetting
+};
 use Illuminate\Queue\InteractsWithQueue;
 use Illuminate\Contracts\Queue\ShouldQueue;
 
 class AuthLogin
 {
-    /**
-     * Create the event listener.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        //
-    }
-
     /**
      * Handle the event.
      *
@@ -36,5 +30,22 @@ class AuthLogin
                 ]);
             });
         }
+        $this->warmCache($user);
+    }
+
+    public function warmCache($user)
+    {
+        $pid = $user->profile->id;
+
+        Cache::remember('feature:discover:following:'.$pid, 10080, function() use ($pid) {
+            return Follower::whereProfileId($pid)->pluck('following_id')->toArray();
+        });
+
+        Cache::remember("user:filter:list:$pid", 10080, function() use($pid) {
+            return UserFilter::whereUserId($pid)
+            ->whereFilterableType('App\Profile')
+            ->whereIn('filter_type', ['mute', 'block'])
+            ->pluck('filterable_id')->toArray();
+        });
     }
 }

resources/assets/js/components/DiscoverComponent.vue

@@ -16,10 +16,7 @@
             </div>
             <p class="lead font-weight-bold mb-0 text-truncate"><a :href="profile.url" class="text-dark">{{profile.username}}</a></p>
             <p class="text-muted text-truncate">{{profile.name}}</p>
-            <form class="follow-form" method="post" action="/i/follow" data-id="#" data-action="follow">
+            <button class="btn btn-primary font-weight-bold px-4 py-0" v-on:click="followUser(profile.id, $event)">Follow</button>
-              <input type="hidden" name="item" value="#">
-              <button class="btn btn-primary font-weight-bold px-4 py-0" type="submit">Follow</button>
-            </form>
           </div>
         </div>
       </div>
@@ -36,16 +33,6 @@
           <a class="card info-overlay card-md-border-0" :href="post.url">
             <div class="square filter_class">
               <div class="square-content" v-bind:style="{ 'background-image': 'url(' + post.thumb + ')' }"></div>
-              <div class="info-overlay-text">
-                <h5 class="text-white m-auto font-weight-bold">
-                  <span class="pr-4">
-                  <span class="far fa-heart fa-lg pr-1"></span> {{post.likes_count}}
-                  </span>
-                  <span>
-                  <span class="far fa-comment fa-lg pr-1"></span> {{post.comments_count}}
-                  </span>
-                </h5>
-              </div>
             </div>
           </a>
         </div>
@@ -53,7 +40,7 @@
      </div>
   </section>
   <section class="mb-5">
-  	<p class="lead text-center">To view more posts, check the <a href="#" class="font-weight-bold">home</a>, <a href="#" class="font-weight-bold">local</a> or <a href="#" class="font-weight-bold">federated</a> timelines.</p>
+  	<p class="lead text-center">To view more posts, check the <a href="/" class="font-weight-bold">home</a> or <a href="/timeline/public" class="font-weight-bold">local</a> timelines.</p>
   </section>
 </div>
 </template>
@@ -68,10 +55,26 @@ export default {
 		}
 	},
 	mounted() {
+    this.slowTimeout();
     this.fetchData();
 	},
 
 	methods: {
+    followUser(id, event) {
+      axios.post('/i/follow', {
+        item: id
+      }).then(res => {
+        let el = $(event.target);
+        el.addClass('btn-outline-secondary').removeClass('btn-primary');
+        el.text('Unfollow');
+      }).catch(err => {
+        swal(
+          'Whoops! Something went wrong...',
+          'An error occured, please try again later.',
+          'error'
+        );
+      });
+    },
 		fetchData() {
 			axios.get('/api/v2/discover')
 			.then((res) => {
@@ -80,15 +83,22 @@ export default {
 				this.posts = data.posts;
 
 				if(this.people.length > 1) {
-					$('.section-people .lds-ring').hide();
+					$('.section-people .loader').hide();
 					$('.section-people .row.d-none').removeClass('d-none');
 				}
 
 				if(this.posts.length > 1) {
-					$('.section-explore .lds-ring').hide();
+					$('.section-explore .loader').hide();
 					$('.section-explore .row.d-none').removeClass('d-none');
 				}
 			});
+		},
+    slowTimeout() {
+      setTimeout(function() {
+        let el = $('<p>').addClass('font-weight-bold').text('This is taking longer than expected to load. Please try reloading the page if this does not load after 30 seconds.');
+        $('.section-people .loader').append(el);
+        $('.section-explore .loader').append(el);
+      }, 5000);
     }
 	}
 }

resources/assets/js/components/PostComments.vue

@@ -18,7 +18,7 @@
   <div class="postCommentsContainer d-none">
     <p class="mb-1 text-center load-more-link d-none"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
     <div class="comments" data-min-id="0" data-max-id="0">
-      <p class="mb-1" v-for="(comment, index) in results" :data-id="comment.id" v-bind:key="comment.id">
+      <p class="mb-1" v-for="(comment, index) in results" :data-id="comment.id" :key="comment.id">
         <span class="d-flex justify-content-between align-items-center">
           <span class="pr-3" style="overflow: hidden;">
             <div class="font-weight-bold pr-1"><bdi><a class="text-dark" :href="comment.account.url" :title="comment.account.username">{{l(comment.account.username)}}</a></bdi>