some struct changes, not final V2

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^4.1.3",
+    "firebase": "^5.7.0",
     "node-sass": "^4.11.0",
     "normalize.css": "^8.0.1",
     "react": "^16.6.3",

src/actions/auth/index.js

@@ -0,0 +1,7 @@
+import * as signInActions from './signIn';
+import * as signUpActions from './signUp';
+
+export default {
+    ...signInActions,
+    ...signUpActions
+}

src/actions/auth/logIn/index.js

@@ -1,17 +0,0 @@
-import * as types from '../../../constants';
-
-// all actions for logging in
-
-export const logInRequest = () => ({
-    type: types.LOG_IN_REQUEST
-})
-
-export const logInRequestSucces = payload => ({
-    type: types.LOG_IN_REQUEST_SUCCESS,
-    payload
-})
-
-export const logInRequestFailure = error => ({
-    type: types.LOG_IN_REQUEST_FAILURE,
-    error
-})

src/actions/auth/signIn/index.js

@@ -0,0 +1,17 @@
+import * as types from '../../../constants';
+
+// all actions for signing in
+
+export const signInRequest = () => ({
+    type: types.SIGN_IN_REQUEST
+})
+
+export const signInRequestSucces = payload => ({
+    type: types.SIGN_IN_REQUEST_SUCCESS,
+    payload
+})
+
+export const signInRequestFailure = error => ({
+    type: types.SIGN_IN_REQUEST_FAILURE,
+    error
+})

src/actions/auth/signUp/index.js

@@ -0,0 +1,17 @@
+import * as types from '../../../constants';
+
+// all actions for signing up
+
+export const signUpRequest = () => ({
+    type: types.SIGN_UP_REQUEST
+})
+
+export const signUpRequestSucces = payload => ({
+    type: types.SIGN_UP_REQUEST_SUCCESS,
+    payload
+})
+
+export const signUpRequestFailure = error => ({
+    type: types.SIGN_UP_REQUEST_FAILURE,
+    error
+})

src/actions/index.js

@@ -1,6 +1,5 @@
-import * as loginActions from './auth/logIn';
-console.log(...loginActions);
+import authActions from './auth/logIn';
 
 export default {
-    ...loginActions
+    ...authActions
 }

src/constants/index.js

@@ -1,7 +1,9 @@
-export const LOG_IN_REQUEST = 'LOG_IN_REQUEST';
-export const LOG_IN_REQUEST_SUCCESS = 'LOG_IN_REQUEST_SUCCESS';
-export const LOG_IN_REQUEST_FAILURE = 'LOG_IN_REQUEST_FAILURE';
+export const SIGN_IN_URL = 'https://projectbasetest.firebaseio.com/users.json';
+export const SIGN_IN_REQUEST = 'SIGN_IN_REQUEST';
+export const SIGN_IN_REQUEST_SUCCESS = 'SIGN_IN_REQUEST_SUCCESS';
+export const SIGN_IN_REQUEST_FAILURE = 'SIGN_IN_REQUEST_FAILURE';
 
+export const SIGN_UP_URL = 'https://projectbasetest.firebaseio.com/users.json';
 export const SIGN_UP_REQUEST = 'SIGN_UP_REQUEST';
 export const SIGN_UP_REQUEST_SUCCESS = 'SIGN_UP_REQUEST_SUCCESS';
 export const SIGN_UP_REQUEST_FAILURE = 'SIGN_UP_REQUEST_FAILURE';

src/containers/AuthPage/index.js

@@ -2,22 +2,45 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import * as actions from './../../actions'
+import { signInRequest } from './../../actions/auth/signIn'
+import { signUpRequest } from './../../actions/auth/signUp'
 
-console.log(...actions.default)
+import { auth, googleAuthProvider } from '../../firebase_config'
 
 class AuthPage extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            user: null
+        }
+    }
+
+    componentDidMount() {
+        auth.onAuthStateChanged(user => this.setState({ user }))
+    }
+
+    authRequest = () => {
+        auth.signInWithPopup(googleAuthProvider)
+            .then(res => {
+                console.log(res);
+
+                this.setState({
+                    user: res.user
+                })
+            })
     }
 
     render() {
         const { } = this.props; // 
+        const { user } = this.state; // 
+
+        console.log("<AuthPage> - props", this.props);
+
 
         return (
             <div className="auth-page">
-                Hi there
-                {console.log("<AuthPage> - props", this.props)}
+                <h1>{user && user.displayName}</h1>
+                <button onClick={this.authRequest} disabled={user ? true : false}>Auth</button>
             </div>
         )
     }
@@ -25,8 +48,13 @@ class AuthPage extends Component {
 
 const
     mapStateToProps = state => ({
-        ...state.logIn
+        signInState: {
+            ...state.signIn
+        },
+        signUpState: {
+            ...state.signUp
+        }
     }),
-    mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+    mapDispatchToProps = dispatch => bindActionCreators({ signInRequest, signUpRequest }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(AuthPage)

src/firebase_config.js

@@ -0,0 +1,20 @@
+import firebase from "firebase"
+
+// Initialize Firebase
+var config = {
+    apiKey: "AIzaSyB8VX9OPxTh6CWIZW5JmK5XZJPVk46w5Lk",
+    authDomain: "someshit-7a282.firebaseapp.com",
+    databaseURL: "https://someshit-7a282.firebaseio.com",
+    projectId: "someshit-7a282",
+    storageBucket: "someshit-7a282.appspot.com",
+    messagingSenderId: "76495252861"
+};
+
+firebase.initializeApp(config);
+
+export const database = firebase.database();
+export const storage = firebase.storage();
+export const auth = firebase.auth();
+export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()
+
+export default firebase;

src/index.js

@@ -6,6 +6,7 @@ import * as serviceWorker from "./serviceWorker";
 
 import Router from "./router";
 import reduxStore from './state'
+import firebase from "./firebase_config";
 
 ReactDOM.render(
 	<BrowserRouter>

src/reducers/auth/logIn/index.js

@@ -1,4 +1,4 @@
-import * as actions from "../../../constants";
+import * as types from "../../../constants";
 
 const initialState = {
     isFetching: false,
@@ -8,20 +8,20 @@ const initialState = {
 
 export default function(state = initialState, {type, payload, error}) {
     switch (type) {
-        case actions.LOG_IN_REQUEST: {
+        case types.SIGN_IN_REQUEST: {
             return {
                 ...state,
                 isFetching: true
             }
         }
-        case actions.LOG_IN_REQUEST_SUCCESS: {
+        case types.SIGN_IN_REQUEST_SUCCESS: {
             return {
                 ...state,
                 payload,
                 isFetching: false
             }
         }
-        case actions.LOG_IN_REQUEST_FAILURE: {
+        case types.SIGN_IN_REQUEST_FAILURE: {
             return {
                 ...state,
                 error,

src/reducers/auth/signUp/index.js

@@ -0,0 +1,35 @@
+import * as types from "../../../constants";
+
+const initialState = {
+    isFetching: false,
+    payload: null,
+    error: null
+}
+
+export default function(state = initialState, {type, payload, error}) {
+    switch (type) {
+        case types.SIGN_UP_REQUEST: {
+            return {
+                ...state,
+                isFetching: true
+            }
+        }
+        case types.SIGN_UP_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                payload,
+                isFetching: false
+            }
+        }
+        case types.SIGN_UP_REQUEST_FAILURE: {
+            return {
+                ...state,
+                error,
+                isFetching: false
+            }
+        }
+        default: {
+            return state
+        }
+    }
+}

src/reducers/index.js

@@ -2,10 +2,12 @@
 // для создания store 
 
 import { combineReducers } from 'redux';
-import logIn from './auth/logIn';
+import signIn from './auth/signIn';
+import signUp from './auth/signUp'
 
 const combinedReducers = combineReducers({
-    logIn
+    signIn,
+    signUp
 })
 
 export default combinedReducers;

src/saga/auth/index.js

@@ -1,11 +1,12 @@
 import { takeEvery } from "redux-saga/effects";
 import * as types from "./../../constants"
 
-import logIn from './logIn';
-// import signUp from './signUp';
+import signIn from './signIn';
+import signUp from './signUp';
 
 export default function*() {
-    yield takeEvery(types.LOG_IN_REQUEST, logIn)
+    yield takeEvery(types.SIGN_IN_REQUEST, signIn);
+    yield takeEvery(types.SIGN_UP_REQUEST, signUp);
 }
 
 

src/saga/auth/logIn/index.js

@@ -1,19 +0,0 @@
-import { put, call } from "redux-saga/effects";
-import * as actions from './../../../actions/auth/logIn'
-
-// worker-saga for logging in
-
-const url = '';
-
-export default function*() {
-    try {
-        yield put(actions.logInRequest())
-        const payload = yield call(() => { 
-            fetch(url).then(res => res.json()) 
-        })
-        yield put(actions.logInRequestSucces(payload))
-    }
-    catch (exception) {
-        yield put(actions.logInRequestFailure(exception.message))
-    }
-}

src/saga/auth/signIn/index.js

@@ -0,0 +1,18 @@
+import { put, call } from "redux-saga/effects";
+import * as actions from './../../../actions/auth/signIn'
+
+import { SIGN_IN_URL } from '../../../constants'
+
+// worker-saga for signing in
+
+export default function* () {
+    try {
+        const payload = yield call(() => {
+            fetch(SIGN_IN_URL).then(res => res.json())
+        })
+        yield put(actions.signInRequestSucces(payload))
+    }
+    catch (exception) {
+        yield put(actions.signInRequestFailure(exception.message))
+    }
+}

src/saga/auth/signUp/index.js

@@ -0,0 +1,18 @@
+import { put, call } from "redux-saga/effects";
+import * as actions from './../../../actions/auth/signUp'
+
+import { SIGN_UP_URL } from '../../../constants'
+
+// worker-saga for signing up
+
+export default function* () {
+    try {
+        const payload = yield call(() => {
+            fetch(SIGN_UP_URL).then(res => res.json())
+        })
+        yield put(actions.signUpRequestSucces(payload))
+    }
+    catch (exception) {
+        yield put(actions.signUpRequestFailure(exception.message))
+    }
+}