refactored service to async/await

src/App.scss

@@ -1,4 +1,5 @@
 body {
   background-color: #4a4a4a;
-  font-size: 160%
+  font-size: 160%;
+  color: #fff
 }

src/components/Channel/ChannelList.tsx

@@ -1,27 +1,24 @@
 import React, { Component } from 'react';
-import ChannelService from '../../services/chanel';
+import ChannelService from '../../services/ChannelService';
 
 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() {
-    ChannelService.getAllChannels()
+    ChannelService.fetchAllChannels().then(data => {
-      .then(data => this.setState({ channels: data, loaded: true }))
+      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 {

src/services/ChannelService.ts

@@ -0,0 +1,9 @@
+const API_URL = 'http://haveachin.de:1888/v1/channels';
+
+export default class ChannelService {
+  public static async fetchAllChannels() {
+    const response = await fetch('http://haveachin.de:1888/v1/channels');
+    const json = await response.json();
+    return json;
+  }
+}

src/services/chanel.ts

@@ -1,9 +0,0 @@
-const API_URL = 'http://haveachin.de:1888/v1/channels';
-
-export default class ChannelService {
-  public static getAllChannels() {
-    return fetch('http://haveachin.de:1888/v1/channels').then(res =>
-      res.json()
-    );
-  }
-}