feat: list refreshing and error handling

Author: Yukaii

.vscode/launch.json

@@ -14,16 +14,37 @@
         "--extensionDevelopmentPath=${workspaceFolder}",
         "/Users/yukai/Projects/HackMD/hackmd-production/public/docs/features.md"
       ],
-      "outFiles": ["${workspaceFolder}/out/**/*.js"]
+      "outFiles": [
+        "${workspaceFolder}/dist/**/*.js"
+      ]
+    },
+    {
+      "name": "Run Web Extension in VS Code",
+      "type": "pwa-extensionHost",
+      "debugWebWorkerHost": true,
+      "runtimeExecutable": "${execPath}",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionDevelopmentKind=web"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/dist/**/*.js"
+      ],
     },
     {
       "name": "Extension Tests",
       "type": "extensionHost",
       "request": "launch",
       "runtimeExecutable": "${execPath}",
-      "args": ["--extensionDevelopmentPath=${workspaceFolder}", "--extensionTestsPath=${workspaceFolder}/out/test"],
-      "outFiles": ["${workspaceFolder}/out/test/**/*.js"],
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionTestsPath=${workspaceFolder}/out/test"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/out/test/**/*.js"
+      ],
       "preLaunchTask": "npm: watch"
     }
   ]
-}
+}

package.json

@@ -101,8 +101,31 @@
         "category": "HackMD"
       },
       {
-        "command": "treeView.refreshList",
-        "title": "Refresh",
+        "command": "HackMD.apiKey",
+        "title": "API Key",
+        "category": "HackMD"
+      },
+      {
+        "command": "treeView.refreshMyNotes",
+        "title": "Refresh My Notes",
+        "category": "HackMD",
+        "icon": {
+          "light": "images/icon/light/refresh-dark.svg",
+          "dark": "images/icon/dark/refresh-light.svg"
+        }
+      },
+      {
+        "command": "treeView.refreshHistory",
+        "title": "Refresh History",
+        "category": "HackMD",
+        "icon": {
+          "light": "images/icon/light/refresh-dark.svg",
+          "dark": "images/icon/dark/refresh-light.svg"
+        }
+      },
+      {
+        "command": "treeView.refreshTeamNotes",
+        "title": "Refresh Team Notes",
         "category": "HackMD",
         "icon": {
           "light": "images/icon/light/refresh-dark.svg",
@@ -145,8 +168,18 @@
     "menus": {
       "view/title": [
         {
-          "command": "treeView.refreshList",
-          "when": "view =~ /hackmd.tree/",
+          "command": "treeView.refreshMyNotes",
+          "when": "view =~ /hackmd.tree.my-notes/",
+          "group": "navigation"
+        },
+        {
+          "command": "treeView.refreshHistory",
+          "when": "view =~ /hackmd.tree.recent-notes/",
+          "group": "navigation"
+        },
+        {
+          "command": "treeView.refreshTeamNotes",
+          "when": "view =~ /hackmd.tree.team-notes/",
           "group": "navigation"
         }
       ],

src/api.ts

@@ -6,17 +6,18 @@ import { ACCESS_TOKEN_KEY } from './constants';
 
 let API: ApiClient;
 
-export async function initializeAPIClient(context: vscode.ExtensionContext) {
+export async function initializeAPIClient(context: vscode.ExtensionContext, forceShowInputBox = false) {
   let accessToken = await context.secrets.get(ACCESS_TOKEN_KEY);
   const apiEndPoint = vscode.workspace.getConfiguration('Hackmd').get('apiEndPoint') as string;
 
-  if (!accessToken) {
+  if (!accessToken || forceShowInputBox) {
     const input = await vscode.window.showInputBox({
       prompt: 'Please input your HackMD access token',
       password: true,
       ignoreFocusOut: true,
       placeHolder: 'Access Token',
       title: 'HackMD Access Token',
+      value: accessToken,
     });
 
     if (!input) {
@@ -30,6 +31,10 @@ export async function initializeAPIClient(context: vscode.ExtensionContext) {
   API = new ApiClient(accessToken, apiEndPoint);
 }
 
+export async function forceRefreshAPIClient(context: vscode.ExtensionContext) {
+  await initializeAPIClient(context, true);
+}
+
 vscode.workspace.onDidChangeConfiguration(async (e) => {
   if (e.affectsConfiguration('Hackmd')) {
     const extension = vscode.extensions.getExtension<{ context: vscode.ExtensionContext }>('HackMD.hackmd-vscode');

src/commands/index.ts

@@ -3,8 +3,10 @@ import * as vscode from 'vscode';
 import { registerNoteCommands } from './note';
 import { registerSnippetCommands } from './snippet';
 import { registerTreeViewCommands } from './treeView';
+import { registerUserCommands } from './user';
 
 export function registerCommands(context: vscode.ExtensionContext) {
+  registerUserCommands(context);
   registerTreeViewCommands(context);
   registerNoteCommands(context);
   registerSnippetCommands(context);

src/commands/treeView.ts

@@ -2,18 +2,29 @@ import * as vscode from 'vscode';
 
 import { Team } from '@hackmd/api/dist/type';
 
+import { refreshMyNotesEvent, refreshHistoryEvent, refreshTeamNotesEvent } from '../treeReactApp/events';
 import { teamNotesStore } from '../treeReactApp/store';
 
 import { API } from './../api';
 import { MdTextDocumentContentProvider, getNoteIdPublishLink } from './../mdTextDocument';
 import { ReactVSCTreeNode } from './../tree/nodes';
-// import { refreshHistoryList, refreshLoginStatus } from './../utils';
 
 export async function registerTreeViewCommands(context: vscode.ExtensionContext) {
   context.subscriptions.push(
-    vscode.commands.registerCommand('treeView.refreshList', async () => {
-      // await refreshLoginStatus();
-      // await refreshHistoryList();
+    vscode.commands.registerCommand('treeView.refreshMyNotes', async () => {
+      refreshMyNotesEvent.fire();
+    })
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand('treeView.refreshHistory', async () => {
+      refreshHistoryEvent.fire();
+    })
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand('treeView.refreshTeamNotes', async () => {
+      refreshTeamNotesEvent.fire();
     })
   );
 

src/commands/user.ts

@@ -0,0 +1,16 @@
+import * as vscode from 'vscode';
+
+import { forceRefreshAPIClient } from '../api';
+import { refreshHistoryEvent, refreshMyNotesEvent, refreshTeamNotesEvent } from '../treeReactApp/events';
+
+export async function registerUserCommands(context: vscode.ExtensionContext) {
+  context.subscriptions.push(
+    vscode.commands.registerCommand('HackMD.apiKey', async () => {
+      await forceRefreshAPIClient(context);
+
+      refreshHistoryEvent.fire();
+      refreshMyNotesEvent.fire();
+      refreshTeamNotesEvent.fire();
+    })
+  );
+}

src/treeReactApp/components/ErrorListItem.tsx

@@ -0,0 +1,18 @@
+import { TreeItem } from 'react-vsc-treeview';
+
+export const ErrorListItem = ({ error }: { error: any }) => {
+  return (
+    <>
+      {error && (
+        <TreeItem
+          command={{
+            command: 'HackMD.apiKey',
+            title: 'Reset API Key',
+            tooltip: 'Reset API Key',
+          }}
+          label="Check your API Endpoint config in settings or click here to reset API key"
+        />
+      )}
+    </>
+  );
+};

src/treeReactApp/events/index.ts

@@ -0,0 +1,16 @@
+import * as vscode from 'vscode';
+
+import { useEffect } from 'react';
+
+export const refreshHistoryEvent = new vscode.EventEmitter<void>();
+export const refreshMyNotesEvent = new vscode.EventEmitter<void>();
+export const refreshTeamNotesEvent = new vscode.EventEmitter<void>();
+
+export const useEventEmitter = (event: vscode.EventEmitter<void>, cb: () => void) => {
+  useEffect(() => {
+    const disposable = event.event(cb);
+    return () => {
+      disposable.dispose();
+    };
+  }, [cb, event]);
+};

src/treeReactApp/pages/History.tsx

@@ -1,14 +1,21 @@
 import useSWR from 'swr';
 
 import { API } from '../../api';
+import { ErrorListItem } from '../components/ErrorListItem';
 import { NoteTreeItem } from '../components/NoteTreeItem';
+import { refreshHistoryEvent, useEventEmitter } from '../events';
 
 export const History = () => {
-  // TODO: mutate history list on refresh
-  const { data = [] } = useSWR('history', () => API.getHistory());
+  const { data = [], mutate, error } = useSWR('history', () => API.getHistory());
+
+  useEventEmitter(refreshHistoryEvent, () => {
+    mutate();
+  });
 
   return (
     <>
+      <ErrorListItem error={error} />
+
       {data.map((note) => {
         return <NoteTreeItem key={note.id} note={note} />;
       })}

src/treeReactApp/pages/MyNotes.tsx

@@ -1,16 +1,24 @@
 import useSWR from 'swr';
 
 import { API } from '../../api';
+import { ErrorListItem } from '../components/ErrorListItem';
 import { NoteTreeItem } from '../components/NoteTreeItem';
+import { refreshMyNotesEvent, useEventEmitter } from '../events';
 
 export const MyNotes = () => {
-  const { data = [] } = useSWR('/my-notes', () => API.getNoteList());
+  const { data = [], mutate, error } = useSWR('/my-notes', () => API.getNoteList());
+
+  useEventEmitter(refreshMyNotesEvent, () => {
+    mutate();
+  });
 
   return (
     <>
       {data.map((note) => {
         return <NoteTreeItem key={note.id} note={note} />;
       })}
+
+      <ErrorListItem error={error} />
     </>
   );
 };

src/treeReactApp/pages/TeamNotes.tsx

@@ -7,11 +7,13 @@ import useSWR from 'swr';
 
 import { API } from '../../api';
 import { useAppContext } from '../AppContainer';
+import { ErrorListItem } from '../components/ErrorListItem';
 import { NoteTreeItem } from '../components/NoteTreeItem';
+import { refreshTeamNotesEvent, useEventEmitter } from '../events';
 import { useTeamNotesStore } from '../store';
 
 const TeamTreeItem = ({ team }: { team: Team }) => {
-  const { data: notes = [] } = useSWR(
+  const { data: notes = [], mutate } = useSWR(
     () => (team ? `/teams/${team.id}/notes` : null),
     () => API.getTeamNotes(team.path)
   );
@@ -28,6 +30,10 @@ const TeamTreeItem = ({ team }: { team: Team }) => {
     }
   }, [extensionPath]);
 
+  useEventEmitter(refreshTeamNotesEvent, () => {
+    mutate();
+  });
+
   return (
     <TreeItem label={team.name} expanded iconPath={iconPath} description={team.path}>
       {notes.map((note) => {
@@ -40,7 +46,7 @@ const TeamTreeItem = ({ team }: { team: Team }) => {
 };
 
 export const TeamNotes = () => {
-  const { data: teams = [] } = useSWR('/teams', () => API.getTeams());
+  const { data: teams = [], mutate, error } = useSWR('/teams', () => API.getTeams());
   const [selectedTeamId, setSelectedTeamId] = useState(useTeamNotesStore.getState().selectedTeamId);
 
   // I'm not sure why using useTeamNotesStore doesn't trigger re-render
@@ -51,15 +57,23 @@ export const TeamNotes = () => {
 
   const selectedTeam = useMemo(() => teams.find((t) => t.id === selectedTeamId), [teams, selectedTeamId]);
 
+  useEventEmitter(refreshTeamNotesEvent, () => {
+    mutate();
+  });
+
   return (
     <>
-      <TreeItem
-        label="Click to select a team"
-        command={{
-          title: 'Select a team',
-          command: 'selectTeam',
-        }}
-      />
+      <ErrorListItem error={error} />
+
+      {!error && (
+        <TreeItem
+          label="Click to select a team"
+          command={{
+            title: 'Select a team',
+            command: 'selectTeam',
+          }}
+        />
+      )}
 
       {selectedTeam && <TeamTreeItem team={selectedTeam} />}
     </>