Usage of smallorange-reactive-store with new typedAttributes

smallorange-reactive-store-typedAttributes-sample.js

'use strict';

const {
	Model,
	Collection,
	rxjs,
	lodash
} = one;

class MessageMeta extends Model {
	constructor() {
		const now = Date.now();

		super(null, null, {
			defaults: {
				id: 'meta',
				createdAt: now,
				updatedAt: now,
				read: false
			}
		});
	}

	read() {
		this.set({
			read: true,
			updatedAt: Date.now()
		});
	}
}

class Message extends Model {
	constructor(attributes, options) {
		super(attributes, options, {
			defaults: {
				id: Date.now(),
				meta: {},
				text: ''
			},
			typedAttributes: {
				meta: MessageMeta
			}
		});
	}
}

class Messages extends Collection {
	constructor() {
		super(Message, null, null, {
			defaultOrder: {
				id: 'asc'
			}
		});
	}
}

class Conversation extends Model {
	constructor(attributes) {
		super(attributes, null, {
			typedAttributes: {
				messages: Messages
			}
		});

		const {
			body
		} = document;

		const pre = document.createElement('pre');

		this.on('set')
			.map(() => this.toJS())
			.subscribe(response => {
				pre.innerHTML = `\n\n${new Date()}\n${JSON.stringify(response, null, 2)}`;

				const messages = this.get('messages');

				if(messages.size() > 10){
					messages
						.keepLast(5);
				}

				body.appendChild(pre);
			});
	}
}

const conversation = window.conversation = new Conversation({
	messages: {
		text: 'Text I'
	}
});

let index = 0;

setInterval(() => {
	conversation
		.get('messages')
		.set({
			text: `text ${index++}`
		});

	setTimeout(() => {
		conversation
			.get('messages')
			.last()
			.get('meta')
			.read();
	}, 700);
}, 1 * 1000);