---
title: "Notes"
type: "notes"
---
<main x-data="{
	store: null,
	notes: '',
	needCreate: false,
	loaded: false,
	async getNotes() {
		const notes = await this.store.getNotes();
		this.loaded = true;
		if (notes === false) {
			this.needCreate = true;
			return;
		}
		this.notes = notes;
	},
	async saveNotes() {
		if (!this.loaded)
			return;
		if (this.needCreate) {
			const result = await this.store.createNotes(this.notes);
			if (result)
				this.needCreate = false;
		}
		else {
			await this.store.updateNotes(this.notes);
		}
	},
	async init() {
		this.store = Alpine.store('alphabreed');
		this.store.backUrl = '/notes/';
		const tokenOK = await this.store.checkToken();
		if (!tokenOK)
			return;
		await this.getNotes();
	}
}" @keydown.window.prevent.stop.ctrl.s="saveNotes">
	<textarea autocomplete="off" spellcheck="false" autofocus placeholder="Write notes here..." x-model="notes" @input="$store.alphabreed.pending = true" @input.debounce.500ms="saveNotes"></textarea>
	<div id="pending" :class="{'show': $store.alphabreed.pending}"></div>
</main>