refactor: move refreshMoment into mixin

Signed-off-by: Max <max@nextcloud.com>

src/components/Editor/Status.vue

@@ -39,12 +39,13 @@
 
 import SavingIndicator from '../SavingIndicator.vue'
 import { ERROR_TYPE } from './../../services/SyncService.js'
-import { Tooltip } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
+import { Tooltip } from '@nextcloud/vue'
 import {
 	useIsMobileMixin,
 	useIsPublicMixin,
 } from '../Editor.provider.js'
+import refreshMoment from '../../mixins/refreshMoment.js'
 
 export default {
 	name: 'Status',
@@ -59,7 +60,7 @@ export default {
 		Tooltip,
 	},
 
-	mixins: [useIsMobileMixin, useIsPublicMixin],
+	mixins: [useIsMobileMixin, useIsPublicMixin, refreshMoment],
 
 	props: {
 		hasConnectionIssue: {
@@ -84,12 +85,6 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			refreshEvery20Seconds: 0,
-		}
-	},
-
 	computed: {
 		lastSavedStatus() {
 			if (this.hasConnectionIssue) {
@@ -131,21 +126,13 @@ export default {
 			return Object.values(this.sessions).find((session) => session.isCurrent)
 		},
 		lastSavedString() {
-			this.refreshEvery20Seconds
+			// Make this a dependent of refreshMoment so it will be recomputed
+			/* eslint-disable-next-line no-unused-expressions */
+			this.refreshMoment
 			return moment(this.document.lastSavedVersionTime * 1000).fromNow()
 		},
 	},
 
-	mounted() {
-		this.$refreshInterval = setInterval(() => {
-			this.refreshEvery20Seconds++
-		}, 20000)
-	},
-
-	beforeDestroy() {
-		clearInterval(this.$refreshInterval)
-	},
-
 }
 </script>
 

src/mixins/refreshMoment.js

@@ -0,0 +1,47 @@
+/*
+ * @copyright Copyright (c) 2023 Max <max@nextcloud.com>
+ *
+ * @author Max <max@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/* moment.js displays intervals as "Some seconds ago" and the like.
+ * Use `this.refreshMoment` in a computed to live update these.
+ *
+ * Updates happen every 20 seconds as that is enough
+ * given the granularity of moment.js
+ */
+export default {
+
+	data() {
+		return {
+			refreshMoment: 0,
+		}
+	},
+
+	mounted() {
+		this.$refreshInterval = setInterval(() => {
+			this.refreshMoment++
+		}, 20000)
+	},
+
+	beforeDestroy() {
+		clearInterval(this.$refreshInterval)
+	},
+
+}