Merge dfdbb95 into b8ec24b

package.json

@@ -41,6 +41,7 @@
     "react-hot-loader": "^4.12.11",
     "react-router-dom": "^5.0.1",
     "react-router-prop-types": "^1.0.4",
+    "react-share": "^3.0.1",
     "validator": "^11.1.0"
   },
   "devDependencies": {

src/components/FeaturedBooks/__snapshots__/featuredBooks.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App component renders correctly 1`] = `ShallowWrapper {}`;

src/components/FeaturedBooks/featuredBooks.spec.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { configure, shallow } from 'enzyme';
+
+import Adapter from 'enzyme-adapter-react-16';
+import FeaturedBooks from './index';
+
+configure({ adapter: new Adapter() });
+
+describe('App component', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(<FeaturedBooks />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/GenreScroll/__snapshots__/genreScroll.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App component renders correctly 1`] = `ShallowWrapper {}`;

src/components/GenreScroll/genreScroll.spec.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { configure, shallow } from 'enzyme';
+
+import Adapter from 'enzyme-adapter-react-16';
+import GenreScroll from './index';
+
+configure({ adapter: new Adapter() });
+
+describe('App component', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(<GenreScroll />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/Homepage/__snapshots__/hompage.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App component renders correctly 1`] = `ShallowWrapper {}`;

src/components/Homepage/hompage.spec.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { configure, shallow } from 'enzyme';
+
+import Adapter from 'enzyme-adapter-react-16';
+import Homepage from './index';
+
+configure({ adapter: new Adapter() });
+
+describe('App component', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(<Homepage />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/ShareNovel/effects/index.jsx

@@ -0,0 +1,6 @@
+const useShareButton = () => {
+  const dropdown = document.querySelector('.socials');
+  dropdown.classList.toggle('hide');
+};
+
+export default useShareButton;

src/components/ShareNovel/index.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropType from 'prop-types';
+import {
+  FacebookShareButton,
+  TwitterShareButton,
+  EmailShareButton,
+} from 'react-share';
+import './shareNovel.scss';
+import useShareButton from './effects';
+
+const ShareNovel = ({ title }) => {
+  const shareUrl = window.location.href;
+
+  return (
+    <div className="share-novel">
+      <button type="button" className="btn" onClick={useShareButton}>
+        <i className="fas fa-share-alt" />
+      </button>
+      <div className="socials dropdown hide">
+        <FacebookShareButton
+          url={shareUrl}
+          quote={title}
+        >
+          <i className="fab fa-facebook-square" />
+        </FacebookShareButton>
+        <TwitterShareButton
+          url={shareUrl}
+          title={title}
+        >
+          <i className="fab fa-twitter-square" />
+        </TwitterShareButton>
+        <EmailShareButton
+          url={shareUrl}
+          subject={title}
+        >
+          <i className="fas fa-envelope" />
+        </EmailShareButton>
+      </div>
+    </div>
+  );
+};
+
+ShareNovel.propTypes = {
+  title: PropType.string.isRequired,
+};
+
+export default ShareNovel;

src/components/ShareNovel/shareNovel.scss

@@ -0,0 +1,25 @@
+.share-novel {
+  position: relative;
+
+  .socials {
+    display: flex;
+    position: absolute;
+
+    div {
+      margin: 1rem;
+    }
+
+    i {
+      font-size: 24px;
+      cursor: pointer;
+    }
+
+    .fa-facebook-square {
+      color: #3b5998;
+    }
+
+    .fa-twitter-square {
+      color: #00acee;
+    }
+  }
+}

src/components/layout/Navbar/AuthenticatedNav.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-restricted-globals */
 import React from 'react';
+import { Link } from 'react-router-dom';
 import useAuthenticatedNav from './effects/AuthenticatedNav';
 import { UserContext } from '../../../contexts/UserContext';
 import SignOut from '../../helpers/SignOut';
@@ -16,14 +17,22 @@ const AuthenticatedNav = () => {
             <div className="navbar-fixed">
               <nav className={isVerified || location.pathname !== '/confirmation-page' ? 'authenticated-nav navbar' : 'authenticated-nav navbar confirm-page'}>
                 <div className="nav-wrapper">
-                  <img
-                    className="brand-logo center"
-                    src="https://res.cloudinary.com/drlcfqzym/image/upload/v1567007007/ah-logo-black.png"
-                    alt="Author's Haven"
-                  />
+                  <Link to="/" className="brand-logo center">
+                    <img
+                      className="logo"
+                      src="https://res.cloudinary.com/drlcfqzym/image/upload/v1567007007/ah-logo-black.png"
+                      alt="Author's Haven"
+                    />
+                  </Link>
                   <a href="#!" type="button" data-target="mobile-demo" className="sidenav-trigger">
                     <img src="https://img.icons8.com/ios/50/000000/menu.png" alt="menu" className="font-icon" />
                   </a>
+                  <div className="notification hide-on-large-only" data-target="notification-dropdown">
+                    <img
+                      src="https://img.icons8.com/ios/25/000000/appointment-reminders.png"
+                      alt="notification icon"
+                    />
+                  </div>
                   <button type="button" className="nav-btn btn-small hide-on-med-and-down">upgrade</button>
                   <ul id="nav-mobile" className="right hide-on-med-and-down">
                     <li className="notification" data-target="notification-dropdown">

src/components/layout/Navbar/UnauthenticatedNav.jsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
 import { AuthModalContext } from '../../../context/AuthModalContext';
 import Login from '../../Login/Login';
 import SignUpFormContainer from '../../SignupForm/SignupFormContainer';
@@ -54,11 +55,13 @@ const UnauthenticatedNav = () => {
         <div className="navbar-fixed">
           <nav className="unauthenticated-nav navbar">
             <div className="nav-wrapper">
-              <img
-                className="brand-logo center"
-                src="https://res.cloudinary.com/drlcfqzym/image/upload/v1566998517/ah-logo-white.png"
-                alt="Author's Haven"
-              />
+              <Link to="/" className="brand-logo center">
+                <img
+                  className="logo"
+                  src="https://res.cloudinary.com/drlcfqzym/image/upload/v1566998517/ah-logo-white.png"
+                  alt="Author's Haven"
+                />
+              </Link>
               <a href="#!" type="button" data-target="mobile-demo" className="sidenav-trigger">
                 <img src="https://img.icons8.com/ios/50/ffffff/menu.png" alt="menu" className="font-icon" />
               </a>

src/components/layout/Navbar/__snapshots__/navbar.spec.js.snap

@@ -1,3 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App component renders correctly 1`] = `ReactWrapper {}`;
+
+exports[`App component renders without crashing 1`] = `ShallowWrapper {}`;
+
+exports[`App component renders without crashing 2`] = `ShallowWrapper {}`;

src/components/layout/Navbar/navbar.scss

@@ -31,9 +31,10 @@ $color-black: #000008;
     }
   }
 
-  .brand-logo {
+  .logo {
     width: 285px;
     transition: width 1s;
+    vertical-align: middle;
   }
 
   .nav-wrapper {
@@ -48,7 +49,7 @@ $color-black: #000008;
   }
 
   .font-icon {
-    width: 35px;
+    width: 30px;
     vertical-align: middle;
   }
 
@@ -121,12 +122,16 @@ $color-black: #000008;
     height: 60px;
     transition: height 1s;
 
-    .brand-logo {
+    .logo {
       width: 200px;
       transition: width 1s;
     }
   }
 
+  nav .sidenav-trigger {
+    -webkit-appearance: unset;
+  }
+
   .nav-black {
     background-color: $color-black;
     color: $color-white;
@@ -136,23 +141,27 @@ $color-black: #000008;
     background-color: $color-white;
     color: $color-black;
   }
+
+  div.notification img {
+    vertical-align: middle;
+  }
 }
 
 @media only screen and (max-width: 600px) {
  .navSection {
     .authenticated-nav, .unauthenticated-nav {
 
       .nav-wrapper {
-        flex-direction: row-reverse;
         justify-content: space-between;
+        padding: 0rem 1rem;
       }
 
       .brand-logo.center{
         width: 200px;
-        position: relative;
-        left: 0%;
-        -webkit-transform: translateX(0%);
-        transform: translateX(0%);
+
+        .logo {
+          width: 200px;
+        }
       }
     }
    }
@@ -163,7 +172,7 @@ $color-black: #000008;
       display: none !important;
   }
 
-  img:not(.brand-logo){
+  img:not(.logo){
       display: none !important;
   }
 

src/components/layout/Navbar/navbar.spec.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { BrowserRouter, Switch } from 'react-router-dom';
-import { configure, mount } from 'enzyme';
+import { configure, mount, shallow } from 'enzyme';
 
 import Adapter from 'enzyme-adapter-react-16';
 import Navbar from './index';
 import AuthModalContextProvider from '../../../context/AuthModalContext';
+import AuthenticatedNav from './AuthenticatedNav';
+import UnauthenticatedNav from './UnauthenticatedNav';
 
 configure({ adapter: new Adapter() });
 
@@ -21,4 +23,18 @@ describe('App component', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders without crashing', () => {
+    const wrapper = shallow(<AuthenticatedNav />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders without crashing', () => {
+    const wrapper = shallow(
+      <AuthModalContextProvider>
+        <UnauthenticatedNav />
+      </AuthModalContextProvider>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });