UI Overhaul

client/app/components/navbar/navbar.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { IClaims } from '../../model';
+import { OauthService, StorageService } from '../../services';
+import './navbar.scss';
+
+interface Props {
+  claims?: IClaims;
+  open: boolean;
+  onNavClick: () => void;
+}
+
+interface State {
+  oauthUrl?: string;
+}
+
+export class Navbar extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    this.loadOauthUrl();
+  }
+
+  async loadOauthUrl() {
+    const oauthUrl = await OauthService.getOauthUrl();
+    if (oauthUrl) {
+      this.setState({ oauthUrl });
+    }
+  }
+
+  private logout = () => {
+    StorageService.clear();
+    window.location.href = '/';
+  };
+
+  renderLoginButton() {
+    const { claims } = this.props;
+
+    if (!this.state.oauthUrl) {
+      return null;
+    }
+
+    return !claims ? (
+      <a href={this.state.oauthUrl} className="navbar__item">
+        Login
+      </a>
+    ) : (
+      <a className="navbar__item" onClick={this.logout}>
+        Logout
+      </a>
+    );
+  }
+
+  renderNavLink = (title: string, to: string, params?: any) => {
+    return (
+      <NavLink
+        {...params}
+        to={to}
+        className="navbar__item"
+        activeClassName="navbar__item--active"
+        onClick={this.props.onNavClick}
+      >
+        {title}
+      </NavLink>
+    );
+  };
+
+  render() {
+    const { claims, open } = this.props;
+    const openClass = open ? 'navbar--open' : '';
+    return (
+      <div className={'navbar ' + openClass}>
+        {this.renderNavLink('Soundboard', '/', { exact: true })}
+        {this.renderNavLink('Youtube Downloader', '/downloader')}
+        {this.renderNavLink('Clips', '/clips')}
+        {this.renderNavLink('Stats', '/stats')}
+        {this.renderLoginButton()}
+
+        {claims && claims.email && <div className="navbar__email">{claims.email}</div>}
+      </div>
+    );
+  }
+}