SecureNotes/src/components/routes/vault/Entry.tsx

import { h, Component } from "preact"
import Notes, { IVault, ViewNote, MessageType } 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 "../../modals/YesNoModal";
import LoadingModal from "../../modals/LoadingModal";

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

   rows: number = minRows;

   skip_save: boolean = false;

   constructor(props) {
      super(props);
      this.state = { changed: false, title: "", modal: undefined, loading: true };
   }

   private toVault() {
      history.back()
      // Navigation.setPage("/vault", { id: this.vault.id }, { entry: "false" }, true);
   }

   async componentWillMount() {
      try {
         this.skip_save = false;
         this.setState({ loading: true })
         this.vault = await this.props.vault;
         let note: ViewNote;
         if (this.props.id)
            note = await this.vault.getNote(this.props.id)
         else
            note = this.vault.newNote();

         if (!note) {
            Notes.messageObservableServer.send({ message: "Note not found!", type: MessageType.ERROR });
            // this.toVault()
         } 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({ loading: false, title })
         }
      } catch (err) {
         Notes.sendErrorMessage(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) {
         Notes.sendErrorMessage(err);
      }
   }

   // async onKeypress(event) {
   //    event = event || window.event;
   //    
   // }

   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
      let target = (evt.target as HTMLTextAreaElement)
      let value = target.value;

      this.text = value;
      if (!this.state.changed && this.textAreaKeyPress(evt)) this.setState({ changed: true })

      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;
      }
   }

   exitHandler() {
      if (this.state.changed) {
         let modal = <YesNoModal title="Really want to quit?" onResult={res => {
            if (res === true) {
               this.skip_save = true;
               this.toVault();
            }
            this.setState({ modal: undefined });
         }} />
         this.setState({ modal })
      } else
         this.toVault()
   }

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

   render() {
      let loading_modal = this.state.loading ? <LoadingModal /> : undefined;

      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()
      }

      return <div>
         {loading_modal}
         {this.state.modal}
         <header>
            <div>
               <a class="button header_icon_button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
               {this.state.changed ? <a class="button header_icon_button" onClick={() => save_handler()}><Save height={undefined} width={undefined} /></a> : undefined}
            </div>
            <h1 style="display:inline" class="button header_title">{this.state.title}</h1>
            <a class="button header_icon_button" onClick={() => delete_handler()}><Trash height={undefined} width={undefined} /></a>
         </header>
         <div class="container">
            <div class="row">
               <div class="col-sm-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
                  <textarea autofocus value={this.text} rows={this.rows} class="doc" style="width:100%;" onKeyDown={evt => this.textAreaKeyPress(evt)} onKeyUp={evt => this.textAreaChange(evt)} ref={elm => {
                     if (elm)
                        setTimeout(() => elm.focus(), 0)
                  }} />
               </div>
            </div>
         </div>
      </div>
   }
}