Merge bb33f71 into 0394c0c

src/components/AuthenticationModal.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Container, Modal } from 'react-bootstrap';
+// eslint-disable-next-line import/no-duplicates
+import { Component } from 'react';
+import RegisterForm from './RegisterForm';
+import Login from './Login';
+import { showModal } from '../store/actions/change-form-action';
+
+const mapStateToProps = (state) => {
+  const { isRegister, modalShow } = state.modalState;
+  return {
+    isRegister,
+    modalShow,
+  };
+};
+
+class ConnectedAuthenticationModal extends Component {
+  render() {
+    const { modalShow, dispatch, isRegister } = this.props;
+    const onHide = () => dispatch(showModal({ modalShow: false }));
+    let Form;
+    let headerMessage;
+    if (isRegister) {
+      Form = RegisterForm;
+      headerMessage = <h3 className="col-md-10 col-md-offset-5 header-txt">Join Author's Haven</h3>;
+    } else {
+      Form = Login;
+      headerMessage = <h3 className="col-md-10 col-md-offset-5 header-txt">Welcome back</h3>;
+    }
+    return (
+      <Modal
+        show={modalShow}
+        onHide={onHide}
+        size="lg"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+        className="authentication-modal"
+      >
+        <Modal.Header className="authentication-modal-header" closeButton>
+          {headerMessage}
+        </Modal.Header>
+        <Modal.Body className="authentication-modal-body">
+          <Container>
+            <Form />
+          </Container>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+const AuthenticationModal = connect(mapStateToProps)(ConnectedAuthenticationModal);
+export default AuthenticationModal;

src/components/Header.jsx

@@ -1,20 +1,31 @@
 import React from 'react';
 import { Navbar, Nav } from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
+import AuthenticationModal from './AuthenticationModal';
+import store from '../store/store';
+import { LOGIN, REGISTER } from '../store/actions/action-types';
 
-const Header = () => (
-  <Navbar expand="lg" className="navbar-custom">
-    <NavLink exact to="/" className="brand">
-        Author&apos;s Haven
-    </NavLink>
-    <Navbar.Toggle aria-controls="basic-navbar-nav" />
-    <Navbar.Collapse id="basic-navbar-nav">
-      <Nav className="ml-auto">
-        <NavLink to="/login" className="nav-link">
-            Login
+export class Header extends React.Component {
+  render() {
+    return (
+      <Navbar expand="lg" className="navbar-custom">
+        <NavLink exact to="/" className="brand">
+          Author&apos;s Haven
         </NavLink>
-      </Nav>
-    </Navbar.Collapse>
-  </Navbar>
-);
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="ml-auto">
+            <Nav.Item onClick={() => store.dispatch({ type: LOGIN })} className="nav-link auth-btn ">
+              Login
+            </Nav.Item>
+            <Nav.Item onClick={() => store.dispatch({ type: REGISTER })} className="nav-link auth-btn get-started">
+              Get Started
+            </Nav.Item>
+          </Nav>
+        </Navbar.Collapse>
+        <AuthenticationModal/>
+      </Navbar>
+    );
+  }
+}
 export default Header;

src/components/RegisterForm.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const RegisterForm = () => <div className="main-container">Register</div>;
+export default RegisterForm;

src/css/App.css

@@ -31,3 +31,46 @@ body {
   text-align: right;
   padding: 10px;
 }
+
+.get-started {
+  color: #fcc810 !important;
+  font-family: "Roboto Condensed", sans-serif;
+  border: 1px solid #fcc810;
+  border-radius: 3px;
+  margin-left: 15px;
+}
+
+.auth-btn {
+  cursor: pointer;
+}
+
+.authentication-modal{
+  background:#f0eded !important;
+  opacity:0.9;
+}
+.authentication-modal-body{
+  border:none !important; 
+}
+.authentication-modal-header{
+  border:none !important; 
+}
+
+.modal-content {
+  opacity: 1 !important;
+  background-color: white;
+  max-height: 80%;
+}
+
+.authentication-modal-header {
+  text-align: center;
+  justify-content: center;
+}
+
+.header-txt {
+  font-size: 28px;
+  font-weight: 500;
+}
+
+.modal-dialog {
+  height: 100%;
+}

src/middleware/auth-modal-middleware.js

@@ -0,0 +1,23 @@
+import { REGISTER, LOGIN } from '../store/actions/action-types';
+import { showModal } from '../store/actions/change-form-action';
+
+export default function showModalMiddleware({
+  dispatch,
+}) {
+  return next => (action) => {
+    if (action.type === REGISTER) {
+      dispatch(showModal({
+        isRegister: true,
+        modalShow: true,
+      }));
+    }
+    if (action.type === LOGIN) {
+      dispatch(showModal({
+        isRegister: false,
+        modalShow: true,
+      }));
+    }
+
+    return next(action);
+  };
+}

src/store/actions/action-types.js

@@ -0,0 +1,3 @@
+export const SHOW_MODAL = 'SHOW_MODAL';
+export const REGISTER = 'REGISTER';
+export const LOGIN = 'LOGIN';

src/store/actions/change-form-action.js

@@ -0,0 +1,8 @@
+import { SHOW_MODAL } from './action-types';
+
+export function showModal(payload) {
+  return {
+    type: SHOW_MODAL,
+    payload,
+  };
+}

src/store/reducers/index.js

@@ -1,12 +1,8 @@
-const initialState = {
-    articles: [],
-    notifications: [],
-    followers: [],
-}
+import { combineReducers } from 'redux'
+import modalReducer from './modal-reducer'
 
-function rootReducer(state = initialState, action){
-
-    return state;
-};
+const rootReducer = combineReducers({
+    modalState: modalReducer,
+})
 
 export default rootReducer;

src/store/reducers/modal-reducer.js

@@ -0,0 +1,20 @@
+import { SHOW_MODAL } from '../actions/action-types';
+
+const initialState = {
+    isRegister: false,
+    modalShow: false
+}
+
+function modalReducer(state = initialState, action) {
+    const payload = action.payload
+    switch (action.type) {
+        case (SHOW_MODAL):
+            return Object.assign({}, state, payload);
+        default:
+            break;
+    }
+
+    return state;
+};
+
+export default modalReducer

src/store/store.js

@@ -1,13 +1,14 @@
-import { createStore, applyMiddleware, compose } from "redux";
+import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import rootReducer from './reducers/index';
+import showModalMiddleware from '../middleware/auth-modal-middleware';
 
+// eslint-disable-next-line no-underscore-dangle
 const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 const store = createStore(
-    rootReducer, 
-    storeEnhancers(applyMiddleware(thunk)),
-    );
+  rootReducer,
+  storeEnhancers(applyMiddleware(thunk, showModalMiddleware)),
+);
 
-
-export default store
+export default store;

src/tests/components/AuthenticationModal.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import AuthenticationModal from '../../components/AuthenticationModal';
+
+
+describe('AuthenticationModal', () => {
+  it('renders one authentication modal', () => {
+    const component = shallow(<AuthenticationModal/>);
+      expect(component).toHaveLength(1);
+
+  });
+  it('renders authentication modal', () => {
+    const component = shallow(<AuthenticationModal debug />);
+    expect(component.find('div')).toBeDefined();
+
+  });
+});

src/tests/reducers/modal-reducer.test.js

@@ -0,0 +1,24 @@
+import modalReducer from '../../store/reducers/modal-reducer';
+import {
+  showModal
+} from '../../store/actions/change-form-action';
+
+test('modalReducers', () => {
+  let state;
+  const action = showModal({
+    modalShow: false
+  })
+  state = modalReducer({
+    isRegister: true,
+    modalShow: true
+  }, {
+    type: 'SHOW_MODAL',
+    payload: {
+      modalShow: false
+    }
+  });
+  expect(state).toEqual({
+    isRegister: true,
+    modalShow: false
+  });
+});