viam-projectv-scan/src/components/header/header.js

ViaCheck deposit application

import React, { Suspense, Component } from 'react';
import { Link } from 'react-router-dom';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: localStorage.getItem('user'),
      agency: localStorage.getItem('branch'),
      tokenApp: localStorage.getItem('token'),
      language: localStorage.getItem('i18nextLng')
    };
  }

  createUrl = module => {
    const { user, agency, tokenApp, language } = this.state;
    let buildedurl;
    switch (module) {
      //
      case 'reports':
        buildedurl = `/reports/batchreport/${language}`;
        break;
      case 'scanner':
        buildedurl = `/scanner/${user}/${agency}/${tokenApp}/${language}`;
        break;
      default:
        buildedurl = '/';
        break;
    }

    return buildedurl;
  };

  render() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <div className="col-md-auto">
          <ul
            className="nav justify-content-center nav-tabs"
            id="nav-tab"
            role="tablist"
          >
            <li className="nav-item">
              <Link
                to={this.createUrl('scanner')}
                className={
                  module === 'batch'
                    ? 'nav-link text-black active'
                    : 'nav-link text-black'
                }
                aria-selected="true"
                aria-controls="nav-processing"
                role="tab"
              >
                Procesar Cheques
              </Link>
            </li>
            <li className="nav-item">
              <Link
                to={this.createUrl('reports')}
                className={
                  module === 'reports'
                    ? 'nav-link text-black active'
                    : 'nav-link text-black'
                }
                aria-selected="false"
                aria-controls="nav-reports"
                role="tab"
              >
                Reportes
              </Link>
            </li>
          </ul>
        </div>
      </Suspense>
    );
  }
}

export default Header;