client - wip new topic

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">