Merge pull request #266 from letehaha/feat/improvements

feat: Overall in-app improvements

src/common/const/vue-query.ts

@@ -16,11 +16,14 @@ export const VUE_QUERY_CACHE_KEYS = Object.freeze({
   // widget latest records
   widgetLatestRecords: [TX_CHANGE_QUERY, 'widget-latest-records'],
 
+  // others
   analyticsBalanceHistoryTrend: [TX_CHANGE_QUERY, 'analytics-balance-history-trend'],
 
   recordsPageRecordsList: [TX_CHANGE_QUERY, 'records-page-records-list'],
 
   accountSpecificTransactions: ['account-transactions'],
+
+  allAccounts: [TX_CHANGE_QUERY, 'all-accounts'],
 });
 
 export {

src/components/modals/modify-record/index.vue

@@ -468,7 +468,7 @@ const deleteTransactionHandler = async () => {
 
     emit(MODAL_EVENTS.closeModal);
     // Reload all cached data in the app
-    queryClient.invalidateQueries({ queryKey: [VUE_QUERY_TX_CHANGE_QUERY] });
+    queryClient.invalidateQueries([VUE_QUERY_TX_CHANGE_QUERY]);
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(e);

src/js/utils/error-handler.util.ts

@@ -1,12 +1,8 @@
 import log from 'loglevel';
 import * as errors from '@/js/errors';
-import { eventBus } from './event-bus';
 
 export class ErrorHandler {
-  static process(error: Error, message = ''): void {
-    const msgTrId = message || ErrorHandler._getMessage(error);
-    eventBus.error(msgTrId);
-
+  static process(error: Error): void {
     ErrorHandler.processWithoutFeedback(error);
   }
 

src/js/utils/index.ts

@@ -1,2 +1 @@
 export { ErrorHandler } from './error-handler.util';
-export * from './event-bus';

src/pages/dashboard/accounts-list/accounts-list.vue

@@ -13,14 +13,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onBeforeUnmount } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { AccountModel } from 'shared-types';
 
 import { ROUTES_NAMES } from '@/routes/constants';
 import { useAccountsStore } from '@/stores';
-import { eventBus, BUS_EVENTS } from '@/js/utils';
 import AccountCard from './account-card.vue';
 
 export default defineComponent({
@@ -29,14 +28,7 @@ export default defineComponent({
   },
   setup() {
     const router = useRouter();
-    const accountsStore = useAccountsStore();
-    const { enabledAccounts } = storeToRefs(accountsStore);
-
-    eventBus.on(BUS_EVENTS.transactionChange, accountsStore.loadAccounts);
-
-    onBeforeUnmount(() => {
-      eventBus.off(BUS_EVENTS.transactionChange, accountsStore.loadAccounts);
-    });
+    const { enabledAccounts } = storeToRefs(useAccountsStore());
 
     const allAccounts = computed(
       () => [...enabledAccounts.value].sort((a, b) => b.currentBalance - a.currentBalance),

src/pages/records/list.vue

@@ -40,7 +40,7 @@ const {
   hasNextPage,
   isFetched,
 } = useInfiniteQuery({
-  queryKey: [VUE_QUERY_CACHE_KEYS.recordsPageRecordsList],
+  queryKey: VUE_QUERY_CACHE_KEYS.recordsPageRecordsList,
   queryFn: fetchTransactions,
   getNextPageParam: (lastPage, pages) => {
     // No more pages to load

src/pages/settings/subpages/categories/index.vue

@@ -283,8 +283,7 @@ const deleteCategory = async () => {
   }
 }
 .categories-page__category-info {
-  display: grid;
-  grid-template-columns: min-content 1fr;
+  display: flex;
   align-items: center;
   gap: 8px;
 }

src/routes/guards.ts

@@ -1,11 +1,7 @@
 import { NavigationGuard } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { api } from '@/api/_api';
-import {
-  useCurrenciesStore,
-  useAuthStore,
-  useRootStore,
-} from '@/stores';
+import { useCurrenciesStore, useAuthStore } from '@/stores';
 
 export const authPageGuard: NavigationGuard = (to, from, next): void => {
   const token = localStorage.getItem('user-token') || '';
@@ -19,25 +15,22 @@ export const authPageGuard: NavigationGuard = (to, from, next): void => {
 };
 
 export const baseCurrencyExists: NavigationGuard = (to, from, next): void => {
-  const rootStore = useRootStore();
-  const userCurrenciesStore = useCurrenciesStore();
-  const { isBaseCurrencyExists } = storeToRefs(userCurrenciesStore);
-  const { isAppInitialized } = storeToRefs(rootStore);
+  const { isBaseCurrencyExists } = storeToRefs(useCurrenciesStore());
 
-  if (isAppInitialized.value && !isBaseCurrencyExists.value) {
+  if (!isBaseCurrencyExists.value) {
     next('/welcome');
   } else {
     next();
   }
 };
 
-export const redirectRouteGuard: NavigationGuard = (to, from, next): void => {
+export const redirectRouteGuard: NavigationGuard = async (to, from, next): Promise<void> => {
   const token = localStorage.getItem('user-token') || '';
   const authStore = useAuthStore();
 
   if (token) {
     api.setToken(token);
-    authStore.setLoggedIn();
+    await authStore.setLoggedIn();
 
     next();
   } else {

src/stores/accounts.ts

@@ -1,5 +1,8 @@
-import { ref, WritableComputedRef, computed } from 'vue';
-import { defineStore } from 'pinia';
+import {
+  ref, WritableComputedRef, computed, watch,
+} from 'vue';
+import { defineStore, storeToRefs } from 'pinia';
+import { useQuery } from '@tanstack/vue-query';
 import { ACCOUNT_TYPES, AccountModel } from 'shared-types';
 import {
   loadAccounts as apiLoadAccounts,
@@ -8,11 +11,28 @@ import {
   deleteAccount as apiDeleteAccount,
   DeleteAccountPayload,
 } from '@/api';
+import { VUE_QUERY_CACHE_KEYS } from '@/common/const';
+import { useUserStore } from './user';
 
 export const useAccountsStore = defineStore('accounts', () => {
-  const accounts = ref<AccountModel[]>([]);
+  const { isUserExists } = storeToRefs(useUserStore());
+
   const accountsRecord = ref<Record<number, AccountModel>>({});
 
+  const { data: accounts } = useQuery({
+    queryKey: VUE_QUERY_CACHE_KEYS.allAccounts,
+    queryFn: apiLoadAccounts,
+    staleTime: Infinity,
+    placeholderData: [],
+    enabled: isUserExists,
+  });
+
+  watch(accounts, (value) => {
+    for (const acc of value) {
+      accountsRecord.value[acc.id] = acc;
+    }
+  });
+
   const getAccountById: WritableComputedRef<(id: number) => AccountModel | undefined> = computed(
     () => (id: number) => accounts.value.find(i => i.id === id),
   );
@@ -26,22 +46,6 @@ export const useAccountsStore = defineStore('accounts', () => {
   );
   const enabledAccounts = computed(() => accounts.value.filter(item => item.isEnabled));
 
-  const loadAccounts = async () => {
-    try {
-      const result = await apiLoadAccounts();
-
-      accounts.value = [];
-
-      for (const acc of result) {
-        accounts.value.push(acc);
-        accountsRecord.value[acc.id] = acc;
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.log(e);
-    }
-  };
-
   const createAccount = async (payload: Parameters<typeof apiCreateAccount>[0]) => {
     try {
       const result = await apiCreateAccount(payload);
@@ -94,7 +98,6 @@ export const useAccountsStore = defineStore('accounts', () => {
     getAccountById,
 
     createAccount,
-    loadAccounts,
     editAccount,
     deleteAccount,
   };