feat: add select team command

Author: Yukaii

.vscode/settings.json

@@ -8,5 +8,8 @@
   },
   // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
   "typescript.tsc.autoDetect": "off",
-  "editor.formatOnSave": true
-}
+  "editor.formatOnSave": true,
+  "cSpell.words": [
+    "zustand"
+  ]
+}

package-lock.json

@@ -183,7 +183,15 @@
     "viewsWelcome": [
       {
         "view": "hackmd.tree.my-notes",
-        "contents": "No notes found. Login first.\n[Login HackMD](command:HackMD.login)"
+        "contents": "Loading data... \nMake sure you've set access token and correct API endpoint."
+      },
+      {
+        "view": "hackmd.tree.recent-notes",
+        "contents": "Loading data... \nMake sure you've set access token and correct API endpoint."
+      },
+      {
+        "view": "hackmd.tree.team-notes",
+        "contents": "Loading data... \nMake sure you've set access token and correct API endpoint."
       }
     ]
   },
@@ -258,8 +266,10 @@
     "mobx": "^5.15.4",
     "node-fetch": "^2.6.7",
     "react": "^17.0.2",
+    "react-reconciler": "^0.26.2",
     "react-vsc-treeview": "^0.2.3",
     "string": "git+ssh://[email protected]/hackmdio/string.js.git#a68176b3d",
-    "swr": "^1.3.0"
+    "swr": "^1.3.0",
+    "zustand": "^4.1.5"
   }
 }

package.json

@@ -1,5 +1,9 @@
 import * as vscode from 'vscode';
 
+import { Team } from '@hackmd/api/dist/type';
+
+import { teamNotesStore } from '../treeReactApp/store';
+
 import { API } from './../api';
 import { MdTextDocumentContentProvider, getNoteIdPublishLink } from './../mdTextDocument';
 import { ReactVSCTreeNode } from './../tree/nodes';
@@ -23,6 +27,24 @@ export async function registerTreeViewCommands(context: vscode.ExtensionContext)
     })
   );
 
+  context.subscriptions.push(
+    vscode.commands.registerCommand('selectTeam', async () => {
+      const teams = await API.getTeams();
+
+      const getTeamLabel = (team: Team) => `${team.name} [${team.path}]`;
+
+      await vscode.window.showQuickPick(teams.map(getTeamLabel)).then((selectedTeam) => {
+        if (!selectedTeam) {
+          return;
+        }
+
+        const selectedTeamId = teams.find((team) => getTeamLabel(team) === selectedTeam)?.id;
+
+        teamNotesStore.setState({ selectedTeamId });
+      });
+    })
+  );
+
   context.subscriptions.push(
     vscode.commands.registerCommand('HackMD.showPreview', async (noteNode: ReactVSCTreeNode) => {
       if (noteNode) {

src/commands/treeView.ts

@@ -211,9 +211,9 @@ export async function activate(context: vscode.ExtensionContext) {
 
   registerCommands(context);
 
-  ReactTreeView.render(React.createElement(MyNotes), 'hackmd.tree.my-notes');
-  ReactTreeView.render(React.createElement(History), 'hackmd.tree.recent-notes');
-  ReactTreeView.render(React.createElement(TeamNotes), 'hackmd.tree.team-notes');
+  context.subscriptions.push(ReactTreeView.render(React.createElement(MyNotes), 'hackmd.tree.my-notes'));
+  context.subscriptions.push(ReactTreeView.render(React.createElement(History), 'hackmd.tree.recent-notes'));
+  context.subscriptions.push(ReactTreeView.render(React.createElement(TeamNotes), 'hackmd.tree.team-notes'));
 
   return {
     extendMarkdownIt(md: any) {

src/extension.ts

@@ -1,5 +1,52 @@
+import { Team } from '@hackmd/api/dist/type';
+import { useEffect, useMemo, useState } from 'react';
 import { TreeItem } from 'react-vsc-treeview';
+import useSWR from 'swr';
+
+import { API } from '../../api';
+import { NoteTreeItem } from '../components/NoteTreeItem';
+import { useTeamNotesStore } from '../store';
+
+const TeamTreeItem = ({ team }: { team: Team }) => {
+  const { data: notes = [] } = useSWR(
+    () => (team ? `/teams/${team.id}/notes` : null),
+    () => API.getTeamNotes(team.path)
+  );
+
+  return (
+    <TreeItem label={team.name} expanded>
+      {notes.map((note) => {
+        return <NoteTreeItem key={note.id} note={note} />;
+      })}
+
+      {notes.length === 0 && <TreeItem label="No notes" />}
+    </TreeItem>
+  );
+};
 
 export const TeamNotes = () => {
-  return <TreeItem label="Hello World"></TreeItem>;
+  const { data: teams = [] } = useSWR('/teams', () => API.getTeams());
+  const [selectedTeamId, setSelectedTeamId] = useState(useTeamNotesStore.getState().selectedTeamId);
+
+  // I'm not sure why using useTeamNotesStore doesn't trigger re-render
+  // So we use useEffect to subscribe to the zustand store and update the useState we use in the component
+  useEffect(() => {
+    useTeamNotesStore.subscribe((state) => setSelectedTeamId(state.selectedTeamId));
+  }, []);
+
+  const selectedTeam = useMemo(() => teams.find((t) => t.id === selectedTeamId), [teams, selectedTeamId]);
+
+  return (
+    <>
+      <TreeItem
+        label="Click to select a team"
+        command={{
+          title: 'Select a team',
+          command: 'selectTeam',
+        }}
+      />
+
+      {selectedTeam && <TeamTreeItem team={selectedTeam} />}
+    </>
+  );
 };

src/treeReactApp/pages/TeamNotes.tsx

@@ -0,0 +1,14 @@
+import createReact from 'zustand';
+import create from 'zustand/vanilla';
+
+type TeamNoteStore = {
+  selectedTeamId: string;
+  setSelectedTeamId: (id: string) => void;
+};
+
+export const teamNotesStore = create<TeamNoteStore>()((set) => ({
+  selectedTeamId: null,
+  setSelectedTeamId: (id: string) => set({ selectedTeamId: id }),
+}));
+
+export const useTeamNotesStore = createReact(teamNotesStore);