LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: Fix timestamp auto-update in conversations chat list (#5640)

Browse Source 
* 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:
David Kubeš
2022-10-27 21:35:39 +02:00
committed by GitHub
parent 89d7e4ead6
commit 2aa99ee137
1 changed files with 25 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/javascript/dashboard/components/ui/TimeAgo.vue
View File

@@ -5,13 +5,11 @@
</template> </template>
<script> <script>
const ZERO = 0;
const MINUTE_IN_MILLI_SECONDS = 60000; const MINUTE_IN_MILLI_SECONDS = 60000;
const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60; const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24; const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
import timeMixin from 'dashboard/mixins/time'; import timeMixin from 'dashboard/mixins/time';
import { differenceInMilliseconds } from 'date-fns';
export default { export default {
name: 'TimeAgo', name: 'TimeAgo',
@@ -28,51 +26,40 @@ export default {
}, },
data() { data() {
return { return {
timeAgo: '', timeAgo: this.dynamicTime(this.timestamp),
timer: null, 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() { refreshTime() {
const timeDiff = differenceInMilliseconds( const timeDiff = Date.now() - this.timestamp * 1000;
new Date(),
new Date(this.timestamp * 1000)
);
if (timeDiff > DAY_IN_MILLI_SECONDS) { if (timeDiff > DAY_IN_MILLI_SECONDS) {
return DAY_IN_MILLI_SECONDS; return DAY_IN_MILLI_SECONDS;
} }
if (timeDiff > HOUR_IN_MILLI_SECONDS) { if (timeDiff > HOUR_IN_MILLI_SECONDS) {
return HOUR_IN_MILLI_SECONDS; return HOUR_IN_MILLI_SECONDS;
} }
if (timeDiff > MINUTE_IN_MILLI_SECONDS) {
return 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);
}
}, },
}, },
}; };