desktop header + signIn/Up requests prototypes via firebase

package.json

@@ -7,6 +7,7 @@
     "firebase": "^5.7.0",
     "node-sass": "^4.11.0",
     "normalize.css": "^8.0.1",
+    "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-loader-spinner": "^2.3.0",

src/PrivateRouter.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router';
+import * as routes from './constants/routes';
+
+export default ({ component: Component, user, ...rest }) => (
+    <Route
+        {...rest}
+        render={props => (
+            user
+                ? <Component {...props} />
+                : <Redirect to={routes.SIGN_IN} />
+        )}
+    />
+)

src/actions/auth/signIn/index.js

@@ -2,8 +2,9 @@ import * as types from '../../../constants';
 
 // all actions for signing in
 
-export const signInRequest = () => ({
-    type: types.SIGN_IN_REQUEST
+export const signInRequest = payload => ({
+    type: types.SIGN_IN_REQUEST,
+    payload
 })
 
 export const signInRequestSucces = payload => ({
@@ -14,13 +15,4 @@ export const signInRequestSucces = payload => ({
 export const signInRequestFailure = error => ({
     type: types.SIGN_IN_REQUEST_FAILURE,
     error
-})
-
-export const userIsSignedIn = (payload) => ({
-    type: types.USER_IS_SIGNED_IN,
-    payload
-})
-
-export const userIsNotSignedIn = () => ({
-    type: types.USER_IS_NOT_SIGNED_IN
-})
+})

src/actions/auth/signOut/index.js

@@ -0,0 +1,7 @@
+import * as types from '../../../constants';
+
+// all actions for signing out
+
+export const signOut = () => ({
+    type: types.SIGN_OUT
+})

src/actions/auth/signUp/index.js

@@ -2,8 +2,9 @@ import * as types from '../../../constants';
 
 // all actions for signing up
 
-export const signUpRequest = () => ({
-    type: types.SIGN_UP_REQUEST
+export const signUpRequest = payload => ({
+    type: types.SIGN_UP_REQUEST,
+    payload
 })
 
 export const signUpRequestSucces = payload => ({

src/components/admin-components/createTestPage/form/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { reduxForm, Field } from 'redux-form';
+import validate from './validate';
+import fieldInput from './../../../common/formInput';
+
+class Form extends React.Component {
+    handleSubmit(event) {
+        event.preventDefault();
+        alert("lol");
+    }
+
+    render() {
+        return (
+            <form action="">
+                <h2>Make a title-page for your test!</h2>
+
+                <div className="title-page__block">
+                    <p className="titles">Title</p>
+                    <Field
+                        className="title-page__block--"
+                        name="title"
+                        type="input"
+                        placeholder=""
+                        component={fieldInput}
+                    />
+                </div>
+
+                <div className="title-page__block">
+                    <p className="titles">Description</p>
+                    <Field name="description" type="input" placeholder="" className="" component={fieldInput} />
+                </div>
+
+                <div className="title-page__block">
+                    <p className="titles">Cover image</p>
+                    <Field name="cover" type="file" placeholder="" className="" component="textarea" />
+                </div>
+
+                <button className="">Create card</button>
+            </form>
+        )
+    }
+}
+
+export default reduxForm({
+    form: "createTest",
+    validate
+})(Form)

src/components/admin-components/createTestPage/form/validate/index.js

@@ -0,0 +1,6 @@
+export default function validate(values) {
+    const {} = values;
+    const errors = {}
+
+    return errors;
+}

src/components/admin-components/createTestPage/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Form from './form';
+
+export default class createTestPage extends React.Component {
+    render() {
+        return (
+            <div className="page create-test">
+                <Form /> 
+            </div>
+        )
+    }
+}

src/components/auth/signInPage/form/index.js

@@ -1,36 +1,40 @@
 import React from 'react';
 import { Field, reduxForm } from 'redux-form'
+
 import validate from './validate'
-import formInput from './../../../common/formInput'
-import { Link } from 'react-router-dom'
-import * as routes from './../../../../constants/routes'
+import formInput from './../../common/formInput'
 
+import { Link } from 'react-router-dom'
+import * as routes from './../../../constants/routes'
 
 class Form extends React.Component {
-
-    handleSubmit = (event) => {
-        event.preventDefault();
-        alert('lol');
+    sendRequest = values => {
+        // console.log("Redux-form values, onSubmithandler before signInRequest:", values);
+        const { actions: { signInRequest } } = this.props;
+        signInRequest(values);
     }
 
     render() {
-        const { invalid } = this.props;
+        const { invalid, handleSubmit, submitting } = this.props;
 
         return (
-            <form className="sign-form" onSubmit={this.handleSubmit} method="POST">
+            <form className="sign-form" onSubmit={handleSubmit(this.sendRequest)}>
                 <h2 className="sign-form__header">Sign In</h2>
-                <Field className="sign-form__input sign-form__input--text" placeholder="Login" name="login" component={formInput} type="text"/>
+
+                <Field className="sign-form__input sign-form__input--text" placeholder="Login" name="login" component={formInput} type="text" />
                 <Field className="sign-form__input sign-form__input--password" placeholder="Password" name="password" component={formInput} type="password" />
-                <button className="link--btn link--btn60" disabled={invalid}>Sign In</button>
+                
+                <button className="link--btn link--btn60" disabled={invalid || submitting}>Sign In</button>
+                
                 <p className="sign-form__link--forgot-password"><Link className="link--inline" to={routes.PASSWORD_FORGET}>Forgot password ?</Link></p>
-                <hr className="sign-form__divider"/>
+                <hr className="sign-form__divider" />
                 <p className="sign-form__link--sign-up">Still ain't got an account? <Link className="link--inline" to={routes.SIGN_UP}>Sign up</Link> first!</p>
-            </form>    
+            </form>
         )
     }
 }
 
 export default reduxForm({
     form: "signIn",
-    validate 
+    validate
 })(Form)

src/components/auth/signInPage/form/validate/index.js

@@ -2,7 +2,7 @@ export default function validate(values) {
     const { login, password } = values;
     const errors = {};
 
-    console.log("Validate, sign-in page form: ", values);
+    // console.log("Validate, sign-in page form: ", values);
 
     if (!login) {
         errors.login = "Required";

src/components/auth/signInPage/index.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import Form from './form'
-
-
-export default props => (
-    <div className="sign-in">
-        <Form />
-    </div>
-)

src/components/auth/signUpPage/form/index.js

@@ -1,23 +1,22 @@
 import React from 'react';
 import { Field, reduxForm } from 'redux-form'
 import validate from './validate'
-import formInput from './../../../common/formInput'
-import { Link } from 'react-router-dom'
-import * as routes from './../../../../constants/routes'
+import formInput from './../../common/formInput'
 
 class Form extends React.Component {
 
-    handleSubmit = (event) => {
-        event.preventDefault();
-        alert("lol");
+    sendRequest = values => {
+        const { actions: { signUpRequest } } = this.props;
+        delete values.passwordConfirmation;
+        signUpRequest(values);
     }
 
     render() {
-        const { invalid } = this.props;
+        const { invalid, handleSubmit } = this.props;
         console.log(this.props);
 
         return (
-            <form className="sign-form" onSubmit={this.handleSubmit} method="POST">
+            <form className="sign-form" onSubmit={handleSubmit(this.sendRequest)}>
 
                 <h2 className="sign-form__header">Sign Up</h2>
 

src/components/auth/signUpPage/index.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import Form from './form'
-
-export default props => (
-    <div className="sign-in">
-        <Form />
-    </div>
-)

src/components/header/index.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+import * as routes from './../../constants/routes';
+import { UserContext } from './../../containers/Header';
+
+export default class header extends Component {
+
+    state = {
+        togglerClosed: true,
+    }
+
+    handleToggle = (event) => {
+        this.setState((prevState) => ({ togglerClosed: !prevState.togglerClosed }))
+    }
+
+    render() {
+        const { togglerClosed } = this.state;
+        const toggleStatus = togglerClosed ? "toggle-status--closed" : "toggle-status--opened"
+
+        return (
+            <UserContext.Consumer>
+                {
+                    ({ user, signOut }) => (
+                        <header className="header">
+                            <Link to={routes.LANDING}>
+                                <h1 className="header__logo">Test.<span className="header__logo--i-letter">i</span>o</h1>
+                            </Link>
+                            <hr className="header__logo--divider" />
+                            <span className="header__toggle-trigger" onClick={this.handleToggle} >
+                                <span />
+                            </span>
+                            <div className="header__flex-wrapper">
+                                <nav className={`header__nav ${toggleStatus}`}>
+                                    <ul className="header__nav nav__list"  >
+                                        <li>
+                                            <Link className="header__nav nav__list-item" to={routes.HOME}>
+                                                Home
+                                            </Link>
+                                        </li>
+                                        <li>
+                                            <Link className="header__nav nav__list-item" to={routes.PROFILE}>
+                                                Profile
+                                            </Link>
+                                        </li>
+                                        <li>
+                                            <Link className="header__nav nav__list-item" to={routes.TESTS}>
+                                                Test
+                                            </Link>
+                                        </li>
+                                        <li>
+                                            <Link className="header__nav nav__list-item" to={routes.CATEGORIES}>
+                                                Categories
+                                            </Link>
+                                        </li>
+                                        {
+                                            user && user.isAdmin && (
+                                                <React.Fragment>
+                                                    <li>
+                                                        <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>
+                                                            Create test
+                                                        </Link>
+                                                    </li>
+                                                    <li>
+                                                        <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_CATEGORY}>
+                                                            Create category
+                                                        </Link>
+                                                    </li>
+                                                    <li>
+                                                        <Link className="header__nav nav__list-item--admin-only" to={routes.DELETE_USER}>
+                                                            Delete user
+                                                        </Link>
+                                                    </li>
+                                                </React.Fragment>
+                                            )
+                                        }
+                                    </ul>
+                                </nav>
+
+                                <div className="header__links">
+                                    {
+                                        !user.data
+                                            ? (
+                                                <React.Fragment>
+                                                    <Link className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
+                                                    <Link className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
+                                                </React.Fragment>
+                                            )
+                                            : (
+                                                <button
+                                                    className="header__links--sign-in link--btn link--btn25"
+                                                    onClick={signOut}
+                                                >
+                                                    Sign out
+                                                </button>
+                                            )
+                                    }
+                                </div>
+                            </div>
+                        </header>
+                    )
+                }
+            </UserContext.Consumer>
+        )
+    }
+}

src/components/homePage/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
 export default props => (
-    <div>there should be a home component</div>
+    <div className="page">
+        There should be a home component
+    </div>
 )

src/components/landingPage/index.js

@@ -3,8 +3,8 @@ import { Link } from 'react-router-dom';
 import * as routes from './../../constants/routes'
 
 export default props => (
-    <div className="home-page">
-        <div className="home-page__about">
+    <div className="page landing-page">
+        <div className="landing-page__about">
             <h1 className="description__header">
                 We are the powerfull servise providing you the ability to create and manage
                 your own tests, in any categories, choosing your own marking methods.
@@ -16,11 +16,11 @@ export default props => (
                 can easily pass them, get marks and <span className="description__inline--pretty">share</span> ones!
             </p>
         </div>
-        <div className="home-page__links-container">
-            <Link to={routes.SIGN_IN} class="home-page__links home-page__links--sign-in">
+        <div className="landing-page__links-container">
+            <Link to={routes.SIGN_IN} className="landing-page__links landing-page__links--sign-in">
                 Sign in
             </Link>
-            <Link to={routes.SIGN_UP} class="home-page__links home-page__links--sign-up">
+            <Link to={routes.SIGN_UP} className="landing-page__links landing-page__links--sign-up">
                 Sign up
             </Link>
         </div>

src/components/notFound/index.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { HOME } from './../../constants/routes'
 
 export default props => (
-    <div className="not-found">
+    <div className="page not-found">
         <img className="not-found__image" src="http://kiwanismiracleleague.org/wp-content/themes/chillibox/media/images/404.png" alt="404" />
         <hr className="not-found__divider"/>
         <h1 className="not-found__message">Sorry, but looks like nobody lives here...</h1>

src/constants/index.js

@@ -1,12 +1,14 @@
-export const SIGN_IN_URL = 'https://projectbasetest.firebaseio.com/users.json';
+export const SIGN_IN_URL = 'https://project-test-32e60.firebaseio.com/signIn.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_URL = 'https://project-test-32e60.firebaseio.com/signUp.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';
 
 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 SIGN_OUT = 'SIGN_OUT';

src/constants/routes.js

@@ -4,4 +4,10 @@ export const SIGN_IN = '/sign-in';
 export const HOME = '/home';
 export const ACCOUNT = '/account';
 export const ADMIN = '/admin';
-export const PASSWORD_FORGET = '/pw-forget';
+export const PASSWORD_FORGET = '/pw-forget';
+export const CREATE_TEST = '/create-test';
+export const CREATE_CATEGORY = '/create-category';
+export const DELETE_USER = '/delete-user'
+export const TESTS = '/test';
+export const CATEGORIES = '/categories';
+export const PROFILE = '/profile';

src/containers/AuthPage/index.js

@@ -1,41 +0,0 @@
-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'
-
-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);
-
-        return (
-            <div className="auth-page">
-                <button onClick={signInRequest} disabled={user ? true : false}>Auth</button>
-                <h2>{isFetching ? 'wait a moment...' : error ? 'Looks like we\'ve in trouble...' : user && user.displayName}</h2>
-            </div>
-        )
-    }
-}
-
-const
-    mapStateToProps = state => ({
-        auth: {
-            ...state.signIn
-        }
-    }),
-    mapDispatchToProps = dispatch => bindActionCreators({ 
-        signInRequest,
-        signUpRequest 
-    }, dispatch);
-
-export default connect(mapStateToProps, mapDispatchToProps)(AuthPage)

src/containers/auth/SignInPage/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { signInRequest } from './../../../actions/auth/signIn'
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import SignInForm from './../../../components/auth/signInForm'
+
+class SignInPage extends React.Component {
+
+    render() {
+        console.log("SignInPage containers props:", this.props);
+        const { signInRequest } = this.props;
+        return (
+            <div className="page sign-in">
+                <SignInForm actions={{ signInRequest }} />
+            </div>
+        )
+    }
+}
+
+const
+    mapDispatchToProps = dispatch => bindActionCreators({ signInRequest }, dispatch)
+
+export default connect(null, mapDispatchToProps)(SignInPage)

src/containers/auth/SignUpPage/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { signUpRequest } from './../../../actions/auth/signUp'
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import SignUpForm from './../../../components/auth/signUpForm'
+
+class SignUpPage extends React.Component {
+
+    render() {
+        console.log("SignInPage containers props:", this.props);
+        const { signUpRequest } = this.props;
+        return (
+            <div className="page sign-up">
+                <SignUpForm actions={{ signUpRequest }} />
+            </div>
+        )
+    }
+}
+
+const
+    mapDispatchToProps = dispatch => bindActionCreators({ signUpRequest }, dispatch)
+
+export default connect(null, mapDispatchToProps)(SignUpPage)

src/containers/header/index.js

@@ -1,76 +1,44 @@
 import React, { Component } from "react";
-import { Link } from "react-router-dom";
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { func, object } from 'prop-types';
+import { bindActionCreators } from 'redux' 
 
-import { signInRequest } from './../../actions/auth/signIn'
-import { signUpRequest } from './../../actions/auth/signUp'
+import HeaderComponent from './../../components/header';
 
-import * as routes from './../../constants/routes'
+import {signOut} from './../../actions/auth/signOut'
 
-import { auth } from '../../firebase_config'
+const UserContext = React.createContext();
 
 class Header extends Component {
-
-    state = {
-        togglerClosed: true
-    }
-
-    handleToggle = (event) => {
-        this.setState((prevState) => ({togglerClosed: !prevState.togglerClosed}))
+    static propTypes = {
+        user: object,
+        signOut: func,
     }
 
     render() {
-        const {togglerClosed} = this.state;
-        const toggleStatus = togglerClosed ? "toggle-status--closed" : "toggle-status--opened"
+        const { user, signOut } = this.props;
 
         return (
-            <header className="header">
-                <h1 className="header__logo">Test.<span className="header__logo--i-letter">i</span>o</h1>
-                <hr className="header__logo--divider"/>
-                <span className="header__toggle-trigger" onClick={this.handleToggle} >
-                    <span />
-                </span>
-                <nav className={`header__nav ${toggleStatus}`}>
-                    <ul className="header__nav nav__list"  >
-                        <li>
-                            <Link className="header__nav nav__list-item" to="/favorites">
-                                Favorites
-                            </Link>
-                        </li>
-                        <li>
-                            <Link className="header__nav nav__list-item" to="/passed">
-                                Passed
-                            </Link>
-                        </li>
-                        <li>
-                            <Link className="header__nav nav__list-item" to="/results">
-                                Results
-                            </Link>
-                        </li>
-                    </ul>
-                </nav>
-                <div className="header__links">
-                    <Link to="/profile">
-                        {/* <img className="header__links--profile" src="https://bit.ly/2LuGzwz" /> */}
-                    </Link>
-                    <Link className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
-                    <Link className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
-                </div>
-            </header>
+            <UserContext.Provider
+                value={{
+                    user,
+                    signOut
+                }}
+            >
+                <HeaderComponent />
+            </UserContext.Provider>
         )
+        
     }
 }
 
 const
-    mapStateToProps = state => ({
-        auth: {
-            ...state.signIn
-        }
+    mapStateToProps = ({ user }) => ({
+        user
     }),
     mapDispatchToProps = dispatch => bindActionCreators({
-        signInRequest,
-        signUpRequest
+        signOut
     }, dispatch);
 
-export default connect(mapStateToProps, mapDispatchToProps)(Header)
+export { UserContext };
+export default connect(mapStateToProps, mapDispatchToProps)(Header);

src/firebase_config.js

@@ -1,20 +0,0 @@
-import firebase from "firebase"
-
-// Initialize Firebase
-var config = {
-    apiKey: "AIzaSyBtE3XNH2Hbj-2LiGrmNOGLcxVC-YbmIqU",
-    authDomain: "projectbasetest.firebaseapp.com",
-    databaseURL: "https://projectbasetest.firebaseio.com",
-    projectId: "projectbasetest",
-    storageBucket: "projectbasetest.appspot.com",
-    messagingSenderId: "706084402090"
-};
-
-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

@@ -17,4 +17,4 @@ ReactDOM.render(
 	document.getElementById("root")
 );
 
-serviceWorker.unregister();
+serviceWorker.unregister();

src/reducers/auth/signIn/index.js

@@ -1,48 +0,0 @@
-import * as types from "../../../constants";
-import initialState from './../../initialState';
-
-export default function signIn(state = initialState.signIn, {type, payload: user, error}) {
-    switch (type) {
-        case 'TEST_FB_REQUEST': {
-            return {
-                ...state,
-                fbValue: user.payload
-            }
-        }
-        case types.SIGN_IN_REQUEST: {
-            return {
-                ...state,
-                isFetching: true
-            }
-        }
-        case types.SIGN_IN_REQUEST_SUCCESS: {
-            return {
-                ...state,
-                user,
-                isFetching: false
-            }
-        }
-        case types.SIGN_IN_REQUEST_FAILURE: {
-            return {
-                ...state,
-                error,
-                isFetching: false
-            }
-        }
-        case types.USER_IS_SIGNED_IN: {
-            return {
-                ...state,
-                user
-            }
-        }
-        case types.USER_IS_NOT_SIGNED_IN: {
-            return {
-                ...state,
-                user: null
-            }
-        }
-        default: {
-            return state
-        }
-    }
-}

src/reducers/auth/signUp/index.js

@@ -1,30 +0,0 @@
-import * as types from "../../../constants";
-import initialState from './../../initialState'
-
-export default function signUp(state = initialState.signUp, {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

@@ -1,15 +1,13 @@
 // Сюда добавляем редьюсеров для combineReducers и импортируем их в state,
 // для создания store 
 import { combineReducers } from 'redux';
-import signIn from './auth/signIn';
-import signUp from './auth/signUp';
 
-import { reducer as form } from 'redux-form'
+import user from './user';
+import { reducer as form } from 'redux-form';
 
 const combinedReducers = combineReducers({
-    signIn,
-    signUp,
-    form
+    form,
+    user
 })
 
 export default combinedReducers;

src/reducers/initialState/index.js

@@ -1,8 +1,9 @@
 export default {
-    signIn: {
-        isFetching: false,
-        user: null,
-        fbValue: []
-    },
-    signUp: {},
+    user: {
+        
+        data: null,
+        error: null,
+        gettingUser: null,
+        isAdmin: null
+    }
 }

src/reducers/user/index.js

@@ -0,0 +1,54 @@
+import initialState from './../initialState'
+import * as types from './../../constants'
+
+export default function (state = initialState.user, { type, error, payload: data }) {
+    switch(type) {
+        case types.SIGN_UP_REQUEST: {
+            return {
+                ...state,
+                gettingUser: true
+            }
+        }
+        case types.SIGN_UP_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                gettingUser: false,
+                data
+            }
+        }
+        case types.SIGN_UP_REQUEST_FAILURE: {
+            return {
+                ...state,
+                gettingUser: false,
+                error
+            }
+        }
+        case types.SIGN_IN_REQUEST: {
+            return {
+                ...state,
+                gettingUser: true
+            }
+        }
+        case types.SIGN_IN_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                gettingUser: false,
+                data                
+            }
+        }
+        case types.SIGN_UP_REQUEST_FAILURE: {
+            return {
+                ...state,
+                gettingUser: false,
+                error
+            }
+        }
+        case types.SIGN_OUT: {
+            return initialState.user
+        }
+        default: {
+            return {...state}
+            
+        }
+    }
+}

src/router.js

@@ -6,14 +6,15 @@ import * as routes from './constants/routes'
 import Header from "./containers/Header"
 import landingPage from './components/landingPage'
 import Footer from './components/footer'
+import PrivateRouter from './PrivateRouter'
 
 import Spinner from "./components/common/spinner";
 
 const notFound   = lazy(() => import("./components/notFound"));
 const homePage   = lazy(() => import("./components/homePage"));
-const signInPage = lazy(() => import("./components/auth/signInPage"));
-const signUpPage = lazy(() => import("./components/auth/signUpPage"));
-
+const signInPage = lazy(() => import("./containers/auth/SignInPage"));
+const signUpPage = lazy(() => import("./containers/auth/SignUpPage"));
+const createTestPage = lazy(() => import("./components/admin-components/createTestPage"));
 
 export default () => (
     <div className="app">
@@ -23,8 +24,16 @@ export default () => (
                 <Route path={routes.LANDING} exact component={landingPage} />
                 <Route path={routes.SIGN_IN} exact component={signInPage} />
                 <Route path={routes.SIGN_UP} exact component={signUpPage} />
-                <Route path={routes.HOME} exact component={homePage} />
-                {/* Test spinner component <Route path="/spinner" exact component={Spinner} /> */}
+
+                <PrivateRouter path={routes.HOME} user={false} component={homePage}/>
+                <PrivateRouter path={routes.TESTS} user={false} component={null}/>
+                <PrivateRouter path={routes.CATEGORIES} user={false} component={null}/>
+                <PrivateRouter path={routes.PROFILE} user={false} component={null} />
+
+                <PrivateRouter path={routes.CREATE_TEST} user={true} component={createTestPage} />
+                <PrivateRouter path={routes.CREATE_CATEGORY} user={false} component={createTestPage} />
+                <PrivateRouter path={routes.DELETE_USER} user={false} component={createTestPage} />
+                
                 <Route component={notFound} />
             </Switch>
         </Suspense>

src/saga/auth/signIn/index.js

@@ -1,18 +1,21 @@
 import { put, call } from "redux-saga/effects";
 import * as actions from './../../../actions/auth/signIn'
-import { auth, googleAuthProvider } from './../../../firebase_config'
+
+import { SIGN_IN_URL } from './../../../constants'
 
 // worker-saga for signing in
 
-export default function* () {
+export default function* ({ payload: requestBody }) {
     try {
-        const payload = yield call(() => {
-            return (
-                auth.signInWithPopup(googleAuthProvider)
-                    .then(res => res.user)
-            )
-        });
-        console.log("Payload", payload);
+        // console.log('received request body from sign-in worker saga', requestBody);
+        const payload = yield call(() => 
+            fetch(SIGN_IN_URL, {
+                method: 'POST',
+                body: JSON.stringify(requestBody)
+            })
+                .then(res => res.json())
+        );
+        // console.log("Payload", payload);
         yield put(actions.signInRequestSucces(payload));
     }
     catch (exception) {

src/saga/auth/signUp/index.js

@@ -5,9 +5,15 @@ import { SIGN_UP_URL } from '../../../constants'
 
 // worker-saga for signing up
 
-export default function* () {
+export default function* ({ payload: requestBody }) {
     try {
-        const payload = yield call( () => fetch(SIGN_UP_URL).then(res => res.json()) );
+        const payload = yield call(() => 
+        fetch(SIGN_UP_URL, {
+            method: 'POST',
+            body: JSON.stringify(requestBody)
+        })
+            .then(res => res.json())
+    );
         yield put(actions.signUpRequestSucces(payload));
     }
     catch (exception) {

src/state/index.js

@@ -1,14 +1,15 @@
 import { createStore, applyMiddleware } from 'redux';
-import { logger } from 'redux-logger'
+import { createLogger } from 'redux-logger'
 import createSagaMiddleware from "redux-saga";
 
 import combinedReducers from './../reducers';
 import initialState from './../reducers/initialState'
 import saga from './../saga'
-import { auth } from './../firebase_config'
-import { userIsNotSignedIn, userIsSignedIn } from './../actions/auth/signIn'
 
 const sagaMiddleware = createSagaMiddleware();
+const logger = createLogger({
+    predicate: (getState, action) => !action.type.includes('@@redux-form')
+});
 
 const store = createStore(
     combinedReducers,

src/styles/abstracts/_variables.scss

@@ -10,9 +10,10 @@ $color-blue-light: #eaf1f9;
 $color-brown: #4c4c4c;
 $color-lightgrey: #d3d3d3;
 $color-grey: #808080;
-$color-lightgrey-transparent: rgba(211,211,211, .9);
+$color-lightgrey-transparent: rgba(211, 211, 211, .9);
+$color-lightsteelgrey-transparent: rgba(190, 195, 221, .9);
 $color-lightsteelblue: #B0C4DE;
 $color-lightsteelblue-transparent: rgba(176, 196, 222, .9);
 
-$padding-top-fixed: 170px;
+$padding-top-fixed: 175px;
 $padding-bottom-fixed: 45px;

src/styles/base/_base.scss

@@ -7,9 +7,9 @@ a, a:hover {
     color: black;
 }
 
-// h1, p {
-//     margin: 0
-// }
+h1, h2, h3, h4 {
+    margin: 0
+}
 
 ul {
     list-style-type: none;

src/styles/components/_button.scss

@@ -3,16 +3,15 @@
         text-transform: uppercase;
         font-family: 'Poiret One', cursive;
         font-weight: bold;
-        // word-break: break-all;
         cursor: pointer;
         padding: 1.5vh 3vh;
         background: $color-lightgrey-transparent;
         box-shadow: 0 0 10px $color-grey;
         border: none;
             @media screen and (min-width: 1200px) {
-                transition: transform 200ms ease-in-out;
+                transition: transform 200ms ease-in-out !important;
                 &:hover {
-                    transform: scale(1.2,1.2);
+                    transform: scale(1.2, 1.2) !important;
                 }
             }
         &50 {

src/styles/components/_header.scss

@@ -1,10 +1,9 @@
 .header {
-    position: fixed;
+    position: fixed;    
     top: 0;
     background: $color-lightsteelblue-transparent;
     height: 130px;
     width: 100%;
-    
     &__logo {
         padding-top: 10px; 
         margin: 0;
@@ -19,85 +18,140 @@
             width: 30%;
             margin: auto;
             margin-top: 5px;
-            margin-bottom: 20px;
         }
     }
-    &__toggle-trigger {
-        position: absolute;
-        top: 70%;
-        cursor: pointer;
-        left: 0;
-        margin-left: 1em;
-        & span,
-        & span::after,
-        & span::before {
-            display: block;
-            height: 2px;
-            width: 2em;
-            border-radius: 2px;
-            background: white;
-        }
-        & span {
-            position: relative;
-        }
-        & span::after,
-        & span::before {
-            position: absolute;
-            content: "";
-        }
-        & span::after {
-            top: 7px;
-        }
-        & span::before {
-            bottom: 7px;
-        }
-    }
-    .toggle-status {
-        &--closed {
-            transform: scale(1, 0);
-            & a {
-                transition: opacity 150ms ease-in-out;
-                opacity: 0;
-            }
-        }
-        &--opened {
-            transform: scale(1, 1);
-            & a {
-                transition: opacity 250ms ease-in-out 250ms;
-                opacity: 1;
-            }
-        }
+
+    &__flex-wrapper {
+        margin: auto;
+        margin-top: 20px;
+        width: 95%;
+        display: flex;
+        justify-content: space-between;
     }
+
     nav {
-        background: rgb(190, 195, 221);
-        position: absolute;
-        width: 100%;
-        top: 100%;
         font-family: 'Poiret One', cursive;
         font-weight: bold;
+        ul {
+            display: flex;
+            margin-bottom: 25px;
 
-        transition: transform 400ms ease-in-out;
-        transform-origin: top;
-        & a {
-            color: $color-white;
-            text-shadow: 1px 1px 2px black;
-        }
-        ul li {
-            padding: 1em;
-            border-bottom: 1px solid $color-lightgrey;
-        }
-        ul li:first-of-type {
-            border-top: 1px solid $color-lightgrey;
+            li {
+                a {
+                    color: $color-white;
+                    text-shadow: 1px 1px 2px black;
+                    font-size: 22px;
+                    transition: all 300ms ease-in-out;
+                    padding: 10px 20px;
+                }
+                .nav__list-item--admin-only {
+                    color: orange;
+                }
+                a:hover {
+                    border-bottom: 2px solid white;
+                    background: $color-lightgrey-transparent;
+                }
+                .nav__list-item--admin-only:hover {
+                    border-bottom: 2px solid orange;
+                    background: $color-lightgrey-transparent;
+                }
+            }
         }
     }
+
     .header__links {
-        display: flex;
-        justify-content: center;
         &--sign-in {
             margin-right: 1.5vw;
         }
         &--sign-up {
-            margin-left: 1.5vw;
+            margin-right: 20px;
+        }
+    }
+    
+    @media screen and (max-width: 1200px) {
+        &__flex-wrapper {
+            width: 100%;
+            display: block;
+            margin-top: 15px;
+        }
+        &__toggle-trigger {
+            position: absolute;
+            top: 70%;
+            cursor: pointer;
+            left: 0;
+            margin-left: 1em;
+            & span,
+            & span::after,
+            & span::before {
+                display: block;
+                height: 2px;
+                width: 2em;
+                border-radius: 2px;
+                background: white;
+            }
+            & span {
+                position: relative;
+            }
+            & span::after,
+            & span::before {
+                position: absolute;
+                content: "";
+            }
+            & span::after {
+                top: 7px;
+            }
+            & span::before {
+                bottom: 7px;
+            }
+        }
+        .toggle-status {
+            &--closed {
+                transform: scale(1, 0);
+            }
+            &--opened {
+                transform: scale(1, 1);
+            }
+        }
+        nav {
+            position: absolute;
+            width: 100%;
+            top: 100%;
+            
+            background: $color-lightsteelgrey-transparent;
+            transition: transform 400ms ease-in-out;
+            transform-origin: top;
+            & a {
+                font-size: 18px;
+            }
+            & a:hover {
+                font-size: 22px;
+            }
+            ul {
+                display: block;
+                margin: 0;
+            }
+            ul li {
+                padding: 1em;
+                border-bottom: 1px solid $color-lightgrey;
+                a {
+                    transition: none !important;
+                    padding: 0;
+                }
+            }
+            ul li:first-of-type {
+                border-top: 1px solid $color-lightgrey;
+            }
+        }
+        .header__links {
+            display: flex;
+            justify-content: center;
+
+            &--sign-in {
+                margin-right: 1.5vw;
+            }
+            &--sign-up {
+                margin-left: 1.5vw;
+            }
         }
     }
 }

src/styles/components/_landingPage.scss

@@ -1,11 +1,9 @@
-.home-page {
+.landing-page {
     background-image: url('https://structureofintellect.files.wordpress.com/2017/09/bubble-test.jpg');
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top center;
-    padding-top: $padding-top-fixed;
-    padding-bottom: 9vh;
     font-family: 'Cormorant Infant', serif;
     &__about,
     &__links-container, {

src/styles/components/_notFound.scss

@@ -1,9 +1,6 @@
 .not-found {
     text-align: center;
-    padding-top: $padding-top-fixed;
     font-family: 'Poiret One', cursive;
-    padding-top: $padding-top-fixed;
-    padding-bottom: $padding-bottom-fixed;
     
     &__image {
         display: block;
@@ -19,7 +16,7 @@
     }
     &__link {
         &--home {
-            font-size: 30px;
+            font-size: 2.1em;
             padding: 3vh 6vh;
             margin-top: 35px;
         }

src/styles/components/_page.scss

@@ -0,0 +1,5 @@
+.page {
+    padding-top: $padding-top-fixed;
+    padding-bottom: $padding-bottom-fixed;
+}
+    

src/styles/components/_signPage.scss

@@ -1,9 +1,4 @@
 .sign {
-    &-in {
-        // height: 83.5vh;
-        padding-top: $padding-top-fixed;
-        padding-bottom: $padding-bottom-fixed;
-    }
     &-form {
         font-size: 18px;
         font-family: 'Poiret One', cursive;
@@ -30,7 +25,6 @@
         }
         &__input {
             display: block;
-            // text-align: center;
             margin: 25px auto;
             border: 1px solid $color-lightgrey;
             padding: 15px;

src/styles/index.scss

@@ -3,6 +3,7 @@
 @import "base/base";
 @import "base/typography";
 
+@import "components/page";
 @import "components/button";
 @import "components/header";
 @import "components/spinner";