recursive channellist with clientlist

src/App.tsx

@@ -4,7 +4,6 @@ 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 {

src/components/Channel/ChannelEntry.tsx

@@ -1,21 +1,30 @@
 import React, { Component } from 'react';
+import ChannelList from './ChannelList';
 
-class ChannelEntry extends Component<ChannelEntryProps> {
+const ChannelEntry = (props: ChannelEntryProps) => {
-  render() {
+  const { clients, channel } = props;
-    const { name, subchannels } = this.props.channel;
+  const joined: Client[] = [];
-    return (
+  if (channel.totalClients > 0) {
-      <>
+    clients.forEach(client => {
-        <div>{name}</div>
+      if (client.channelId === channel.id) joined.push(client);
-        {subchannels !== undefined && (
+    });
-          <ul>
-            {subchannels.map(e => {
-              return <li key={e.id}>{e.name}</li>;
-            })}
-          </ul>
-        )}
-      </>
-    );
   }
-}
+
+  return (
+    <>
+      <div>{channel.name}</div>
+      {joined.length > 0 && (
+        <ul>
+          {joined.map(e => (
+            <li>{e.nickname}</li>
+          ))}
+        </ul>
+      )}
+      {channel.subchannels !== undefined && (
+        <ChannelList channels={channel.subchannels} clients={clients} />
+      )}
+    </>
+  );
+};
 
 export default ChannelEntry;

src/components/Channel/ChannelList.scss

@@ -1,3 +1,3 @@
-.channelList li {
+.channelList {
   list-style: none
 }

src/components/Channel/ChannelList.tsx

@@ -1,39 +1,21 @@
 import React, { Component } from 'react';
-import ChannelService from '../../services/ChannelService';
+import ApiService from '../../services/ApiService';
 import ChannelEntry from './ChannelEntry';
 
 import './ChannelList.scss';
 
-export default class Channellist extends Component<any, any> {
+const ChannelList = ({ channels, clients }: ChannelListProps) => {
-  constructor(props: any) {
+  return (
-    super(props);
+    <ul className='channelList'>
-    this.state = {
+      {channels.map(channel => {
-      loaded: false,
+        return (
-      channels: [],
+          <li key={channel.id}>
-    };
+            <ChannelEntry channel={channel} clients={clients} />
-  }
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
 
-  componentDidMount() {
+export default ChannelList;
-    ChannelService.fetchAllChannels().then(data => {
-      this.setState({ channels: data, loaded: true });
-    });
-  }
-  public render() {
-    const { loaded, channels } = this.state;
-    if (!loaded) {
-      return <div className='loading'>Loading...</div>;
-    } else {
-      return (
-        <ul className='channelList'>
-          {channels.map((e: Channel) => {
-            return (
-              <li key={e.id}>
-                <ChannelEntry channel={e} />
-              </li>
-            );
-          })}
-        </ul>
-      );
-    }
-  }
-}

src/components/Channel/Channels.tsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import ApiService from '../../services/ApiService';
+import ChannelList from './ChannelList';
+
+class Channels extends Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      loaded: false,
+      channels: [],
+      users: [],
+    };
+  }
+
+  componentDidMount() {
+    ApiService.fetchAllChannels().then(data => {
+      this.setState({
+        channels: data.channelJson,
+        clients: data.clientJson,
+        loaded: true,
+      });
+    });
+  }
+  render() {
+    const { loaded, channels, clients } = this.state;
+    if (!loaded) return <div className='loading'>Loading...</div>;
+    else {
+      return <ChannelList channels={channels} clients={clients} />;
+    }
+  }
+}
+
+export default Channels;

src/components/Home.tsx

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

src/interfaces.d.ts

@@ -6,8 +6,23 @@ interface Channel {
   subchannels: Channel[];
 }
 
+interface Client {
+  databaseId: number;
+  channelId: number;
+  nickname: string;
+  type: number;
+  away: boolean;
+  awayMessage: string;
+}
+
+interface ChannelListProps {
+  channels: Channel[];
+  clients: Client[];
+}
+
 interface ChannelEntryProps {
   channel: Channel;
+  clients: Client[];
 }
 interface ChannelViewProps {
   channel: Channel;