error handling for the unauthorized users and fix for floating button

src/App.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import './App.css';
 import AppRouter from './routers/AppRouter';
+import {connect} from 'react-redux';
+import UserErrors from './components/UserErrors'
 
 // console.log(store.getState())
 
-const App = () => {
+const App = ({errors}) => {
     console.log('You are running this application in ' + process.env.NODE_ENV + ' with parameters of ' + process.env.REACT_APP_ENV);
     return (
         <div className="App">
-          <AppRouter/>
+            {errors && <UserErrors errors={errors}/>}
+            <AppRouter/>
         </div>
     );
 }
 
-export default App;
+export default connect(state => ({errors: state.errors}))(App);

src/actions/accounts.js

@@ -1,4 +1,6 @@
-import database from '../firebase/firebase'
+import database from '../firebase/firebase';
+import {addError} from './errors';
+
 
 export const addAccount = (account) => ({type: 'ADD_ACCOUNTS', account});
 
@@ -22,8 +24,10 @@ export const startAddAccount = (accountData = {}) => {
                 dispatch(addAccount({
                     ...account
                 }));
-            }).catch((err)=>{
-                console.log(err)
+            }, (error) => {
+                console.error("error: " + error);
+                dispatch(addError({code: error.code,message:error.message}))
+
             });
     }
 
@@ -46,6 +50,10 @@ export const startSetAccounts = () => {
                     })
                 });
                 dispatch(setAccounts(accounts));
+            }, (error) => {
+                console.error(error);
+                dispatch(addError({code: error.code,message:error.message}))
+
             });
     };
 };
@@ -92,7 +100,9 @@ export const updateAccountBalance = (name, delta) => {
                 } else if (!committed) {
                     console.log('aborted the transaction');
                 } else {
-                    dispatch(editAccount(name, {balance: snapshot.val()}));
+                    dispatch(editAccount(name, {
+                        balance: snapshot.val()
+                    }));
                 }
             });
     }

src/actions/categories.js

@@ -1,4 +1,6 @@
-import database from '../firebase/firebase'
+import database from '../firebase/firebase';
+import {addError} from './errors';
+
 
 export const addCategory = (category) => ({type: 'ADD_CATEGORIES', category});
 
@@ -26,9 +28,11 @@ export const startAddCategory = (categoryData = {}) => {
                     id: ref.key,
                     ...category
                 }));
-            })
-            .catch((err) => {
-                console.log(err)
+            },
+            (error) => {
+                console.error(error);
+                dispatch(addError({code: error.code,message:error.message}))
+
             });
     }
 
@@ -52,9 +56,11 @@ export const startSetCategories = () => {
                     })
                 });
                 dispatch(setCategories(categories));
-            })
-            .catch((err) => {
-                console.log(err)
+            },
+            (error) => {
+                console.error(error);
+                dispatch(addError({code: error.code,message:error.message}))
+
             });
     };
 };

src/actions/errors.js

@@ -0,0 +1,6 @@
+
+export const addError = (error = {}) => ({type: 'ADD_ERROR', error});
+
+
+
+export const resetError = () => ({type: 'RESET_ERROR'});

src/actions/transactions.js

@@ -1,9 +1,9 @@
-import database  from '../firebase/firebase'
+import database from '../firebase/firebase'
 import moment from 'moment';
 import _ from 'lodash';
+import {addError} from './errors';
 //{storage}
 
-
 export const addTransaction = (transaction) => ({type: 'ADD_TRANSACTION', transaction});
 
 export const startAddTransaction = (transactionData = {}) => {
@@ -40,14 +40,17 @@ export const startAddTransaction = (transactionData = {}) => {
                     id: ref.key,
                     ...transaction
                 }));
+            }, (error) => {
+                console.error("error: " + error);
+                dispatch(addError({code: error.code,message:error.message}))
             });
     }
 
 }
 
 export const setTransactions = (transactions) => ({type: 'SET_TRANSACTIONS', transactions});
 
-export const startSetTransactions = ( fromMoment = moment().startOf('month').valueOf() , toMoment = moment().valueOf() ) => {
+export const startSetTransactions = (fromMoment = moment().startOf('month').valueOf(), toMoment = moment().valueOf()) => {
 
     return (dispatch, getState) => {
         const user_uid = getState().auth.uid;
@@ -65,7 +68,11 @@ export const startSetTransactions = ( fromMoment = moment().startOf('month').val
                         ...childSnapshot.val()
                     })
                 });
-                dispatch(setTransactions( _.orderBy(transactions , ['date'] , ['desc'])));
+                dispatch(setTransactions(_.orderBy(transactions, ['date'], ['desc'])));
+            }, (error) => {
+                console.error(error);
+                dispatch(addError({code: error.code,message:error.message}))
+
             });
     };
 };
@@ -80,6 +87,8 @@ export const startDeleteTransaction = ({id} = {}) => {
             .remove()
             .then(() => {
                 dispatch(deleteTransaction({id}));
+            }, (error) => {
+                console.error(error);
             });
     }
 };

src/components/AccountForm.js

@@ -5,7 +5,6 @@ import Button from 'material-ui/Button';
 import {connect} from 'react-redux';
 import Paper from 'material-ui/Paper';
 
-
 const styles = theme => ({
     textField: {
         marginLeft: theme.spacing.unit,
@@ -26,7 +25,6 @@ const styles = theme => ({
         .mixins
         .gutters({
 
-
             paddingLeft: 0,
             paddingRight: 0,
             marginTop: theme.spacing.unit * 3,
@@ -63,16 +61,37 @@ class AccountForm extends React.Component {
         if (!this.state.name || !this.state.balance) {
             this.setState(() => ({error: 'Please provide name and balance.'}));
         } else {
-            if (this.props.accounts.find((account) => account.name === this.state.name) === undefined) {
+            if (typeof this.props.accounts !== 'undefined' && this.props.accounts.length > 0) {
+
+                if (this.props.accounts.find((account) => account.name === this.state.name) === undefined) {
+                    this.setState(() => ({error: ''}));
+                    this
+                        .props
+                        .onSubmit({
+                            name: this.state.name,
+                            balance: parseFloat(this.state.balance, 10) * 100
+                        });
+                } else {
+                    if (this.state.submit_button_title === "Update") {
+                        this
+                            .props
+                            .onSubmit({
+                                name: this.state.name,
+                                balance: parseFloat(this.state.balance, 10) * 100
+                            });
+                    } else {
+                        this.setState(() => ({name: '', balance: '', error: 'Account already exists'}));
+                    }
+                }
+
+            } else {
                 this.setState(() => ({error: ''}));
                 this
                     .props
                     .onSubmit({
                         name: this.state.name,
                         balance: parseFloat(this.state.balance, 10) * 100
                     });
-            } else {
-                this.setState(() => ({name: '', balance: '' , error: 'Account already exists'}));
             }
         }
     };

src/components/AddFloatingButton.js

@@ -6,6 +6,7 @@ import Dialog, {DialogContent, DialogTitle} from 'material-ui/Dialog';
 import TransactionFrom from './TransactionForm';
 import {connect} from 'react-redux';
 import {startAddTransaction} from '../actions/transactions';
+import {updateAccountBalance} from '../actions/accounts';
 
 const styles = theme => ({
     floatingButton: {
@@ -73,7 +74,13 @@ class AddFloatingButton extends React.Component {
     }
 }
 const mapDispatchToProps = (dispatch) => ({
-    startAddTransaction: (transaction) => dispatch(startAddTransaction(transaction))
+    startAddTransaction: (transaction) => dispatch(startAddTransaction(transaction)).then(() => {
+        let delta = transaction.amount
+        if (transaction.type === 'Expense') {
+            delta = -delta
+        }
+        dispatch(updateAccountBalance(transaction.account, delta))
+    }),
 });
 
 export default connect(undefined, mapDispatchToProps) (withStyles(styles)(AddFloatingButton));

src/components/CategoryForm.js

@@ -5,7 +5,6 @@ import Button from 'material-ui/Button';
 import {connect} from 'react-redux';
 import Paper from 'material-ui/Paper';
 
-
 const styles = theme => ({
     textField: {
         marginLeft: theme.spacing.unit,
@@ -26,7 +25,6 @@ const styles = theme => ({
         .mixins
         .gutters({
 
-
             paddingLeft: 0,
             paddingRight: 0,
             marginTop: theme.spacing.unit * 3,
@@ -55,13 +53,24 @@ class CategoryForm extends React.Component {
         if (!this.state.name) {
             this.setState(() => ({error: 'Please provide name and balance.'}));
         } else {
-            if (this.props.categories.find((category) => category.name === this.state.name) === undefined) {
+            if (typeof this.props.categories !== 'undefined' && this.props.categories.length > 0) {
+
+                if (this.props.categories.find((category) => category.name === this.state.name) === undefined) {
+                    this.setState(() => ({error: ''}));
+                    this
+                        .props
+                        .onSubmit({name: this.state.name});
+                } else {
+                    this.setState(() => ({name: '', balance: '', error: 'Category already exists'}));
+                }
+            } else {
                 this.setState(() => ({error: ''}));
                 this
                     .props
-                    .onSubmit({name: this.state.name});
-            }else {
-                this.setState(() => ({name: '', balance: '' , error: 'Category already exists'}));
+                    .onSubmit({
+                        name: this.state.name,
+                        balance: parseFloat(this.state.balance, 10) * 100
+                    });
             }
         }
     };

src/components/CategoryList.js

@@ -43,7 +43,7 @@ export class CategoryList extends React.Component {
 
         this.state = {
             page: 0,
-            rowsPerPage: 5
+            rowsPerPage: 10
         }
     }
 
@@ -116,7 +116,7 @@ export class CategoryList extends React.Component {
                                         count={this.props.categories.length}
                                         rowsPerPage={this.state.rowsPerPage}
                                         page={this.state.page}
-                                        rowsPerPageOptions={[5]}
+                                        rowsPerPageOptions={[5 , 10]}
                                         onChangePage={this.handleChangePage}
                                         onChangeRowsPerPage={this.handleChangeRowsPerPage}/>
                                 </TableRow>

src/components/MyPieChart.js

@@ -106,14 +106,15 @@ class MyPieChart extends React.Component {
                                 nameKey={this.props.nameKey}
                                 cx="50%"
                                 cy="50%"
-                                outerRadius={100}
+                                outerRadius={120}
                                 fill="#8884d8"
                                 label={this.renderCustomizedLabel}
-                                labelLine={false}>
+                                labelLine={false}
+                                unit="€">
                                 {this
                                     .props
                                     .data
-                                    .map((entry, index) => <Cell key={index} fill={this.state.colors[index]}/>)}
+                                    .map((entry, index) => <Cell key={index} fill={this.state.colors[index]} unit="€"/>)}
                             </Pie>
                             <Tooltip/>