Add types for messages sent between webview and the plugin

roman-r-m · Feb 6, 2021 · 777adf6 · 777adf6
1 parent d2f4d2d
commit 777adf6
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 21 deletions.
diff --git a/src/common.ts b/src/common.ts
@@ -0,0 +1,25 @@
+type SearchMessage = {
+    type: 'search',
+    query: string
+}
+
+type GotoMessage = {
+    type: 'goto',
+    resourceId: string,
+    noteId: string
+}
+
+type Message = SearchMessage | GotoMessage;
+
+type SearchResult = {
+    id: string,
+    title: string,
+    notes: NoteRef[]
+};
+
+type NoteRef = {
+    title: string,
+    id: string
+}
+
+export { Message, SearchMessage, GotoMessage, SearchResult, NoteRef };
diff --git a/src/plugin/index.ts b/src/plugin/index.ts
@@ -4,6 +4,7 @@ import { MenuItemLocation } from 'api/types';
 import { pdfToText} from '../index/pdf';
 import { addToIndex, initDb, query } from './database';
 import { Database } from 'sqlite3';
+import { Message, SearchResult, NoteRef } from '../common';
 
 async function indexResources(api: JoplinData, resourceDir: string, db: Database) {
 	let page = 0;
@@ -32,19 +33,17 @@ async function indexResource(resource: any, resourceDir: string, db: Database) {
 		addToIndex(db, resource.title, resource.id, text);
 	}
 }
-async function transformResult(searchResult: any[]) {
-	const res = [];
+async function transformResult(searchResult: any[]): Promise<SearchResult[]> {
+	const res: SearchResult[] = [];
 	console.log(`result: ${JSON.stringify(searchResult)}`);
 	for (let i = 0; i < searchResult.length; i++) {
 		const resource = searchResult[i];
 		// TODO collect promises and await all
-		const notes = (await joplin.data.get(['resources', resource.id, 'notes'], { fields: ['id', 'title']})).items;
-		const note = !!notes && notes.length > 0 ? notes[0] : {}; // TODO what if more than 1 note?
+		const notes: NoteRef[] = (await joplin.data.get(['resources', resource.id, 'notes'], { fields: ['id', 'title']})).items;
 		res.push({
 			id: resource.id,
 			title: resource.title,
-			noteTitle: note.title,
-			noteId: note.id
+			notes: notes,
 		});
 	}
 	return res;
@@ -66,19 +65,23 @@ joplin.plugins.register({
 
 		joplin.views.dialogs.setHtml(resourceSearch, `
 		<div id="resource-search" style="display: flex; flex-direction: column; min-width: 400px; resize: both;">
-			<input id="query-input" type="text" autofocus/><br/>
-			<div id="search-results"></div>
+			<input id="query-input" type="text">
+			<div id="search-results" style="overflow: hidden auto;"></div>
 		</div>
 		`);
 
-		joplin.views.panels.onMessage(resourceSearch, async msg => {
+		joplin.views.panels.onMessage(resourceSearch, async (msg: Message) => {
 			console.log(`on message: ${JSON.stringify(msg)}`);
-			if (msg.type === 'search') {
-				const result: any[] = await query(db, 'SELECT id,title FROM resources_fts WHERE text MATCH ?', msg.query);
-				console.log(`results: ${JSON.stringify(result)}`);
-				return await transformResult(result);
-			} else if (msg.type === 'goToNote') {
-				joplin.commands.execute('openNote', msg.noteId);
+			switch (msg.type) {
+				case 'search':
+					const result: any[] = await query(db, 'SELECT id,title FROM resources_fts WHERE text MATCH ?', msg.query);
+					console.log(`results: ${JSON.stringify(result)}`);
+					return await transformResult(result);
+				case 'goto':
+					// TODO scroll to resource
+					await joplin.views.panels.hide(resourceSearch);
+					await joplin.commands.execute('openNote', msg.noteId);
+					break;
 			}
 		});
 

diff --git a/src/webview/index.ts b/src/webview/index.ts
@@ -1,4 +1,6 @@
-function debounce(func, timeout = 300) {
+import { GotoMessage, SearchResult } from "src/common";
+
+function debounce(func: Function, timeout = 300) {
     let timer;
     return (...args) => {
         clearTimeout(timer);
@@ -9,7 +11,7 @@ function debounce(func, timeout = 300) {
 declare const webviewApi: any;
 
 const getResources = debounce(async query => {
-    const results = await webviewApi.postMessage({
+    const results: SearchResult[] = await webviewApi.postMessage({
         type: 'search',
         query: query
     });
@@ -27,6 +29,7 @@ const getResources = debounce(async query => {
             const searchResult = results[i];
             const row = document.createElement('div');
             row.setAttribute('class', 'search-result-row');
+            row.setAttribute('style', 'display: flex; flex-direction: row;');
             searchResults.appendChild(row);
 
             const resourceName = document.createElement('div');
@@ -36,11 +39,21 @@ const getResources = debounce(async query => {
 
             const includedIn = document.createElement('div');
             includedIn.setAttribute('class', 'referencing-notes-cell');
-            const noteLink = document.createElement('a');
-            noteLink.setAttribute('href', '#');
-            noteLink.innerText = searchResult.noteTitle;
-            includedIn.appendChild(noteLink);
+            includedIn.setAttribute('style', 'display: flex; flex-direction: column;');
             row.appendChild(includedIn);
+            searchResult.notes.forEach(n =>{
+                const noteLink = document.createElement('a');
+                noteLink.setAttribute('href', '#');
+                noteLink.addEventListener('click', ev => {
+                    webviewApi.postMessage({
+                        type: 'goto',
+                        resourceId: searchResult.id,
+                        noteId: n.id
+                    } as GotoMessage);
+                });
+                noteLink.innerText = n.title;
+                includedIn.appendChild(noteLink);
+            });
         }
     }
 });

diff --git a/src/webview/resource-search-view.css b/src/webview/resource-search-view.css
@@ -1,3 +1,7 @@
+#joplin-plugin-content {
+    min-width: 400px;
+}
+
 #resource-search {
     min-width: 400px;
 }