useReducer not working

package.json

@@ -20,6 +20,7 @@
     "babel-loader": "7.1.1",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-object-rest-spread": "6.23.0",
+    "babel-polyfill": "6.26.0",
     "babel-preset-react": "6.24.1",
     "css-loader": "^3.4.2",
     "enzyme-adapter-react-16": "1.0.0",

src/actions/auth.js

@@ -0,0 +1,22 @@
+import {firebase, googleAuthProvider} from '../firebase/firebase';
+
+export const login = (uid) => ({
+   type: 'LOGIN',
+   uid
+});
+
+export const startLogin = () => {
+    return () => {
+        return firebase.auth().signInWithPopup(googleAuthProvider);
+    }
+};
+
+export const logout = ()=> ({
+    type:'LOGOUT'
+});
+
+export const startLogout = () => {
+    return () => {
+        return firebase.auth().signOut();
+    }
+};

src/app.js

@@ -1,4 +1,4 @@
-import React from 'react';
+ import React from 'react';
 import ReactDOM from 'react-dom';
 import configureStore from './store/configureStore';
 import {Provider} from 'react-redux';
@@ -10,46 +10,46 @@ import 'normalize.css/normalize.css';
 import './styles/styles.scss';
 import AppRouter, {history} from './routers/AppRouter'; 
 import {firebase} from  './firebase/firebase';
+import LoadingPage from './components/LoadingPage';
+import App from './playground/hooks';
 
-const store = configureStore();
+// const store = configureStore();
 
+// const jsx = (
+//     <Provider store = {store}>
+//         <AppRouter />   
+//         </Provider>
+// );
 
-// const state = store.getState();
-// const visibleExpenses = getVisibleExpenses(state.expenses, state.filters); 
-console.log('visibleExpenses tetsing');
 
-const jsx = (
-    <Provider store = {store}>
-        <AppRouter />   
-        </Provider>
-);
+// let hasRendered = false;
+// const renderApp = () => {
+//         if(!hasRendered){
+//             ReactDOM.render(jsx,document.getElementById('app'));
+//             hasRendered = true;
+//         }
+// };
+//ReactDOM.render(<LoadingPage/>, document.getElementById('app'));
 
+// firebase.auth().onAuthStateChanged((user)=>{
+//     if(user){
+//         console.log('uid',user.uid);
+//         store.dispatch(login(user.uid));
+//         store.dispatch(startSetExpenses()).then(()=>{
+//             renderApp();
+//             if(history.location.pathname === '/'){
+//                 history.push('/dashboard');
+//             }
+//             console.log('login');
+//         });
+//     }else{
+//         store.dispatch(logout());
+//         renderApp();
+//        history.push('/');
+//        console.log('logout');
+//     }
+// });
 
-let hasRendered = false;
-const renderApp = () => {
-        if(!hasRendered){
-            ReactDOM.render(jsx,document.getElementById('app'));
-            hasRendered = true;
-        }
-};
+//uncomment all to return to normal
 
-ReactDOM.render(<p>Loading....</p>, document.getElementById('app'));
-// uid has problem, 
-firebase.auth().onAuthStateChanged((user)=>{
-    if(user){
-        console.log('uid',user.uid);
-        store.dispatch(login(user.uid));
-        store.dispatch(startSetExpenses()).then(()=>{
-            renderApp();
-            if(history.location.pathname === '/'){
-                history.push('/dashboard');
-            }
-            console.log('login');
-        });
-    }else{
-        store.dispatch(logout());
-        renderApp();
-       history.push('/');
-       console.log('logout');
-    }
-});
+ReactDOM.render(<App/>, document.getElementById('app'));

src/components/AddExpensePage.js

@@ -3,24 +3,31 @@ import ExpenseForm from './ExpenseForm';
 import { startAddExpense } from '../actions/expenses';
 import { connect } from 'react-redux';
 
-export class AddExpensePage extends React.Component{
-    onSubmit =(expense)=>{
+export class AddExpensePage extends React.Component {
+    onSubmit = (expense) => {
         this.props.startAddExpense(expense);
         this.props.history.push('/');
     }
-    render(){
-        return(
+    render() {
+        return (
             <div>
-            <h1> Add Expense </h1>
-            <ExpenseForm 
-            onSubmit = {this.onSubmit}/>
+                <div className="page-header">
+                    <div className="content-container">
+                    <h1 className="page-header__title"> Add Expense </h1>
+                    </div>
+                </div>
+                <div className="content-container">
+                    <ExpenseForm
+                    onSubmit={this.onSubmit} />
+                </div>
+
             </div>
         );
     }
 }
 
 
-const mapDispatchToProps = (dispatch) =>({
+const mapDispatchToProps = (dispatch) => ({
     startAddExpense: (expense) => dispatch(startAddExpense(expense))
 });
 export default connect(undefined, mapDispatchToProps)(AddExpensePage);

src/components/EditExpensePage.js

@@ -1,39 +1,47 @@
 import React from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ExpenseForm from './ExpenseForm';
-import {startEditExpense, startRemoveExpense} from '../actions/expenses';
+import { startEditExpense, startRemoveExpense } from '../actions/expenses';
 
-export class EditExpensePage extends React.Component{
+export class EditExpensePage extends React.Component {
     onSubmit = (expense) => {
-        this.props.startEditExpense(this.props.expense.id,expense);
+        this.props.startEditExpense(this.props.expense.id, expense);
         this.props.history.push('/');
     }
-    onRemove = ()=>{
-        this.props.startRemoveExpense({id: this.props.expense.id});
+    onRemove = () => {
+        this.props.startRemoveExpense({ id: this.props.expense.id });
         this.props.history.push('/');
     }
-    render(){
-        return(
+    render() {
+        return (
             <div>
-             <ExpenseForm
-        expense = {this.props.expense}
-        onSubmit = {this.onSubmit }/>
-
-             <button onClick= {this.onRemove}>Remove</button>   
-        </div>
+                <div className="page-header">
+                    <div className="content-container">
+                        <h1 className="page-header__title">Edit Expense</h1>
+                    </div>
+                </div>
+                <div className="content-container">
+                    <ExpenseForm
+                        expense={this.props.expense}
+                        onSubmit={this.onSubmit} />
+
+                    <button className="button button--secondary" onClick={this.onRemove}>Remove Expense</button>
+
+                </div>
+            </div>
         );
     }
 }
 
 
 const mapStateToProps = (state, props) => {
-   return {
-    expense: state.expenses.find((expense)=> expense.id === props.match.params.id)
-   };
+    return {
+        expense: state.expenses.find((expense) => expense.id === props.match.params.id)
+    };
 };
 const mapDispatchToProps = (dispatch, props) => ({
-    startEditExpense: (id,expense) => dispatch(startEditExpense(id,expense)),
+    startEditExpense: (id, expense) => dispatch(startEditExpense(id, expense)),
     startRemoveExpense: (data) => dispatch(startRemoveExpense(data))
 });
 
-export default connect(mapStateToProps,mapDispatchToProps)(EditExpensePage);
+export default connect(mapStateToProps, mapDispatchToProps)(EditExpensePage);

src/components/ExpenseDashboardPage.js

@@ -5,8 +5,8 @@ import ExpenseSummary from './ExpensesSummary';
 const ExpenseDashboardPage = () => (
     <div>
         <ExpenseSummary />
-        <ExpenseList />
         <ExpenseListFilters />
+        <ExpenseList />
     </div>
 );
 export default ExpenseDashboardPage;

src/components/ExpenseForm.js

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