pastebin-stream/src/frontend/components/app.tag

app
	div.pasteBox
		div.paste(each="{ paste in pastes }")
			span.title(if="{ paste.title != null }") {paste.title}
			span.title(if="{ paste.title == null }") (no title)

			span.date {paste.formattedDate}

			span.url {paste.url}

	script.
		const moment = require("moment");
		const wsEndpoint = require("../ws-endpoint");
		const pruneArray = require("../../prune-array");

		function formatDate(date) {
			return moment.unix(date).format("HH:mm:ss");
		}

		function addFormattedDate(paste) {
			return Object.assign({
				formattedDate: formatDate(paste.date)
			}, paste);
		}

		this.pastes = [];

		this.on("mount", () => {

			let endpoint = wsEndpoint("/stream");
			let socket = new WebSocket(endpoint);

			socket.onmessage = (event) => {
				let message = JSON.parse(event.data);

				if (message.type === "newPaste") {
					let newPaste = message.data;
					this.pastes.push(addFormattedDate(newPaste));
				} else if (message.type === "backlog") {
					let unknownPastes = message.results.filter((paste) => {
						return !this.pastes.some((existingPaste) => (existingPaste.id === paste.id))
					}).map((paste) => {
						return addFormattedDate(paste);
					});

					this.pastes = unknownPastes.concat(this.pastes);
				}

				pruneArray(this.pastes, 10);
				this.update();
			}

			socket.onopen = (event) => {
				socket.send(JSON.stringify({
					type: "backlog",
					last: 10
				}));

				socket.send(JSON.stringify({
					type: "subscribe"
				}));
			}

			this.update();
		});

	style(type="scss").
		.pasteBox {
			height: 310px;
			border: 1px solid rgb(173, 173, 173);
			overflow: auto;

			.paste {
				padding: 4px;
				background-color: rgb(209, 209, 209);
				border-bottom: 1px solid rgb(173, 173, 173);

				.url {
					color: gray;
				}

				.title {
					font-weight: bold;
				}

				.title:after, .date:after {
					content: "-";
					margin: 0px 4px;
				}
			}
		}