chore: Refactoring all import directories to alias and all .js|.jsx renamed to be .ts|.tsx

src/containers/Expenses/ExpenseForm/ExpenseFormPageProvider.tsx

@@ -0,0 +1,98 @@
+import React, { createContext } from 'react';
+import { DashboardInsider } from '@/components/Dashboard';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import {
+  useCurrencies,
+  useCustomers,
+  useExpense,
+  useAccounts,
+  useBranches,
+  useCreateExpense,
+  useEditExpense,
+} from '@/hooks/query';
+
+const ExpenseFormPageContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function ExpenseFormPageProvider({ query, expenseId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
+
+  // Fetches customers list.
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers();
+
+  // Fetch the expense details.
+  const { data: expense, isLoading: isExpenseLoading } = useExpense(expenseId, {
+    enabled: !!expenseId,
+  });
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
+  // Fetch accounts list.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Create and edit expense mutate.
+  const { mutateAsync: createExpenseMutate } = useCreateExpense();
+  const { mutateAsync: editExpenseMutate } = useEditExpense();
+
+  // Submit form payload.
+  const [submitPayload, setSubmitPayload] = React.useState({});
+
+  // Detarmines whether the form in new mode.
+  const isNewMode = !expenseId;
+
+  // Provider payload.
+  const provider = {
+    isNewMode,
+    expenseId,
+    submitPayload,
+
+    currencies,
+    customers,
+    expense,
+    accounts,
+    branches,
+
+    isCurrenciesLoading,
+    isExpenseLoading,
+    isCustomersLoading,
+    isAccountsLoading,
+    isBranchesSuccess,
+
+    createExpenseMutate,
+    editExpenseMutate,
+    setSubmitPayload,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isCurrenciesLoading ||
+        isExpenseLoading ||
+        isCustomersLoading ||
+        isAccountsLoading
+      }
+      name={'expense-form'}
+    >
+      <ExpenseFormPageContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useExpenseFormContext = () => React.useContext(ExpenseFormPageContext);
+
+export { ExpenseFormPageProvider, useExpenseFormContext };