fix: Fix timestamp auto-update in conversations chat list (#5640)
* fix: Fix timestamp auto-update * fix: rewrite `setInterval` to `setTimeout` * fix: change refresh time logic Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
parent
89d7e4ead6
commit
2aa99ee137
1 changed files with 25 additions and 38 deletions
|
@ -1,17 +1,15 @@
|
|||
<template>
|
||||
<span class="time-ago">
|
||||
<span> {{ timeAgo }}</span>
|
||||
<span>{{ timeAgo }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const ZERO = 0;
|
||||
const MINUTE_IN_MILLI_SECONDS = 60000;
|
||||
const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
|
||||
const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
|
||||
|
||||
import timeMixin from 'dashboard/mixins/time';
|
||||
import { differenceInMilliseconds } from 'date-fns';
|
||||
|
||||
export default {
|
||||
name: 'TimeAgo',
|
||||
|
@ -28,51 +26,40 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
timeAgo: '',
|
||||
timeAgo: this.dynamicTime(this.timestamp),
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
watch: {
|
||||
timestamp() {
|
||||
this.timeAgo = this.dynamicTime(this.timestamp);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.isAutoRefreshEnabled) {
|
||||
this.createTimer();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.timer);
|
||||
},
|
||||
methods: {
|
||||
createTimer() {
|
||||
this.timer = setTimeout(() => {
|
||||
this.timeAgo = this.dynamicTime(this.timestamp);
|
||||
this.createTimer();
|
||||
}, this.refreshTime());
|
||||
},
|
||||
refreshTime() {
|
||||
const timeDiff = differenceInMilliseconds(
|
||||
new Date(),
|
||||
new Date(this.timestamp * 1000)
|
||||
);
|
||||
const timeDiff = Date.now() - this.timestamp * 1000;
|
||||
if (timeDiff > DAY_IN_MILLI_SECONDS) {
|
||||
return DAY_IN_MILLI_SECONDS;
|
||||
}
|
||||
if (timeDiff > HOUR_IN_MILLI_SECONDS) {
|
||||
return HOUR_IN_MILLI_SECONDS;
|
||||
}
|
||||
if (timeDiff > MINUTE_IN_MILLI_SECONDS) {
|
||||
|
||||
return MINUTE_IN_MILLI_SECONDS;
|
||||
}
|
||||
return ZERO;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.timeAgo = this.dynamicTime(this.timestamp);
|
||||
if (this.isAutoRefreshEnabled) {
|
||||
this.createTimer();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearTimer();
|
||||
},
|
||||
methods: {
|
||||
createTimer() {
|
||||
const refreshTime = this.refreshTime;
|
||||
if (refreshTime > ZERO) {
|
||||
this.timer = setTimeout(() => {
|
||||
this.timeAgo = this.dynamicTime(this.timestamp);
|
||||
this.createTimer();
|
||||
}, refreshTime);
|
||||
}
|
||||
},
|
||||
clearTimer() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue