thread page in progress

client/app/Wrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import { Footer, Header } from './components';
-import { Home, Realms } from './pages';
+import { Forum, Home, NotFound, Oauth, Realms } from './pages';
 
 // styling
 import './scss/index.scss';
@@ -16,6 +16,14 @@ export default class Wrapper extends React.Component<Props, State> {
     super(props);
   }
 
+  componentDidMount() {
+    const storedAccount = localStorage.getItem('account');
+
+    if (storedAccount) {
+      console.log(JSON.parse(storedAccount));
+    }
+  }
+
   public render() {
     return (
       <BrowserRouter>
@@ -24,7 +32,9 @@ export default class Wrapper extends React.Component<Props, State> {
           <Switch>
             <Route exact path="/" component={Home} />
             <Route exact path="/realms" component={Realms} />
-            {/* <Route component={NotFound} /> */}
+            <Route exact path="/f/:id" component={Forum} />
+            <Route exact path="/oauth" component={Oauth} />
+            <Route component={NotFound} />
           </Switch>
           <Footer />
         </div>

client/app/components/content-container/content-container.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 import './content-container.scss';
 
-interface Props {}
+interface Props {
+  className?: string;
+}
 
 interface State {}
 
@@ -13,7 +15,7 @@ export class ContentContainer extends React.Component<Props, State> {
 
   render() {
     return (
-      <div className="content-container">
+      <div className={`content-container ${this.props.className}`}>
         <div className="border-container">
           <div className="border border__left"/>
           <div className="border border__right"/>

client/app/components/footer/footer.tsx

@@ -9,9 +9,6 @@ interface Props {}
 interface State {}
 
 export class Footer extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-  }
 
   render() {
     return (
@@ -20,5 +17,4 @@ export class Footer extends React.Component<Props, State> {
       </div>
     );
   }
-
 }

client/app/components/header/header.tsx

@@ -10,9 +10,6 @@ interface Props {}
 interface State {}
 
 export class Header extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-  }
 
   render() {
     return (

client/app/components/index.ts

@@ -1,3 +1,4 @@
+export * from './content-container/content-container';
 export * from './footer/footer';
 export * from './header/header';
-export * from './content-container/content-container';
+export * from './login-button/login-button';

client/app/components/login-button/login-button.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface Props {
+  className?: string;
+}
+
+interface State {}
+
+// TODO: add prod url
+const oauthUrl: string =
+  process.env.NODE_ENV === 'production'
+    ? ''
+    : 'https://us.battle.net/oauth/authorize?redirect_uri=https://localhost/oauth&scope=wow.profile&client_id=2pfsnmd57svcpr5c93k7zb5zrug29xvp&response_type=code';
+
+export class LoginButton extends React.Component<Props, State> {
+  login() {
+    window.open(oauthUrl, '_blank', 'resizeable=yes, height=900, width=1200');
+  }
+
+  render() {
+    console.log(process.env);
+
+    return (
+      <div {...this.props}>
+        <img src={require('../../assets/login-bot-left.gif')} />
+        <img src={require('../../assets/login-bot-login.gif')} style={{ cursor: 'pointer' }} onClick={this.login.bind(this)} />
+        <img src={require('../../assets/login-bot-right.gif')} />
+      </div>
+    );
+  }
+}

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

client/app/scss/style.scss

@@ -18,6 +18,8 @@ a {
   color: #FFB019;
   font-weight: bold;
   font-size: 9pt;
+  text-decoration: underline;
+  cursor: pointer;
 
   &:hover {
     color: white;
@@ -54,8 +56,16 @@ hr {
   }
 }
 
+.flex-1 {
+  flex: 1;
+}
+
 span.grey {
   font-family: Arial,Helvetica,Sans-Serif;
   color: #A0A1A3;
   font-size: 9pt;
 }
+
+.text-center {
+  text-align: center;
+}