vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

fix: add interval to uses of useNow so that it uses less resources #3255

Merged
dpschen merged 6 commits from feature/add-interval-to-use-now into main 2023-03-24 23:30:29 +00:00
Conversation 4 Commits 6 Files Changed 3 +10 -7
3 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/home/Logo.vue
View File

@ -4,8 +4,11 @@ import { useNow } from '@vueuse/core'
import LogoFull from '@/assets/logo-full.svg?component'
import LogoFullPride from '@/assets/logo-full-pride.svg?component'
import {MILLISECONDS_A_HOUR} from '@/constants/date'
const now = useNow()
const now = useNow({
konrad marked this conversation as resolved
dpschen commented 2023-03-16 20:22:34 +00:00
Review
Copy Link

We want that the Logo changes at midnight, correct? By setting this to change in an interval of a day this might happen at 23:00 the next day if the logo page with the logo was opened at that time the day before. Could we configure this somehow so that it's triggered every real daychange? Or hour change?

We want that the Logo changes at midnight, correct? By setting this to change in an interval of a day this might happen at 23:00 the next day if the logo page with the logo was opened at that time the day before. Could we configure this somehow so that it's triggered every real daychange? Or hour change?
WofWca commented 2023-03-17 10:55:03 +00:00
Review
Copy Link

Calculating how much time left until the point of change + setTimeout (possibly setInterval in case the page is not reloaded for months) should work.

Calculating how much time left until the point of change + `setTimeout` (possibly `setInterval` in case the page is not reloaded for months) should work.
konrad commented 2023-03-23 21:14:35 +00:00
Review
Copy Link

Ideally we want to change the logo at midnight, yes. But since this is not something I'd consider critical and it will be shown for a whole month it should be enough to check this once a day. Even if that means it might lag behind one day.

Ideally we want to change the logo at midnight, yes. But since this is not something I'd consider critical and it will be shown for a whole month it should be enough to check this once a day. Even if that means it might lag behind one day.
dpschen commented 2023-03-24 19:00:27 +00:00
Review
Copy Link

We should use the time unit constants for this.

How about using every hour? One tick per hour should really not create any performance issues (as said earlier I think once per second should also not be an issue.

We should use the time unit constants for this. How about using every hour? One tick per hour should really not create any performance issues (as said earlier I think once per second should also not be an issue.
dpschen commented 2023-03-24 19:00:28 +00:00
Review
Copy Link

We should use the time unit constants for this.

How about using every hour? One tick per hour should really not create any performance issues (as said earlier I think once per second should also not be an issue.

We should use the time unit constants for this. How about using every hour? One tick per hour should really not create any performance issues (as said earlier I think once per second should also not be an issue.
konrad commented 2023-03-24 19:10:15 +00:00
Review
Copy Link

We should use the time unit constants for this.

Done!

> We should use the time unit constants for this. Done!
👍 1
konrad commented 2023-03-24 19:10:57 +00:00
Review
Copy Link

How about using every hour? One tick per hour should really not create any performance issues (as said earlier I think once per second should also not be an issue.

and done!

> How about using every hour? One tick per hour should really not create any performance issues (as said earlier I think once per second should also not be an issue. and done!
👍 1
interval: MILLISECONDS_A_HOUR,
})
const Logo = computed(() => now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
</script>

6
src/components/tasks/GanttChart.vue
View File

@ -38,9 +38,8 @@
</template>
<script setup lang="ts">
import {computed, ref, watch, toRefs} from 'vue'
import {computed, ref, watch, toRefs, onActivated} from 'vue'
import {useRouter} from 'vue-router'
import {useNow} from '@vueuse/core'
import {getHexColor} from '@/models/task'
@ -157,7 +156,8 @@ function openTask(e: {
const weekDayFromDate = useWeekDayFromDate()
const today = useNow()
const today = ref(new Date())
onActivated(() => today.value = new Date())
konrad marked this conversation as resolved Outdated
dpschen commented 2023-03-24 18:57:36 +00:00
Outdated
Review
Copy Link

I think it should be onActivated

I think it should be `onActivated`
dpschen commented 2023-03-24 18:58:29 +00:00
Outdated
Review
Copy Link

Because it the view is cached mounted will not trigger again.

Because it the view is cached mounted will not trigger again.
konrad commented 2023-03-24 19:06:46 +00:00
Outdated
Review
Copy Link

Ah yes, good point. Fixed.

Ah yes, good point. Fixed.
const dateIsToday = computed(() => (date: Date) => {
konrad marked this conversation as resolved Outdated
dpschen commented 2023-03-16 20:23:37 +00:00
Outdated
Review
Copy Link

If we don't change this constantly I think it would be better to only change it when the user switches view. Changing it every 6 hours seems random in comparison.

If we don't change this constantly I think it would be better to only change it when the user switches view. Changing it every 6 hours seems random in comparison.
👍 1
konrad commented 2023-03-23 21:15:09 +00:00
Outdated
Review
Copy Link

If we don't change this constantly I think it would be better to only change it when the user switches view.

That's a good point.

> If we don't change this constantly I think it would be better to only change it when the user switches view. That's a good point.
konrad commented 2023-03-24 18:49:08 +00:00
Outdated
Review
Copy Link

Done!

Done!
return (
date.getDate() === today.value.getDate() &&

6
src/composables/useDaytimeSalutation.ts
View File

@ -1,6 +1,5 @@
import {computed} from 'vue'
import {computed, onActivated, ref} from 'vue'
import {useI18n} from 'vue-i18n'
import {useNow} from '@vueuse/core'
import {useAuthStore} from '@/stores/auth'
import {hourToDaytime} from '@/helpers/hourToDaytime'
@ -9,7 +8,8 @@ export type Daytime = 'night' | 'morning' | 'day' | 'evening'
export function useDaytimeSalutation() {
const {t} = useI18n({useScope: 'global'})
const now = useNow()
const now = ref(new Date())
onActivated(() => now.value = new Date())
konrad marked this conversation as resolved Outdated
dpschen commented 2023-03-24 18:57:57 +00:00
Outdated
Review
Copy Link

Same here

Same here
konrad commented 2023-03-24 19:07:51 +00:00
Outdated
Review
Copy Link

Done.

Done.
const authStore = useAuthStore()
dpschen marked this conversation as resolved Outdated
dpschen commented 2023-03-16 20:29:52 +00:00
Outdated
Review
Copy Link

Same here.

Same here.
👍 1
konrad commented 2023-03-24 18:49:22 +00:00
Outdated
Review
Copy Link

Done!

Done!
const name = computed(() => authStore.userDisplayName)