React app UI refactored - replace spans with anchors, use hrefs, use CSS borders not HRs, delegate to single click handler

react-app-orginal.jsx

/*

.sidenav .link {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.25em;
  color: #7B899D;
  display: block;
  -webkit-transition-duration: 0.25s; /* Safari *\/
  transition-duration: 0.25s;
}

/* missing focus style *\/

.sidenav .link:hover {
  color: #566676;
  background-color: #cfd4db;
  filter: drop-shadow(0px 5px 5px #cfd4db);
  cursor: pointer;
}

/* class not used (yet) *\/

.sidenav .active {
  font-weight: 600;
  background: #dde1e6;
  border: solid 0.1px #cfd4db;
}

/* HR is a presentation-role element - we can use a border on the elements directly. *\/

.sidenav hr {
  display: block;
  unicode-bidi: isolate;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
  border: solid 0.5px #eceef1;
  border-style: inset;
}
                      
*/


import React, { Component } from 'react';

// Views
import Applicant from './components/Applicant.js';
import AssetProperty from './components/AssetProperty.js';
import Contract from './components/Contract.js';
import Landing from './components/Landing.js';
import Marketplace from './components/Marketplace.js';
import MarketplaceParent from './components/MarketplaceParent.js';
import Offering from './components/Offering.js';
import PayoutInstrument from './components/PayoutInstrument.js';
import Pricing from './components/Pricing.js';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      view: 'Applicant'
    };
    this.changeView = this.changeView.bind(this);
  }

  changeView(option) {
    this.setState({
      view: option
    });
  }

  handleView() {
    const { view } = this.state;

    /* MAYBE USE AN ENUM FOR SELECTED VIEWS... ? */
    
    if (view === 'Landing') {
      return <Landing/>
    } if (view === 'Applicant') {
      return <Applicant/>
    } if (view === 'AssetProperty') {
      return <AssetProperty/>
    } if (view === 'Contract') {
      return <Contract/>
    } if (view === 'Marketplace') {
      return <Marketplace/>
    } if (view === 'MarketplaceParent') {
      return <MarketplaceParent/>
    } if (view === 'Offering') {
      return <Offering/>
    } if (view === 'PayoutInstrument') {
      return <PayoutInstrument/>
    } if (view === 'Pricing') {
      return <Pricing/>
    }
  }

  render() {
    return (
      <React.Fragment>
        <div className="container">
          <div className="sidenav">
            <hr/>
      
            {/* HR tags for styling; spans not accessible; repeated event handlers */} 
      
            <span className="link" onClick={() => this.changeView('Applicant')} id="Applicant">Applicant</span><hr/>
            <span className="link" onClick={() => this.changeView('AssetProperty')} id="AssetProperty">Asset / Property</span><hr/>
            <span className="link" onClick={() => this.changeView('Contract')} id="Contract">Contract</span><hr/>
            <span className="link" onClick={() => this.changeView('Marketplace')} id="Marketplace">Marketplace</span><hr/>
            <span className="link" onClick={() => this.changeView('MarketplaceParent')} id="MarketplaceParent">Marketplace Parent</span><hr/>
            <span className="link" onClick={() => this.changeView('Offering')} id="Offering">Offering</span><hr/>
            <span className="link" onClick={() => this.changeView('PayoutInstrument')} id="PayoutInstrument">Payout Instrument</span><hr/>
            <span className="link" onClick={() => this.changeView('Pricing')} id="Pricing">Pricing</span><hr/>
          </div>
          <main className="content">
            {this.handleView()}
          </main>
        </div>
      </React.Fragment>
    );
  }
}

export default (App);
      
      

react-app-refactored.jsx

/*

.sidenav .link {

  /* use a border here, no need for <hr/> tags *\/
  border: 0.05px solid #eceef1;

  padding: 6px 8px 6px 16px;
  
  /* Links should be underlined *\/
  /* text-decoration: none; *\/

  font-size: 1.25em;
  color: #7B899D;
  display: block;
  -webkit-transition-duration: 0.25s; /* Safari *\/
  transition-duration: 0.25s;
}

.sidenav .link:focus,       /* add a focus style *\/
.sidenav .link:hover {
  color: #566676;
  background-color: #cfd4db;
  filter: drop-shadow(0px 5px 5px #cfd4db);
  cursor: pointer;
}

/* Use this on the link *\/
.sidenav link.active {
  font-weight: 600;
  background: #dde1e6;
  border: solid 0.1px #cfd4db;
}

 */

import React, { Component } from 'react';

// Views
import Applicant from './components/Applicant.js';
import AssetProperty from './components/AssetProperty.js';
import Contract from './components/Contract.js';
import Landing from './components/Landing.js';
import Marketplace from './components/Marketplace.js';
import MarketplaceParent from './components/MarketplaceParent.js';
import Offering from './components/Offering.js';
import PayoutInstrument from './components/PayoutInstrument.js';
import Pricing from './components/Pricing.js';

// Use an enum for all the different view components
const VIEWS = {
  Landing: <Landing />,
  Applicant: <Applicant />,
  AssetProperty: <AssetProperty />,
  Contract: <Contract />,
  Marketplace: <Marketplace />,
  MarketplaceParent: <MarketplaceParent />,
  Offering: <Offering />,
  PayoutInstrument: <PayoutInstrument />,
  Pricing: <Pricing />
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      view: 'Applicant'
    };
    this.changeView = this.changeView.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  changeView(e) {
    var option = e.target.getAttribute('href');

    if (!option) {
      return;
    }

    this.setState({
      view: option
    });
  }

  handleClick(e) {
    e.preventDefault();

    this.changeView(e);
  }

  handleKeyUp(e) {
    // change view on space key up
    if (/32/.test(e.keyCode)) {
      this.changeView(e);
    }
  }

  handleView() {
    const { view } = this.state;

    return VIEWS[view];
  }

  setLinkClass(option) {
    return 'link' + (this.state.view === option ? ' active' : '');
  }

  render() {
    return (
      <React.Fragment>
        <div className="container">
          
          {/* event delegation; anchor tag with href */}

          <div className="sidenav" onClick={this.handleClick} onKeyUp={this.handleKeyUp}>
            <a className={this.setLinkClass('Applicant')} href="Applicant">Applicant</a>
            <a className={this.setLinkClass('AssetProperty')} href="AssetProperty">Asset / Property</a>
            <a className={this.setLinkClass('Contract')} href="Contract">Contract</a>
            <a className={this.setLinkClass('Marketplace')} href="Marketplace">Marketplace</a>
            <a className={this.setLinkClass('MarketplaceParent')} href="MarketplaceParent">Marketplace Parent</a>
            <a className={this.setLinkClass('Offering')} href="Offering">Offering</a>
            <a className={this.setLinkClass('PayoutInstrument')} href="PayoutInstrument">Payout Instrument</a>
            <a className={this.setLinkClass('Pricing')} href="Pricing">Pricing</a>
          </div>

          <main className="content">
            {this.handleView()}
          </main>
        </div>
      </React.Fragment>
    );
  }
}

export default (App);

react-app-refactored_link-style-logic.jsx

// Instead of a setLinkClass() method, iterate names from the views enum, match the state, select the label, etc.

var VIEWS = {
  Landing: { component: <Landing />, label: 'Landing' },
  Applicant: { component: <Applicant />, label: 'Applicant' },
  AssetProperty: { component: <AssetProperty />, label: 'Asset / Property' },
  Contract: { component: <Contract />, label: 'Contract' },
  Marketplace: { component: <Marketplace />, label: 'Marketplace' },
  MarketplaceParent: { component: <MarketplaceParent />, label: 'Marketplace Parent' },
  Offering: { component: <Offering />, label: 'Offering' },
  PayoutInstrument: { component: <PayoutInstrument />, label: 'Payout Instrument' },
  Pricing: { component: <Pricing />, label: 'Pricing' }
};

var names = Object.keys(VIEWS);

<nav className="sidenav" onClick={this.handleClick} onKeyUp={this.handleKeyUp}>
  {names.map((name, i) => {
    <a key={i}
      className={'link' + (this.state.view === name ? ' ' + classes.active : ''}
      href={name}
    >{VIEWS[name].label}</a>
    })
  }
</nav>