commentcreator.jsx

import getClassNames from 'classnames';
import React, {Component} from 'react';
import some from 'lodash/some';
import {connect} from 'react-redux';
import {EditorState, convertToRaw} from 'draft-js';
import uniqWith from 'lodash/uniqWith';


import CreatorImagePreview from './CreatorImagePreview';
import Icon from '../Icon';
import ImageUploader from '../ImageUploader';
import InputList from '../InputList';
import LinkPreview from '../LinkPreview';
import LoopEditor from './LoopEditor';
import sendRequest from '../../lib/request';
import {createPost} from '../../actions/posts';
import {getPostType, getTypeName, isValidURL} from '../../lib/util';
import {showModal} from '../../actions/modals';

const initialState = {
	editorState: EditorState.createEmpty(),
	hasContent: false,
	imageData: [],
	loading: false,
	mentions: [],
	postType: getPostType('text'),
	showPlaceholder: true,
	textContent: ''
};

export default class CommentCreator extends Component {
	constructor(props) {
		super(props);

		this.state = {...initialState};
	}

	componentDidMount() {
		const {geolocation} = navigator;

		if (geolocation) {
			geolocation.getCurrentPosition(
				position => {
					const {latitude, longitude} = position.coords;

					this.geolocation = {
						latitude,
						longitude
					};
				}
			);
		}
	}

	handleKeyDown() {

	}

	syncMentions(mentions) {
		mentions = uniqWith(
			mentions,
			(arrVal, otherVal) => arrVal.classPK === otherVal.classPK && arrVal.classNameId === otherVal.classNameId
		);

		this.setState({mentions})
	}

	render() {
		const {editorState} = this.state;

		return (
			<div>
				{loading ? <div className="loading-mask"><div className="loop-loading-indicator"></div></div> : null}

				<LoopEditor
					editorState={editorState}
					onEditorStateChange={editorState => this.setState({editorState})}
					onMentionsChange={this.syncMentions.bind(this)}
					onKeyDown={this.handleKeyDown.bind(this)}
					placeholder={showPlaceholder && <div className="placeholder">{Liferay.Language.get('reply-to-post')}</div>}
				/>
			</div>
		);
	}
}