Implement forum

Author: amoshydra

views/components/Forum/Container.jsx

@@ -2,13 +2,67 @@
 
 import React, { Component, PropTypes } from 'react';
 import styles from '../Shared/styles/container.css';
+import Thread from './Thread';
+
+const noDate = 0;
+
+function getLatestUpdate(thread) {
+  const myDate = new Date(thread.PostDate_js).getTime();
+
+  let childMaxDate = noDate;
+  thread.Threads.forEach((childThread) => {
+    const childDate = getLatestUpdate(childThread);
+    if (childDate > childMaxDate) {
+      childMaxDate = childDate;
+    }
+  });
+
+  const returnDate = (myDate > childMaxDate) ? myDate : childMaxDate;
+  return returnDate;
+}
+
+function sortByLatestUpdate(threadA, threadB) {
+  const timeUpdatedA = getLatestUpdate(threadA);
+  const timeUpdatedB = getLatestUpdate(threadB);
+
+  return (timeUpdatedB - timeUpdatedA);
+}
 
 export default class Container extends Component {
 
+  renderList() {
+    const dataList = this.props.list;
+
+    if (dataList && dataList.length > 0) {
+      return dataList.filter((dataItem) =>
+        (dataItem.dataType === 'Forums')
+      ).map((dataItem) =>
+        <li key={dataItem.ID}>
+          <div>
+            <h2>{dataItem.CourseCode} {dataItem.CourseName}</h2>
+            <ul style={{ padding: '0 10px 50px 10px' }}>
+              {
+                dataItem.Headings.map((heading) => (
+                  [<h3>{heading.Title}</h3>,
+                  heading.Threads.sort(sortByLatestUpdate).slice(0, 5).map((thread) => (
+                    <Thread thread={thread} />
+                  ))
+                ]))
+              }
+            </ul>
+          </div>
+        </li>
+      );
+    }
+    return <p>Nothing to see here.</p>;
+  }
+
   render() {
     return (
       <div className={styles.container}>
-        Not implemented yet
+        <ul>
+          {this.renderList()}
+        </ul>
       </div>
     );
   }

views/components/Forum/Post.jsx

@@ -0,0 +1,41 @@
+'use babel';
+
+import React, { PropTypes } from 'react';
+import DOMPurify from 'dompurify';
+import styles from './post.css';
+
+const Post = ({ post }) => (
+  <li style={{ margin: '20px 0', listStyle: 'none' }}>
+    <div style={{ fontSize: '0.6em' }}>{post.Poster.Name}</div>
+    <div
+      style={{ padding: '10px', backgroundColor: 'white', border: '2px solid rgba(0,0,0,0.2)' }}
+      className={styles.body}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(fixForumPost(post.PostBody)) }}
+    />
+  </li>
+);
+
+export default Post;
+
+Post.propTypes = {
+  post: PropTypes.object
+};
+
+
+function fixForumPost(htmlStr) {
+  htmlStr = fixQuotedPost(htmlStr);
+  htmlStr = fixImageUrl(htmlStr);
+  return htmlStr;
+}
+
+function fixQuotedPost(htmlStr) {
+  htmlStr = htmlStr.replace(/\[quser\]/g, '<div class="quser" style="font-size: 0.6em; padding: 10px; border: 2px solid grey"><div>');
+  htmlStr = htmlStr.replace(/\[\/quser\]/g, '</div>');
+  htmlStr = htmlStr.replace(/\[quote[0-9]?\]/g, '<div class="qpost" style="border: 2px solid lightgrey">');
+  htmlStr = htmlStr.replace(/\[\/quote\]/g, '</div></div>');
+  return htmlStr;
+}
+
+function fixImageUrl(htmlStr) {
+  return htmlStr.replace(/src="(\/)/g, 'src="https://ivle.nus.edu.sg/');
+}

views/components/Forum/Thread.jsx

@@ -0,0 +1,52 @@
+'use babel';
+
+import React, { Component, PropTypes } from 'react';
+import Post from './Post';
+
+export default class Container extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      display: 'hidden'
+    };
+    this.toggle = this.toggle.bind(this);
+  }
+
+  getPosts(thread) {
+    const element = [<Post key={thread.ID} post={thread} />];
+
+    element.push(thread.Threads.map((innerThread) =>
+      this.getPosts(innerThread)
+    ));
+    return element;
+  }
+
+  toggle() {
+    console.log(this.state.display);
+    if (this.state.display === 'hidden') {
+      this.setState({ display: '' });
+    } else {
+      this.setState({ display: 'hidden' });
+    }
+  }
+
+  render() {
+    const thread = this.props.thread;
+    return (
+      <li style={{ margin: '20px 0', listStyle: 'none', boxShadow: '1px 1px 2px 1px rgba(0,0,0,0.3)' }}>
+        <button onClick={this.toggle} style={{ backgroundColor: 'rgba(0,0,0,0.05)', color: 'black', padding: '10px', display: 'block' }}>{thread.PostTitle}</button>
+        <div className={this.state.display} style={{ padding: '10px' }}>
+          <ul style={{ padding: '0 0 20px 0' }}>
+            {this.getPosts(thread)}
+          </ul>
+        </div>
+      </li>
+    );
+  }
+}
+
+Container.propTypes = {
+  thread: PropTypes.object
+};