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

Improve Profile performance

app/Http/Controllers/FollowerController.php

@@ -68,7 +68,9 @@ class FollowerController extends Controller
             $follower->delete();
         }
 
+        Cache::forget('profile:following:'.$target->id);
         Cache::forget('profile:followers:'.$target->id);
         Cache::forget('profile:following:'.$user->id);
+        Cache::forget('profile:followers:'.$user->id);
     }
 }

app/Http/Controllers/PublicApiController.php

@@ -328,6 +328,7 @@ class PublicApiController extends Controller
                 ->orWhere('status', '!=', null)
                 ->pluck('id');
         });
+
         $filters = UserFilter::whereUserId($pid)
                   ->whereFilterableType('App\Profile')
                   ->whereIn('filter_type', ['mute', 'block'])
@@ -457,51 +458,72 @@ class PublicApiController extends Controller
             'only_media' => 'nullable',
             'pinned' => 'nullable',
             'exclude_replies' => 'nullable',
-            'max_id' => 'nullable|integer|min:1',
+            'max_id' => 'nullable|integer|min:0|max:' . PHP_INT_MAX,
-            'since_id' => 'nullable|integer|min:1',
+            'since_id' => 'nullable|integer|min:0|max:' . PHP_INT_MAX,
-            'min_id' => 'nullable|integer|min:1',
+            'min_id' => 'nullable|integer|min:0|max:' . PHP_INT_MAX,
             'limit' => 'nullable|integer|min:1|max:24'
         ]);
-        $limit = $request->limit ?? 20;
-        $max_id = $request->max_id ?? false;
-        $min_id = $request->min_id ?? false;
-        $since_id = $request->since_id ?? false;
-        $only_media = $request->only_media ?? false;
-        $user = Auth::user();
-        $account = Profile::whereNull('status')->findOrFail($id);
-        $statuses = Status::whereProfileId($id)
-            ->whereNull('uri');
 
-        if(!$user || $user->profile->id != $account->id && !$user->profile->follows($account)) {
+        $profile = Profile::whereNull('status')->findOrFail($id);
-            $statuses = $statuses->whereVisibility('public');
+
+        $limit = $request->limit ?? 9;
+        $max_id = $request->max_id;
+        $min_id = $request->min_id;
+        $scope = $request->only_media == true ? 
+            ['photo', 'photo:album', 'video', 'video:album'] :
+            ['photo', 'photo:album', 'video', 'video:album', 'share', 'reply'];
+       
+        if($profile->is_private) {
+            if(!Auth::check()) {
+                return response()->json([]);
+            }
+            $pid = Auth::user()->profile->id;
+            $following = Cache::remember('profile:following:'.$pid, now()->addMinutes(1440), function() use($pid) {
+                $following = Follower::whereProfileId($pid)->pluck('following_id');
+                return $following->push($pid)->toArray();
+            });
+            $visibility = true == in_array($profile->id, $following) ? ['public', 'unlisted', 'private'] : [];
         } else {
-            $statuses = $statuses->whereIn('visibility', ['public', 'unlisted', 'private']);
+            if(Auth::check()) {
+                $pid = Auth::user()->profile->id;
+                $following = Cache::remember('profile:following:'.$pid, now()->addMinutes(1440), function() use($pid) {
+                    $following = Follower::whereProfileId($pid)->pluck('following_id');
+                    return $following->push($pid)->toArray();
+                });
+                $visibility = true == in_array($profile->id, $following) ? ['public', 'unlisted', 'private'] : ['public'];
+            } else {
+                $visibility = ['public'];
+            }
         }
-        if($only_media == true) {
+
-            $statuses = $statuses
+
-                ->whereHas('media')
+        $dir = $min_id ? '>' : '<';
-                ->whereNull('in_reply_to_id')
+        $id = $min_id ?? $max_id;
-                ->whereNull('reblog_of_id');
+        $timeline = Status::select(
-        }
+            'id', 
-        if($id == $account->id && !$max_id && !$min_id && !$since_id) {
+            'uri',
-            $statuses = $statuses->orderBy('id', 'desc')
+            'caption',
-                ->simplePaginate($limit);
+            'rendered',
-        } else if($since_id) {
+            'profile_id', 
-            $statuses = $statuses->where('id', '>', $since_id)
+            'type',
-                ->orderBy('id', 'DESC')
+            'in_reply_to_id',
-                ->simplePaginate($limit);
+            'reblog_of_id',
-        } else if($min_id) {
+            'is_nsfw',
-            $statuses = $statuses->where('id', '>', $min_id)
+            'scope',
-                ->orderBy('id', 'ASC')
+            'local',
-                ->simplePaginate($limit);
+            'created_at',
-        } else if($max_id) {
+            'updated_at'
-            $statuses = $statuses->where('id', '<', $max_id)
+          )->whereProfileId($profile->id)
-                ->orderBy('id', 'DESC')
+          ->whereIn('type', $scope)
-                ->simplePaginate($limit);
+          ->whereLocal(true)
-        } else {
+          ->whereNull('uri')
-            $statuses = $statuses->orderBy('id', 'desc')->simplePaginate($limit);
+          ->where('id', $dir, $id)
-        }
+          ->whereIn('visibility',$visibility)
-        $resource = new Fractal\Resource\Collection($statuses, new StatusTransformer());
+          ->orderBy('created_at', 'desc')
+          ->limit($limit)
+          ->get();
+
+        $resource = new Fractal\Resource\Collection($timeline, new StatusTransformer());
         $res = $this->fractal->createData($resource)->toArray();
 
         return response()->json($res);

public/mix-manifest.json

@@ -1,12 +1,12 @@
 {
     "/js/activity.js": "/js/activity.js?id=7915246c3bc2b7e9770e",
     "/js/app.js": "/js/app.js?id=a51da95c2b9df7cf8de2",
-    "/css/app.css": "/css/app.css?id=04eb4b8faed92dddf9b8",
+    "/css/app.css": "/css/app.css?id=da1490bc71c86824a5d8",
-    "/css/appdark.css": "/css/appdark.css?id=30395a38e7b5e41dfc52",
+    "/css/appdark.css": "/css/appdark.css?id=75eb957c4cbdd84b6016",
     "/js/components.js": "/js/components.js?id=57c50c50a350244acfec",
-    "/js/discover.js": "/js/discover.js?id=95091dda6723ab05dbb5",
+    "/js/discover.js": "/js/discover.js?id=f118e140c1d1d44b8f01",
     "/js/micro.js": "/js/micro.js?id=178479fb6990f8806257",
-    "/js/profile.js": "/js/profile.js?id=488dcd99d616ca9ef8de",
+    "/js/profile.js": "/js/profile.js?id=bbbad89c8912f9e4d750",
-    "/js/status.js": "/js/status.js?id=096927f9312b1d7bb1b0",
+    "/js/status.js": "/js/status.js?id=d15b5bae5db49835c166",
-    "/js/timeline.js": "/js/timeline.js?id=340af840d0b13e175282"
+    "/js/timeline.js": "/js/timeline.js?id=b460ac839fb7aa56c86a"
 }

resources/assets/js/components/DiscoverComponent.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="container">
 
-  <section class="mb-5 pb-3 px-2 d-xs-none d-md-block" style="overflow-x: hidden;" v-if="categories.length > 0">
+  <section class="mb-5 pb-3 px-2 d-flex" style="overflow-x: hidden;" v-if="categories.length > 0">
     <a class="bg-dark rounded d-inline-flex align-items-end justify-content-center mr-3 box-shadow" style="width:160px;height:100px;" href="/discover/personal">
       <p class="text-white font-weight-bold" style="text-shadow: 3px 3px 16px #272634;border-bottom: 2px solid #fff;">For You</p>
     </a>

resources/assets/js/components/Profile.vue

@@ -22,7 +22,7 @@
 								<span class="pl-4" v-if="owner">
 									<a class="fas fa-cog fa-lg text-muted" href="/settings/home"></a>
 								</span>
-								<span v-if="!owner && user.hasOwnProperty('id')">
+								<span v-if="profile.id != user.id && user.hasOwnProperty('id')">
 									<span class="pl-4" v-if="relationship.following == true">
 										<button type="button"  class="btn btn-outline-secondary font-weight-bold px-4 py-0" v-on:click="followProfile()">Unfollow</button>
 									</span>
@@ -213,10 +213,12 @@
 						</a>
 					</div>
 				</div>
-				<infinite-loading @infinite="infiniteTimeline">
+				<div v-if="timeline.length">
-					<div slot="no-more"></div>
+					<infinite-loading @infinite="infiniteTimeline">
-					<div slot="no-results"></div>
+						<div slot="no-more"></div>
-				</infinite-loading>
+						<div slot="no-results"></div>
+					</infinite-loading>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -324,6 +326,8 @@ export default {
 			user: {},
 			timeline: [],
 			timelinePage: 2,
+			min_id: 0,
+			max_id: 0,
 			loading: true,
 			owner: false,
 			mode: 'grid',
@@ -368,11 +372,15 @@ export default {
 			axios.get(apiUrl, {
 				params: {
 					only_media: true,
-					page: 1,
+					min_id: 1,
 				}
 			})
 			.then(res => {
-				this.timeline = res.data;
+				let data = res.data;
+				this.timeline = data;
+				let ids = data.map(status => status.id);
+				this.min_id = Math.max(...ids);
+				this.max_id = Math.min(...ids);
 				this.modalStatus = _.first(res.data);
 				this.loading = false;
 				this.ownerCheck();
@@ -393,14 +401,16 @@ export default {
 			let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
 			axios.get(apiUrl, {
 				params: {
-					page: this.timelinePage,
+					only_media: true,
-					only_media: true
+					max_id: this.max_id
 				},
 			}).then(res => {
 				if (res.data.length && this.loading == false) {
 					let data = res.data;
 					this.timeline.push(...data);
-					this.timelinePage += 1;
+					let ids = data.map(status => status.id);
+					this.max_id = Math.min(...ids);
+					this.loading = false;
 					$state.loaded();
 				} else {
 					$state.complete();
@@ -651,6 +661,9 @@ export default {
 			}).then(res => {
 				if(this.relationship.following) {
 					this.profile.followers_count--;
+					if(this.profile.locked == true) {
+						window.location.href = '/';
+					}
 				} else {
 					this.profile.followers_count++;
 				}