refactoring: migrating to react-query to manage service-side state.

client/src/containers/Sales/PaymentReceive/PaymentReceivesListProvider.js

@@ -0,0 +1,58 @@
+import React, { createContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  useResourceFields,
+  usePaymentReceives,
+} from 'hooks/query';
+
+const PaymentReceivesListContext = createContext();
+
+/**
+ * Payment receives data provider.
+ */
+function PaymentReceivesListProvider({ query, ...props }) {
+  // Fetch accounts resource views and fields.
+  const {
+    data: paymentReceivesViews,
+    isFetching: isViewsLoading,
+  } = useResourceViews('payment_receives');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: paymentReceivesFields,
+    isFetching: isFieldsLoading,
+  } = useResourceFields('payment_receives');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { paymentReceives, pagination },
+    isFetching: isPaymentReceivesLoading,
+  } = usePaymentReceives(query);
+
+  // Provider payload.
+  const provider = {
+    paymentReceives,
+    paymentReceivesViews,
+    paymentReceivesFields,
+    pagination,
+
+    isViewsLoading,
+    isFieldsLoading,
+    isPaymentReceivesLoading,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isFieldsLoading}
+      name={'payment_receives'}
+    >
+      <PaymentReceivesListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentReceivesListContext = () =>
+  React.useContext(PaymentReceivesListContext);
+
+export { PaymentReceivesListProvider, usePaymentReceivesListContext };