SecureNotes/src/Views/Vault/Entry.tsx

import { h, Component } from "preact"
import { IVault, ViewNote } from "../../notes";
import Trash from "feather-icons/dist/icons/trash-2.svg"
import X from "feather-icons/dist/icons/x.svg"
import Save from "feather-icons/dist/icons/save.svg"

import Navigation from "../../navigation";
import { YesNoModal } from "../../components/modals/YesNoModal";
import Notifications, { MessageType } from "../../notifications";

const minRows = 3;
export default class EntryComponent extends Component<{ vault: Promise<IVault>, id: string | undefined, note: string | undefined }, { title: string, changed: boolean }> {
   private text: string = "";
   private vault: IVault;
   // private lineHeight: number = 24;
   private note: ViewNote;

   private rows: number = minRows;

   private skip_save: boolean = false;

   private inputElm: HTMLInputElement;

   constructor(props) {
      super(props);
      this.state = { changed: false, title: "" };
      this.textAreaChange = this.textAreaChange.bind(this);
      this.textAreaKeyPress = this.textAreaKeyPress.bind(this);
   }

   private toVault() {
      history.back();
   }

   componentDidMount() {
      this.inputElm.focus();
   }

   async componentWillMount() {
      this.text = "";
      this.vault = undefined;
      this.note = undefined;
      this.rows = minRows;
      this.skip_save = false;
      this.setState({ changed: false, title: "" });
      try {
         this.skip_save = false;

         this.vault = await this.props.vault;
         let note: ViewNote;
         let changed = false;
         if (this.props.id)
            note = await this.vault.getNote(this.props.id)
         else {
            note = this.vault.newNote();
            if (this.props.note) {
               note.__value = this.props.note;
               changed = true;
            }
         }

         if (!note) {
            Notifications.sendNotification("Note not found!", MessageType.ERROR);
         } else {
            this.note = note;
            this.text = note.__value;
            let rows = this.getRows(this.text);
            if (rows !== this.rows) {
               this.rows = rows;
            }
            let [title] = this.text.split("\n", 1);
            this.setState({ title, changed })
         }
      } catch (err) {
         Notifications.sendError(err);
      }
   }

   private async save() {
      try {
         if (this.state.changed) {
            this.note.__value = this.text;
            await this.vault.saveNote(this.note);
            this.setState({ changed: false })
         }
      } catch (err) {
         Notifications.sendError(err);
      }
   }

   componentWillUnmount() {
      if (!this.skip_save)
         this.save()
   }

   strToNr(value: string) {
      let match = value.match(/\d/g)
      return Number(match.join(""))
   }

   getRows(value: string) {
      const lines = (value.match(/\r?\n/g) || '').length + 1
      return Math.max(lines + 1, minRows);
   }

   textAreaChange(evt: KeyboardEvent) {
      if (evt.keyCode === 17 || evt.keyCode === 27) return; //No character, so not relevant for this function
      if (!this.state.changed && this.textAreaKeyPress(evt)) this.setState({ changed: true })

      let target = (evt.target as HTMLTextAreaElement)
      let value = target.value;

      this.text = value;

      let [title] = value.split("\n", 1);
      if (title !== this.state.title)
         this.setState({ title });

      let rows = this.getRows(value);
      if (rows !== this.rows) {
         target.rows = rows;
         this.rows = rows;
      }
   }

   async exitHandler() {
      if (this.state.changed) {
         let modal = new YesNoModal("Really want to quit?");
         let res = await modal.getResult();
         if (res === true) {
            this.skip_save = true;
            this.toVault();
         }
      } else
         this.toVault()
   }

   textAreaKeyPress(evt: KeyboardEvent) {
      console.log(evt);
      if ((evt.keyCode === 83 || evt.keyCode === 13) && evt.ctrlKey) {
         evt.preventDefault()
         this.save();
         return false;
      }
      else if (evt.keyCode === 27) {
         evt.preventDefault();
         this.exitHandler();
         return false;
      }
      return true;
   }

   render() {
      const save_handler = async () => {
         await this.save()
         Navigation.setPage("/vault", { id: this.vault.id }, { entry: "false" }, true);
         this.toVault()
      }

      const delete_handler = async () => {
         await this.vault.deleteNote(this.props.id);
         this.toVault()
      }

      console.log("Rerender")

      return <div>
         <header class="header">
            <a class="header-icon-button" onClick={() => this.exitHandler()}><img src={X} height={undefined} width={undefined} /></a>
            {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><img src={Save} height={undefined} width={undefined} /></a> : undefined}
            <h3 style="display:inline" class="button header-title">{this.state.title}</h3>
            <a class="header-icon-button" onClick={() => delete_handler()}><img src={Trash} height={undefined} width={undefined} /></a>
         </header>
         <div class="container">
            <textarea
               value={this.text}
               rows={this.rows}
               class="inp"
               style="width:100%;"
               onInput={this.textAreaChange}
               onKeyDown={this.textAreaKeyPress}
               onChange={this.textAreaChange}
               ref={elm => this.inputElm = elm}
            />
         </div>
      </div>
   }
}