Hook up navigation links to views

Author: seanvm

src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import Sidebar from './components/Sidebar';
 import BucketScreen from './components/screens/buckets/BucketScreen';
+import SettingScreen from './components/screens/settings/SettingScreen';
 import './App.css';
 
 class App extends Component {
@@ -12,7 +13,7 @@ class App extends Component {
  }
 
  handleNavigation = (selectedTab) => {
- this.setState({selectedTab: selectedTab});
+ this.setState({selectedTab});
  }
 
  // TODO: Use react router for this
@@ -23,7 +24,9 @@ class App extends Component {
  case 'buckets':
  screen = <BucketScreen />;
  break;
- 
+ case 'settings':
+ screen = <SettingScreen />;
+ break;
  default:
  screen = <BucketScreen />;
  break;

src/components/Sidebar.js

@@ -8,41 +8,53 @@ export default class NavigationBar extends React.Component {
  super(props);
 
  this.state = {
- 
+ selectedTab: 'buckets'
  };
  }
+ 
+ 
+ handleNavigation = (selectedTab) => {
+ this.setState({selectedTab});
+ this.props.onNavigation(selectedTab);
+ }
 
  render() {
  return (
  <div className="sticky-top justify-content-center" id="">
- <div className="selected row align-items-center navigation-item">
+ <div className={"row align-items-center navigation-item " + (this.state.selectedTab === 'buckets' && 'selected')}>
  <div className="col">
- <div className="row align-items-center justify-content-center">
- <FontAwesomeIcon icon={faCloudDownloadAlt} size="2x" />
- </div>
- <div className="row align-items-center justify-content-center">
- Buckets 
- </div>
+ <a onClick={() => this.handleNavigation('buckets')}>
+ <div className="row align-items-center justify-content-center">
+ <FontAwesomeIcon icon={faCloudDownloadAlt} size="2x" />
+ </div>
+ <div className="row align-items-center justify-content-center">
+ Buckets 
+ </div>
+ </a>
  </div>
  </div>
- <div className="row align-items-center navigation-item">
+ <div className={"row align-items-center navigation-item " + (this.state.selectedTab === 'history' && 'selected')}>
  <div className="col">
- <div className="row align-items-center justify-content-center">
- <FontAwesomeIcon icon={faHistory} size="2x" />
- </div>
- <div className="row align-items-center justify-content-center">
- History
- </div>
+ <a onClick={() => this.handleNavigation('history')}>
+ <div className="row align-items-center justify-content-center">
+ <FontAwesomeIcon icon={faHistory} size="2x" />
+ </div>
+ <div className="row align-items-center justify-content-center">
+ History
+ </div>
+ </a>
  </div>
  </div>
- <div className="row align-items-center navigation-item">
+ <div className={"row align-items-center navigation-item " + (this.state.selectedTab === 'settings' && 'selected')}>
  <div className="col">
- <div className="row align-items-center justify-content-center">
- <FontAwesomeIcon icon={faCogs} size="2x" />
- </div>
- <div className="row align-items-center justify-content-center">
- Settings 
- </div>
+ <a onClick={() => this.handleNavigation('settings')}>
+ <div className="row align-items-center justify-content-center">
+ <FontAwesomeIcon icon={faCogs} size="2x" />
+ </div>
+ <div className="row align-items-center justify-content-center">
+ Settings 
+ </div>
+ </a>
  </div>
  </div>
  </div>

src/components/screens/buckets/BucketScreen.js

@@ -10,8 +10,7 @@ class BucketScreen extends Component {
  super(props);
  this.state = {
  selectedBucket: '',
- downloadDirectory: '',
- selectedTab: 'buckets'
+ downloadDirectory: ''
  };
  }
 
@@ -27,10 +26,6 @@ class BucketScreen extends Component {
  this.setState({downloadDirectory: directory});
  }
 
- handleNavigation = (selectedTab) => {
- this.setState({selectedTab: selectedTab});
- }
- 
  render() { 
  return (
  <div className="buckets">

src/components/screens/settings/SettingScreen.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+
+class BucketScreen extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ selectedBucket: '',
+ downloadDirectory: '',
+ selectedTab: 'settings'
+ };
+ }
+
+ render() { 
+ return (
+ <div className="settings">
+ Settings coming soon!
+ </div>
+ );
+ }
+}
+
+export default BucketScreen;