routing and channel-service

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/react-router-dom": "^4.3.1",
     "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react-dom": "^16.8.1",
+    "react-router-dom": "^4.3.1"
   },
   "devDependencies": {
     "@types/node": "10.12.21",

src/App.tsx

@@ -1,21 +1,20 @@
 import React, { Component } from 'react';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import Header from './components/Header/Header';
 
 import './App.scss';
+import Channellist from './components/Channel/ChannelList';
+import Home from './components/Home';
 
 class App extends Component {
   public render() {
-    const channel: Channel = {
-      id: 1,
-      name: 'test',
-      totalClients: -1,
-      neededSubscribePower: 0,
-      subchannels: [],
-    };
     return (
       <div className='App'>
         <Header />
+        <Router>
+          <Route exact path='/' component={Home} />
+        </Router>
       </div>
     );
   }

src/components/Channel/ChannelList.tsx

@@ -15,8 +15,7 @@ export default class Channellist extends Component<any, any> {
   }
 
   componentDidMount() {
-    fetch('http://haveachin.de:1888/v1/channels')
-      .then(res => res.json())
+    ChannelService.getAllChannels()
       .then(data => this.setState({ channels: data, loaded: true }))
       .catch(e => console.log(e));
   }
@@ -29,7 +28,7 @@ export default class Channellist extends Component<any, any> {
       return (
         <ul className='channelList'>
           {channels.map((e: Channel) => (
-            <li>
+            <li key={e.id}>
               <span>#{e.id} </span>
               {e.name}
             </li>

src/components/Home.tsx

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import Channellist from './Channel/ChannelList';
+
+export default class Home extends Component {
+  render() {
+    return (
+      <div>
+        <Channellist />
+      </div>
+    );
+  }
+}

src/components/channels/ChannelView.scss

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

src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
+import './index.css';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/services/chanel.ts

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