thread page in progress

client/app/pages/forum/forum.scss

@@ -0,0 +1,91 @@
+$grey1: #252525;
+$grey2: #161616;
+
+.forum-header {
+  height: 137px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.forum-nav {
+  display: inline-block;
+  padding-left: 5px;
+  position: relative;
+  bottom: 10;
+}
+
+.forum-body {
+  min-height: 500px;
+  margin-bottom: 100px;
+}
+
+.forum-menu-search-bg {
+  background-image: url('../../assets/forum-menu-search-bg.gif');
+  
+  input {
+    margin-top: 11px;
+  }
+}
+
+.forumliner-bg {
+  background-image: url('../../assets/forumliner-bg.gif');
+  background-repeat: repeat-x;
+  width: 100%;
+}
+
+.forumliner-bot-bg {
+  background-image: url('../../assets/forumliner-bot-bg.gif');
+  background-repeat: repeat-x;
+  width: 100%;
+  height: 15px;
+}
+
+.forum-table {
+  width: 100%;
+  border: 1px solid;
+  border-color: #575757;
+  color: #E2D9B0;
+  font-size: 9pt;
+
+  b {
+    color: #E2D9B0;
+  }
+}
+
+.forum-row {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  background: $grey1;
+
+  &--header {
+    background-image: url('../../assets/thread-topic-bg2.gif');
+    background-repeat: repeat-x;
+  }
+
+  &--dark {
+    background: $grey2;
+  }
+}
+
+.forum-cell {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 2px;
+
+  &--header {
+    border: 1px solid;
+    border-color: #8F8F8F #8F8F8F #171511 #171511;
+  }
+
+  &--body {
+    border: 1px solid;
+    border-color: #000000 #000000 #252525 #252525;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+}

client/app/pages/forum/forum.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Link, RouteComponentProps } from 'react-router-dom';
+import { LoginButton } from '../../components';
+import './forum.scss';
+
+interface Props extends RouteComponentProps<any> {}
+
+interface State {}
+
+export class Forum extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  componentDidMount() {
+  }
+
+  renderHeader() {
+    return (
+      <div className="forum-header">
+        <div>
+          <img src={require('../../assets/wow-base-general.gif')}/>
+          <div className="forum-nav">
+            <small>Forum Nav:</small><select style={{ minWidth: '194px' }}></select>
+          </div>
+        </div>
+        <div style={{ height: '100%' }}>
+          <LoginButton/>
+        </div>
+      </div>
+    );
+  }
+
+  renderBody() {
+    return (
+      <div className="forum-body">
+        <div className="flex">
+          <img src={require('../../assets/forum-menu-left.gif')}/>
+          <img src={require('../../assets/forum-menu-newtopic.gif')}/>
+          <img src={require('../../assets/forum-menu-right.gif')}/>
+          <img src={require('../../assets/forum-menu-search-left.gif')}/>
+          <div className="forum-menu-search-bg">
+            <input name="SearchText"/>
+          </div>
+          <img src={require('../../assets/forum-menu-search.gif')}/>
+          <div className="forumliner-bg"/>
+        </div>
+
+        {this.renderTable()}
+      </div>
+    );
+  }
+
+  renderCell(content: JSX.Element | string, style: any, center?: boolean, header?: boolean) {
+    let classNames: string = '';
+    classNames += center && ' forum-cell--center';
+    classNames += header ? ' forum-cell--header' : ' forum-cell--body';
+    return <div className={`forum-cell flex-1 ${classNames}`} style={style}>{content}</div>;
+  }
+
+  renderThreadRows() {
+    return Array(40).fill('test 123').map((thread, index) => {
+      return (
+        <div className={`forum-row ${index % 2 === 0 && 'forum-row--dark'}`} key={index}>
+          {this.renderCell(thread, { maxWidth: '50px' })}
+          {this.renderCell(<Link to="#">This is a test subject that could be really long</Link>, { minWidth: '200px' })}
+          {this.renderCell(<b>thread</b>, { maxWidth: '150px' })}
+          {this.renderCell(<b>thread</b>, { maxWidth: '150px' }, true)}
+          {this.renderCell(<b>thread</b>, { maxWidth: '150px' }, true)}
+          {this.renderCell(<span>by <b>thread</b></span>, { maxWidth: '200px' })}
+        </div>
+      );
+    });
+  }
+
+  renderTable() {
+    return (
+      <div style={{ padding: '0 3px' }}>
+        <div className="forum-table">
+
+          <div className="forum-row forum-row--header">
+            <div className="forum-cell forum-cell--header flex-1">Test</div>
+          </div>
+
+          <div className="forum-row forum-row--header">
+            {this.renderCell(<img src={require('../../assets/flag.gif')}/>, { maxWidth: '50px' }, true, true)}
+            {this.renderCell(<a>Subject</a>, { minWidth: '200px' }, false, true)}
+            {this.renderCell(<a>Author</a>, { maxWidth: '150px' }, true, true)}
+            {this.renderCell(<a>Replies</a>, { maxWidth: '150px' }, true, true)}
+            {this.renderCell(<a>Views</a>, { maxWidth: '150px' }, true, true)}
+            {this.renderCell(<a>Last Post</a>, { maxWidth: '200px' }, true, true)}
+          </div>
+
+          {this.renderThreadRows()}
+        </div>
+
+        <div className="forumliner-bot-bg"/>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderHeader()}
+        {this.renderBody()}
+      </div>
+    );
+  }
+
+}

client/app/pages/index.ts

@@ -1,2 +1,5 @@
+export * from './forum/forum';
 export * from './home/home';
+export * from './not-found/not-found';
+export * from './oauth/oauth';
 export * from './realms/realms';

client/app/pages/not-found/not-found.scss

@@ -0,0 +1,6 @@
+.not-found {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 700px;
+}

client/app/pages/not-found/not-found.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { ContentContainer } from '../../components';
+import './not-found.scss';
+
+interface Props extends RouteComponentProps<any> {}
+
+interface State {}
+
+export class NotFound extends React.Component<Props, State> {
+
+  render() {
+    return (
+      <ContentContainer className="not-found">
+        <h1>Oops! This page doesn't exist!</h1>
+      </ContentContainer>
+    );
+  }
+
+}

client/app/pages/oauth/oauth.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { parse } from 'query-string';
+import axios from '../../axios/axios';
+
+interface Props extends RouteComponentProps<any> {}
+
+interface State {}
+
+export class Oauth extends React.Component<Props, State> {
+  componentDidMount() {
+    this.login(this.props.location.search);
+  }
+
+  private async login(queryString: string) {
+    try {
+      const code = parse(queryString).code;
+      const res = await axios.post('/api/battlenet/authorize', { code });
+      const account = res.data.data;
+      localStorage.setItem('account', JSON.stringify(account));
+      window.opener.location.reload();
+      // TODO: this doesn't work on mobile currently
+      window.close();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  render() {
+    return <div />;
+  }
+}

client/app/pages/realms/realms.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { filter } from 'lodash';
+import { chain } from 'lodash';
 import { Link } from 'react-router-dom';
 import axios from '../../axios/axios';
 import { ContentContainer } from '../../components';
@@ -30,7 +30,10 @@ export class Realms extends React.Component<Props, State> {
   async componentDidMount() {
     try {
       const res = await axios.get('/api/category');
-      const realms = filter(res.data.data, { category: 'realm' });
+      const realms = chain(res.data.data)
+        .filter({ category: 'realm' })
+        .orderBy(['title'])
+        .value();
       this.setState({ realms });
     } catch (e) {
       console.error(e);
@@ -41,7 +44,7 @@ export class Realms extends React.Component<Props, State> {
     return realms.map((realm) => {
       return (
         <li key={realm.id}>
-          <Link to={`/f/realm/${realm.id}`}>{realm.title}</Link>
+          <Link to={`/f/${realm.id}`}>{realm.title}</Link>
         </li>
       );
     });