irinotes: client/src/components/NoteInput.js@e67cd18cc594 (annotated)

Mercurial Mercurial > irinotes / annotate

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

client/src/components/NoteInput.js

author	Alexandre Segura <mex.zktk@gmail.com>
	Thu, 01 Jun 2017 17:32:07 +0200
changeset 16	e67cd18cc594
parent 15	4a8bbd314a46
child 17	877d8796b86d
permissions	-rw-r--r--

Draft implementation of note timing.

1 431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	1	import React, {Component} from 'react';
16 e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	2	import { Form, FormGroup, Button, Label, Row, Col } from 'react-bootstrap';
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	3	import moment from 'moment';
2 b52921a63e77 add scss + bootstrap ymh <ymh.work@gmail.com> parents: 1 diff changeset	4
1 431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	5	import PropTypes from 'prop-types';
5 5c91bfa8fcde Introduce SlateJS. Alexandre Segura <mex.zktk@gmail.com> parents: 2 diff changeset	6	import SlateEditor from './SlateEditor';
1 431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	7
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	8	class NoteInput extends Component {
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	9
12 48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	10	state = {
16 e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	11	buttonDisabled: false,
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	12	time: moment().format('H:mm:ss'),
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	13	startedAt: null,
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	14	finishedAt: null,
12 48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	15	}
1 431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	16
16 e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	17	onEditorChange = (e) => {
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	18	this.setState({
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	19	buttonDisabled: e.state.document.length === 0,
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	20	startedAt: e.startedAt,
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	21	finishedAt: e.finishedAt
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	22	});
1 431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	23	}
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	24
12 48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	25	onAddNoteClick = () => {
15 4a8bbd314a46 Store note JSON data. Alexandre Segura <mex.zktk@gmail.com> parents: 12 diff changeset	26	const plain = this.refs.editor.asPlain();
4a8bbd314a46 Store note JSON data. Alexandre Segura <mex.zktk@gmail.com> parents: 12 diff changeset	27	const raw = this.refs.editor.asRaw();
4a8bbd314a46 Store note JSON data. Alexandre Segura <mex.zktk@gmail.com> parents: 12 diff changeset	28
4a8bbd314a46 Store note JSON data. Alexandre Segura <mex.zktk@gmail.com> parents: 12 diff changeset	29	this.props.addNote(this.props.session, {
4a8bbd314a46 Store note JSON data. Alexandre Segura <mex.zktk@gmail.com> parents: 12 diff changeset	30	plain: plain,
16 e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	31	raw: raw,
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	32	startedAt: this.state.startedAt,
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	33	finishedAt: moment().format('H:mm:ss')
15 4a8bbd314a46 Store note JSON data. Alexandre Segura <mex.zktk@gmail.com> parents: 12 diff changeset	34	});
4a8bbd314a46 Store note JSON data. Alexandre Segura <mex.zktk@gmail.com> parents: 12 diff changeset	35
12 48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	36	this.refs.editor.clear();
48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	37	setTimeout(() => this.refs.editor.focus(), 250);
1 431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	38	}
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	39
12 48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	40	componentDidMount() {
48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	41	const text = this.refs.editor.asPlain();
48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	42	this.setState({ buttonDisabled: text.length === 0 });
16 e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	43	setInterval(() => {
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	44	const time = moment().format('H:mm:ss');
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	45	this.setState({ time });
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	46	}, 1000);
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	47	}
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	48
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	49	renderTiming() {
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	50	if (this.state.startedAt && this.state.finishedAt) {
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	51	return (
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	52	<span>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	53	<Label>{this.state.startedAt}</Label> ⇒ <Label>{this.state.finishedAt}</Label>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	54	</span>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	55	)
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	56	} else {
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	57	return (
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	58	<span>No timing</span>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	59	)
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	60	}
1 431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	61	}
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	62
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	63	render() {
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	64	return (
2 b52921a63e77 add scss + bootstrap ymh <ymh.work@gmail.com> parents: 1 diff changeset	65	<Form>
16 e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	66	<Row>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	67	<Col md={6}>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	68	{ this.renderTiming() }
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	69	</Col>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	70	<Col md={6} className="text-right">
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	71	<Label bsStyle="info">{ this.state.time }</Label>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	72	</Col>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	73	</Row>
e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	74	<hr />
2 b52921a63e77 add scss + bootstrap ymh <ymh.work@gmail.com> parents: 1 diff changeset	75	<FormGroup>
12 48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	76	<div className="editor-wrapper">
16 e67cd18cc594 Draft implementation of note timing. Alexandre Segura <mex.zktk@gmail.com> parents: 15 diff changeset	77	<SlateEditor ref="editor" onChange={this.onEditorChange} />
12 48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	78	</div>
2 b52921a63e77 add scss + bootstrap ymh <ymh.work@gmail.com> parents: 1 diff changeset	79	</FormGroup>
12 48ddaa42b810 Draft implementation of sessions. Alexandre Segura <mex.zktk@gmail.com> parents: 8 diff changeset	80	<Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>
2 b52921a63e77 add scss + bootstrap ymh <ymh.work@gmail.com> parents: 1 diff changeset	81	</Form>
1 431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	82	);
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	83	}
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	84	}
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	85
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	86	NoteInput.propTypes = {
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	87	addNote: PropTypes.func.isRequired
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	88	};
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	89
431977d7c9a6 add first react application skeleton ymh <ymh.work@gmail.com> parents: diff changeset	90	export default NoteInput;

irinotes