refactoring

src/components/Channel/ChannelEntry.tsx

@@ -12,11 +12,11 @@ const ChannelEntry = (props: ChannelEntryProps) => {
 
   return (
     <>
-      <div>{channel.name}</div>
+      {channel.name}
       {joined.length > 0 && (
         <ul>
           {joined.map(e => (
-            <li>{e.nickname}</li>
+            <li key={e.databaseId}>{e.nickname}</li>
           ))}
         </ul>
       )}

src/components/Channel/Channels.tsx

@@ -2,24 +2,26 @@ import React, { Component } from 'react';
 import ApiService from '../../services/ApiService';
 import ChannelList from './ChannelList';
 
-class Channels extends Component<any, any> {
+class Channels extends Component<{}, ChannelState> {
   constructor(props: any) {
     super(props);
     this.state = {
       loaded: false,
       channels: [],
-      users: [],
+      clients: [],
     };
   }
 
   componentDidMount() {
-    ApiService.fetchAllChannels().then(data => {
+    ApiService.fetchAllChannels()
+      .then(data => {
         this.setState({
           channels: data.channelJson,
           clients: data.clientJson,
           loaded: true,
         });
-    });
+      })
+      .catch(e => console.error(e));
   }
   render() {
     const { loaded, channels, clients } = this.state;

src/types.d.ts

@@ -15,6 +15,12 @@ interface Client {
   awayMessage: string;
 }
 
+interface ChannelState {
+  loaded: boolean;
+  channels: Channel[];
+  clients: Client[];
+}
+
 interface ChannelListProps {
   channels: Channel[];
   clients: Client[];

tslint.json

@@ -14,7 +14,8 @@
         "jsx-boolean-value": false,
         "member-access": false,
         "no-console": false,
-        "strict-type-predicates": false
+        "strict-type-predicates": false,
+        "interface-name": false
     },
     "rulesDirectory": []
 }