Used Array filter, sort functions to be able to manipulate a copy of redux store state and render them in console

Author: Mahidhar Chaluvadi

src/actions/Expensify/Expenses.js

@@ -1,12 +1,13 @@
 import uuid from "uuid";
 import actions from "./";
 
-export const addExpense = (description ="Default Desc", amt = 10) =>
+export const addExpense = (description ="Default Desc", amt = 10, createdAt = 0) =>
 	({type:actions.ADD_EXPENSE,
 		payload: {
 			id:uuid(),
 			description,
-			amt
+			amt,
+			createdAt
 		}});
 
 export const removeExpense = ({id = 0} = {}) =>
@@ -15,10 +16,11 @@ export const removeExpense = ({id = 0} = {}) =>
 			id
 		}});        
 
-export const editExpense = (id = 0, description="Unknown",amt = 0) =>
+export const editExpense = (id = 0, description="Unknown",amt = 0, createdAt = 0) =>
 	({type:actions.EDIT_EXPENSE,
 		payload: {
 			id,
 			description,
-			amt
+			amt,
+			createdAt
 		}});

src/reducers/Expensify/Expenses.js

@@ -1,6 +1,13 @@
 import actions from "./../../actions/Expensify";
 
-const defaultExpenseList = [];
+const defaultExpenseList = [
+	/*{
+		id:12345,
+		description:"RoomRent",
+		amt:21,
+		createdAt:120
+	},*/
+];
 
 export default (state = defaultExpenseList,action) =>
 {
@@ -13,7 +20,7 @@ export default (state = defaultExpenseList,action) =>
 		// return state.concat([{id:uuid()}]);
 		return state.filter((expense)=>action.payload.id!==expense.id);
 	case actions.EDIT_EXPENSE:
-		return state.map((expense)=>action.payload.id!==expense.id?({...expense}):({...expense,description:action.payload.description,amt:action.payload.amt}));
+		return state.map((expense)=>action.payload.id!==expense.id?({...expense}):({...expense,description:action.payload.description,amt:action.payload.amt,createdAt:action.payload.createdAt}));
 	default:
 		return state;
 	}

src/routers/ExpensifyRouter.js

@@ -20,15 +20,17 @@ const store = createStore(expensifyReducer);
 
 console.log(store.getState());
 
-const getExpensesForDisplay = (expenses, {filterText = "", sortBy ="date", startDate, endDate} = {}) => {
+const getExpensesForDisplay = (expenses, {filterText = "", sortBy ="date", startDate = undefined, endDate = undefined} = {}) => {
 	console.log(sortBy);
-	const newExpenses = filterText?expenses.filter((expense) => expense.description.includes(filterText)):[...expenses];
+	let newExpenses = filterText?expenses.filter((expense) => expense.description.toLowerCase().includes(filterText.toLowerCase())):[...expenses];
+
+	newExpenses = newExpenses.filter((expense) => (typeof startDate === "number"?expense.createdAt >= startDate:true) && (typeof endDate === "number"? expense.createdAt<=endDate:true));
 
 	switch(sortBy)
 	{
 	case "amt": return newExpenses.sort((a,b)=>a.amt-b.amt);
 	case "desc": return newExpenses.sort((a,b)=>(a.description.toLowerCase()<b.description.toLowerCase())?-1:1);
-	case "date": return newExpenses;
+	case "date": return newExpenses.sort((a,b)=>a.createdAt-b.createdAt);
 	default: return newExpenses;
 	}
 };
@@ -37,14 +39,18 @@ const unsubscribe = store.subscribe((state = store.getState())=>{
 	console.log(getExpensesForDisplay(state.expenses,state.filters));
 });
 
-const actionForExpense1 = store.dispatch(addExpense());
-const actionForExpense2 = store.dispatch(addExpense());
-//store.dispatch(removeExpense(actionForExpense1.payload));
-store.dispatch(editExpense(actionForExpense2.payload.id, "CatelynMoney", 15));
-// store.dispatch(setTextFilter("Reno"));
-store.dispatch(setStartDate(1));
-store.dispatch(setEndDate(12));
+const actionForExpense1 = store.dispatch(addExpense('Expense 1',200,120));
+const actionForExpense2 = store.dispatch(addExpense('Expense 2',300,120));
+store.dispatch(removeExpense(actionForExpense1.payload));
+store.dispatch(editExpense(actionForExpense2.payload.id, "CatelynExpenses", 300, 120));
+store.dispatch(addExpense('OtherExpense',300,200));
+store.dispatch(addExpense('Expense 3',350,150));
+store.dispatch(addExpense("EveExpenses",500,175));
+store.dispatch(setTextFilter("expense"));
 store.dispatch(sortByDesc());
+store.dispatch(setStartDate(150));
+store.dispatch(setEndDate(200));
+store.dispatch(sortByDate());
 
 export default
 <div>