import { inject, observer } from 'mobx-react';
import React from 'react';
import { AppStore } from '../../stores/app.store';
import { Navbar } from '../navbar/navbar';
import { PriceListItem } from '../price-list-item/price-list-item';
import './home.scss';

interface IProps {
  appStore?: AppStore;
}

interface IState {}

@inject('appStore')
@observer
export class Home extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <Navbar />
        <div style={{ padding: '10px' }}>
          {this.props.appStore!.stashItems.map((v, k) => {
            return <PriceListItem key={k} data={v} />;
          })}
        </div>
      </div>
    );
  }
}