feat(FinancialReports): add loading progress bar.

fix(preformance): Optimize preformance of virtualized list.
fix(preformance): Optimize financial reports preformance.

client/src/hooks/query/items.js

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { transformPagination, transformResponse } from 'utils';
 import { useQueryTenant } from '../useQueryTenant';
 import useApiRequest from '../useRequest';

client/src/hooks/query/organization.js

@@ -1,9 +1,13 @@
-import t from 'store/types';
+import { useMutation } from 'react-query';
+import t from './types';
 import useApiRequest from '../useRequest';
 import { useQueryTenant } from '../useQueryTenant';
+import { useEffect } from 'react';
+import { useSetOrganizations, useSetSubscriptions } from '../state';
+import { omit } from 'lodash';
 
 /**
- * Retrieve the contact duplicate.
+ * Retrieve organizations of the authenticated user.
  */
 export function useOrganizations(props) {
   const apiRequest = useApiRequest();
@@ -23,3 +27,74 @@ export function useOrganizations(props) {
     },
   );
 }
+
+/**
+ * Retrieve the current organization metadata.
+ */
+export function useCurrentOrganization(props) {
+  const apiRequest = useApiRequest();
+  const setOrganizations = useSetOrganizations();
+  const setSubscriptions = useSetSubscriptions();
+
+  const query = useQueryTenant(
+    [t.ORGANIZATION_CURRENT],
+    () => apiRequest.get(`organization/current`),
+    {
+      select: (res) => res.data.organization,
+      initialDataUpdatedAt: 0,
+      initialData: {
+        data: {
+          organization: {},
+        },
+      },
+      ...props,
+    },
+  );
+
+  useEffect(() => {
+    if (query.isSuccess) {
+      const organization = omit(query.data, ['subscriptions']);
+
+      // Sets organizations.
+      setOrganizations([organization]);
+
+      // Sets subscriptions.
+      setSubscriptions(query.data.subscriptions);
+    }
+  }, [query.data, query.isSuccess, setOrganizations, setSubscriptions]);
+
+  return query;
+}
+
+/**
+ * Builds the current tenant.
+ */
+export function useBuildTenant(props) {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('organization/build'),
+    {
+      onSuccess: (res, values) => {
+        
+      },
+      ...props,
+    },
+  );
+};
+
+/**
+ * Seeds the current tenant
+ */
+export function useSeedTenant() {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('organization/seed'),
+    {
+      onSuccess: (res) => {
+        
+      },
+    }
+  )
+};

client/src/hooks/query/settings.js

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useQueryTenant } from '../useQueryTenant';
-import { useDispatch } from 'react-redux';
 import useApiRequest from '../useRequest';
-import t from 'store/types';
+import { useSetSettings } from 'hooks/state';
+import t from './types';
 
 /**
  * Saves the settings.
@@ -21,8 +21,8 @@ export function useSaveSettings(props) {
 }
 
 function useSettingsQuery(key, query, props) {
-  const dispatch = useDispatch();
   const apiRequest = useApiRequest();
+  const setSettings = useSetSettings();
 
   const state = useQueryTenant(
     key,
@@ -40,10 +40,10 @@ function useSettingsQuery(key, query, props) {
   );
 
   useEffect(() => {
-    if (typeof state.data !== 'undefined') {
-      dispatch({ type: t.SETTING_SET, options: state.data });
+    if (state.isSuccess) {
+      setSettings(state.data);
     }
-  }, [state.data, dispatch]);
+  }, [state.data, state.isSuccess, setSettings]);
 
   return state.data;
 }

client/src/hooks/query/types.js

@@ -90,7 +90,8 @@ const SETTING = {
 };
 
 const ORGANIZATIONS = {
-  ORGANIZATIONS: 'ORGANIZATIONS'
+  ORGANIZATIONS: 'ORGANIZATIONS',
+  ORGANIZATION_CURRENT: 'ORGANIZATION_CURRENT'
 };
 
 export default {

client/src/hooks/state/authentication.js

@@ -2,13 +2,22 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useCallback } from 'react';
 import { isAuthenticated } from 'store/authentication/authentication.reducer';
 import { setLogin, setLogout } from 'store/authentication/authentication.actions';
+import { useQueryClient } from 'react-query';
 
 export const useAuthActions = () => {
   const dispatch = useDispatch();
+  const queryClient = useQueryClient();
 
   return {
     setLogin: useCallback((login) => dispatch(setLogin(login)), [dispatch]),
-    setLogout: useCallback(() => dispatch(setLogout()), [dispatch]),
+    setLogout: useCallback(() => {
+
+      // Logout action.
+      dispatch(setLogout());
+
+      // Remove all cached queries.
+      queryClient.removeQueries();
+    }, [dispatch, queryClient]),
   };
 };
 

client/src/hooks/state/index.js

@@ -1,3 +1,6 @@
 export * from './dashboard';
 export * from './authentication';
-export * from './globalErrors';
+export * from './globalErrors';
+export * from './subscriptions';
+export * from './organizations';
+export * from './settings';

client/src/hooks/state/organizations.js

@@ -0,0 +1,11 @@
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
+import { setOrganizations } from 'store/organizations/organizations.actions';
+
+export const useSetOrganizations = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((organizations) => {
+    dispatch(setOrganizations(organizations))    
+  }, [dispatch]);
+};

client/src/hooks/state/settings.js

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
+import { setSettings } from 'store/settings/settings.actions';
+
+
+export const useSetSettings = () => {
+  const dispatch =  useDispatch();
+
+  return useCallback((settings) => {
+    dispatch(setSettings(settings));
+  }, [dispatch]);
+};

client/src/hooks/state/subscriptions.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react"
+import { useDispatch } from "react-redux";
+import { setSubscriptions } from 'store/subscription/subscription.actions';
+
+/**
+ * Sets subscriptions.
+ */
+export const useSetSubscriptions = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((subscriptions) => {
+    dispatch(setSubscriptions(subscriptions));
+  }, [dispatch]);
+}

client/src/hooks/useRequest.js

@@ -18,10 +18,11 @@ export default function useApiRequest() {
   const organizationId = useAuthOrganizationId();
 
   const http = React.useMemo(() => {
-    axios.create();
+    // Axios instance.
+    const instance = axios.create();
 
     // Request interceptors.
-    axios.interceptors.request.use(
+    instance.interceptors.request.use(
       (request) => {
         const locale = 'en';
 
@@ -40,9 +41,8 @@ export default function useApiRequest() {
         return Promise.reject(error);
       },
     );
-
     // Response interceptors.
-    axios.interceptors.response.use(
+    instance.interceptors.response.use(
       (response) => response,
       (error) => {
         const { status } = error.response;
@@ -57,8 +57,7 @@ export default function useApiRequest() {
         return Promise.reject(error);
       },
     );
-
-    return axios;
+    return instance;
   }, [token, organizationId, setGlobalErrors, setLogout]);
 
   return {