init2

package.json

@@ -3,16 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "^3.11.2",
     "bootstrap": "^4.1.3",
     "firebase": "^5.7.0",
     "node-sass": "^4.11.0",
     "normalize.css": "^8.0.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-loader-spinner": "^2.3.0",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "redux": "^4.0.1",
+    "redux-form": "^8.0.4",
     "redux-logger": "^3.0.6",
     "redux-saga": "^0.16.2"
   },

src/actions/auth/signIn/index.js

@@ -21,6 +21,7 @@ export const userIsSignedIn = (payload) => ({
     payload
 })
 
-export const userIsNotSignedIn = () => ({
-    type: types.USER_IS_NOT_SIGNED_IN
+export const userIsNotSignedIn = (payload) => ({
+    type: types.USER_IS_NOT_SIGNED_IN,
+    payload
 })

src/actions/card/action-card.js

@@ -0,0 +1,15 @@
+import * as types from '../../constants';
+
+export const categoryRequest = () => ({
+    type: types.CATEGORY_URL_REQUEST
+})
+
+export const categoryRequestSucces = payload => ({
+    type: types.CATEGORY_URL_REQUEST_SUCCESS,
+    payload
+})
+
+export const categoryRequestFailure = error => ({
+    type: types.CATEGORY_URL_REQUEST_FAILURE,
+    error
+})

src/actions/card/index.js

@@ -0,0 +1,6 @@
+import * as categoryActions from './action-card';
+
+
+export default {
+    ...categoryActions,
+}

src/actions/index.js

@@ -1,5 +1,6 @@
 import authActions from './auth/logIn';
-
+import categoryActions from './card/index'
 export default {
-    ...authActions
+    ...authActions,
+    ...categoryActions
 }

src/components/common/input-form.js

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { reduxForm, Field, FieldArray } from "redux-form";
+
+const renderField = ({ input, meta: { touched, error }, label, type }) => (
+	<div className="form__input-box">
+		<label className="form__input-lable" htmlFor="origin">
+			{label}
+			<input type={type} {...input} />
+		</label>
+		{touched && error && <span>{error}</span>}
+	</div>
+);
+
+class LoadForm extends Component {
+	
+	render() {
+		const { handleSubmit, title, pristine, submitting } = this.props;
+
+		return (
+			<form onSubmit={handleSubmit(this.submit)} className="form">
+				
+			</form>
+		);
+	}
+}
+
+const mapStateToProps = (state, props) => ({
+});
+
+const component = reduxForm({ })(LoadForm);
+
+export default connect(mapStateToProps)(component);
+

src/constants/index.js

@@ -9,4 +9,9 @@ export const SIGN_UP_REQUEST_SUCCESS = 'SIGN_UP_REQUEST_SUCCESS';
 export const SIGN_UP_REQUEST_FAILURE = 'SIGN_UP_REQUEST_FAILURE';
 
 export const USER_IS_SIGNED_IN = 'USER_IS_SIGNED_IN';
-export const USER_IS_NOT_SIGNED_IN = 'USER_IS_NOT_SIGNED_IN';
+export const USER_IS_NOT_SIGNED_IN = 'USER_IS_NOT_SIGNED_IN';
+
+export const CATEGORY_URL ='https://projectbasetest.firebaseio.com/category.json';
+export const CATEGORY_URL_REQUEST = 'CATEGORY_URL_REQUEST';
+export const CATEGORY_URL_REQUEST_SUCCESS = 'CATEGORY_URL_REQUEST_SUCCESS';
+export const CATEGORY_URL_REQUEST_FAILURE = 'CATEGORY_URL_REQUEST_FAILURE';

src/containers/AuthPage/index.js

@@ -2,21 +2,22 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { signInRequest } from './../../actions/auth/signIn'
-import { signUpRequest } from './../../actions/auth/signUp'
-
-import { auth } from '../../firebase_config'
+import { signInRequest,userIsNotSignedIn  } from './../../actions/auth/signIn';
+import { signUpRequest } from './../../actions/auth/signUp';
+import { categoryRequest} from '../../actions/card/action-card'
 
 class AuthPage extends Component {
     constructor(props) {
         super(props);
     }
+    
 
     render() {
         const { isFetching, error, user } = this.props.auth;
         const { signInRequest } = this.props; 
+        
 
-        console.log("<AuthPage> - props", this.props);
+        console.log("<AuthPage> - props",this.props);
 
         return (
             <div className="auth-page">
@@ -30,12 +31,16 @@ class AuthPage extends Component {
 const
     mapStateToProps = state => ({
         auth: {
-            ...state.signIn
-        }
+            ...state.signIn,
+            
+        },
+        ...state.card
     }),
     mapDispatchToProps = dispatch => bindActionCreators({ 
         signInRequest,
-        signUpRequest 
+        signUpRequest,
+        categoryRequest,
+        userIsNotSignedIn 
     }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(AuthPage)

src/containers/header/index.js

@@ -9,7 +9,9 @@ import { signUpRequest } from './../../actions/auth/signUp'
 import { auth } from '../../firebase_config'
 
 class Header extends Component {
-    
+    signOut=()=>{
+        auth.signOut()
+    }
     render() {
         const { isFetching, error, user } = this.props.auth;
         const { signInRequest } = this.props; 
@@ -24,9 +26,12 @@ class Header extends Component {
                                 <Link className="header__nav-item" to="/favorites">
                                     Favorites
                                 </Link>
-                                <Link className="header__nav-item" to="/passed">
+                                {user.displayName === "Светлана Вервейко"?<Link className="header__nav-item" to="/add">
+                                    Add new cards
+                                </Link>: <Link className="header__nav-item" to="/passed">
                                     Passed
-                                </Link>
+                                </Link>}
+                                
                                 <Link className="header__nav-item" to="/results">
                                     Results
                                 </Link>
@@ -45,7 +50,7 @@ class Header extends Component {
                 </div>
                 {
                     user && user.displayName
-                        ? <p>{user.displayName}</p>
+                        ? <div><p>{user.displayName}</p><button onClick ={this.signOut}>Exit</button></div>
                         : <button onClick={signInRequest}>Sign in</button>
                 }
             </header>

src/containers/new-card/add-card.js

@@ -0,0 +1,18 @@
+import React, { Component,Fragment } from "react";
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import LoadForm from "../../components/common/input-form";
+
+
+class AddCard extends Component {
+   
+    render() {
+      
+        return (
+<div></div>
+        )
+    }
+}
+
+export default AddCard

src/reducers/card-category/reduser-card.js

@@ -0,0 +1,27 @@
+import * as types from "../../constants";
+import initialState from '../initialState';
+
+export default function cardS(state = initialState.category, {type, payload: category, error}) {
+    switch (type) {
+        case types.CATEGORY_URL_REQUEST: {
+            return {
+                ...state
+            }
+        }
+        case types.CATEGORY_URL_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                category
+            }
+        }
+        case types.CATEGORY_URL_REQUEST_FAILURE: {
+            return {
+                ...state,
+                error
+            }
+        }
+        default: {
+            return state
+        }
+    }
+}

src/reducers/index.js

@@ -4,10 +4,11 @@
 import { combineReducers } from 'redux';
 import signIn from './auth/signIn';
 import signUp from './auth/signUp';
-
+import cardS from './card-category/reduser-card'
 const combinedReducers = combineReducers({
     signIn,
-    signUp
+    signUp,
+    
 })
 
 export default combinedReducers;

src/reducers/initialState/index.js

@@ -1,7 +1,11 @@
 export default {
     signIn: {
         isFetching: false,
-        user: null
+        user: null,
+     
     },
     signUp: {},
+    card:{
+        category:null
+       }
 }

src/router.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
-import AuthPage from './containers/AuthPage'
-import Header from "./containers/header"
+import AuthPage from './containers/AuthPage';
+import Header from "./containers/header";
+import AddCard from "./containers/new-card/add-card";
 
 
 export default () => (
@@ -9,6 +10,10 @@ export default () => (
 		<Header />
 		<Switch>
             <Route path="/" exact component={AuthPage} />
+		<Route path="/favorites" exact component={AuthPage} />
+		<Route path="/add" exact component={AddCard} />
+		<Route path="/passed" exact component={AuthPage} />
+		<Route path="/results" exact component={AuthPage} />
 		</Switch>
 	</div>
 );

src/saga/category/category-card/category-cards.js

@@ -0,0 +1,16 @@
+import { put, call } from "redux-saga/effects";
+import * as actions from '../../../actions/card/action-card'
+
+import { CATEGORY_URL } from '../../../constants'
+
+// worker-saga for signing up
+
+export default function* () {
+    try {
+        const payload = yield call( () => fetch(CATEGORY_URL).then(res => res.json()) );
+        yield put(actions.categoryRequestSucces (payload));
+    }
+    catch (exception) {
+        yield put(actions.categoryRequestFailure(exception.message))
+    }
+}

src/saga/category/index.js

@@ -0,0 +1,9 @@
+import { takeEvery } from "redux-saga/effects";
+import * as types from "./../../constants"
+
+import categoryCard from "./category-card/category-cards"
+
+export default function*() {
+    yield takeEvery(types.CATEGORY_URL_REQUEST, categoryCard)
+
+}

src/saga/index.js

@@ -1,6 +1,8 @@
 import { fork } from "redux-saga/effects";
 import auth from './auth'
+import category from './category'
 
 export default function*() {
-    yield fork(auth)
+    yield fork(auth);
+    yield fork(category)
 }

src/state/index.js

@@ -13,7 +13,7 @@ const sagaMiddleware = createSagaMiddleware();
 const store = createStore(
     combinedReducers,
     initialState,
-    applyMiddleware(sagaMiddleware, logger)
+    applyMiddleware(sagaMiddleware)
 );
 
 // action
@@ -22,6 +22,8 @@ auth.onAuthStateChanged(user => user
     : store.dispatch(userIsNotSignedIn())
 );
 
+
+
 export default store;
 
 sagaMiddleware.run(saga);