Setup test database env

.gitignore

@@ -1,2 +1,4 @@
 /node_modules
 public/dist/
+.env.development
+.env.test

package.json

@@ -10,7 +10,7 @@
     "build:dev": "webpack",
     "build:prod": "webpack -p --env production",
     "dev-server": "webpack-dev-server",
-    "test": "jest --config=jest.config.json",
+    "test": "cross-env NODE_ENV=test jest --config=jest.config.json",
     "start": "node server/server.js",
     "heroku-postbuild": "yarn run build:prod"
   },
@@ -25,6 +25,7 @@
     "enzyme-adapter-react-16": "1.0.0",
     "express": "4.15.4",
     "extract-text-webpack-plugin": "3.0.0",
+    "firebase": "4.2.0",
     "moment": "2.18.1",
     "node-sass": "4.13.0",
     "normalize.css": "7.0.0",
@@ -38,6 +39,8 @@
     "react-redux": "5.0.5",
     "react-router-dom": "4.2.2",
     "redux": "3.7.2",
+    "redux-mock-store": "1.2.3",
+    "redux-thunk": "2.2.0",
     "sass-loader": "6.0.6",
     "style-loader": "0.18.2",
     "uuid": "3.1.0",
@@ -46,6 +49,8 @@
   },
   "devDependencies": {
     "babel-preset-env": "1.5.2",
+    "cross-env": "5.0.5",
+    "dotenv": "4.0.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "3.0.1",
     "jest": "20.0.4",

src/actions/expenses.js

@@ -1,22 +1,30 @@
 import uuid from 'uuid';
-export const addExpense = (
-   { description = '',
-    note = '',
-    amount = 0,
-    createdAt = 0
-} = {}
+import database from '../firebase/firebase';
 
-) => ({
+export const addExpense = (expense) => ({
     type: 'ADD_EXPENSE',
-    expense:{
-        id: uuid(),
-        description,
-        note,
-        amount,
-        createdAt
-    }
+    expense
 });
 
+export const startAddExpense = (expenseData ={}) => {
+    return (dispatch) => {
+        const {
+            description = '',
+            note = '',
+            amount = 0,
+            createdAt = 0
+        } = expenseData;
+        const expense = { description, note, amount, createdAt };
+
+    return database.ref('expenses').push(expense).then((ref) => {
+            dispatch(addExpense({
+                id: ref.key,
+                ...expense
+            }));
+        });
+    }
+};
+
 export const removeExpense = ({id} = {}) => ({
     type: 'REMOVE_EXPENSE',
    id  

src/app.js

@@ -9,6 +9,7 @@ import 'react-dates/lib/css/_datepicker.css';
 import 'normalize.css/normalize.css';
 import './styles/styles.scss';
 import AppRouter from './routers/AppRouter'; 
+import './firebase/firebase';
 
 const store = configureStore();
 

src/components/AddExpensePage.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ExpenseForm from './ExpenseForm';
-import { addExpense } from '../actions/expenses';
+import { startAddExpense } from '../actions/expenses';
 import { connect } from 'react-redux';
 
 export class AddExpensePage extends React.Component{
     onSubmit =(expense)=>{
-        this.props.addExpense(expense);
+        this.props.startAddExpense(expense);
         this.props.history.push('/');
     }
     render(){
@@ -21,6 +21,6 @@ export class AddExpensePage extends React.Component{
 
 
 const mapDispatchToProps = (dispatch) =>({
-    addExpense: (expense) => dispatch(addExpense(expense))
+    startAddExpense: (expense) => dispatch(startAddExpense(expense))
 });
 export default connect(undefined, mapDispatchToProps)(AddExpensePage);

src/firebase/firebase.js

@@ -0,0 +1,136 @@
+import * as firebase from 'firebase';
+
+const config = {
+    apiKey: process.env.FIREBASE_API_KEY,
+    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+    databaseURL: process.env.FIREBASE_DATABASE_URL,
+    projectId: process.env.FIREBASE_PROJECT_ID,
+    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+
+  };
+
+firebase.initializeApp(config);
+
+const database = firebase.database();
+
+
+export { firebase, database as default };
+
+// //child _removed
+// database.ref('expenses').on('child_removed', (snapshot) => {
+//     console.log(snapshot.key, snapshot.val());
+// });
+
+// //child_changed
+// database.ref('expenses').on('child_changed', (snapshot) =>{
+//     console.log(snapshot.key, snapshot.val());
+// });
+
+
+
+// // database.ref('expenses').push({
+// //     description:'Rent',
+// //     note:'blah blah blah',
+// //     amount: 2300,
+// //     createdAt:1029
+// // });
+
+// //displaying db data into an array
+// // database.ref('expenses')
+// //     .once('value')
+// //     .then((snapshot) => {
+// //        const  expenses = [];
+// //        snapshot.forEach((item) => {
+// //            expenses.push({
+// //                id:item.key,
+// //                ...item.val()
+// //            });
+// //        });
+// //        console.log(expenses);
+// //     });
+
+// // add subscription
+// // database.ref('expenses')
+// //     .on('value', (snapshot) => {
+// //         const  expenses = [];
+// //        snapshot.forEach((item) => {
+// //            expenses.push({
+// //                id:item.key,
+// //                ...item.val()
+// //            });
+// //        });
+// //        console.log(expenses);
+// //     }, (e) => {
+// //         console.log('Error with data fetching', e);
+// //     })
+
+
+
+
+// // database.ref().set({
+// //     name: 'Arifa Muj',
+// //     age: 28,
+// //     stressLevel: 6,
+// //     job: {
+// //         title:'Software developer',
+// //         company:'Google'
+// //     },
+// //     location: {
+// //         city: 'Belgaum',
+// //         country: 'India'
+// //     }
+// // });
+
+// // database.ref('location/city').set('Espoo');
+// // database.ref('location/country').set('FInland');
+
+// // database.ref('attributes/height').set('153cm');
+// // database.ref('attributes/weight').set('61kg').then(()=>{
+// //     console.log('Data is saved');
+// // }).catch((e)=>{
+// //     console.log('This failed', e);
+// // });
+
+// //remove function
+// // database.ref('isSingle').remove().then(()=>{
+// //     console.log('Removed succeeded');
+// // }).catch(()=>{
+// //     console.log('Remove failed:', error);
+// // })
+
+// //update function
+// // database.ref().update({
+// //     stressLevel: 9,
+// //     'job/company':'Amazon',
+// //     'location/city':'Seattle'
+// // });
+
+// //add subscription
+// // const onValueChange = database.ref().on('value', (snapshot) => {
+// //     console.log(snapshot.val());
+// // }, (e) => {
+// //     console.log('Error with data fetching', e);
+// // });
+
+// // setTimeout(()=>{
+// //     database.ref('age').set(24);
+// // },3500);
+
+// //remove or off subscription
+// // setTimeout(()=>{
+// //     database.ref().off(onValueChange);
+// // },7500);
+
+// // setTimeout(()=>{
+// //     database.ref('age').set(84);
+// // },13500);
+
+
+// // database.ref().on('value', (snapshot) => {
+// //     const value = snapshot.val(); 
+// //     console.log(`${value.name} is a ${value.job.title} at ${value.job.company}`);
+// // },(e) => {
+// //     console.log('Error with data fetching', e);
+// // });
+

src/playground/promises.js

@@ -0,0 +1,14 @@
+const promise = new Promise((resolve, reject)=>{
+    // setTimeout(()=>{
+    //     resolve('Promise is resolved');
+
+    // },6000);
+    reject('Something went wrong');
+});
+
+promise.then((data)=>{
+    console.log('Promise complete', data);
+}).catch((error) => {
+    console.log('error:',error);
+});
+console.log('printitng somethign before promise');

src/store/configureStore.js

@@ -1,14 +1,17 @@
-import {  createStore, combineReducers} from "redux";
+import {  createStore, combineReducers, applyMiddleware, compose} from "redux";
 import expensesReducer from '../reducers/expenses';
 import filtersReducer from '../reducers/filters';
+import thunk from 'redux-thunk';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__|| compose;
 
 export default () => {
     const store = createStore(
         combineReducers({
             expenses: expensesReducer,
             filters: filtersReducer
         }),
-        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+        composeEnhancers(applyMiddleware(thunk))
     );
     return store;
 };