realm list page done

client/app/app.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
 import Wrapper from './Wrapper';
+import 'babel-polyfill';
 
 ReactDOM.render(<Wrapper />, document.getElementById('app'));

client/app/axios/axios.ts

@@ -0,0 +1,30 @@
+import axios, { AxiosInstance, AxiosResponse } from 'axios';
+
+// create our own instance of axios so we can set request headers
+const ax: AxiosInstance = axios.create();
+
+// response interceptors
+ax.interceptors.response.use(
+  (config: AxiosResponse) => {
+    return config;
+  },
+  (error: any) => {
+    // TODO: log the user out if they get a 401
+    // if code is unauthorized (401) then logout if already logged in
+    // if (error.response.status === 401 && store.getState().user.loggedIn) {
+    //   store.dispatch(userActions.logout());
+    // }
+
+    return Promise.reject(error);
+  },
+);
+
+export function setAuthorizationHeader(jwt: string): void {
+  ax.defaults.headers.common['Authorization'] = jwt;
+}
+
+export function resetAuthorizationHeader(): void {
+  ax.defaults.headers.common['Authorization'] = '';
+}
+
+export default ax;

client/app/pages/realms/realms.scss

@@ -0,0 +1,4 @@
+.realm-column {
+  flex: 1;
+  min-width: 150px;
+}

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>
     );
   }

client/app/scss/style.scss

@@ -44,10 +44,14 @@ hr {
 
 .flex {
   display: flex;
-}
 
-.flex--center {
-  align-items: center;
+  &--center {
+    align-items: center;
+  }
+
+  &--wrap {
+    flex-wrap: wrap;
+  }
 }
 
 span.grey {