WIP feature/expenses

client/src/store/expenses/expenses.actions.js

@@ -1,41 +1,144 @@
-import ApiService from "services/ApiService";
+import ApiService from 'services/ApiService';
 import t from 'store/types';
 
-export const fetchExpensesList = ({ query }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    ApiService.get('expenses').then((response) => {
+export const fetchExpensesTable = ({ query } = {}) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, reject) => {
+      const pageQuery = getState().expenses.tableQuery;
       dispatch({
-        type: t.EXPENSES_LIST_SET,
-        expenses: response.data.expenses,
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
       });
-    }).catch(error => { reject(error); });
-  });
+      dispatch({
+        type: t.EXPENSES_TABLE_LOADING,
+        loading: true,
+      });
+      ApiService.get('expenses', {
+        params: { ...pageQuery, ...query },
+      })
+        .then((response) => {
+          dispatch({
+            type: t.EXPENSES_PAGE_SET,
+            expenses: response.data.expenses.results,
+            customViewId: response.data.customViewId || -1,
+          });
+          dispatch({
+            type: t.EXPENSES_ITEMS_SET,
+            expenses: response.data.expenses.results,
+          });
+          dispatch({
+            type: t.EXPENSES_TABLE_LOADING,
+            loading: false,
+          });
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
 };
 
 export const fetchExpense = ({ id }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    ApiService.get(`expenses/${id}`).then((response) => {
-      dispatch({
-        type: t.EXPENSE_SET,
-        expense: response.data.expense,
-      });
-    }).catch(error => { reject(error); });
-  });
-};
-
-export const submitExpense = ({ form }) => {
-  return (dispatch) => ApiService.post('expenses', { ...form });
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.get(`expenses/${id}`)
+      .then((response) => {
+          dispatch({
+            type: t.EXPENSE_SET,
+            payload: {
+              id,
+              expense: response.data.expense,
+            },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
 };
 
 export const editExpense = ({ form, id }) => {
-  return (dispatch) => ApiService.post(`expensed/${id}`, form);
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.post(`expenses/${id}`, form)
+        .then((response) => {
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+
+          reject(data?.errors);
+        });
+    });
+};
+
+export const submitExpense = ({ form }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.post('expenses', form)
+        .then((response) => {
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+
+          reject(data?.errors);
+        });
+    });
 };
 
 export const deleteExpense = ({ id }) => {
-  return (dispatch) => ApiService.delete(`expenses/${id}`);
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.delete(`expenses/${id}`)
+        .then((response) => {
+          dispatch({
+            type: t.EXPENSE_DELETE,
+            payload: { id },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
+};
+
+export const deleteBulkExpenses = ({ ids }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.delete('expenses/bulk', { params: { ids } })
+        .then((response) => {
+          dispatch({
+            type: t.EXPENSES_BULK_DELETE,
+            payload: { ids },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
 };
 
 export const publishExpense = ({ id }) => {
-  return (dispatch) => ApiService.post(`expenses/${id}/publish`);
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.post(`expenses/${id}/publish`)
+        .then((response) => {
+          dispatch({
+            type: t.EXPENSE_PUBLISH,
+            payload: { id },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
 };
-

client/src/store/expenses/expenses.reducer.js

@@ -1,21 +1,92 @@
 import { createReducer } from '@reduxjs/toolkit';
+import { createTableQueryReducers } from 'store/queryReducers';
+
 import t from 'store/types';
+import { omit } from 'lodash';
 
 const initialState = {
-  list: [],
-  detailsById: {},
+  items: {},
+  views: {},
+  loading: false,
+  currentViewId: -1,
 };
 
-export default createReducer(initialState, {
-  [t.EXPENSES_LIST_SET]: (state, action) => {
-    state.list = action.expenses;
+const defaultExpense = {
+  categories: [],
+};
+
+const reducer = createReducer(initialState, {
+  [t.EXPENSE_SET]: (state, action) => {
+    const { id, expense } = action.payload;
+    state.items[id] = { ...defaultExpense, ...expense };
   },
 
-  [t.EXPENSE_SET]: (state, action) => {
-    state.detailsById[action.expense.id] = action.expense;
+  [t.EXPENSE_PUBLISH]: (state, action) => {
+    const { id } = action.payload;
+    const item = state.items[id] || {};
+
+    state.items[id] = { ...item, status: 1 };
+  },
+
+  [t.EXPENSES_ITEMS_SET]: (state, action) => {
+    const _expenses = {};
+
+    action.expenses.forEach((expense) => {
+      _expenses[expense.id] = {
+        ...defaultExpense,
+        ...expense,
+      };
+    });
+    state.items = {
+      ...state.items,
+      ..._expenses,
+    };
+  },
+
+  [t.EXPENSES_PAGE_SET]: (state, action) => {
+    const viewId = action.customViewId || -1;
+    const view = state.views[viewId] || {};
+
+    state.views[viewId] = {
+      ...view,
+      ids: action.expenses.map((i) => i.id),
+    };
+  },
+
+  [t.EXPENSES_TABLE_LOADING]: (state, action) => {
+    state.loading = action.loading;
+  },
+
+  [t.EXPENSES_SET_CURRENT_VIEW]: (state, action) => {
+    state.currentViewId = action.currentViewId;
+  },
+
+  [t.EXPENSE_DELETE]: (state, action) => {
+    const { id } = action.payload;
+    // state.items = omit(state.items, [id]);
+
+    if (typeof state.items[id] !== 'undefined') {
+      delete state.items[id];
+    }
+  },
+
+  [t.EXPENSES_BULK_DELETE]: (state, action) => {
+    const { ids } = action.payload;
+    const items = { ...state.items };
+
+    ids.forEach((id) => {
+      if (typeof items[id] !== 'undefined') {
+        delete items[id];
+      }
+    });
+    state.items = items;
   },
 });
 
+export default createTableQueryReducers('expenses', reducer);
+
 export const getExpenseById = (state, id) => {
-  return state.expenses.detailsById[id];
-};
+  // debugger;
+  // state.items = omit(state.items, [id]);
+  return state.expenses.items[id];
+};

client/src/store/expenses/expenses.selectors.js

@@ -0,0 +1,10 @@
+import { pickItemsFromIds } from 'store/selectors';
+
+export const getExpensesItems = (state, viewId) => {
+  const accountsView = state.expenses.views[viewId || -1];
+  const accountsItems = state.expenses.items;
+
+  return typeof accountsView === 'object'
+    ? pickItemsFromIds(accountsItems, accountsView.ids) || []
+    : [];
+};

client/src/store/expenses/expenses.types.js

@@ -1,5 +1,12 @@
-
 export default {
   EXPENSES_LIST_SET: 'EXPENSES_LIST_SET',
   EXPENSE_SET: 'EXPENSE_SET',
-};
+  EXPENSE_DELETE: 'EXPENSE_DELETE',
+  EXPENSES_BULK_DELETE: 'EXPENSES_BULK_DELETE',
+  EXPENSES_SET_CURRENT_VIEW: 'EXPENSES_SET_CURRENT_VIEW',
+  EXPENSES_TABLE_QUERIES_ADD:'EXPENSES_TABLE_QUERIES_ADD',
+  EXPENSE_PUBLISH: 'EXPENSE_PUBLISH',
+  EXPENSES_TABLE_LOADING: 'EXPENSES_TABLE_LOADING',
+  EXPENSES_PAGE_SET: 'EXPENSES_PAGE_SET',
+  EXPENSES_ITEMS_SET: 'EXPENSES_ITEMS_SET',
+};