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

import { h, Component } from "preact"
import Notes, { IVault, BaseNote } from "../../../notes";
import AddButton from "../../AddButton";
import Navigation from "../../../navigation";
import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg"
import ContextMenu from "../../modals/context";
import Notifications from "../../../notifications";

export default class EntryList extends Component<{ vault: Promise<IVault> }, { notes: BaseNote[], context: JSX.Element | undefined }> {
   constructor(props) {
      super(props)
      this.state = { notes: [], context: undefined }
      this.onDragOver = this.onDragOver.bind(this);
      this.onDrop = this.onDrop.bind(this);
      this.reloadNotes = this.reloadNotes.bind(this);
   }
   vault: IVault;

   reloadNotes(s?: boolean) {
      if (s)
         return;
      return new Promise(yes => this.vault.getAllNotes().then(entries => this.setState({ notes: entries }, yes)));
   }

   async componentWillMount() {
      this.vault = await this.props.vault;
      this.reloadNotes();
      document.body.addEventListener("dragover", this.onDragOver);
      document.body.addEventListener("drop", this.onDrop);
      Notes.syncObservable.subscribe(this.reloadNotes);
   }

   componentWillUnmount() {
      document.body.removeEventListener("dragover", this.onDragOver);
      document.body.removeEventListener("drop", this.onDrop);
      Notes.syncObservable.unsubscribe(this.reloadNotes);
   }

   onDragOver(evt: DragEvent) {
      evt.preventDefault();
   }

   onContext(evt: MouseEvent, note: BaseNote) {
      evt.preventDefault();
      const shareNote = async () => {
         let nav = window.navigator as any;
         if (nav.share !== undefined) {
            let vnote = await this.vault.getNote(note._id);
            nav.share({ title: vnote.preview.split("\n")[0], text: vnote.__value })
               .then(() => console.log('Successful share'))
               .catch(error => {
                  console.error('Error sharing:', error)
                  Notifications.sendError(error)
               });
         } else {
            Notifications.sendError("Sharing not possible on this device")
         }

      }

      let share;
      if ((window.navigator as any).share) {
         share = <button onClick={() => shareNote()}>
            share
         </button>
         let context = <ContextMenu event={evt} >
            {share}
         </ContextMenu>

         this.setState({ context });
      }
      return false;
   }

   async onDrop(evt: DragEvent) {
      evt.preventDefault();
      if (evt.dataTransfer.items) {
         for (let i = 0; i < evt.dataTransfer.items.length; i++) {
            let item = evt.dataTransfer.items[i];

            if (item.kind === "file") {
               let file = item.getAsFile();
               if (file.type !== "application/json") {
                  Notifications.sendError("Invalid File Type!!!")
               } else {
                  try {
                     let data = await new Promise<string>((yes, no) => {
                        let fr = new FileReader()
                        fr.onload = (ev) => {
                           yes((ev.target as any).result);
                        }
                        fr.onerror = no;
                        fr.readAsText(file);
                     })
                     let parsed = JSON.parse(data);
                     let c = new Error("Could not parse!");
                     let notes: { content: string, time: Date }[] = null;
                     if (Array.isArray(parsed)) { // Could be from SecureNotes 1
                        notes = parsed.map(elm => {
                           if (typeof elm.message !== "string" || typeof elm.time !== "string") {
                              throw c;
                           }

                           return {
                              content: elm.message,
                              time: new Date(elm.time)
                           }
                        })
                     } else if (parsed.version) { // Could be from SecureNotes 2
                        if (parsed.version === 1) { //Could be from SecureNotes 2 version 1
                           notes = (parsed.notes as any[]).map(elm => {
                              if (typeof elm.content !== "string" || typeof elm.time !== "string") {
                                 throw c;
                              }
                              return {
                                 content: elm.content,
                                 time: new Date(elm.time)
                              }
                           })
                        } else {
                           throw c;
                        }
                     } else
                        throw c;

                     await Promise.all(notes.map(n => {
                        let note = this.vault.newNote();
                        note.__value = n.content;
                        return this.vault.saveNote(note, n.time);
                     }));
                     await this.reloadNotes();
                     Notifications.sendSuccess(`Imported ${notes.length} notes!`);
                  } catch (err) {
                     Notifications.sendError("Cannot read File!")
                     console.error(err);
                  }
               }
            }
         }
      }
   }

   render() {
      const open_entry = (id: string | null) => {
         Navigation.setPage("/vault", { id: this.vault.id }, { id, entry: "true" })
      }

      let elms = this.state.notes.map(note => {
         let [first, second] = note.preview.split("\n", 2);
         return <div class="vault_vault" onContextMenu={evt => this.onContext(evt, note)} onClick={() => {
            open_entry(note._id)
         }}>
            <span>{first}</span><br />
            <span>{second}</span>
         </div>
      })

      return <div>
         {this.state.context}
         <header>
            <div>
               <a class="button header_icon_button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
            </div>
            <h1 style="display:inline" class="button header_title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h1>
            <span></span>
            {/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
         </header>
         <AddButton onClick={() => open_entry(null)} />
         <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">
                  <div class="card fluid">
                     <div class="section">
                        {elms}
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   }
}