realm list page done

client/app/pages/realms/realms.tsx

@@ -1,19 +1,87 @@
 import React from 'react';
+import { filter } from 'lodash';
+import { Link } from 'react-router-dom';
+import axios from '../../axios/axios';
 import { ContentContainer } from '../../components';
+import './realms.scss';
+import header_realmforums from '../../assets/header-realmforums.gif';
+import realms_large from '../../assets/realms-large.gif';
 
 interface Props {}
 
-interface State {}
+interface State {
+  realms: Realm[];
+}
+
+interface Realm {
+  id: number;
+  category: string;
+  title: string;
+}
 
 export class Realms extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
+    this.state = {
+      realms: [],
+    };
+  }
+
+  async componentDidMount() {
+    try {
+      const res = await axios.get('/api/category');
+      const realms = filter(res.data.data, { category: 'realm' });
+      this.setState({ realms });
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  private renderRealms(realms: Realm[]): any {
+    return realms.map((realm) => {
+      return (
+        <li key={realm.id}>
+          <Link to={`/f/realm/${realm.id}`}>{realm.title}</Link>
+        </li>
+      );
+    });
   }
 
   render() {
-    return (
+    const { realms } = this.state;
+
+    // copy list so we don't modify state
+    const realmsCopy = realms.slice();
+    // split realms into 3 lists
+    const list1 = realmsCopy.splice(0, realmsCopy.length / 3);
+    const list2 = realmsCopy.splice(0, realmsCopy.length / 2);
+    const list3 = realmsCopy;
+
+    return realms.length === 0 ? <div></div> : (
       <ContentContainer>
-        {/* TODO: */}
+        <div className="flex flex--center">
+          <img src={realms_large}/>
+          <img src={header_realmforums}/>
+        </div>
+
+        <div style={{ margin: '15px 0' }}>
+          <div><b>Welcome to the World of Warcraft Realm Forums!</b></div>
+          <div>Use these forums to discuss topics related to World of Warcraft with player on your own Realm.</div>
+        </div>
+
+        <div className="flex flex--wrap">
+          <ul className="realm-column">
+            {this.renderRealms(list1)}
+          </ul>
+
+          <ul className="realm-column">
+            {this.renderRealms(list2)}
+          </ul>
+
+          <ul className="realm-column">
+            {this.renderRealms(list3)}
+          </ul>
+        </div>
       </ContentContainer>
     );
   }