import React, { Component } from 'react';
import { Desktop, Mobile } from 'cura';

import * as api from './api';

export class AppRoot extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }
  componentDidMount() {
    api.fetchCatalog()
      .then(({ data }) => {
        this.setState({ data });
      })
      .catch(e => console.log(e));
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        Hello World!
        <Desktop>
          Чисто для деска текст
        </Desktop>
        <Mobile>
          Чисто для мобилы текст
        </Mobile>
        {data && data.total }
      </div>
    );
  }
}