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

Frontend ui refactor

public/mix-manifest.json

@@ -8,8 +8,8 @@
     "/js/compose.js": "/js/compose.js?id=9ca175b3e11908bd592f",
     "/js/developers.js": "/js/developers.js?id=1359f11c7349301903f8",
     "/js/discover.js": "/js/discover.js?id=75fb12b06ee23fa05186",
-    "/js/profile.js": "/js/profile.js?id=b04e505105df8f179d31",
+    "/js/profile.js": "/js/profile.js?id=374b0a3f3fec1282aa55",
     "/js/search.js": "/js/search.js?id=0d3d080dc05f4f49b204",
     "/js/status.js": "/js/status.js?id=2c1a0fafcf34f573f537",
-    "/js/timeline.js": "/js/timeline.js?id=80123305feac4dbc20a7"
+    "/js/timeline.js": "/js/timeline.js?id=d3244d73aa9c88195958"
 }

resources/assets/js/components/Profile.vue

@@ -516,6 +516,7 @@ export default {
 	],
 	data() {
 		return {
+			ids: [],
 			profile: {},
 			user: {},
 			timeline: [],
@@ -568,6 +569,7 @@ export default {
 			.then(res => {
 				let data = res.data;
 				let ids = data.map(status => status.id);
+				this.ids = ids;
 				this.min_id = Math.max(...ids);
 				this.max_id = Math.min(...ids);
 				this.modalStatus = _.first(res.data);
@@ -601,9 +603,15 @@ export default {
 			}).then(res => {
 				if (res.data.length && this.loading == false) {
 					let data = res.data;
-					let ids = data.map(status => status.id);
+					let self = this;
-					this.max_id = Math.min(...ids);
+					data.forEach(d => {
-					this.timeline.push(...data);
+						if(self.ids.indexOf(d.id) == -1) {
+							self.timeline.push(d);
+							self.ids.push(d.id);
+						} 
+					});
+					this.min_id = Math.max(...this.ids);
+					this.max_id = Math.min(...this.ids);
 					$state.loaded();
 					this.loading = false;
 				} else {

resources/assets/js/components/Timeline.vue

@@ -430,6 +430,7 @@
 		props: ['scope'],
 		data() {
 			return {
+				ids: [],
 				config: {},
 				page: 2,
 				feed: [],
@@ -544,6 +545,7 @@
 					let data = res.data;
 					this.feed.push(...data);
 					let ids = data.map(status => status.id);
+					this.ids = ids;
 					this.min_id = Math.max(...ids);
 					this.max_id = Math.min(...ids);
 					$('.timeline .pagination').removeClass('d-none');
@@ -579,10 +581,15 @@
 				}).then(res => {
 					if (res.data.length && this.loading == false) {
 						let data = res.data;
-						this.feed.push(...data);
+						let self = this;
-						let ids = data.map(status => status.id);
+						data.forEach(d => {
-						this.min_id = Math.max(...ids);
+							if(self.ids.indexOf(d.id) == -1) {
-						this.max_id = Math.min(...ids);
+								self.feed.push(d);
+								self.ids.push(d.id);
+							} 
+						});
+						this.min_id = Math.max(...this.ids);
+						this.max_id = Math.min(...this.ids);
 						this.page += 1;
 						$state.loaded();
 						this.loading = false;