feat: fix items list datatable.

client/src/hooks/query/accounts.js

@@ -1,6 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
 
+// Transform the account.
 const transformAccount = (response) => {
   return response.data.account;
 };
@@ -9,17 +11,18 @@ const transformAccount = (response) => {
  * Retrieve accounts list.
  */
 export function useAccounts(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['ACCOUNTS', query],
     () =>
       ApiService.get('accounts', { params: query }).then(
         (response) => response.data.accounts,
       ),
-    {
-      initialData: [],
-      ...props
-    },
+    props,
   );
+  return {
+    ...states,
+    data: defaultTo(states.data, []),
+  };
 }
 
 /**
@@ -27,23 +30,30 @@ export function useAccounts(query, props) {
  * @param {number} id -
  */
 export function useAccount(id, props) {
-  return useQuery(
+  const states = useQuery(
     ['ACCOUNT', id],
     () => ApiService.get(`accounts/${id}`).then(transformAccount),
-    {
-      initialData: {},
-      ...props,
-    },
+    props,
   );
+  return {
+    ...states,
+    data: defaultTo(states.data, {}),
+  };
 }
 
 /**
  * Retrieve accounts types list.
  */
-export function useAccountsTypes() {
-  return useQuery(['ACCOUNTS_TYPES'], () => ApiService.get('account_types'), {
-    initialData: [],
-  });
+export function useAccountsTypes(props) {
+  const states = useQuery(
+    ['ACCOUNTS_TYPES'],
+    () => ApiService.get('account_types'),
+    props,
+  );
+  return {
+    ...states,
+    data: defaultTo(states.data, {}),
+  };
 }
 
 /**
@@ -56,7 +66,7 @@ export function useCreateAccount(props) {
     onSuccess: () => {
       client.invalidateQueries('ACCOUNTS');
     },
-    ...props
+    ...props,
   });
 }
 
@@ -72,7 +82,7 @@ export function useEditAccount(props) {
       onSuccess: () => {
         query.invalidateQueries('ACCOUNTS');
       },
-      ...props
+      ...props,
     },
   );
 }
@@ -103,15 +113,10 @@ export function useDeleteAccount(props) {
 export function useActivateAccount(props) {
   const query = useQueryClient();
 
-  return useMutation(
-    (id) => ApiService.post(`accounts/${id}/activate`),
-    {
-      onSuccess: () => {
-        
-      },
-      ...props
-    }
-  );
+  return useMutation((id) => ApiService.post(`accounts/${id}/activate`), {
+    onSuccess: () => {},
+    ...props,
+  });
 }
 
 /**
@@ -120,13 +125,8 @@ export function useActivateAccount(props) {
 export function useInactivateAccount(props) {
   const query = useQueryClient();
 
-  return useMutation(
-    (id) => ApiService.post(`accounts/${id}/inactivate`),
-    {
-      onSuccess: () => {
-        
-      },
-      ...props
-    },
-  );
+  return useMutation((id) => ApiService.post(`accounts/${id}/inactivate`), {
+    onSuccess: () => {},
+    ...props,
+  });
 }

client/src/hooks/query/currencies.js

@@ -1,28 +1,55 @@
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQueryClient, useQuery } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
 
 /**
  * Create a new currency.
  */
-export function useCreateCurrency() {
-  return useMutation((values) => ApiService.post('currencies', values));
+export function useCreateCurrency(props) {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    (values) => ApiService.post('currencies', values),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('CURRENCIES');
+      },
+      ...props,
+    }
+  );
 }
 
 /**
  * Edits the given currency code.
  */
-export function useEditCurrency() {
+export function useEditCurrency(props) {
+  const queryClient = useQueryClient();
+
   return useMutation((currencyCode, values) =>
     ApiService.post(`currencies/${currencyCode}`, values),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('CURRENCIES');
+      },
+      ...props,
+    }
   );
 }
 
 /**
  * Deletes the given currency.
  */
-export function useDeleteCurrency() {
+export function useDeleteCurrency(props) {
+  const queryClient = useQueryClient();
+
   return useMutation((currencyCode) =>
     ApiService.delete(`currencies/${currencyCode}`),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('CURRENCIES');
+      },
+      ...props
+    }
   );
 }
 
@@ -30,12 +57,14 @@ export function useDeleteCurrency() {
  * Retrieve the currencies list.
  */
 export function useCurrencies(props) {
-  return useQuery(
+  const states = useQuery(
     ['CURRENCIES'],
     () => ApiService.get('currencies').then(res => res.data.currencies),
-    {
-      initialData: [],
-      ...props,
-    },
+    props,
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, []),
+  }
 }

client/src/hooks/query/items.js

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
 import { transformResponse } from 'utils';
 
@@ -12,7 +13,14 @@ const defaultPagination = {
  * Creates a new item.
  */
 export function useCreateItem(props) {
-  return useMutation((values) => ApiService.post('items', values), props);
+  const queryClient = useQueryClient();
+
+  return useMutation((values) => ApiService.post('items', values), {
+    onSuccess: () => {
+      queryClient.invalidateQueries('ITEMS');
+    },
+    ...props,
+  });
 }
 
 /**
@@ -35,7 +43,7 @@ export function useEditItem(props) {
  */
 export function useDeleteItem(props) {
   const queryClient = useQueryClient();
-  
+
   return useMutation((id) => ApiService.delete(`items/${id}`), {
     onSuccess: () => {
       queryClient.invalidateQueries('ITEMS');
@@ -58,19 +66,21 @@ const transformItemsResponse = (response) => {
  * Retrieves items list.
  */
 export function useItems(query, props) {
-  return useQuery(
+  const result = useQuery(
     ['ITEMS', query],
     () =>
       ApiService.get(`items`, { params: query }).then(transformItemsResponse),
-    {
-      initialData: {
-        items: [],
-        pagination: defaultPagination,
-        filterMeta: {},
-      },
-      ...props,
-    },
+    props,
   );
+
+  return {
+    ...result,
+    data: defaultTo(result.data, {
+      items: [],
+      pagination: defaultPagination,
+      filterMeta: {},
+    }),
+  };
 }
 
 /**

client/src/hooks/query/views.js

@@ -1,6 +1,6 @@
 import { useQuery } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from "services/ApiService";
-
 // export function useSaveView(values) {
 //   return ApiService.post('views', form);
 // }
@@ -18,14 +18,16 @@ import ApiService from "services/ApiService";
 // }
 
 export function useResourceViews(resourceSlug) {
-  return useQuery(
+  const states = useQuery(
     ['RESOURCE_VIEW', resourceSlug],
     () => ApiService.get(`views/resource/${resourceSlug}`)
       .then((response) => response.data.views),
-    {
-      initialData: [],
-    }
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, []),
+  }
 }
  
 
@@ -39,13 +41,16 @@ export function useResourceColumns(resourceSlug) {
   );
 }
  
-export function useResourceFields(resourceSlug) {
-  return useQuery(
+export function useResourceFields(resourceSlug, props) {
+  const states = useQuery(
     ['RESOURCE_FIELDS', resourceSlug], 
     () => ApiService.get(`resources/${resourceSlug}/fields`)
       .then((res) => res.data.resource_fields),
-    {
-      initialData: [],
-    },
+    props
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, []),
+  }
 }