temp

package.json

@@ -3,11 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
+    "jest": "^23.4.2",
+    "moment": "^2.22.2",
+    "raf": "^3.4.0",
     "react": "^16.4.1",
+    "react-addons-shallow-compare": "^15.6.2",
+    "react-bootstrap-table": "^4.3.1",
+    "react-dates": "^17.0.0",
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4",
+    "react-test-renderer": "^16.4.2",
     "redux": "^4.0.0",
     "uuid": "^3.3.2"
   },
@@ -16,5 +26,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+
   }
 }

src/App.js

@@ -1,19 +1,16 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
 import AppRouter from './routers/AppRouter';
 import configureStore from './store/configureStore';
-
 import { addExpense } from './actions/expenses';
 import { setTextFilter } from './actions/filters';
 import getVisibleExpenses from './selectors/expenses';
-
+import React from "react";
 import {Provider} from 'react-redux'
 
 const store=configureStore();
 
 store.dispatch(addExpense({ description: 'Water bill', amount:4500 }));
-store.dispatch(addExpense({ description: 'Gas bill' }));
+store.dispatch(addExpense({ description: 'Gas bill', amount:13000 }));
 store.dispatch(setTextFilter('water'));
 
 setTimeout(()=>{

src/App.test.js

@@ -2,8 +2,24 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+import './actions/expenses';
+import { addExpense } from './actions/expenses';
+import Header from './components/Header';
+import {shallow} from 'enzyme';
+import toJSON from 'enzyme-to-json';
+// it('renders without crashing', () => {
+//   const div = document.createElement('div');
+//   ReactDOM.render(<App />, div);
+//   ReactDOM.unmountComponentAtNode(div);
+// });
+
+test('header test',()=>{
+  const wrapper= shallow(<Header/>);
+  expect(toJSON(wrapper)).toMatchSnapshot();
 });
+
+// const add=(a,b)=>a+b;
+// test('add test',()=>{
+//   const result=add(4,3);
+//   expect(result).toBe(7);
+// });

src/__snapshots__/App.test.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`header test 1`] = `
+<header>
+  <h1>
+    Epensify
+  </h1>
+  r
+  <NavLink
+    activeClassName="is-active"
+    aria-current="page"
+    exact={true}
+    to="/"
+  >
+    Dashboard
+  </NavLink>
+  <NavLink
+    activeClassName="is-active"
+    aria-current="page"
+    exact={true}
+    to="/create"
+  >
+    Create Expense
+  </NavLink>
+  <NavLink
+    activeClassName="is-active"
+    aria-current="page"
+    exact={true}
+    to="/help"
+  >
+    Help
+  </NavLink>
+</header>
+`;

src/components/AddExpensePage.js

@@ -1,7 +1,18 @@
 import React from 'react';
+import {connect} from 'react-redux';
+import ExpenseForm from './ExpenseForm';
+import {addExpense} from '../actions/expenses';
 
-const AddExpensePage = () => (
-    <div>AddExpense</div>
+const AddExpensePage = (props) => (
+    <div>
+        <h1>Add Expense</h1>
+        <ExpenseForm
+            onSubmit={(expense)=>{
+                props.dispatch(addExpense(expense));
+                props.history.push('/');
+            }}
+        />
+    </div>
 );
 
-export default AddExpensePage;
+export default connect()(AddExpensePage);

src/components/EditExpensePage.js

@@ -1,10 +1,30 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import ExpenseForm from './ExpenseForm';
+import {editExpense, removeExpense} from '../actions/expenses';
 
-const EditExpensePage = (props) =>{
+const EditExpensePage = (props) => {
     console.log(props)
-    return(
-    <div>EditExpense of {props.match.params.id}</div>
+    return (
+        <div>
+            <ExpenseForm
+                expense={props.expense}
+                onSubmit={(expense) => {
+                    props.dispatch(editExpense(props.expense.id,expense));
+                    props.history.push('/');
+                }}
+            />
+            <button onClick={()=>{
+                props.dispatch(removeExpense({id:props.expense.id}));
+                props.history.push('/');
+              }}>Remove</button>  
+        </div>
     );
 };
 
-export default EditExpensePage;
+const mapStateToProps = (state, props) => {
+    return {
+        expense: state.expenses.find((expense) => expense.id === props.match.params.id)
+    };
+};
+export default connect(mapStateToProps)(EditExpensePage);

src/components/ExpenseDashboardPage.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import ExpenseList from './ExpenseList';
+import ExpenseListFilters from './ExpenseListFilters';
+
 const ExpenseDashboardPage = () => (
     <div> 
+        <ExpenseListFilters/>
         <ExpenseList/>
     </div>
 );

src/components/ExpenseForm.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import moment from 'moment';
+import { SingleDatePicker } from 'react-dates';
+import 'react-dates/lib/css/_datepicker.css';
+import 'react-dates/initialize';
+
+export default class ExpenseForm extends React.Component {
+  constructor(props){
+    super(props);
+    this.state={
+      description: props.expense ? props.expense.description : '',
+      note: props.expense ? props.expense.note : '',
+      amount: props.expense ? (props.expense.amount / 100).toString() : '',
+      createdAt: props.expense ? moment(props.expense.createdAt) : moment(),
+      calendarFocused: false,
+      error: ''
+    };
+  }
+
+  onDescriptionChange = (e) => {
+    const description = e.target.value;
+    this.setState(() => ({ description }));
+  };
+  onNoteChange = (e) => {
+    const note = e.target.value;
+    this.setState(() => ({ note }));
+  };
+  onAmountChange = (e) => {
+    const amount = e.target.value;
+
+    if (!amount || amount.match(/^\d{1,}(\.\d{0,2})?$/)) {
+      this.setState(() => ({ amount }));
+    }
+  };
+  onDateChange = (createdAt) => {
+      if(createdAt){
+        this.setState(() => ({ createdAt }));
+      }
+  };
+  onFocusChange = ({ focused }) => {
+    this.setState(() => ({ calendarFocused: focused }));
+  };
+  onSubmit=(e)=>{
+    e.preventDefault();
+    if (!this.state.description|| !this.state.amount){
+        this.setState(()=>({error:'Please provide description and amount'}));
+    }else{
+        this.setState(()=>({error:''}));
+        this.props.onSubmit({
+            description:this.state.description,
+            amount: parseFloat(this.state.amount,10)*100,
+            createdAt:this.state.createdAt.valueOf(),
+            note:this.state.note
+        });
+    }
+  }
+  render() {
+    return (
+      <div>
+        {this.state.error && <p>{this.state.error}</p>}
+        <form onSubmit={this.onSubmit}>
+          <input
+            type="text"
+            placeholder="Description"
+            autoFocus
+            value={this.state.description}
+            onChange={this.onDescriptionChange}
+          />
+          <input
+            type="text"
+            placeholder="Amount"
+            value={this.state.amount}
+            onChange={this.onAmountChange}
+          />
+          <SingleDatePicker
+            date={this.state.createdAt}
+            onDateChange={this.onDateChange}
+            focused={this.state.calendarFocused}
+            onFocusChange={this.onFocusChange}
+            numberOfMonths={1}
+            isOutsideRange={() => false}
+          />
+          <textarea
+            placeholder="Add a note for your expense (optional)"
+            value={this.state.note}
+            onChange={this.onNoteChange}
+          >
+          </textarea>
+          <button>Add Expense</button>
+        </form>
+      </div>
+    )
+  }
+}

src/components/ExpenseListFilters.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { DateRangePicker } from 'react-dates';
+import { setTextFilter, sortByDate, sortByAmount, setStartDate, setEndDate } from '../actions/filters';
+
+class ExpenseListFilters extends React.Component {
+  state = {
+    calendarFocused: null
+  };
+  onDatesChange = ({ startDate, endDate }) => {
+    this.props.dispatch(setStartDate(startDate));
+    this.props.dispatch(setEndDate(endDate));
+  };
+  onFocusChange = (calendarFocused) => {
+    this.setState(() => ({ calendarFocused }));
+  }
+  render() {
+    return (
+      <div>
+        <input
+          type="text"
+          value={this.props.filters.text}
+          onChange={(e) => {
+            this.props.dispatch(setTextFilter(e.target.value));
+          }}
+        />
+        <select
+          value={this.props.filters.sortBy}
+          onChange={(e) => {
+            if (e.target.value === 'date') {
+              this.props.dispatch(sortByDate());
+            } else if (e.target.value === 'amount') {
+              this.props.dispatch(sortByAmount());
+            }
+          }}
+        >
+          <option value="date">Date</option>
+          <option value="amount">Amount</option>
+        </select>
+        <DateRangePicker
+          startDate={this.props.filters.startDate}
+          endDate={this.props.filters.endDate}
+          onDatesChange={this.onDatesChange}
+          focusedInput={this.state.calendarFocused}
+          onFocusChange={this.onFocusChange}
+          showClearDates={true}
+          numberOfMonths={1}
+          isOutsideRange={() => false}
+        />
+      </div>
+    );
+  }
+};
+
+const mapStateToProps = (state) => {
+  return {
+    filters: state.filters
+  };
+};
+
+export default connect(mapStateToProps)(ExpenseListFilters);

src/components/ExpenseListItem.js

@@ -1,8 +1,11 @@
 import React from 'react';
+import {Link} from 'react-router-dom';
 
-const ExpenseListItem = ({ description, amount, createdAt }) => (
+const ExpenseListItem = ({ dispatch,id,description, amount, createdAt }) => (
   <div>
-    <h3>{description}</h3>
+    <Link to={`/edit/${id}`}>
+      <h3>{description}</h3>
+    </Link>
     <p>{amount} - {createdAt}</p>
   </div>
 );

src/components/Header.js

@@ -3,7 +3,7 @@ import {NavLink} from 'react-router-dom'
 
 const Header = () => (
     <header>
-        <h1>Epensify</h1>
+        <h1>Epensify</h1>r
         <NavLink to="/" activeClassName="is-active" exact={true}>Dashboard</NavLink>
         <NavLink to="/create" activeClassName="is-active" exact={true}>Create Expense</NavLink>
         <NavLink to="/help" activeClassName="is-active" exact={true}>Help</NavLink>

src/index.js

@@ -3,10 +3,9 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import registerServiceWorker from './registerServiceWorker';
 import AppRouter from './App';
+import jsx from './App'
 
 
 
-
-
-ReactDOM.render(AppRouter, document.getElementById('root'));
+ReactDOM.render(jsx, document.getElementById('root'));
 registerServiceWorker();

src/reducers/filters.js

@@ -1,10 +1,12 @@
+import moment from 'moment';
+
 // Filters Reducer
 
 const filtersReducerDefaultState = {
     text: '',
     sortBy: 'date',
-    startDate: undefined,
-    endDate: undefined
+    startDate: moment().startOf('month'),
+    endDate: moment().endOf('month')
   };
 
   const filtersReducer = (state = filtersReducerDefaultState, action) => {