renaming

src/components/Channel/ChannelList.scss

@@ -0,0 +1 @@
+.channelList li span {}

src/components/Channel/ChannelList.tsx

@@ -0,0 +1,41 @@
+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>
+      );
+    }
+  }
+}

src/components/Channel/ChannelView.scss

@@ -0,0 +1,10 @@
+.channel-view {
+  background-color: green;
+  width: 20%;
+  height: auto;
+  margin: auto;
+}
+
+.channel-view ul {
+  text-align: left
+}

src/components/channels/Channellist.tsx

@@ -1,20 +0,0 @@
-import React, { Component } from 'react';
-
-export default class Channellist extends Component<any, any> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      data: 'Loading...',
-    };
-  }
-
-  componentDidMount() {
-    fetch('https://ts.cliffbreak.de/v1/channels')
-      .then(response => response.json())
-      .then(data => this.setState({ data }));
-  }
-  public render() {
-    const { data } = this.state;
-    return <div>{data}</div>;
-  }
-}