70 lines
1.5 KiB
TypeScript
70 lines
1.5 KiB
TypeScript
import { inject, observer } from 'mobx-react';
|
|
import React from 'react';
|
|
import { AppStore } from '../../stores/app.store';
|
|
import './navbar.scss';
|
|
|
|
interface IProps {
|
|
appStore?: AppStore;
|
|
}
|
|
|
|
@inject('appStore')
|
|
@observer
|
|
export class Navbar extends React.Component<IProps, any> {
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
}
|
|
|
|
onLeagueSelect = (event: any) => {
|
|
this.props.appStore!.setActiveLeague(event.target.value);
|
|
};
|
|
|
|
onStashSelect = (event: any) => {
|
|
this.props.appStore!.loadItems(event.target.value);
|
|
};
|
|
|
|
renderStashTabSelector() {
|
|
const { stashTabs } = this.props.appStore!;
|
|
if (stashTabs.length < 1) {
|
|
return null;
|
|
}
|
|
return (
|
|
<select defaultValue={stashTabs[0].n} onChange={this.onStashSelect}>
|
|
{stashTabs.map((v, k) => (
|
|
<option key={k} value={k}>
|
|
{v.n}
|
|
</option>
|
|
))}
|
|
</select>
|
|
);
|
|
}
|
|
|
|
renderLeagueSelector() {
|
|
const { activeLeague, leagues } = this.props.appStore!;
|
|
if (!leagues || !activeLeague) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<select onChange={this.onLeagueSelect} defaultValue={activeLeague.id}>
|
|
{leagues!.map((l, k) => {
|
|
return (
|
|
<option key={k} value={l.id}>
|
|
{l.id}
|
|
</option>
|
|
);
|
|
})}
|
|
</select>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="navbar">
|
|
{this.renderLeagueSelector()}
|
|
{this.renderStashTabSelector()}
|
|
<button onClick={() => this.props.appStore!.resetState()}>Logout</button>
|
|
</div>
|
|
);
|
|
}
|
|
}
|