diff --git a/client/app/assets/avatars/unknown.gif b/client/app/assets/avatars/unknown.gif new file mode 100644 index 0000000..e14945a Binary files /dev/null and b/client/app/assets/avatars/unknown.gif differ diff --git a/client/app/assets/search.gif b/client/app/assets/search.gif new file mode 100644 index 0000000..094721f Binary files /dev/null and b/client/app/assets/search.gif differ diff --git a/client/app/components/editor/editor.scss b/client/app/components/editor/editor.scss index ec2992e..1d362ef 100644 --- a/client/app/components/editor/editor.scss +++ b/client/app/components/editor/editor.scss @@ -2,10 +2,10 @@ z-index: 1; top: 0; left: 0; - height: calc(100% - 96px); + height: 100%; width: 100%; position: fixed; - background-color: rgba(0, 0, 0, .5); + background-color: rgba(0, 0, 0, .9); padding-top: 50px; } @@ -15,21 +15,22 @@ flex-direction: column; padding-bottom: 40px; + &__character-count { + align-self: flex-end; + } + &__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; diff --git a/client/app/components/editor/editor.tsx b/client/app/components/editor/editor.tsx index c5a6af5..fae057c 100644 --- a/client/app/components/editor/editor.tsx +++ b/client/app/components/editor/editor.tsx @@ -5,15 +5,17 @@ import { ContentContainer } from '../content-container/content-container'; import './editor.scss'; interface Props { - categoryId: string; + categoryId?: string; onClose: (cancel: boolean) => any; + threadId?: string; } interface State { title: string; content: string; contentPreview: string; - characterCount: number; + contentCharacterCount: number; + titleCharacterCount: number; errorMessage?: string; } @@ -24,7 +26,8 @@ export class Editor extends React.Component { title: '', content: '', contentPreview: '', - characterCount: 0, + contentCharacterCount: 0, + titleCharacterCount: 0, }; } @@ -32,12 +35,48 @@ export class Editor extends React.Component { this.setState({ content: event.target.value, contentPreview: marked(event.target.value, { sanitize: true }), - characterCount: event.target.value.length, + contentCharacterCount: event.target.value.length, }); } - onSubmit() { + onTitleChange(event: any) { + this.setState({ + title: event.target.value, + titleCharacterCount: event.target.value.length, + }); + } + onSubmit(event: any) { + event.preventDefault(); + if (this.props.threadId) { + this.newReply(); + } else { + this.newThread(); + } + } + + async newReply() { + const { content } = this.state; + + if (content === '') { + this.setState({ errorMessage: 'Content must not be blank.' }); + return; + } + + const data = { + content, + thread_id: this.props.threadId, + }; + + try { + await axios.post('/api/reply', data); + this.props.onClose(false); + } catch (e) { + this.setState({ errorMessage: 'Server error. Please try again later.' }); + } + } + + async newThread() { const { title, content } = this.state; if (title === '' || content === '') { @@ -51,10 +90,6 @@ export class Editor extends React.Component { category_id: this.props.categoryId, }; - this.newThread(data); - } - - async newThread(data: any) { try { await axios.post('/api/thread', data); this.props.onClose(false); @@ -63,25 +98,46 @@ export class Editor extends React.Component { } } + renderThreadPortion() { + return ( +
+

New Topic

+ + this.onTitleChange(event)} + maxLength={300}/> +
{this.state.contentCharacterCount}/2000
+
+ ); + } + + // TODO: quote + renderReplyPortion() { + return ( +

New Reply

+ ); + } + render() { return (
- -

New Topic

- - this.setState({ title: event.target.value })}/> - -