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

client/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "A seed for a simple react application with typescript.",
   "scripts": {
-    "build": "webpack -p --progress --colors",
+    "build": "NODE_ENV=production webpack -p --progress --colors",
     "dev": "webpack --progress --colors --watch",
     "c9": "webpack-dev-server --host 0.0.0.0 --port 8080 --inline --history-api-fallback",
     "start": "webpack-dev-server --inline --history-api-fallback",
@@ -13,6 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "@types/lodash": "^4.14.92",
+    "@types/query-string": "^5.0.1",
     "@types/react": "^16.0.34",
     "@types/react-dom": "^16.0.3",
     "@types/react-router-dom": "^4.2.3",
@@ -37,6 +38,7 @@
     "normalize.css": "^7.0.0",
     "postcss-loader": "^2.0.9",
     "prettier": "^1.9.2",
+    "query-string": "^5.0.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",

client/tslint.json

@@ -2,6 +2,7 @@
   "extends": "tslint-config-airbnb",
   "rules": {
     "import-name": false,
-    "max-line-length": 140
+    "max-line-length": [true, 140],
+    "no-unused-variable": [true]
   }
 }

client/webpack.config.js

@@ -13,6 +13,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, '../priv/static'),
     filename: '[name].[hash].js',
+    publicPath: "/",
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
@@ -73,5 +74,10 @@ module.exports = {
     }),
     new webpack.HotModuleReplacementPlugin(),
     new FaciconsWebpackPlugin('./favicon.png'),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+      },
+    })
   ],
 };

client/yarn.lock

@@ -14,6 +14,10 @@
   version "8.5.5"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.5.5.tgz#6f9e8164ae1a55a9beb1d2571cfb7acf9d720c61"
 
+"@types/query-string@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-5.0.1.tgz#6cb41c724cb1644d56c2d1dae7c7b204e706b39e"
+
 "@types/react-dom@^16.0.3":
   version "16.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.3.tgz#8accad7eabdab4cca3e1a56f5ccb57de2da0ff64"
@@ -1820,6 +1824,10 @@ decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
 deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -4785,6 +4793,14 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.0.1.tgz#6e2b86fe0e08aef682ecbe86e85834765402bd88"
+  dependencies:
+    decode-uri-component "^0.2.0"
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"

lib/myapp_web/router.ex

@@ -23,7 +23,7 @@ defmodule MyAppWeb.Router do
     pipe_through [:api]
 
     scope "/battlenet" do
-      get "/authorize", BattleNetController, :authorize
+      post "/authorize", BattleNetController, :authorize
 
       pipe_through [:user_auth]
       get "/characters", BattleNetController, :characters