Refactor, add tree folder

Author: JamesCamel

src/extension.ts

@@ -2,14 +2,15 @@
 // Import the module and reference it with the alias vscode in your code below
 import axios from 'axios';
 import * as apiClient from '@hackmd/api';
-import { MdTreeItemProvider } from './mdTreeView';
 import { MdTextDocumentContentProvider } from './mdTextDocument';
 import * as vscode from 'vscode';
 import * as markdownitContainer from 'markdown-it-container';
 import * as S from 'string';
 import { store } from './store'
 import { initializeStorage } from './store/storage'
 import * as Prism from 'prismjs';
+import { checkLogin, login, refreshHistoryList } from './tree/index';
+import { HackMDTreeViewProvider } from './tree/index'
 
 require('prismjs/components/prism-wiki');
 require('prismjs/components/prism-haskell');
@@ -230,43 +231,6 @@ let highlight;
 const API = new apiClient.default();
 axios.defaults.withCredentials = true;
 
-
-const refreshHistoryList = async (context) => {
-  if (await checkLogin()) {
-    store.history = (await API.getHistory()).history;
-    context.globalState.update('history', store.history);
-  } else {
-    store.history = [{}];
-    context.globalState.update('history', [{}]);
-  }
-};
-
-const checkLogin = async () => {
-  return (await API.getMe()).status === 'ok';
-};
-
-const login = async (context: vscode.ExtensionContext) => {
-  const { email, password } = getLoginCredential(context);
-  if (!email || !password) {
-    vscode.window.showInformationMessage('Please enter your email and password to use HackMD extension!')
-    return;
-  }
-  await API.login(email, password);
-  if (await checkLogin()) {
-    store.isLogin = true;
-    context.globalState.update('isLogin', true);
-    vscode.window.showInformationMessage('Successfully login!');
-  } else {
-    vscode.window.showInformationMessage('Wrong email or password, please enter again');
-  }
-};
-
-const getLoginCredential = (context: vscode.ExtensionContext) => {
-  const email: string = context.globalState.get('email');
-  const password: string = context.globalState.get('password');
-  return { email, password };
-};
-
 export async function activate(context: vscode.ExtensionContext) {
   initializeStorage(context);
   context.subscriptions.push(vscode.commands.registerCommand('HackMD.login', async () => {
@@ -304,7 +268,7 @@ export async function activate(context: vscode.ExtensionContext) {
 
     context.globalState.update('email', email);
     context.globalState.update('password', password);
-    
+
     await login(context);
     await refreshHistoryList(context);
   }));
@@ -321,12 +285,12 @@ export async function activate(context: vscode.ExtensionContext) {
     await refreshHistoryList(context);
   }));
 
-  const treeViewProvider = new MdTreeItemProvider(store);
+  const hackMDTreeViewProvider = new HackMDTreeViewProvider(store);
   context.subscriptions.push(
-    vscode.window.registerTreeDataProvider('mdTreeItems', treeViewProvider)
+    vscode.window.registerTreeDataProvider('mdTreeItems', hackMDTreeViewProvider)
   );
   context.subscriptions.push(
-    vscode.commands.registerCommand('treeView.refreshList', () => treeViewProvider.refresh())
+    vscode.commands.registerCommand('treeView.refreshList', () => hackMDTreeViewProvider.refresh())
   );
 
   context.subscriptions.push(vscode.workspace.registerTextDocumentContentProvider('hackmd', new MdTextDocumentContentProvider()));

src/mdTreeView.ts

@@ -0,0 +1,77 @@
+import * as vscode from 'vscode';
+import { Store, store } from '../store';
+import { reaction } from 'mobx';
+import { TreeNode, NoteTreeNode } from './nodes';
+import * as apiClient from '@hackmd/api';
+const API = new apiClient.default();
+
+export class HackMDTreeViewProvider implements vscode.TreeDataProvider<TreeNode> {
+    private _onDidChangeTreeData = new vscode.EventEmitter<TreeNode>();
+    public readonly onDidChangeTreeData: vscode.Event<TreeNode> = this._onDidChangeTreeData.event;
+    constructor(private store: Store) {
+        reaction(
+            () => [
+                store.history
+            ],
+            () => {
+                this.refresh();
+            }
+        );
+    }
+
+    getTreeItem(element: TreeNode): vscode.TreeItem {
+        return element;
+    }
+
+    getChildren(element?: TreeNode): vscode.ProviderResult<TreeNode[]> {
+        if (store.isLogin) {
+            if (element === undefined) {
+                return [new TreeNode("history", vscode.TreeItemCollapsibleState.Collapsed)]
+            } else {
+                return this.store.history.map(item =>
+                    new NoteTreeNode(item.id, item.text, vscode.TreeItemCollapsibleState.None)
+                );
+            }
+        }
+    }
+
+    refresh() {
+        this._onDidChangeTreeData.fire();
+    }
+}
+
+export const refreshHistoryList = async (context) => {
+    if (await checkLogin()) {
+        store.history = (await API.getHistory()).history;
+        context.globalState.update('history', store.history);
+    } else {
+        store.history = [{}];
+        context.globalState.update('history', [{}]);
+    }
+};
+
+export const checkLogin = async () => {
+    return (await API.getMe()).status === 'ok';
+};
+
+export const login = async (context: vscode.ExtensionContext) => {
+    const { email, password } = getLoginCredential(context);
+    if (!email || !password) {
+        vscode.window.showInformationMessage('Please enter your email and password to use HackMD extension!')
+        return;
+    }
+    await API.login(email, password);
+    if (await checkLogin()) {
+        store.isLogin = true;
+        context.globalState.update('isLogin', true);
+        vscode.window.showInformationMessage('Successfully login!');
+    } else {
+        vscode.window.showInformationMessage('Wrong email or password, please enter again');
+    }
+};
+
+export const getLoginCredential = (context: vscode.ExtensionContext) => {
+    const email: string = context.globalState.get('email');
+    const password: string = context.globalState.get('password');
+    return { email, password };
+};

src/tree/index.ts

@@ -0,0 +1,35 @@
+import * as vscode from 'vscode';
+
+export class TreeNode extends vscode.TreeItem {
+    constructor(
+        public readonly label: string,
+        public readonly collapsibaleState: vscode.TreeItemCollapsibleState,
+    ) {
+        super(label, collapsibaleState);
+        this.command = {
+            title: '',
+            command: 'clickTreeItem',
+            arguments: [
+                this.label,
+            ]
+        };
+    }
+}
+
+export class NoteTreeNode extends TreeNode {
+    constructor(
+        public readonly noteId: string,
+        public readonly label: string,
+        public readonly collapsibaleState: vscode.TreeItemCollapsibleState,
+    ) {
+        super(label, collapsibaleState);
+        this.command = {
+            title: '',
+            command: 'clickTreeItem',
+            arguments: [
+                this.label,
+                this.noteId
+            ]
+        };
+    }
+}