client - wip new topic

client/app/pages/forum/forum.tsx

@@ -1,21 +1,30 @@
 import React from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import { get } from 'lodash';
+import { inject, observer } from 'mobx-react';
 import { ThreadService } from '../../services';
-import { ForumNav, LoginButton, ScrollToTop } from '../../components';
+import { Editor, ForumNav, LoginButton, ScrollToTop } from '../../components';
 import { ThreadModel } from '../../model';
+import { UserStore } from '../../stores/user-store';
 import './forum.scss';
+import { Oauth } from '../../util';
 
-interface Props extends RouteComponentProps<any> {}
+interface Props extends RouteComponentProps<any> {
+  userStore: UserStore;
+}
 
 interface State {
+  showEditor: boolean;
   threads: ThreadModel[];
 }
 
+@inject('userStore')
+@observer
 export class Forum extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
+      showEditor: false,
       threads: [],
     };
   }
@@ -36,6 +45,21 @@ export class Forum extends React.Component<Props, State> {
     this.setState({ threads });
   }
 
+  onNewTopic() {
+    if (this.props.userStore.user) {
+      this.setState({ showEditor: true });
+    } else {
+      Oauth.openOuathWindow();
+    }
+  }
+
+  onNewTopicClose(cancel: boolean) {
+    this.setState({ showEditor: false });
+    if (!cancel) {
+      this.getThreads(this.props.match.params['id']);
+    }
+  }
+
   renderHeader() {
     return (
       <div className="forum-header">
@@ -52,13 +76,15 @@ export class Forum extends React.Component<Props, State> {
       <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-newtopic.gif')}
+            className="clickable"
+            onClick={() => this.onNewTopic()}/>
           <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')}/>
+          <img src={require('../../assets/forum-menu-search.gif')} className="clickable"/>
           <div className="forumliner-bg"/>
         </div>
 
@@ -119,6 +145,8 @@ export class Forum extends React.Component<Props, State> {
   render() {
     return (
       <ScrollToTop>
+        {this.state.showEditor && <Editor categoryId={this.props.match.params['id']}
+          onClose={cancel => this.onNewTopicClose(cancel)}/>}
         {this.renderHeader()}
         {this.renderBody()}
       </ScrollToTop>

client/app/pages/thread/thread.scss

@@ -5,6 +5,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-top: 100px;
 }
 
 .threadTopic-container {
@@ -77,6 +78,8 @@
 
   &__content {
     padding: 20px;
+    overflow-wrap: break-word;
+    word-break: break-word;
   }
 }
 

client/app/pages/thread/thread.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { get } from 'lodash';
+import { get, map } from 'lodash';
+import marked from 'marked';
 import { ThreadService } from '../../services';
-import { ForumNav, Portrait, ScrollToTop } from '../../components';
+import { Portrait, ScrollToTop } from '../../components';
 import { ThreadModel } from '../../model';
 import './thread.scss';
 
@@ -25,7 +26,10 @@ export class Thread extends React.Component<Props, State> {
 
   private async getThreads() {
     const thread = await ThreadService.getThread(this.props.match.params['threadId']);
-    thread.replies = [thread as any, ...thread.replies]; // add the thread topic to the front of the list
+    thread.replies = map([thread as any, ...thread.replies], (reply) => { // add the thread topic to the front of the list
+      reply.content = marked(reply.content, { sanitize: true });
+      return reply;
+    });
     this.setState({ thread });
   }
 
@@ -50,8 +54,7 @@ export class Thread extends React.Component<Props, State> {
                   <img src={require('../../assets/reply-button.gif')} className="reply__title__button"/>
                 </div>
               </div>
-              {/* TODO: xss sanitization */}
-              <div className="reply__content">{reply.content}</div>
+              <div className="reply__content" dangerouslySetInnerHTML={{ __html: reply.content }}/>
             </div>
           </div>
         </div>
@@ -70,11 +73,6 @@ export class Thread extends React.Component<Props, State> {
     return (
       <ScrollToTop {...this.props}>
 
-        <div style={{ padding: '16px 0 12px 0' }}>
-          {/* todo: */}
-          <ForumNav categoryId={parseInt(this.props.match.params['categoryId'], 10)} {...this.props}/>
-        </div>
-
         <div className="topic-bg">
           <div className="threadTopic-container">
             <div className="threadTopic">