parse data from API and further styling

src/components/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Header from './Header';
-import Channels from './Channel/Channels';
+import Channels from './Channels';
 
 export default () => {
   return (

src/components/Channel/ChannelEntry.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import ChannelList from './ChannelList';
-
-export default props => {
-  const { clients, channel } = props;
-  const joined = [];
-  if (channel.totalClients > 0) {
-    clients.forEach(client => {
-      if (client.channelId === channel.id) joined.push(client);
-    });
-  }
-
-  return (
-    <>
-      {channel.name}
-      {joined.length > 0 && (
-        <ul>
-          {joined.map(e => (
-            <li key={e.databaseId}>{e.nickname}</li>
-          ))}
-        </ul>
-      )}
-      {channel.subchannels !== undefined && (
-        <ChannelList channels={channel.subchannels} clients={clients} />
-      )}
-    </>
-  );
-};

src/components/Channel/ChannelView.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-export default ({ channel }) => {
-  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>
-  );
-};

src/components/Channel/Channels.js

@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import { Paper } from '@material-ui/core';
-import ApiService from '../../services/ApiService';
-import ChannelList from './ChannelList';
-
-const styles = theme => ({
-  root: {
-    ...theme.mixins.gutters(),
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
-    margin: `${theme.spacing.unit}px auto`,
-    width: '500px',
-  },
-});
-
-class Channels extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loaded: false,
-      channels: [],
-      clients: [],
-    };
-  }
-
-  componentDidMount() {
-    ApiService.fetchAllChannels().then(data => {
-      this.setState({
-        channels: data.channelJson,
-        clients: data.clientJson,
-        loaded: true,
-      });
-    });
-  }
-
-  render() {
-    const { loaded, channels, clients } = this.state;
-    const { classes } = this.props;
-    return (
-      <Paper className={classes.root}>
-        {!loaded ? (
-          <div className='loading'>Loading...</div>
-        ) : (
-          <ChannelList channels={channels} clients={clients} />
-        )}
-      </Paper>
-    );
-  }
-}
-
-export default withStyles(styles)(Channels);

src/components/ChannelEntry.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import ChannelList from './ChannelList';
+import ClientList from './ClientList';
+
+const styles = () => ({
+  centered: {
+    textAlign: 'center',
+  },
+});
+
+const ChannelEntry = props => {
+  const { clients, channel, classes } = props;
+
+  // render Channel Title dependent of spacer-type
+  let ChannelTitle;
+  if (channel.spacer === 'fill' && channel.name === '_')
+    ChannelTitle = (
+      <div>
+        <hr />
+      </div>
+    );
+  else if (channel.spacer === 'centered')
+    ChannelTitle = (
+      <div className={classes.centered}>
+        <span>{channel.name}</span>
+      </div>
+    );
+  else
+    ChannelTitle = (
+      <div>
+        <span>{channel.name}</span>
+      </div>
+    );
+
+  // render connected clients, if existent
+  const joined = [];
+  if (channel.totalClients > 0) {
+    clients.forEach(client => {
+      if (client.channelId === channel.id) joined.push(client);
+    });
+  }
+  const ConnectedClients = joined.length > 0 && <ClientList clients={joined} />;
+
+  // render another ChannelList if channel has subchannels
+  const Subchannels = channel.subchannels !== undefined && (
+    <ChannelList channels={channel.subchannels} clients={clients} />
+  );
+
+  return (
+    <>
+      {ChannelTitle}
+      {ConnectedClients}
+      {Subchannels}
+    </>
+  );
+};
+
+export default withStyles(styles)(ChannelEntry);

src/components/ChannelList.js

@@ -9,7 +9,7 @@ const styles = () => ({
   },
 });
 
-const channelList = ({ channels, clients, classes }) => {
+const ChannelList = ({ channels, clients, classes }) => {
   return (
     <div>
       <ul className={classes.list}>
@@ -23,4 +23,4 @@ const channelList = ({ channels, clients, classes }) => {
   );
 };
 
-export default withStyles(styles)(channelList);
+export default withStyles(styles)(ChannelList);

src/components/Channels.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper } from '@material-ui/core';
+import ApiService from '../services/ApiService';
+import ChannelList from './ChannelList';
+import parseData from '../parseData';
+
+const styles = theme => ({
+  root: {
+    ...theme.mixins.gutters(),
+    paddingTop: theme.spacing.unit * 2,
+    paddingBottom: theme.spacing.unit * 2,
+    margin: `${theme.spacing.unit}px auto`,
+    width: '500px',
+  },
+});
+
+class Channels extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loaded: false,
+      channels: [],
+      clients: [],
+    };
+  }
+
+  componentDidMount() {
+    ApiService.fetchAllChannels().then(data => {
+      const { channels, clients } = parseData(data);
+      this.setState({
+        channels,
+        clients,
+        loaded: true,
+      });
+    });
+  }
+
+  render() {
+    const { loaded, channels, clients } = this.state;
+    const { classes } = this.props;
+    return (
+      <Paper className={classes.root}>
+        {!loaded ? (
+          <div className='loading'>Loading...</div>
+        ) : (
+          <ChannelList channels={channels} clients={clients} />
+        )}
+      </Paper>
+    );
+  }
+}
+
+export default withStyles(styles)(Channels);

src/components/ClientList.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const ClientList = ({ clients }) => {
+  return (
+    <ul>
+      {clients.map(e => (
+        <li key={e.databaseId}>{e.nickname}</li>
+      ))}
+    </ul>
+  );
+};
+
+export default ClientList;

src/parseData.js

@@ -0,0 +1,36 @@
+const parseChannel = channel => {
+  const { name, id, subchannels, totalClients } = channel;
+  const parsedChannel = {};
+
+  parsedChannel.id = id;
+
+  if (name.startsWith('[*spacer')) {
+    parsedChannel.name = '_';
+    parsedChannel.spacer = 'fill';
+  } else if (name.startsWith('[cspacer')) {
+    parsedChannel.name = name.slice(10);
+    parsedChannel.spacer = 'centered';
+  } else {
+    parsedChannel.name = name;
+    parsedChannel.spacer = 'none';
+  }
+
+  if (subchannels !== undefined) {
+    parsedChannel.subchannels = subchannels.map(parseChannel);
+  }
+
+  parsedChannel.totalClients = totalClients;
+
+  return parsedChannel;
+};
+
+const parseData = data => {
+  const { channelJson, clientJson } = data;
+  const clients = clientJson;
+
+  const channels = channelJson.map(parseChannel);
+
+  return { channels, clients };
+};
+
+export default parseData;