ealush / emoji-picker-textfields-component Goto Github PK

constructor(props){
	super(props);
	this.state={
		nickname:"",
		error:""
	};
	this.getUnicode = this.getUnicode.bind(this);
	this.getImages = this.getImages.bind(this);
}

setUser=({user, isUser}) =>{
	console.log(user,isUser)
	if(isUser)
		this.setError("Username taken")
	else{
		this.props.setUser(user)
		this.setError("")
	}
}
componentDidMount(){
	this.getUnicode();
	this.getImages();
}
setError=(error)=>{
	this.setState({error})
}

handleSubmit = (e)=>{
	e.preventDefault()
	const {socket} = this.props
	const {nickname} = this.state
	socket.emit(VERIFY_USER, nickname, this.setUser)
}

handleChange = (e)=>{
	this.setState({nickname:e.target.value})
}

getImages(){
	return this._field.getImages();
}
getUnicode(){
	return this._field.getUnicode();
}
onChange(e, value) {
	document.getElementById('nickname').value =value;
}

render() {
	const { nickname, error } = this.state; 
	return(
		<div>
			<form onSubmit={this.handleSubmit}>
				<label>
					<h2>Got a nickname</h2>
				</label>
				<EmojiField
					id="emoji"
					name="my-input" 
					onChange={this.onChange}
				 	ref={(_field) => {this._field = _field; }}
				 	fieldType="input"
				 />
				<input
					ref={(input)=>{this.textInput = input}}
					type="text"
					name="my-input"
					id="nickname"
					value={nickname}
					onChange={this.handleChange}
					placeholder={"Username"}
				/>
				
				<div className="error">{error ? error:null}</div>
			</form>
			
		</div>
	);
}