import React, { Component } from 'react';
import ChannelService from '../../services/chanel';

import './ChannelList.scss';

export default class Channellist extends Component<any, any> {
  service: ChannelService;
  constructor(props: any) {
    super(props);
    this.state = {
      loaded: false,
      channels: [],
    };
    this.service = new ChannelService();
  }

  componentDidMount() {
    fetch('http://haveachin.de:1888/v1/channels')
      .then(res => res.json())
      .then(data => this.setState({ channels: data, loaded: true }))
      .catch(e => console.log(e));
  }
  public render() {
    const { loaded, channels } = this.state;
    console.log(this.state);
    if (!loaded) {
      return <div className='loading'>Loading...</div>;
    } else {
      return (
        <ul className='channelList'>
          {channels.map((e: Channel) => (
            <li>
              <span>#{e.id} </span>
              {e.name}
            </li>
          ))}
        </ul>
      );
    }
  }
}