Updated to include actions, reducers

Author: Mahidhar Chaluvadi

package.json

@@ -10,7 +10,8 @@
         "react-router": "^4.3.1",
         "react-router-dom": "^4.3.1",
         "react-scripts": "1.1.5",
-        "redux": "^4.0.0"
+        "redux": "^4.0.0",
+        "uuid": "^3.3.2"
     },
     "scripts": {
         "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",

src/actions/Expensify/Expenses.js

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

src/actions/Expensify/Filters.js

@@ -0,0 +1,10 @@
+import actions from "./";
+
+export const setTextFilter = (textEntered = "") => ({type:actions.SET_TEXT_FILTER, payload:{filterText:textEntered}});
+export const sortByDesc = () => ({type:actions.SORT_BY_DESC});
+
+export const setStartDate = (startDate = undefined) => ({type:actions.SET_START_DATE, payload:{startDate:startDate}});
+export const setEndDate = (endDate = undefined) => ({type:actions.SET_END_DATE, payload:{endDate:endDate}});
+export const sortByDate = () => ({type:actions.SORT_BY_DATE});
+
+export const sortByAmt = () => ({type:actions.SORT_BY_AMT});

src/actions/Expensify/index.js

@@ -0,0 +1,11 @@
+export default {
+	ADD_EXPENSE:"ADD_EXPENSE",
+	EDIT_EXPENSE:"EDIT_EXPENSE",
+	REMOVE_EXPENSE:"REMOVE_EXPENSE",
+	SET_TEXT_FILTER:"SET_TEXT_FILTER",
+	SET_START_DATE:"SET_START_DATE",
+	SET_END_DATE:"SET_END_DATE",
+	SORT_BY_DATE:"SORT_BY_DATE",
+	SORT_BY_AMT:"SORT_BY_AMT",
+	SORT_BY_DESC:"SORT_BY_DESC",
+};

src/components/Expensify/Layout/Header/index.js

@@ -10,7 +10,11 @@ export default () =>
 			<li><NavLink to='/create' activeClassName="is-active" exact>Add Expense</NavLink></li>
 			<li><NavLink to='/edit' activeClassName="is-active">Edit Expense</NavLink></li>
 			<li><NavLink to='/help' activeClassName="is-active">Help</NavLink></li>
+			{
+				/*
 			<li><NavLink to='/playground' activeClassName="is-active">Playground</NavLink></li>
+			*/
+			}
 			<li><Link to='/create/1'>Non Existing Page</Link></li>
 		</ul>
 	</div>;

src/components/Utilities/destructuring.js …c/components/Playground/destructuring.jssrc/components/Utilities/destructuring.js renamed to src/components/Playground/destructuring.js src/components/Utilities/destructuring.js renamed to src/components/Playground/destructuring.js

@@ -23,7 +23,7 @@ const setCount =({count=1} ={}) =>({
     count
 });
 
-const store = createStore((state ={count:0},action) => {
+const countReducer = (state ={count:0},action) => {
 	// console.log("store created/updated");
 	switch(action.type)
 	{
@@ -33,7 +33,9 @@ const store = createStore((state ={count:0},action) => {
     case "SET":return {count:action.count};
 	default: return state;
 	}
-});
+};
+
+const store = createStore(countReducer);
 
 const unsubscribe = store.subscribe(()=>{
 	console.log("Subscribed. Cur state",store.getState());

src/components/Utilities/redux-101.js src/components/Playground/redux-101.jssrc/components/Utilities/redux-101.js renamed to src/components/Playground/redux-101.js

@@ -2,5 +2,6 @@ import ReactDOM from "react-dom";
 import registerServiceWorker from "./registerServiceWorker";
 import AppRouter from "./routers/ExpensifyRouter";
 // import AppRouter from "./routers/PortfolioRouter.js";
+
 ReactDOM.render(AppRouter, document.getElementById("root"));
 registerServiceWorker();

src/index.js

@@ -0,0 +1,20 @@
+import actions from "./../../actions/Expensify";
+
+const defaultExpenseList = [];
+
+export default (state = defaultExpenseList,action) =>
+{
+	switch(action.type)
+	{
+	case actions.ADD_EXPENSE:
+		// return state.concat([{id:uuid()}]);
+		return [...state,action.payload];
+	case actions.REMOVE_EXPENSE:
+		// 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}));
+	default:
+		return state;
+	}
+};

src/reducers/Expensify/Expenses.js

@@ -0,0 +1,29 @@
+import actions from "./../../actions/Expensify";
+
+const defaultFilters = {
+	sortBy:"amt",
+	filterText:"",
+	startDate:undefined,
+	endDate:undefined
+};
+
+export default (state = defaultFilters,action) =>
+{
+	switch(action.type)
+	{
+	case actions.SORT_BY_AMT:
+		return {...state,sortBy:"amt"};
+	case actions.SORT_BY_DATE:
+		return {...state,sortBy:"date"};
+	case actions.SORT_BY_DESC:
+		return {...state,sortBy:"desc"};
+	case actions.SET_START_DATE:
+		return {...state,startDate:action.payload.startDate};
+	case actions.SET_END_DATE:
+		return {...state,endDate:action.payload.endDate};
+	case actions.SET_TEXT_FILTER:
+		return {...state,filterText:action.payload.filterText};
+	default:
+		return state;
+	}
+};