set public and private links sets based on authentication state

.gitignore

@@ -8,6 +8,8 @@
 # testing
 /coverage
 /cypress/integration/examples
+/cypress/fixtures/
+/cypress/screenshots/
 
 # production
 /build

src/components/NavBar.tsx

@@ -1,17 +1,16 @@
 import React, {FC} from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faCode} from '@fortawesome/free-solid-svg-icons';
+import {faCode, faSignOutAlt, faUser} from '@fortawesome/free-solid-svg-icons';
 
+interface IProps {
+  isAuthenticated?: boolean;
+  loading?: boolean;
+}
 /**
  * Main Navbar serves navigation routes.
  */
-const NavBar = () => (
-  <nav className="navbar bg-dark">
-    <h1>
-      <a href="dashboard.html">
-        <FontAwesomeIcon icon={faCode} /> DevBook
-      </a>
-    </h1>
+const NavBar: FC<IProps> = ({isAuthenticated = true, loading = false}) => {
+  const publicLinks = (
     <ul>
       <li>
         <a href="profiles.html">Developers</a>
@@ -23,7 +22,44 @@ const NavBar = () => (
         <a href="login.html">Login</a>
       </li>
     </ul>
-  </nav>
-);
+  );
+
+  const privateLinks = (
+    <ul>
+      <li>
+        <a href="profiles.html">Developers</a>
+      </li>
+      <li>
+        <a href="posts.html">Posts</a>
+      </li>
+      <li>
+        <a href="dashboard.html">
+          <FontAwesomeIcon icon={faUser} />
+          <span className="hide-sm"> Dashboard</span>
+        </a>
+      </li>
+      <li>
+        <a href="login.html">
+          <FontAwesomeIcon icon={faSignOutAlt} />
+          <span className="hide-sm"> Log out</span>
+        </a>
+      </li>
+    </ul>
+  );
+
+  /** Display appropriated links after loading given authenticated prop */
+  const RenderLinks = !loading && isAuthenticated ? privateLinks : publicLinks;
+
+  return (
+    <nav className="navbar bg-dark">
+      <h1>
+        <a href="dashboard.html">
+          <FontAwesomeIcon icon={faCode} /> DevBook
+        </a>
+      </h1>
+      {RenderLinks}
+    </nav>
+  );
+};
 
 export default NavBar;

src/components/__tests__/NavBar.test.tsx

@@ -1,28 +1,42 @@
 import React from 'react';
 import NavBar from '../NavBar';
-import {render} from '@testing-library/react';
+import {render, RenderResult} from '@testing-library/react';
 
 describe('Navbar displays', () => {
+  let context: RenderResult;
+
+  beforeEach(() => {
+    context = render(<NavBar />);
+  });
+
   describe('when user is not authenticated', () => {
     test('landing page link', () => {
-      const {getByText} = render(<NavBar />);
+      const {getByText} = context;
       const link = getByText('DevBook');
       expect(link).toBeInTheDocument();
     });
     test('developers link', () => {
-      const {getByText} = render(<NavBar />);
+      const {getByText} = context;
       const link = getByText('Developers');
       expect(link).toBeInTheDocument();
     });
     test('register link', () => {
-      const {getByText} = render(<NavBar />);
+      const {getByText} = context;
       const link = getByText('Register');
       expect(link).toBeInTheDocument();
     });
     test('login page link', () => {
-      const {getByText} = render(<NavBar />);
+      const {getByText} = context;
       const link = getByText('Login');
       expect(link).toBeInTheDocument();
     });
   });
+
+  describe('when user is authenticated', () => {
+    test('logout page link', () => {
+      const {getByText} = context;
+      const link = getByText('Logout');
+      expect(link).toBeInTheDocument();
+    });
+  });
 });