notifications.jsx
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

notifications.jsx
View Options

	import { render, Component } from "preact";

	function rand_num() {
	return Math.floor(Math.random() * Number.MAX_VALUE);
	}

	class Notifications extends Component {
	constructor() {
	super();
	this.state = { notifications: [] };
	}

	remove_notification(id) {
	const newNotifications = this.state.notifications.filter(
	(notification) => notification.id !== id
	);
	this.setState({ notifications: newNotifications });
	}

	componentDidMount() {
	// This should also be dynamic
	this.connection = new WebSocket("ws://127.0.0.1:3001");

	this.connection.onmessage = (msg) => {
	let new_id = rand_num();
	this.setState({
	notifications: [
	{ id: new_id, notification: JSON.parse(msg.data) },
	...this.state.notifications,
	],
	});
	// a 10 sec timeout
	setTimeout(() => {
	this.remove_notification(new_id);
	}, 10000);
	};
	}

	render() {
	console.log("Render", this.state.notifications);
	return this.state.notifications.map(({ id, notification }) => (
	<div
	onClick={() => this.remove_notification(id)}
	style={`
	background-color: ${notification.is_ok ? "#66ff99" : "#ff5c33"};
	border-radius: 5px;
	border-width: 2px;
	border-style: solid;
	border-color: ${notification.is_ok ? "#369648" : "#a23915"};
	padding: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	`}
	>
	<div>
	<b>{notification.context}</b>
	</div>
	<div>
	{notification.message.split("\n").map((line) => (
	<p>{line}</p>
	))}
	</div>
	</div>
	));
	}
	}

	render(<Notifications />, document.getElementById("notifications"));