From b0756311d8641d07d71de42aa40dfd527c14fb70 Mon Sep 17 00:00:00 2001
From: 123niel <niel.rohling@gmail.com>
Date: Thu, 7 Feb 2019 00:22:08 +0100
Subject: [PATCH] simple ChannelView

---
 src/App.tsx                             |  9 ++++++--
 src/components/channels/ChannelView.css | 10 +++++++++
 src/components/channels/ChannelView.tsx | 29 +++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/components/channels/ChannelView.css
 create mode 100644 src/components/channels/ChannelView.tsx

diff --git a/src/App.tsx b/src/App.tsx
index a992516..beb7e21 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,21 @@
 import React, { Component } from 'react';
 
-import Channels from './components/channels/Channels';
 import Header from './components/Header/Header';
 
 import './App.css';
 
 class App extends Component {
   public render() {
+    const channel: Channel = {
+      id: 1,
+      name: 'test',
+      totalClients: -1,
+      neededSubscribePower: 0,
+      subchannels: [],
+    };
     return (
       <div className='App'>
         <Header />
-        <Channels />
       </div>
     );
   }
diff --git a/src/components/channels/ChannelView.css b/src/components/channels/ChannelView.css
new file mode 100644
index 0000000..9e43fba
--- /dev/null
+++ b/src/components/channels/ChannelView.css
@@ -0,0 +1,10 @@
+.channel-view {
+  background-color: green;
+  width: 20%;
+  height: auto;
+  margin: auto;
+}
+
+.channel-view ul {
+  text-align: left
+}
diff --git a/src/components/channels/ChannelView.tsx b/src/components/channels/ChannelView.tsx
new file mode 100644
index 0000000..d9d52e6
--- /dev/null
+++ b/src/components/channels/ChannelView.tsx
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import './ChannelView.css';
+
+export default class ChannelView extends Component<ChannelViewProps> {
+  render() {
+    const { channel } = this.props;
+    return (
+      <div className='channel-view'>
+        <h2>{channel.name}</h2>
+        <ul>
+          <li>
+            <span>#{channel.id} </span>
+            {channel.name}
+          </li>
+          {channel.totalClients >= 0 && (
+            <li>
+              <span>Users online</span> {channel.totalClients}
+            </li>
+          )}
+          {channel.subchannels.length > 0 && (
+            <li>
+              <span>Subchannels:</span>
+            </li>
+          )}
+        </ul>
+      </div>
+    );
+  }
+}