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

Frontend ui refactor

app/Http/Controllers/ApiController.php

@@ -9,8 +9,7 @@ use App\{
     Profile,
     UserFilter
 };
-use Auth;
+use Auth, Cache, Redis;
-use Cache;
 use Illuminate\Http\Request;
 use App\Services\SuggestionService;
 
@@ -71,6 +70,13 @@ class ApiController extends BaseApiController
                   ->pluck('filterable_id')->toArray();
         $following = array_merge($following, $filters);
 
+        $key = config('cache.prefix').':api:local:exp:rec:'.$id;
+        $ttl = (int) Redis::ttl($key);
+
+        if($request->filled('refresh') == true  && (290 > $ttl) == true) {
+            Cache::forget('api:local:exp:rec:'.$id);
+        }
+
         $res = Cache::remember('api:local:exp:rec:'.$id, now()->addMinutes(5), function() use($id, $following, $ids) {
             return Profile::select(
                 'id',

public/mix-manifest.json

@@ -11,5 +11,5 @@
     "/js/profile.js": "/js/profile.js?id=71deeec272baa24f40b8",
     "/js/search.js": "/js/search.js?id=0d3d080dc05f4f49b204",
     "/js/status.js": "/js/status.js?id=2c1a0fafcf34f573f537",
-    "/js/timeline.js": "/js/timeline.js?id=2ae0450ee62c22f3839f"
+    "/js/timeline.js": "/js/timeline.js?id=78256ff92a24512745c3"
 }

resources/assets/js/components/Timeline.vue

@@ -274,7 +274,7 @@
 				<div v-show="showSuggestions == true && suggestions.length && config.ab && config.ab.rec == true" class="mb-4">
 					<div class="card">
 						<div class="card-header bg-white d-flex align-items-center justify-content-between">
-							<div></div>
+							<a class="small text-muted cursor-pointer" href="#" @click.prevent="refreshSuggestions" ref="suggestionRefresh"><i class="fas fa-sync-alt"></i></a>
 							<div class="small text-dark text-uppercase font-weight-bold">Suggestions</div>
 							<div class="small text-muted cursor-pointer" v-on:click="hideSuggestions"><i class="fas fa-times"></i></div>
 						</div>
@@ -1067,7 +1067,6 @@
 				if(this.config.ab.rec == false) {
 					return;
 				}
-
 				axios.get('/api/local/exp/rec')
 				.then(res => {
 					this.suggestions = res.data;
@@ -1123,6 +1122,39 @@
 					$('textarea[name="comment"]').focus();
 				}
 			}, 
+
+			refreshSuggestions() {
+				let el = event.target.parentNode;
+				if(el.classList.contains('disabled') == true) {
+					return;
+				}
+				axios.get('/api/local/exp/rec', {
+					params: {
+						refresh: true
+					}
+				})
+				.then(res => {
+					this.suggestions = res.data;
+
+					if (el.classList) {
+						el.classList.add('disabled');
+						el.classList.add('text-light');
+					}
+					else {
+						el.className += ' ' + 'disabled text-light';
+					}
+					setTimeout(function() {
+						el.setAttribute('href', '#');
+						if (el.classList) {
+							el.classList.remove('disabled');
+							el.classList.remove('text-light');
+						}
+						else {
+							el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), 'disabled text-light');
+						}
+					}, 10000);
+				});
+			}
 		}
 	}
 </script>