Feature: Firebase setup

frontend-redux/.env

@@ -1,3 +1,12 @@
 NODE_PATH='src/'
 REACT_APP_SERVER_PATH=http://localhost:3000
+
+#Firebase creds
+REACT_APP_FIREBASE_CONFIG_API_KEY=AIzaSyBPUuIONtxcQ3efdGpMGbJVEn6fUG_1E5g
+REACT_APP_FIREBASE_CONFIG_AUTH_DOMAIN=my-first-project-8d8d9.firebaseapp.com
+REACT_APP_FIREBASE_CONFIG_DB_URL=https://my-first-project-8d8d9.firebaseio.com
+REACT_APP_FIREBASE_CONFIG_PROJECT_ID=my-first-project-8d8d9
+REACT_APP_FIREBASE_CONFIG_STORAGE_BUCKET=my-first-project-8d8d9.appspot.com
+REACT_APP_FIREBASE_CONFIG_MSG_SENDER_ID=801023450889
+
 S3_BUCKET_NAME=

frontend-redux/package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-react": "7.12.4",
     "file-loader": "2.0.0",
+    "firebase": "^5.9.3",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.1",
     "html-webpack-plugin": "4.0.0-alpha.2",
@@ -60,15 +61,18 @@
     "react-immutable-proptypes": "^2.1.0",
     "react-jss": "^8.6.1",
     "react-redux": "^6.0.1",
+    "react-redux-firebase": "^3.0.0-alpha.11",
     "react-router": "^4.3.1",
     "react-swipeable-views": "^0.13.1",
     "react-world-flags": "^1.3.0",
     "redux": "^4.0.1",
     "redux-actions": "^2.6.4",
+    "redux-firestore": "^0.7.3",
     "redux-form": "^8.1.0",
     "redux-immutable": "^4.0.0",
     "redux-localstorage": "^0.4.1",
     "redux-saga": "^1.0.1",
+    "redux-saga-firebase": "^0.15.0",
     "reselect": "^4.0.0",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",

frontend-redux/src/actionCreators/views/test.js

@@ -24,3 +24,5 @@ export const initiateRequest = createAction(ActionTypes.INIT_TEST_REQUEST);
 export const setTest = createAction(ActionTypes.SET_TEST);
 
 export const submitValue = createAction(ActionTypes.SUBMIT_VALUE);
+
+export const addFirebaseData = createAction(ActionTypes.ADD_FIREBASE_DATA_TEST);

frontend-redux/src/actionTypes/views/test.js

@@ -9,4 +9,5 @@ export default namespace({
   ADD_TEST_FAILURE: null,
   ADD_TEST_CANCELED: null,
   CANCEL_ADD_TEST_REQUEST: null,
+  ADD_FIREBASE_DATA_TEST: null
 }, 'TEST_VIEW');

frontend-redux/src/config/fbConfig.js

@@ -0,0 +1,17 @@
+import firebase from 'firebase/app';
+import '@firebase/firestore';
+import '@firebase/auth';
+
+export const config = {
+  apiKey: process.env.REACT_APP_FIREBASE_CONFIG_API_KEY,
+  authDomain: process.env.REACT_APP_FIREBASE_CONFIG_AUTH_DOMAIN,
+  databaseURL: process.env.REACT_APP_FIREBASE_CONFIG_DB_URL,
+  projectId: process.env.REACT_APP_FIREBASE_CONFIG_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_FIREBASE_CONFIG_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_FIREBASE_CONFIG_MSG_SENDER_ID
+};
+
+firebase.initializeApp(config);
+firebase.firestore();
+
+export default firebase;

frontend-redux/src/domains/firebase/actionsCreators.js

@@ -0,0 +1,4 @@
+import { createAction } from 'redux-actions';
+import ActionsTypes from './actionsTypes';
+
+export const sendData = createAction(ActionsTypes.SEND_DATA);

frontend-redux/src/domains/firebase/actionsTypes.js

@@ -0,0 +1,5 @@
+import namespace from 'helpers/namespace';
+
+export default namespace({
+  SEND_DATA: null
+}, 'FIREBASE');

frontend-redux/src/domains/firebase/index.js

@@ -0,0 +1,11 @@
+import * as AllActionsCreators from './actionsCreators';
+import saga from './saga';
+
+const ActionsCreators = {
+  sendData: AllActionsCreators.sendData,
+};
+
+export {
+  ActionsCreators,
+  saga,
+};

frontend-redux/src/domains/firebase/rsf.js

@@ -0,0 +1,8 @@
+import firebase from 'config/fbConfig';
+import '@firebase/firestore';
+import '@firebase/auth';
+import ReduxSagaFirebase from 'redux-saga-firebase';
+
+const rsf = new ReduxSagaFirebase(firebase);
+
+export default rsf;

frontend-redux/src/domains/firebase/saga.js

@@ -0,0 +1,15 @@
+import { takeEvery, call } from 'redux-saga/effects';
+import ActionsTypes from './actionsTypes';
+import rsf from './rsf';
+
+
+export function* addFirebaseDataSaga({ payload }) {
+  if (payload.name && payload.age) {
+    yield call(rsf.firestore.addDocument, 'user', payload);
+  }
+}
+
+export default function* firebaseSaga() {
+  yield takeEvery(ActionsTypes.SEND_DATA, addFirebaseDataSaga);
+}
+

frontend-redux/src/index.js

@@ -14,13 +14,24 @@ import { createGenerateClassName, createMuiTheme, jssPreset } from '@material-ui
 import { Provider } from 'react-redux';
 import store from './store';
 import history from './store/history';
+import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
+import { createFirestoreInstance } from 'redux-firestore';
+import firebase from 'config/fbConfig';
+import config from 'config/fbConfig';
 
 import { ConnectedRouter } from 'connected-react-router/immutable';
 
 const jss = create({
   ...jssPreset()
 });
 
+const rrfProps = {
+  firebase,
+  config: config,
+  dispatch: store.dispatch,
+  createFirestoreInstance
+};
+
 const generateClassName = createGenerateClassName();
 
 ReactDOM.render(
@@ -29,7 +40,9 @@ ReactDOM.render(
       <JssProvider jss={jss} generateClassName={generateClassName}>
         <Provider store={store}>
           <ConnectedRouter history={history}>
-            <App />
+            <ReactReduxFirebaseProvider {...rrfProps}>
+              <App />
+            </ReactReduxFirebaseProvider>
           </ConnectedRouter>
         </Provider>
       </JssProvider>

frontend-redux/src/pages/Test/Test.js

@@ -18,7 +18,8 @@ export default class Test extends PureComponent {
     submittedValue: PropTypes.string,
     openTestModal: PropTypes.func.isRequired,
     initiateRequest: PropTypes.func,
-    cancelRequest: PropTypes.func
+    cancelRequest: PropTypes.func,
+    addFirebaseData: PropTypes.func
   };
 
   state = {
@@ -29,11 +30,11 @@ export default class Test extends PureComponent {
 
   onRequestClick = () => {
     this.props.initiateRequest('Post message');
-  }
+  };
 
   onCancelClick = () => {
     this.props.cancelRequest();
-  }
+  };
 
   openModal = () => this.props.openTestModal();
 
@@ -45,7 +46,12 @@ export default class Test extends PureComponent {
 
   handleSubmit = (e) => {
     e.preventDefault();
-    this.props.addFirebaseData(this.state);
+    if (this.state.name && this.state.age){
+      this.props.addFirebaseData({
+        name: this.state.name,
+        age: this.state.age
+      });
+    }
   };
 
   onLoadingClick = () => {

frontend-redux/src/pages/Test/index.js

@@ -1,4 +1,6 @@
 import { connect } from 'react-redux';
+import { firestoreConnect } from 'react-redux-firebase';
+import { compose } from 'redux';
 
 // actions creators
 import {
@@ -15,6 +17,10 @@ import {
 import {
   cancelRequest
 } from 'actionCreators/views/test';
+
+import {
+  addFirebaseData
+} from 'actionCreators/views/test';
 // view
 import Test from './Test';
 
@@ -25,10 +31,17 @@ const mapDispatchToProps = {
   submitValue: values => submitValue(values.testField),
   openTestModal,
   initiateRequest,
-  cancelRequest
+  cancelRequest,
+  addFirebaseData
+
 };
 
-export default connect(
-  testSelector,
-  mapDispatchToProps,
+export default compose (
+  connect(
+    testSelector,
+    mapDispatchToProps,
+  ),
+  firestoreConnect([
+    {collection: 'user'}
+  ])
 )(Test);

frontend-redux/src/reducers/index.js

@@ -1,6 +1,8 @@
 import { combineReducers } from 'redux-immutable';
 import { reducer as formReducer } from 'redux-form';
 import { connectRouter } from 'connected-react-router/immutable';
+import { firestoreReducer } from 'redux-firestore';
+import { firebaseReducer } from 'react-redux-firebase';
 
 // generic
 import modals from './modals';
@@ -18,7 +20,8 @@ import test from './views/test';
 
 export default (history) => combineReducers({
   form: formReducer,
-
+  firebase: firebaseReducer,
+  firestore: firestoreReducer,
   // generic
   router: connectRouter(history),
 

frontend-redux/src/sagas/index.js

@@ -4,6 +4,7 @@ import routerSaga from './router';
 import fileUploader from './fileUploader';
 import { saga as testGroupsSaga } from 'domains/testGroups';
 import { saga as httpSaga } from 'domains/http';
+import { saga as firebaseSaga} from 'domains/firebase';
 
 export default function* rootSaga() {
   yield all([
@@ -12,5 +13,6 @@ export default function* rootSaga() {
     // here can be only domain sagas
     testGroupsSaga(),
     httpSaga(),
+    firebaseSaga()
   ]);
 }

frontend-redux/src/sagas/views/test.js

@@ -3,6 +3,7 @@ import TestActionTypes from 'actionTypes/views/test';
 import * as HTTPActionCreator from 'domains/http/actionsCreators';
 import { addTest } from '../../actionCreators/views/test';
 import HTTPActionTypes from 'domains/http/actionsTypes';
+import * as FirebaseActionCreators from 'domains/firebase/actionsCreators';
 
 
 function* initRequestWatcher() {
@@ -14,8 +15,14 @@ function* initRequestWorker({payload}) {
   yield take(HTTPActionTypes.FINISH_REQUEST);
 }
 
+function* addFireBaseDataWatcher() {
+  yield takeEvery(TestActionTypes.ADD_FIREBASE_DATA_TEST, addFireBaseDataWorker);
+}
 
+function* addFireBaseDataWorker({payload}) {
+  yield put(FirebaseActionCreators.sendData(payload));
+}
 
 export default function* testSaga() {
-  yield all([initRequestWatcher()]);
+  yield all([initRequestWatcher(), addFireBaseDataWatcher()]);
 }