client - wip new topic

client/app/components/editor/editor.scss

@@ -0,0 +1,47 @@
+.editor-container {
+  z-index: 1;
+  top: 0;
+  left: 0;
+  height: calc(100% - 96px);
+  width: 100%;
+  position: fixed;
+  background-color: rgba(0, 0, 0, .5);
+  padding-top: 50px;
+}
+
+.editor {
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 40px;
+
+  &__title {
+    height: 25px;
+    margin-bottom: 20px;
+  }
+
+  &__text-area {
+    min-height: 100px;
+    resize: none;
+    margin-bottom: 20px;
+    overflow-wrap: break-word;
+  }
+
+  &__preview {
+    min-height: 100px;
+    background-color: #161616;
+    border-radius: 2px;
+    padding: 5px 10px;
+    overflow-y: auto;
+    overflow-wrap: break-word;
+  }
+
+  &__submit {
+    padding: 20px 0;
+  }
+
+  &__error-message {
+    margin-left: 10px;
+    color: red;
+  }
+}

client/app/components/editor/editor.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import marked from 'marked';
+import axios from '../../axios/axios';
+import { ContentContainer } from '../content-container/content-container';
+import './editor.scss';
+
+interface Props {
+  categoryId: string;
+  onClose: (cancel: boolean) => any;
+}
+
+interface State {
+  title: string;
+  content: string;
+  contentPreview: string;
+  characterCount: number;
+  errorMessage?: string;
+}
+
+export class Editor extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      title: '',
+      content: '',
+      contentPreview: '',
+      characterCount: 0,
+    };
+  }
+
+  onContentChange(event: any) {
+    this.setState({ 
+      content: event.target.value,
+      contentPreview: marked(event.target.value, { sanitize: true }),
+      characterCount: event.target.value.length,
+    });
+  }
+
+  onSubmit() {
+
+    const { title, content } = this.state;
+
+    if (title === '' || content === '') {
+      this.setState({ errorMessage: 'One of your inputs is blank.' });
+      return;
+    }
+
+    const data = {
+      content,
+      title,
+      category_id: this.props.categoryId,
+    };
+
+    this.newThread(data);
+  }
+
+  async newThread(data: any) {
+    try {
+      await axios.post('/api/thread', data);
+      this.props.onClose(false);
+    } catch (e) {
+      this.setState({ errorMessage: 'Server error. Please try again later.' });
+    }
+  }
+
+  render() {
+
+    return (
+      <div className="editor-container">
+        <ContentContainer className="editor">
+          <h2 style={{ color: 'white' }}>New Topic</h2>
+          <label>Title</label>
+          <input type="text" className="input editor__title" onChange={event => this.setState({ title: event.target.value })}/>
+          <label>Content</label>
+          <textarea className="input editor__text-area flex-1" onChange={event => this.onContentChange(event)}/>
+          <label>Content Preview</label>
+          <div className="editor__preview flex-1" dangerouslySetInnerHTML={{ __html: this.state.contentPreview }}></div>
+          <div className="editor__submit">
+            <a onClick={() => this.onSubmit()}>Submit</a>
+            <a onClick={() => this.props.onClose(true)} style={{ marginLeft: '10px' }}>Cancel</a>
+            <span className="editor__error-message">{this.state.errorMessage}</span>
+            <span style={{ float: 'right' }}>{this.state.characterCount}/2000</span>
+          </div>
+        </ContentContainer>
+      </div>
+    );
+  }
+}

client/app/components/index.ts

@@ -1,4 +1,5 @@
 export * from './content-container/content-container';
+export * from './editor/editor';
 export * from './footer/footer';
 export * from './forum-nav/forum-nav';
 export * from './header/header';

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

@@ -3,6 +3,7 @@ import { inject, observer } from 'mobx-react';
 import { Portrait } from '../portrait/portrait';
 import { UserStore } from '../../stores/user-store';
 import { CharacterService } from '../../services';
+import { Oauth } from '../../util';
 
 interface Props {
   className?: string;
@@ -12,18 +13,12 @@ interface Props {
 
 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';
-
 @inject('userStore')
 @observer
 export class LoginButton extends React.Component<Props, State> {
 
   login() {
-    window.open(oauthUrl, '_blank', 'resizeable=yes, height=900, width=1200');
+    Oauth.openOuathWindow();
   }
 
   renderPortrait() {