//UserStore.js
import {
  observable,
  flow,
  configure,
  action,
} from 'mobx';
import apiFetch from '../services/data-service';

configure({ enforceActions: true });

class UserStore {
  @observable users = [];

  fetchUsers = flow(function* fetch() {
    try {
      this.users = yield apiFetch('/users', 'get');
    } catch (e) {
      this.errorMessage = e.message;
    }
  })
}

const store = new UserStore();
export default store;

//store/index.js
import userStore from './user-store';

export default {
  userStore,
};

//App.jsx
import React from 'react';
import { Provider } from 'mobx-react';
import AppRouter from './router';
import store from './store';
import 'tachyons';
import './styling/semantic.less';


const App = () => (
  <Provider {...store}>
    <AppRouter />
  </Provider>
);

export default App;

//containers/Users/index.jsx
import React, { Component } from 'react';
import {
  Segment,
  Button,
  Grid,
  Divider,
} from 'semantic-ui-react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

@inject('userStore')
@observer
class Users extends Component {
  static propTypes = {
    userStore: PropTypes.objectOf(PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.object,
      PropTypes.func,
    ])).isRequired,
  }

  // componentDidMount() {
  //   const { userStore } = this.props;
  //   userStore.fetchUsers();
  // }

  selectUser = (id) => {
    console.log(id);
  }


  render() {
    console.log('props', this.props)
    // const { userStore } = this.props;
    // const { users } = userStore;

    return (
      <Segment>
        users
      </Segment>
    );
  }
}

export default Users;