refactoring: expenses landing list.

refactoring: customers landing list.
refactoring: vendors landing list.
refactoring: manual journals landing list.

client/src/hooks/query/accounts.js

@@ -13,11 +13,13 @@ const transformAccount = (response) => {
 export function useAccounts(query, props) {
   const states = useQuery(
     ['ACCOUNTS', query],
-    () =>
-      ApiService.get('accounts', { params: query }).then(
-        (response) => response.data.accounts,
-      ),
-    props,
+    () => ApiService.get('accounts', { params: query }),
+    {
+      select: (response) => {
+        return response.data.accounts;
+      },
+      ...props,
+    },
   );
   return {
     ...states,
@@ -93,18 +95,12 @@ export function useEditAccount(props) {
 export function useDeleteAccount(props) {
   const query = useQueryClient();
 
-  return useMutation(
-    (id) =>
-      ApiService.delete(`accounts/${id}`).catch((error) => {
-        throw new Error(error.response.data);
-      }),
-    {
-      onSuccess: () => {
-        query.invalidateQueries('ACCOUNTS');
-      },
-      ...props,
+  return useMutation((id) => ApiService.delete(`accounts/${id}`), {
+    onSuccess: () => {
+      query.invalidateQueries('ACCOUNTS');
     },
-  );
+    ...props,
+  });
 }
 
 /**
@@ -114,7 +110,9 @@ export function useActivateAccount(props) {
   const query = useQueryClient();
 
   return useMutation((id) => ApiService.post(`accounts/${id}/activate`), {
-    onSuccess: () => {},
+    onSuccess: () => {
+      query.invalidateQueries('ACCOUNTS');
+    },
     ...props,
   });
 }
@@ -126,7 +124,9 @@ export function useInactivateAccount(props) {
   const query = useQueryClient();
 
   return useMutation((id) => ApiService.post(`accounts/${id}/inactivate`), {
-    onSuccess: () => {},
+    onSuccess: () => {
+      query.invalidateQueries('ACCOUNTS');
+    },
     ...props,
   });
 }

client/src/hooks/query/customers.js

@@ -1,72 +1,105 @@
-
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
+import { transformPagination } from 'utils';
 
-
-const transformCustomers = (response) => {
-  return response.data;
-}
-
-const transformCustomer = (response) => {
-  return response.data;
-}
+const defaultPagination = {
+  pageSize: 12,
+  page: 0,
+  pagesCount: 0,
+};
 
 /**
- * 
- * @param {*} query 
- * @param {*} props 
+ * Retrieve customers list with pagination meta.
  */
 export function useCustomers(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['CUSTOMERS', query],
-    () => ApiService
-      .get(`customers`, { params: query })
-      .then(transformCustomers),
+    () => ApiService.get(`customers`, { params: query }),
     {
-      initialData: {
-        customers: [],
-        pagination: {},
-      },
-      ...props
-    }
-  )
+      select: (response) => ({
+        customers: response.data.customers,
+        pagination: transformPagination(response.data.pagination),
+        filterMeta: response.data.filter_meta
+      }),
+      ...props,
+    },
+  );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      customers: [],
+      pagination: defaultPagination,
+      filterMeta: {},
+    })
+  }
 }
 
 /**
- * 
- * @param {*} props 
+ * Edits the given customer details.
+ * @param {*} props
  */
 export function useEditCustomer(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
-    (values, id) => ApiService.post(`customers/${id}`, values),
-    props
+    ([id, values]) => ApiService.post(`customers/${id}`, values),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('CUSTOMERS');
+        queryClient.invalidateQueries('CUSTOMER');
+      },
+      ...props
+    },
   );
 }
 
 /**
- * 
- * @param {*} props 
+ * Deletes the given customer.
  */
 export function useDeleteCustomer(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
     (id) => ApiService.delete(`customers/${id}`),
-    props
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('CUSTOMERS');
+        queryClient.invalidateQueries('CUSTOMER');
+      },
+      ...props,
+    }
   );
 }
 
+/**
+ * Creates a new customer.
+ */
 export function useCreateCustomer(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
     (values) => ApiService.post('customers', values),
-    props
-  );
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('CUSTOMERS');
+        queryClient.invalidateQueries('CUSTOMER');
+      },
+      ...props
+    });
 }
 
+/**
+ * Retrieve the customer details.
+ */
 export function useCustomer(id, props) {
   return useQuery(
     ['CUSTOMER', id],
-    () => ApiService
-      .get(`customers/${id}`)
-      .then(transformCustomer),
-    props
-  )
-};
+    () => ApiService.get(`customers/${id}`),
+    {
+      select: (res) => res.data.customer,
+      ...props
+    },
+  );
+}

client/src/hooks/query/expenses.js

@@ -1,42 +1,116 @@
-import { useQuery, useMutation } from 'react-query';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
+import { transformPagination } from 'utils';
 
+const defaultPagination = {
+  pageSize: 12,
+  page: 0,
+  pagesCount: 0,
+};
 
-export function useExpenses(props) {
-  return useQuery(
-    ['EXPENSES'],
-    () => ApiService.get(`expenses`).then((response) => response.data),
+/**
+ * Retrieve the expenses list.
+ */
+export function useExpenses(query, props) {
+  const states = useQuery(
+    ['EXPENSES', query],
+    () => ApiService.get(`expenses`, { params: { ...query } }),
     {
-      initialData: {
-        expenses: [],
-        pagination: {},
-      },
-      ...props
+      select: (response) => ({
+        expenses: response.data.expenses,
+        pagination: transformPagination(response.data.pagination),
+        filterMeta: response.data.filter_meta,
+      }),
+      ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      customers: [],
+      pagination: defaultPagination,
+      filterMeta: {},
+    }),
+  };
 }
 
+/**
+ * Retrieve the expense details.
+ * @param {number} id - Expense id.
+ */
 export function useExpense(id, props) {
-  return useQuery(
-    ['EXPENSES', id],
-    () => ApiService.get(`expenses`).then((response) => response.data.expense),
+  const states = useQuery(['EXPENSES', id], () => ApiService.get(`expenses`), {
+    select: (res) => res.data.expense,
+    ...props,
+  });
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {}),
+  };
+}
+
+/**
+ * Deletes the given expense.
+ */
+export function useDeleteExpense(props) {
+  const queryClient = useQueryClient();
+
+  return useMutation((id) => ApiService.delete(`expenses/${id}`), {
+    onSuccess: () => {
+      queryClient.invalidateQueries('EXPENSES');
+      queryClient.invalidateQueries('EXPENSE');
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given expense.
+ */
+export function useEditExpense(props) {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    ([id, values]) => ApiService.post(`expenses/${id}`, values),
     {
-      initialData: {},
-      ...props
+      onSuccess: () => {
+        queryClient.invalidateQueries('EXPENSES');
+        queryClient.invalidateQueries('EXPENSE');
+      },
+      ...props,
     },
   );
 }
 
-export function useDeleteExpense(props) {
-  return useMutation((id) => ApiService.delete(`expenses/${id}`), props);
-}
-
-export function useEditExpense(props) {
-  return useMutation((id, values) => ApiService.post(`expenses/${id}`, values), props);
-}
-
- 
+/**
+ * Creates the new expense.
+ */
 export function useCreateExpense(props) {
-  return useMutation((values) => ApiService.post('expenses', values), props);
+  const queryClient = useQueryClient();
+
+  return useMutation((values) => ApiService.post('expenses', values), {
+    onSuccess: () => {
+      queryClient.invalidateQueries('EXPENSES');
+      queryClient.invalidateQueries('EXPENSE');
+    },
+    ...props,
+  });
 }
- 
+
+/**
+ * Publishes the given expense.
+ */
+export function usePublishExpense(props) {
+  const queryClient = useQueryClient();
+
+  return useMutation((id) => ApiService.post(`expenses/${id}/publish`), {
+    onSuccess: () => {
+      queryClient.invalidateQueries('EXPENSES');
+      queryClient.invalidateQueries('EXPENSE');
+    },
+    ...props,
+  });
+}

client/src/hooks/query/manualJournals.js

@@ -1,21 +1,22 @@
-import { useMutation, useQuery } from 'react-query';
+import { defaultTo } from 'lodash';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import ApiService from 'services/ApiService';
-
-// Transform joiurn
-const transformJournals = (response) => {
-  return {
-    manualJournals: response.data.manual_journals,
-    pagination: response.data.pagination,
-  };
-};
+import { transformPagination } from 'utils';
 
 /**
  * Creates a new manual journal.
  */
 export function useCreateJournal(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
     (values) => ApiService.post('manual-journals', values),
-    props,
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('JOURNALS');
+      },
+      ...props
+    },
   );
 }
 
@@ -23,9 +24,16 @@ export function useCreateJournal(props) {
  * Edits the given manual journal.
  */
 export function useEditJournal(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
     (values, id) => ApiService.post(`manual-journals/${id}`, values),
-    props,
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('JOURNALS');
+      },
+      ...props
+    },
   );
 }
 
@@ -33,9 +41,16 @@ export function useEditJournal(props) {
  * Deletes the given manual jouranl.
  */
 export function useDeleteJournal(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
-    (values, id) => ApiService.delete(`manual-journals/${id}`),
-    props,
+    (id) => ApiService.delete(`manual-journals/${id}`),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('JOURNALS');
+      },
+      ...props
+    },
   );
 }
 
@@ -43,9 +58,16 @@ export function useDeleteJournal(props) {
  * Publishes the given manual journal.
  */
 export function usePublishJournal(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
     (id) => ApiService.post(`manual-journals/${id}/publish`),
-    props,
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('JOURNALS');
+      },
+      ...props
+    },
   );
 }
 
@@ -53,20 +75,27 @@ export function usePublishJournal(props) {
  * Retrieve the manual journals with pagination meta.
  */
 export function useJournals(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['JOURNALS', query],
-    () =>
-      ApiService.get('manual-journals', { params: query }).then(
-        transformJournals,
-      ),
+    () => ApiService.get('manual-journals', { params: query }),
     {
-      initialData: {
-        manualJournals: [],
-        pagination: {},
-      },
+      select: (response) => ({
+        manualJournals: response.data.manual_journals,
+        pagination: transformPagination(response.data.pagination),
+        filterMeta: response.data.filter_meta
+      }),
       ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      manualJournals: [],
+      pagination: {},
+      filterMeta: {},
+    }),
+  };
 }
 
 /**

client/src/hooks/query/vendors.js

@@ -1,81 +1,97 @@
-
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
-
-
-const transformVendors = (response) => {
-  return {
-    vendors: response.data.vendors,
-    pagination: response.data.pagination,
-  };
-};
-
-const transformVendor = (response) => {
-  return response.data.vendor;
-};
+import { transformPagination } from 'utils';
 
 /**
  * Retrieve vendors list.
  */
 export function useVendors(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['VENDORS', query],
-    () => ApiService
-      .get(`vendors`, { params: query })
-      .then(transformVendors),
+    () => ApiService.get(`vendors`, { params: query }),
     {
-      initialData: {
-        vendors: [],
-        pagination: {},
-      },
-      ...props
-    }
-  )
+      select: (res) => ({
+        vendors: res.data.vendors,
+        pagination: transformPagination(res.data.pagination),
+        filterMeta: res.data.filter_meta,
+      }),
+      ...props,
+    },
+  );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      vendors: [],
+      pagination: {},
+      filterMeta: {}
+    }),
+  };
 }
 
 /**
- * 
- * @param {*} props 
+ * Edits details of the given vendor.
  */
 export function useEditVendor(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
-    (values, id) => ApiService.post(`vendors/${id}`, values),
-    props
+    ([id, values]) => ApiService.post(`vendors/${id}`, values),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('VENDORS');
+        queryClient.invalidateQueries('VENDOR');
+      },
+      ...props
+    },
   );
 }
 
 /**
- * 
- * @param {*} props 
+ * Deletes the given vendor.
  */
 export function useDeleteVendor(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
     (id) => ApiService.delete(`vendors/${id}`),
-    props
-  );
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('VENDORS');
+        queryClient.invalidateQueries('VENDOR');
+      },
+      ...props
+    });
 }
 
 /**
  * Creates a new vendor.
  */
 export function useCreateVendor(props) {
+  const queryClient = useQueryClient();
+
   return useMutation(
     (values) => ApiService.post('vendors', values),
-    props
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('VENDORS');
+      },
+      ...props
+    }
   );
 }
 
 /**
- * 
- * @param {*} id 
- * @param {*} props 
+ * Retrieve vendor details.
  */
 export function useVendor(id, props) {
   return useQuery(
     ['VENDOR', id],
-    () => ApiService
-      .get(`vendors/${id}`)
-      .then(transformVendor),
-    props
-  )
-};
+    () => ApiService.get(`vendors/${id}`),
+    {
+      select: (res) => res.data.vendor,
+      ...props
+    },
+  );
+}