Small improvements:
- Switch to CodeMirror - Switch to Parcel Bundler - Fix synchronisation bug - Update dependencies
This commit is contained in:
Fabian Stamm
@ -1,24 +1,25 @@
|
||||
import { h, Component } from "preact"
|
||||
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 Search from "feather-icons/dist/icons/search.svg"
|
||||
import { ArrowLeft, Search } from "preact-feather";
|
||||
import ContextMenu from "../../context";
|
||||
import Notifications from "../../../notifications";
|
||||
import { Observable, Lock } from "@hibas123/utils";
|
||||
|
||||
|
||||
export default class EntryList extends Component<{ vault: Promise<IVault> }, { notes: BaseNote[], context: JSX.Element | undefined }> {
|
||||
export default class EntryList extends Component<
|
||||
{ vault: IVault },
|
||||
{ notes: BaseNote[]; context: h.JSX.Element | undefined }
|
||||
> {
|
||||
rawNotes: BaseNote[];
|
||||
|
||||
private searchObservableServer = new Observable<void>(1000);
|
||||
private searchObservable = this.searchObservableServer.getPublicApi();
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log("Creating new Instance of EntryList")
|
||||
this.state = { notes: [], context: undefined }
|
||||
super(props);
|
||||
console.log("Creating new Instance of EntryList");
|
||||
this.state = { notes: [], context: undefined };
|
||||
this.onDragOver = this.onDragOver.bind(this);
|
||||
this.onDrop = this.onDrop.bind(this);
|
||||
this.reloadNotes = this.reloadNotes.bind(this);
|
||||
@ -27,14 +28,13 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
vault: IVault;
|
||||
|
||||
async reloadNotes(s?: boolean) {
|
||||
if (s)
|
||||
return;
|
||||
if (s) return;
|
||||
this.rawNotes = await this.vault.getAllNotes();
|
||||
await this.applySearch(true);
|
||||
}
|
||||
|
||||
async componentWillMount() {
|
||||
this.vault = await this.props.vault;
|
||||
this.vault = this.props.vault;
|
||||
this.reloadNotes();
|
||||
document.body.addEventListener("dragover", this.onDragOver);
|
||||
document.body.addEventListener("drop", this.onDrop);
|
||||
@ -64,59 +64,74 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
const close = () => {
|
||||
document.documentElement.removeEventListener("click", close);
|
||||
this.setState({ context: undefined });
|
||||
}
|
||||
};
|
||||
document.documentElement.addEventListener("click", close);
|
||||
|
||||
|
||||
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)
|
||||
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")
|
||||
Notifications.sendError("Sharing not possible on this device");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const deleteNote = async () => {
|
||||
this.vault.deleteNote(note._id).then(() => {
|
||||
Notifications.sendSuccess("Deleted")
|
||||
this.rawNotes = this.rawNotes.filter(e => e._id !== note._id);
|
||||
this.setState({ notes: this.state.notes.filter(e => e._id !== note._id) });
|
||||
}).catch(err => {
|
||||
Notifications.sendError(err);
|
||||
})
|
||||
}
|
||||
this.vault
|
||||
.deleteNote(note._id)
|
||||
.then(() => {
|
||||
Notifications.sendSuccess("Deleted");
|
||||
this.rawNotes = this.rawNotes.filter((e) => e._id !== note._id);
|
||||
this.setState({
|
||||
notes: this.state.notes.filter((e) => e._id !== note._id),
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
Notifications.sendError(err);
|
||||
});
|
||||
};
|
||||
|
||||
const copyNote = async () => {
|
||||
this.vault.getNote(note._id).then(note => {
|
||||
const el = document.createElement('textarea');
|
||||
this.vault.getNote(note._id).then((note) => {
|
||||
const el = document.createElement("textarea");
|
||||
el.value = note.__value;
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(el);
|
||||
Notifications.sendSuccess("Copied");
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let share;
|
||||
if ((window.navigator as any).share) {
|
||||
share = <button class="btn" onClick={shareNote}>
|
||||
share
|
||||
</button>
|
||||
share = (
|
||||
<button class="btn" onClick={shareNote}>
|
||||
share
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
let context = <ContextMenu event={evt} >
|
||||
{share}
|
||||
<button class="btn" onClick={deleteNote}>delete</button>
|
||||
<button class="btn" onClick={copyNote}>copy</button>
|
||||
</ContextMenu>
|
||||
let context = (
|
||||
<ContextMenu event={evt}>
|
||||
{share}
|
||||
<button class="btn" onClick={deleteNote}>
|
||||
delete
|
||||
</button>
|
||||
<button class="btn" onClick={copyNote}>
|
||||
copy
|
||||
</button>
|
||||
</ContextMenu>
|
||||
);
|
||||
|
||||
this.setState({ context });
|
||||
return false;
|
||||
@ -131,57 +146,69 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
if (item.kind === "file") {
|
||||
let file = item.getAsFile();
|
||||
if (file.type !== "application/json") {
|
||||
Notifications.sendError("Invalid File Type!!!")
|
||||
Notifications.sendError("Invalid File Type!!!");
|
||||
} else {
|
||||
try {
|
||||
let data = await new Promise<string>((yes, no) => {
|
||||
let fr = new FileReader()
|
||||
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") {
|
||||
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") {
|
||||
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)
|
||||
}
|
||||
})
|
||||
time: new Date(elm.time),
|
||||
};
|
||||
});
|
||||
} else {
|
||||
throw c;
|
||||
}
|
||||
} 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 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!`);
|
||||
Notifications.sendSuccess(
|
||||
`Imported ${notes.length} notes!`
|
||||
);
|
||||
} catch (err) {
|
||||
Notifications.sendError("Cannot read File!")
|
||||
Notifications.sendError("Cannot read File!");
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
@ -198,8 +225,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.searchLock.locked)
|
||||
return;
|
||||
if (this.searchLock.locked) return;
|
||||
const lock = await this.searchLock.getLock();
|
||||
console.time("SearchOP");
|
||||
|
||||
@ -213,7 +239,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
return parts.every(function (el) {
|
||||
return note.preview.toLowerCase().indexOf(el) > -1;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let elements: BaseNote[];
|
||||
if (!force && this.oldSearch && search.startsWith(this.oldSearch)) {
|
||||
@ -222,29 +248,32 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
elements = [...this.rawNotes];
|
||||
}
|
||||
|
||||
|
||||
await new Promise(yes => {
|
||||
await new Promise((yes) => {
|
||||
const idle = () => {
|
||||
window.requestIdleCallback(deadline => {
|
||||
let invTR = deadline.timeRemaining() <= 0;
|
||||
while ((deadline.timeRemaining() > 0 || invTR) && elements.length > 0) {
|
||||
let element = elements.shift();
|
||||
if (match(element)) {
|
||||
notes.push(element);
|
||||
window.requestIdleCallback(
|
||||
(deadline) => {
|
||||
let invTR = deadline.timeRemaining() <= 0;
|
||||
while (
|
||||
(deadline.timeRemaining() > 0 || invTR) &&
|
||||
elements.length > 0
|
||||
) {
|
||||
let element = elements.shift();
|
||||
if (match(element)) {
|
||||
notes.push(element);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (elements.length > 0)
|
||||
idle();
|
||||
else
|
||||
yes();
|
||||
}, { timeout: 100 });
|
||||
}
|
||||
if (elements.length > 0) idle();
|
||||
else yes();
|
||||
},
|
||||
{ timeout: 100 }
|
||||
);
|
||||
};
|
||||
idle();
|
||||
})
|
||||
});
|
||||
// notes = elements.filter(note => match(note));
|
||||
}
|
||||
|
||||
await new Promise(yes => this.setState({ notes }, yes));
|
||||
await new Promise((yes) => this.setState({ notes }, yes));
|
||||
this.oldSearch = search;
|
||||
lock.release();
|
||||
console.timeEnd("SearchOP");
|
||||
@ -260,38 +289,67 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
searchInput: HTMLInputElement;
|
||||
render() {
|
||||
const open_entry = (id: string | null) => {
|
||||
Navigation.setPage("/vault", { id: this.vault.id }, { id, entry: "true" })
|
||||
}
|
||||
Navigation.setPage(
|
||||
"/vault",
|
||||
{ id: this.vault.id },
|
||||
{ id, entry: "true" }
|
||||
);
|
||||
};
|
||||
|
||||
return <div>
|
||||
{this.state.context}
|
||||
<header class="header">
|
||||
<a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
|
||||
<h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h3>
|
||||
<span></span>
|
||||
{/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
|
||||
</header>
|
||||
<AddButton onClick={() => open_entry(null)} />
|
||||
<div class="container">
|
||||
<div style="display:flex;">
|
||||
<input class="inp" type="text" style="width: 100%; height: 40px;" onKeyUp={this.searchChanged} ref={elm => this.searchInput = elm} />
|
||||
<button class="btn btn-primary" style="padding: 5px 10px; margin: 0; height: 40px; width: 40px;">
|
||||
<Search />
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<div>
|
||||
{this.state.context}
|
||||
<header class="header">
|
||||
<a class="header-icon-button" onClick={() => history.back()}>
|
||||
<ArrowLeft height={undefined} width={undefined} />
|
||||
</a>
|
||||
<h3
|
||||
style="display:inline"
|
||||
class="header-title"
|
||||
onClick={() => Navigation.setPage("/")}
|
||||
>
|
||||
{this.vault ? this.vault.name : ""}
|
||||
</h3>
|
||||
<span></span>
|
||||
{/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
|
||||
</header>
|
||||
<AddButton onClick={() => open_entry(null)} />
|
||||
<div class="container">
|
||||
<div style="display:flex;">
|
||||
<input
|
||||
class="inp"
|
||||
type="text"
|
||||
style="width: 100%; height: 40px;"
|
||||
onKeyUp={this.searchChanged}
|
||||
ref={(elm) => (this.searchInput = elm)}
|
||||
/>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
style="padding: 5px 10px; margin: 0; height: 40px; width: 40px;"
|
||||
>
|
||||
<Search />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="vault-list" style="margin-top: 1rem;">
|
||||
{this.state.notes.map(note => {
|
||||
let [first, second] = note.preview.split("\n", 2);
|
||||
return <div class="card vault-vault" onContextMenu={evt => this.onContext(evt, note)} onClick={() => {
|
||||
open_entry(note._id)
|
||||
}}>
|
||||
<div>{first}</div>
|
||||
<div>{second}</div>
|
||||
</div>
|
||||
})}
|
||||
<div class="vault-list" style="margin-top: 1rem;">
|
||||
{this.state.notes.map((note) => {
|
||||
let [first, second] = note.preview.split("\n", 2);
|
||||
return (
|
||||
<div
|
||||
class="card vault-vault"
|
||||
onContextMenu={(evt) => this.onContext(evt, note)}
|
||||
onClick={() => {
|
||||
open_entry(note._id);
|
||||
}}
|
||||
>
|
||||
<div>{first}</div>
|
||||
<div>{second}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user