Navigation Component

The Navigation component will be responsible for the navigation section that all pages in the app will share.

Step 1

Create a Nav.js file in the components folder.

touch Nav.js

Step 2

Add code to the Nav.js file so that it looks like this:

import React, { Component } from 'react';
import { Link } from 'react-router';
import { login, logout, isLoggedIn } from '../utils/AuthService';
import '../App.css';

class Nav extends Component {

  render() {
    return (
      <nav className="navbar navbar-default">
        <div className="navbar-header">
          <Link className="navbar-brand" to="/">Miniflix</Link>
        </div>
        <ul className="nav navbar-nav">
          <li>
            <Link to="/">All Videos</Link>
          </li>
          <li>
            {
             ( isLoggedIn() ) ? <Link to="/upload">Upload Videos</Link> :  ''
            }
          </li>
        </ul>
        <ul className="nav navbar-nav navbar-right">
          <li>
           {
             (isLoggedIn()) ? ( <button className="btn btn-danger log" onClick={() => logout()}>Log out </button> ) : ( <button className="btn btn-info log" onClick={() => login()}>Log In</button> )
           }
          </li>
        </ul>
      </nav>
    );
  }
}
export default Nav;

In the Nav component, you must have observed that a css file was imported. It's to give the navbar some custom styling effects. Furthermore, the Bootstrap <nav> element is used to give the app a basic and functional navbar.

The isLoggedIn() function is from the AuthService. It basically checks the user's authentication status. If the user is logged in, the Log out button is displayed. Otherwise, the Log In button is displayed to the user.

In order to see this components work visually, you need to set up routes to render them in the browser.