code refactor

src/stores/overview.js

@@ -1,40 +1,167 @@
 import { defineStore } from 'pinia';
 
+import { useUserStore } from './user.js';
 import { useExchangeRatesStore } from './exchangeRates.js';
 
 import { isNumber, isEquals } from '@/lib/common.js';
+import {
+    getTodayFirstUnixTime,
+    getTodayLastUnixTime,
+    getThisWeekFirstUnixTime,
+    getThisWeekLastUnixTime,
+    getThisMonthFirstUnixTime,
+    getThisMonthLastUnixTime,
+    getThisYearFirstUnixTime,
+    getThisYearLastUnixTime
+} from '@/lib/datetime.js';
 import services from '@/lib/services.js';
 import logger from '@/lib/logger.js';
 
+function updateTransactionDateRange(state) {
+    const userStore = useUserStore();
+
+    state.transactionDataRange.today.startTime = getTodayFirstUnixTime();
+    state.transactionDataRange.today.endTime = getTodayLastUnixTime();
+
+    state.transactionDataRange.thisWeek.startTime = getThisWeekFirstUnixTime(userStore.currentUserFirstDayOfWeek);
+    state.transactionDataRange.thisWeek.endTime = getThisWeekLastUnixTime(userStore.currentUserFirstDayOfWeek);
+
+    state.transactionDataRange.thisMonth.startTime = getThisMonthFirstUnixTime();
+    state.transactionDataRange.thisMonth.endTime = getThisMonthLastUnixTime();
+
+    state.transactionDataRange.thisYear.startTime = getThisYearFirstUnixTime();
+    state.transactionDataRange.thisYear.endTime = getThisYearLastUnixTime();
+}
+
 export const useOverviewStore = defineStore('overview', {
     state: () => ({
-        transactionOverview: {},
+        transactionDataRange: {
+            today: {
+                startTime: getTodayFirstUnixTime(),
+                endTime: getTodayLastUnixTime()
+            },
+            thisWeek: {
+                startTime: getThisWeekFirstUnixTime(useUserStore().currentUserFirstDayOfWeek),
+                endTime: getThisWeekLastUnixTime(useUserStore().currentUserFirstDayOfWeek)
+            },
+            thisMonth: {
+                startTime: getThisMonthFirstUnixTime(),
+                endTime: getThisMonthLastUnixTime()
+            },
+            thisYear: {
+                startTime: getThisYearFirstUnixTime(),
+                endTime: getThisYearLastUnixTime()
+            }
+        },
+        transactionOverviewData: {},
         transactionOverviewStateInvalid: true
     }),
+    getters: {
+        transactionOverview(state) {
+            const userStore = useUserStore();
+            const exchangeRatesStore = useExchangeRatesStore();
+
+            const overviewData = state.transactionOverviewData;
+
+            if (!overviewData || !overviewData.thisMonth) {
+                return {
+                    thisMonth: {
+                        valid: false,
+                        incomeAmount: 0,
+                        expenseAmount: 0,
+                        incompleteIncomeAmount: false,
+                        incompleteExpenseAmount: false
+                    }
+                };
+            }
+
+            const finalOverviewData = {};
+            const defaultCurrency = userStore.currentUserDefaultCurrency;
+
+            [ 'today', 'thisWeek', 'thisMonth', 'thisYear' ].forEach(field => {
+                if (!Object.prototype.hasOwnProperty.call(overviewData, field)) {
+                    return;
+                }
+
+                const item = overviewData[field];
+
+                if (!item) {
+                    return;
+                }
+
+                let totalIncomeAmount = 0;
+                let totalExpenseAmount = 0;
+                let hasUnCalculatedTotalIncome = false;
+                let hasUnCalculatedTotalExpense = false;
+
+                if (item.amounts) {
+                    for (let i = 0; i < item.amounts.length; i++) {
+                        const amount = item.amounts[i];
+
+                        if (amount.currency !== defaultCurrency) {
+                            const incomeAmount = exchangeRatesStore.getExchangedAmount(amount.incomeAmount, amount.currency, defaultCurrency);
+                            const expenseAmount = exchangeRatesStore.getExchangedAmount(amount.expenseAmount, amount.currency, defaultCurrency);
+
+                            if (isNumber(incomeAmount)) {
+                                totalIncomeAmount += Math.floor(incomeAmount);
+                            } else {
+                                hasUnCalculatedTotalIncome = true;
+                            }
+
+                            if (isNumber(expenseAmount)) {
+                                totalExpenseAmount += Math.floor(expenseAmount);
+                            } else {
+                                hasUnCalculatedTotalExpense = true;
+                            }
+                        } else {
+                            totalIncomeAmount += amount.incomeAmount;
+                            totalExpenseAmount += amount.expenseAmount;
+                        }
+                    }
+                }
+
+                finalOverviewData[field] = {
+                    valid: true,
+                    incomeAmount: totalIncomeAmount,
+                    expenseAmount: totalExpenseAmount,
+                    incompleteIncomeAmount: hasUnCalculatedTotalIncome,
+                    incompleteExpenseAmount: hasUnCalculatedTotalExpense,
+                    amounts: item.amounts || []
+                };
+            });
+
+            return finalOverviewData;
+        }
+    },
     actions: {
         updateTransactionOverviewInvalidState(invalidState) {
             this.transactionOverviewStateInvalid = invalidState;
         },
         resetTransactionOverview() {
-            this.transactionOverview = {};
+            this.transactionOverviewData = {};
             this.transactionOverviewStateInvalid = true;
         },
-        loadTransactionOverview({ defaultCurrency, dateRange, force }) {
+        loadTransactionOverview({ force }) {
             const self = this;
-            const exchangeRatesStore = useExchangeRatesStore();
+            let dateChanged = false;
 
-            if (!force && !self.transactionOverviewStateInvalid) {
+            if (self.transactionDataRange.today.startTime !== getTodayFirstUnixTime()) {
+                dateChanged = true;
+                updateTransactionDateRange(self);
+            }
+
+            if (!dateChanged && !force && !self.transactionOverviewStateInvalid) {
                 return new Promise((resolve) => {
-                    resolve(self.transactionOverview);
+                    resolve(self.transactionOverviewData);
                 });
             }
 
             return new Promise((resolve, reject) => {
                 services.getTransactionAmounts({
-                    today: dateRange.today,
+                    today: self.transactionDataRange.today,
-                    thisWeek: dateRange.thisWeek,
+                    thisWeek: self.transactionDataRange.thisWeek,
-                    thisMonth: dateRange.thisMonth,
+                    thisMonth: self.transactionDataRange.thisMonth,
-                    thisYear: dateRange.thisYear
+                    thisYear: self.transactionDataRange.thisYear
                 }).then(response => {
                     const data = response.data;
 
@@ -43,66 +170,18 @@ export const useOverviewStore = defineStore('overview', {
                         return;
                     }
 
-                    const overview = data.result;
-
-                    for (let field in overview) {
-                        if (!Object.prototype.hasOwnProperty.call(overview, field)) {
-                            continue;
-                        }
-
-                        const item = overview[field];
-
-                        if (!item.amounts || !item.amounts.length) {
-                            item.amounts = [];
-                        }
-
-                        let totalIncomeAmount = 0;
-                        let totalExpenseAmount = 0;
-                        let hasUnCalculatedTotalIncome = false;
-                        let hasUnCalculatedTotalExpense = false;
-
-                        for (let i = 0; i < item.amounts.length; i++) {
-                            const amount = item.amounts[i];
-
-                            if (amount.currency !== defaultCurrency) {
-                                const incomeAmount = exchangeRatesStore.getExchangedAmount(amount.incomeAmount, amount.currency, defaultCurrency);
-                                const expenseAmount = exchangeRatesStore.getExchangedAmount(amount.expenseAmount, amount.currency, defaultCurrency);
-
-                                if (isNumber(incomeAmount)) {
-                                    totalIncomeAmount += Math.floor(incomeAmount);
-                                } else {
-                                    hasUnCalculatedTotalIncome = true;
-                                }
-
-                                if (isNumber(expenseAmount)) {
-                                    totalExpenseAmount += Math.floor(expenseAmount);
-                                } else {
-                                    hasUnCalculatedTotalExpense = true;
-                                }
-                            } else {
-                                totalIncomeAmount += amount.incomeAmount;
-                                totalExpenseAmount += amount.expenseAmount;
-                            }
-                        }
-
-                        item.incomeAmount = totalIncomeAmount;
-                        item.expenseAmount = totalExpenseAmount;
-                        item.incompleteIncomeAmount = hasUnCalculatedTotalIncome;
-                        item.incompleteExpenseAmount = hasUnCalculatedTotalExpense;
-                    }
-
                     if (self.transactionOverviewStateInvalid) {
                         self.updateTransactionOverviewInvalidState(false);
                     }
 
-                    if (force && overview && isEquals(self.transactionOverview, overview)) {
+                    if (force && data.result && isEquals(self.transactionOverviewData, data.result)) {
                         reject({ message: 'Data is up to date' });
                         return;
                     }
 
-                    self.transactionOverview = overview;
+                    self.transactionOverviewData = data.result;
 
-                    resolve(overview);
+                    resolve(data.result);
                 }).catch(error => {
                     if (force) {
                         logger.error('failed to force load transaction overview', error);

src/views/desktop/HomePage.vue

@@ -17,7 +17,7 @@
 
                 <v-card-text>
                     <h5 class="text-2xl font-weight-medium text-primary">
-                        {{ transactionOverview && transactionOverview.thisMonth ? transactionOverview.thisMonth.expenseAmount : '-' }}
+                        {{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}
                         <v-btn density="compact" color="default" variant="text"
                                :icon="true" @click="showAmountInHomePage = !showAmountInHomePage">
                             <v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" />
@@ -25,7 +25,7 @@
                     </h5>
                     <p>
                         <span class="mr-2">{{ $t('Monthly income') }}</span>
-                        <span>{{ transactionOverview && transactionOverview.thisMonth ? transactionOverview.thisMonth.incomeAmount : '-' }}</span>
+                        <span>{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
                     </p>
                     <v-btn size="small" to="/transactions">{{ $t('View Details') }}</v-btn>
                 </v-card-text>
@@ -36,8 +36,8 @@
             <income-expense-overview-card
                 :disabled="loadingOverview" :icon="icons.calendarToday"
                 :title="$t('Today')"
-                :expense-amount="transactionOverview.today && transactionOverview.today.valid ? transactionOverview.today.expenseAmount : '-'"
+                :expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : '-'"
-                :income-amount="transactionOverview.today && transactionOverview.today.valid ? transactionOverview.today.incomeAmount : '-'"
+                :income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : '-'"
                 :datetime="displayDateRange.today.displayTime"
             >
                 <template #menus>
@@ -52,8 +52,8 @@
             <income-expense-overview-card
                 :disabled="loadingOverview" :icon="icons.calendarWeek"
                 :title="$t('This Week')"
-                :expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? transactionOverview.thisWeek.expenseAmount : '-'"
+                :expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : '-'"
-                :income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? transactionOverview.thisWeek.incomeAmount : '-'"
+                :income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : '-'"
                 :datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime"
             >
                 <template #menus>
@@ -68,8 +68,8 @@
             <income-expense-overview-card
                 :disabled="loadingOverview" :icon="icons.calendarMonth"
                 :title="$t('This Month')"
-                :expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? transactionOverview.thisMonth.expenseAmount : '-'"
+                :expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-'"
-                :income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? transactionOverview.thisMonth.incomeAmount : '-'"
+                :income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-'"
                 :datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime"
             >
                 <template #menus>
@@ -84,8 +84,8 @@
             <income-expense-overview-card
                 :disabled="loadingOverview" :icon="icons.calendarYear"
                 :title="$t('This Year')"
-                :expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? transactionOverview.thisYear.expenseAmount : '-'"
+                :expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : '-'"
-                :income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? transactionOverview.thisYear.incomeAmount : '-'"
+                :income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : '-'"
                 :datetime="displayDateRange.thisYear.displayTime"
             >
                 <template #menus>
@@ -109,17 +109,7 @@ import { useUserStore } from '@/stores/user.js';
 import { useOverviewStore } from '@/stores/overview.js';
 
 import datetimeConstants from '@/consts/datetime.js';
-import {
+import { formatUnixTime } from '@/lib/datetime.js';
-    formatUnixTime,
-    getTodayFirstUnixTime,
-    getTodayLastUnixTime,
-    getThisWeekFirstUnixTime,
-    getThisWeekLastUnixTime,
-    getThisMonthFirstUnixTime,
-    getThisMonthLastUnixTime,
-    getThisYearFirstUnixTime,
-    getThisYearLastUnixTime
-} from '@/lib/datetime.js';
 
 import {
     mdiRefresh,
@@ -139,8 +129,6 @@ export default {
     data() {
         return {
             loadingOverview: true,
-            todayFirstUnixTime: getTodayFirstUnixTime(),
-            todayLastUnixTime: getTodayLastUnixTime(),
             icons: {
                 refresh: mdiRefresh,
                 eye: mdiEyeOutline,
@@ -178,78 +166,29 @@ export default {
         allDateRanges() {
             return datetimeConstants.allDateRanges;
         },
-        dateRange() {
-            const self = this;
-
-            return {
-                today: {
-                    startTime: self.todayFirstUnixTime,
-                    endTime: self.todayLastUnixTime
-                },
-                thisWeek: {
-                    startTime: getThisWeekFirstUnixTime(self.firstDayOfWeek),
-                    endTime: getThisWeekLastUnixTime(self.firstDayOfWeek)
-                },
-                thisMonth: {
-                    startTime: getThisMonthFirstUnixTime(),
-                    endTime: getThisMonthLastUnixTime()
-                },
-                thisYear: {
-                    startTime: getThisYearFirstUnixTime(),
-                    endTime: getThisYearLastUnixTime()
-                }
-            };
-        },
         displayDateRange() {
             const self = this;
 
             return {
                 today: {
-                    displayTime: self.$locale.formatUnixTimeToLongDate(self.userStore, self.dateRange.today.startTime),
+                    displayTime: self.$locale.formatUnixTimeToLongDate(self.userStore, self.overviewStore.transactionDataRange.today.startTime),
                 },
                 thisWeek: {
-                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisWeek.startTime),
+                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.startTime),
-                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisWeek.endTime)
+                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.endTime)
                 },
                 thisMonth: {
-                    displayTime: formatUnixTime(self.dateRange.thisMonth.startTime, 'MMMM'),
+                    displayTime: formatUnixTime(self.overviewStore.transactionDataRange.thisMonth.startTime, 'MMMM'),
-                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisMonth.startTime),
+                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.startTime),
-                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisMonth.endTime)
+                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.endTime)
                 },
                 thisYear: {
-                    displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.dateRange.thisYear.startTime)
+                    displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.overviewStore.transactionDataRange.thisYear.startTime)
                 }
             };
         },
         transactionOverview() {
-            if (!this.overviewStore.transactionOverview || !this.overviewStore.transactionOverview.thisMonth) {
+            return this.overviewStore.transactionOverview;
-                return {
-                    thisMonth: {
-                        valid: false,
-                        incomeAmount: this.getDisplayAmount(0, false),
-                        expenseAmount: this.getDisplayAmount(0, false)
-                    }
-                };
-            }
-
-            const originalOverview = this.overviewStore.transactionOverview;
-            const displayOverview = {};
-
-            [ 'today', 'thisWeek', 'thisMonth', 'thisYear' ].forEach(key => {
-                if (!originalOverview[key]) {
-                    return;
-                }
-
-                const item = originalOverview[key];
-
-                displayOverview[key] = {
-                    valid: true,
-                    incomeAmount: this.getDisplayAmount(item.incomeAmount, item.incompleteIncomeAmount),
-                    expenseAmount: this.getDisplayAmount(item.expenseAmount, item.incompleteExpenseAmount)
-                };
-            });
-
-            return displayOverview;
         }
     },
     created() {
@@ -264,8 +203,6 @@ export default {
             self.loadingOverview = true;
 
             self.overviewStore.loadTransactionOverview({
-                defaultCurrency: self.defaultCurrency,
-                dateRange: self.dateRange,
                 force: force
             }).then(() => {
                 self.loadingOverview = false;
@@ -287,6 +224,12 @@ export default {
             }
 
             return this.$locale.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
+        },
+        getDisplayIncomeAmount(category) {
+            return this.getDisplayAmount(category.incomeAmount, category.incompleteIncomeAmount);
+        },
+        getDisplayExpenseAmount(category) {
+            return this.getDisplayAmount(category.expenseAmount, category.incompleteExpenseAmount);
         }
     }
 }

src/views/mobile/HomePage.vue

@@ -20,7 +20,7 @@
                 </p>
                 <p class="no-margin">
                     <span class="month-expense" v-if="loading">0.00 USD</span>
-                    <span class="month-expense" v-else-if="!loading">{{ transactionOverview.thisMonth.expenseAmount }}</span>
+                    <span class="month-expense" v-else-if="!loading">{{ getDisplayExpenseAmount(transactionOverview.thisMonth) }}</span>
                     <f7-link class="margin-left-half" @click="showAmountInHomePage = !showAmountInHomePage">
                         <f7-icon class="ebk-hide-icon" :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
                     </f7-link>
@@ -29,7 +29,7 @@
                     <small class="home-summary-misc" v-if="loading">Monthly income 0.00 USD</small>
                     <small class="home-summary-misc" v-else-if="!loading">
                         <span>{{ $t('Monthly income') }}</span>
-                        <span>{{ transactionOverview.thisMonth.incomeAmount }}</span>
+                        <span>{{ getDisplayIncomeAmount(transactionOverview.thisMonth) }}</span>
                     </small>
                 </p>
             </f7-card-header>
@@ -56,11 +56,11 @@
                     <div class="overview-transaction-amount">
                         <div class="text-color-red text-align-right">
                             <small v-if="loading">0.00 USD</small>
-                            <small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ transactionOverview.today.incomeAmount }}</small>
+                            <small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ getDisplayIncomeAmount(transactionOverview.today) }}</small>
                         </div>
                         <div class="text-color-teal text-align-right">
                             <small v-if="loading">0.00 USD</small>
-                            <small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ transactionOverview.today.expenseAmount }}</small>
+                            <small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ getDisplayExpenseAmount(transactionOverview.today) }}</small>
                         </div>
                     </div>
                 </template>
@@ -89,11 +89,11 @@
                     <div class="overview-transaction-amount">
                         <div class="text-color-red text-align-right">
                             <small v-if="loading">0.00 USD</small>
-                            <small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ transactionOverview.thisWeek.incomeAmount }}</small>
+                            <small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ getDisplayIncomeAmount(transactionOverview.thisWeek) }}</small>
                         </div>
                         <div class="text-color-teal text-align-right">
                             <small v-if="loading">0.00 USD</small>
-                            <small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ transactionOverview.thisWeek.expenseAmount }}</small>
+                            <small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ getDisplayExpenseAmount(transactionOverview.thisWeek) }}</small>
                         </div>
                     </div>
                 </template>
@@ -122,11 +122,11 @@
                     <div class="overview-transaction-amount">
                         <div class="text-color-red text-align-right">
                             <small v-if="loading">0.00 USD</small>
-                            <small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ transactionOverview.thisMonth.incomeAmount }}</small>
+                            <small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ getDisplayIncomeAmount(transactionOverview.thisMonth) }}</small>
                         </div>
                         <div class="text-color-teal text-align-right">
                             <small v-if="loading">0.00 USD</small>
-                            <small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ transactionOverview.thisMonth.expenseAmount }}</small>
+                            <small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ getDisplayExpenseAmount(transactionOverview.thisMonth) }}</small>
                         </div>
                     </div>
                 </template>
@@ -152,11 +152,11 @@
                     <div class="overview-transaction-amount">
                         <div class="text-color-red text-align-right">
                             <small v-if="loading">0.00 USD</small>
-                            <small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ transactionOverview.thisYear.incomeAmount }}</small>
+                            <small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ getDisplayIncomeAmount(transactionOverview.thisYear) }}</small>
                         </div>
                         <div class="text-color-teal text-align-right">
                             <small v-if="loading">0.00 USD</small>
-                            <small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ transactionOverview.thisYear.expenseAmount }}</small>
+                            <small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ getDisplayExpenseAmount(transactionOverview.thisYear) }}</small>
                         </div>
                     </div>
                 </template>
@@ -194,24 +194,12 @@ import { useUserStore } from '@/stores/user.js';
 import { useOverviewStore } from '@/stores/overview.js';
 
 import datetimeConstants from '@/consts/datetime.js';
-import {
+import { formatUnixTime } from '@/lib/datetime.js';
-    formatUnixTime,
-    getTodayFirstUnixTime,
-    getTodayLastUnixTime,
-    getThisWeekFirstUnixTime,
-    getThisWeekLastUnixTime,
-    getThisMonthFirstUnixTime,
-    getThisMonthLastUnixTime,
-    getThisYearFirstUnixTime,
-    getThisYearLastUnixTime
-} from '@/lib/datetime.js';
 
 export default {
     data() {
         return {
-            loading: true,
+            loading: true
-            todayFirstUnixTime: getTodayFirstUnixTime(),
-            todayLastUnixTime: getTodayLastUnixTime()
         };
     },
     computed: {
@@ -239,82 +227,29 @@ export default {
         allDateRanges() {
             return datetimeConstants.allDateRanges;
         },
-        dateRange() {
-            const self = this;
-
-            return {
-                today: {
-                    startTime: self.todayFirstUnixTime,
-                    endTime: self.todayLastUnixTime
-                },
-                thisWeek: {
-                    startTime: getThisWeekFirstUnixTime(self.firstDayOfWeek),
-                    endTime: getThisWeekLastUnixTime(self.firstDayOfWeek)
-                },
-                thisMonth: {
-                    startTime: getThisMonthFirstUnixTime(),
-                    endTime: getThisMonthLastUnixTime()
-                },
-                thisYear: {
-                    startTime: getThisYearFirstUnixTime(),
-                    endTime: getThisYearLastUnixTime()
-                }
-            };
-        },
         displayDateRange() {
             const self = this;
 
             return {
                 today: {
-                    displayTime: self.$locale.formatUnixTimeToLongDate(self.userStore, self.dateRange.today.startTime),
+                    displayTime: self.$locale.formatUnixTimeToLongDate(self.userStore, self.overviewStore.transactionDataRange.today.startTime),
                 },
                 thisWeek: {
-                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisWeek.startTime),
+                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.startTime),
-                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisWeek.endTime)
+                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.endTime)
                 },
                 thisMonth: {
-                    displayTime: formatUnixTime(self.dateRange.thisMonth.startTime, 'MMMM'),
+                    displayTime: formatUnixTime(self.overviewStore.transactionDataRange.thisMonth.startTime, 'MMMM'),
-                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisMonth.startTime),
+                    startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.startTime),
-                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisMonth.endTime)
+                    endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.endTime)
                 },
                 thisYear: {
-                    displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.dateRange.thisYear.startTime)
+                    displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.overviewStore.transactionDataRange.thisYear.startTime)
                 }
             };
         },
         transactionOverview() {
-            // make sure this computed property refers these property, so these property can trigger this computed property to update
+            return this.overviewStore.transactionOverview;
-            const isEnableThousandsSeparator = this.isEnableThousandsSeparator; // eslint-disable-line
-            const currencyDisplayMode = this.currencyDisplayMode; // eslint-disable-line
-
-            if (!this.overviewStore.transactionOverview || !this.overviewStore.transactionOverview.thisMonth) {
-                return {
-                    thisMonth: {
-                        valid: false,
-                        incomeAmount: this.getDisplayAmount(0, false),
-                        expenseAmount: this.getDisplayAmount(0, false)
-                    }
-                };
-            }
-
-            const originalOverview = this.overviewStore.transactionOverview;
-            const displayOverview = {};
-
-            [ 'today', 'thisWeek', 'thisMonth', 'thisYear' ].forEach(key => {
-                if (!originalOverview[key]) {
-                    return;
-                }
-
-                const item = originalOverview[key];
-
-                displayOverview[key] = {
-                    valid: true,
-                    incomeAmount: this.getDisplayAmount(item.incomeAmount, item.incompleteIncomeAmount),
-                    expenseAmount: this.getDisplayAmount(item.expenseAmount, item.incompleteExpenseAmount)
-                };
-            });
-
-            return displayOverview;
         }
     },
     created() {
@@ -324,8 +259,6 @@ export default {
             self.loading = true;
 
             self.overviewStore.loadTransactionOverview({
-                defaultCurrency: self.defaultCurrency,
-                dateRange: self.dateRange,
                 force: false
             }).then(() => {
                 self.loading = false;
@@ -340,16 +273,7 @@ export default {
     },
     methods: {
         onPageAfterIn() {
-            let dateChanged = false;
+            if (!this.loading) {
-
-            if (this.todayFirstUnixTime !== getTodayFirstUnixTime()) {
-                dateChanged = true;
-
-                this.todayFirstUnixTime = getTodayFirstUnixTime();
-                this.todayLastUnixTime = getTodayLastUnixTime();
-            }
-
-            if ((dateChanged || this.overviewStore.transactionOverviewStateInvalid) && !this.loading) {
                 this.reload(null);
             }
         },
@@ -358,8 +282,6 @@ export default {
             const force = !!done;
 
             self.overviewStore.loadTransactionOverview({
-                defaultCurrency: self.defaultCurrency,
-                dateRange: self.dateRange,
                 force: force
             }).then(() => {
                 if (done) {
@@ -385,6 +307,12 @@ export default {
             }
 
             return this.$locale.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
+        },
+        getDisplayIncomeAmount(category) {
+            return this.getDisplayAmount(category.incomeAmount, category.incompleteIncomeAmount);
+        },
+        getDisplayExpenseAmount(category) {
+            return this.getDisplayAmount(category.expenseAmount, category.incompleteExpenseAmount);
         }
     }
 }