client - wip new topic

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