「さらに読み込む...」を実装 (#6)

neet · neet · commit 17eccfa9207a · 2018-09-20T16:18:08.000+09:00
diff --git a/package.json b/package.json
@@ -83,6 +83,11 @@
         "command": "qiita.editTitle",
         "title": "%commands.editTitle.title%",
         "category": "Qiita"
+      },
+      {
+        "command": "qiita.expandItems",
+        "title": "%commands.expanditems.title%",
+        "category": "Qiita"
       }
     ],
     "configuration": [
@@ -115,7 +120,8 @@
         { "command": "qiita.editTags", "when": "false" },
         { "command": "qiita.openItemExternal", "when": "false"},
         { "command": "qiita.makePublic", "when": "false"},
-        { "command": "qiita.editTitle", "when": "false" }
+        { "command": "qiita.editTitle", "when": "false" },
+        { "command": "qiita.expandItems", "when": "false" }
       ],
       "editor/title": [
         {
diff --git a/package.nls.json b/package.nls.json
@@ -35,6 +35,8 @@
   "commands.editTitle.title": "タイトルを編集",
   "commands.editTitle.success": "タイトルを編集しました",
 
+  "commands.expanditems.title": "さらに読み込む...",
+
   "quickpicks.tagQuickPick.title": "投稿に登録するタグを入力してください",
   "quickpicks.tagQuickPick.placeholder": "例) Rails React Mastodon",
   "quickpicks.tagQuickPick.item.description": "{0}件の投稿",
diff --git a/src/commands/compose.ts b/src/commands/compose.ts
@@ -3,7 +3,7 @@ import { commands, Uri, window, workspace } from 'vscode';
 import * as nls from 'vscode-nls';
 import { client } from '../client';
 import { configuration } from '../configuration';
-import { qiitaItemsProvider } from '../explorer/qiitaItems';
+import { qiitaItemsProvider } from '../explorers/qiitaItems';
 import { tagQuickPickCreator, validateTagQuickPick } from '../quickpicks/tagQuickPickCreator';
 import { titleInputBoxCreator, validateTitleInputBox } from '../quickpicks/titleInputBoxCreator';
 import { privateLabel, visibilityQuickPickCreator } from '../quickpicks/visibilityQuickPickCreator';
diff --git a/src/commands/deleteItem.ts b/src/commands/deleteItem.ts
@@ -2,7 +2,7 @@ import { Item } from 'qiita-js-2';
 import { window } from 'vscode';
 import * as nls from 'vscode-nls';
 import { client } from '../client';
-import { qiitaItemsProvider } from '../explorer/qiitaItems';
+import { qiitaItemsProvider } from '../explorers/qiitaItems';
 import { handleErrorMessage } from '../utils/errorHandler';
 
 const localize = nls.loadMessageBundle();
diff --git a/src/commands/editTags.ts b/src/commands/editTags.ts
@@ -2,7 +2,7 @@ import { Item } from 'qiita-js-2';
 import { QuickPickItem, window } from 'vscode';
 import * as nls from 'vscode-nls';
 import { client } from '../client';
-import { qiitaItemsProvider } from '../explorer/qiitaItems';
+import { qiitaItemsProvider } from '../explorers/qiitaItems';
 import { makeQuickPickItemFromTag, tagQuickPickCreator, validateTagQuickPick } from '../quickpicks/tagQuickPickCreator';
 import { handleErrorMessage } from '../utils/errorHandler';
 
diff --git a/src/commands/editTitle.ts b/src/commands/editTitle.ts
@@ -2,7 +2,7 @@ import { Item } from 'qiita-js-2';
 import { window } from 'vscode';
 import * as nls from 'vscode-nls';
 import { client } from '../client';
-import { qiitaItemsProvider } from '../explorer/qiitaItems';
+import { qiitaItemsProvider } from '../explorers/qiitaItems';
 import { titleInputBoxCreator, validateTitleInputBox } from '../quickpicks/titleInputBoxCreator';
 import { handleErrorMessage } from '../utils/errorHandler';
 
diff --git a/src/commands/expandItems.ts b/src/commands/expandItems.ts
@@ -0,0 +1,9 @@
+import { qiitaItemsProvider } from '../explorers/qiitaItems';
+import { itemsStore } from '../stores/itemsStore';
+
+export async function expandItems () {
+  if (!itemsStore.done) {
+    await itemsStore.expandItems();
+    qiitaItemsProvider.refresh();
+  }
+}
diff --git a/src/commands/makePublic.ts b/src/commands/makePublic.ts
@@ -2,7 +2,7 @@ import { Item } from 'qiita-js-2';
 import { window } from 'vscode';
 import * as nls from 'vscode-nls';
 import { client } from '../client';
-import { qiitaItemsProvider } from '../explorer/qiitaItems';
+import { qiitaItemsProvider } from '../explorers/qiitaItems';
 import { handleErrorMessage } from '../utils/errorHandler';
 
 const localize = nls.loadMessageBundle();
diff --git a/src/explorer/qiitaItems.ts b/src/explorer/qiitaItems.ts
diff --git a/src/explorers/qiitaItems.ts b/src/explorers/qiitaItems.ts
@@ -0,0 +1,109 @@
+import { Item } from 'qiita-js-2';
+import {
+  Command,
+  Event,
+  EventEmitter,
+  TreeDataProvider,
+  TreeItem,
+  TreeItemCollapsibleState,
+  Uri,
+} from 'vscode';
+import * as nls from 'vscode-nls';
+import { itemsStore } from '../stores/itemsStore';
+
+const localize = nls.loadMessageBundle();
+
+
+export class QiitaItem extends TreeItem {
+  /**
+   * "Qiitaの投稿" ビューに表示されるアイテム
+   * @param item Qiitaの投稿
+   * @param collapsibleState アイテムが折り畳まれているかの状態
+   * @param command クリック時に発火するコマンド
+   */
+  constructor (
+    public readonly item: Item,
+    public readonly collapsibleState: TreeItemCollapsibleState,
+    public readonly command: Command,
+  ) {
+    super(item.title, collapsibleState);
+  }
+
+  public resourceUri  = Uri.parse('file:///text.md'); // Hack: アイコンをMarkdownのものに
+  public contextValue = 'qiitaItems';
+}
+
+
+export class ExpandItems extends TreeItem {
+  /**
+   * 「さらに読み込む」ボタンのためのアイテム
+   * @param collapsibleState アイテムが折り畳まれているかの状態
+   */
+  constructor (public readonly collapsibleState: TreeItemCollapsibleState) {
+    super(localize(
+      'commands.expandItems.title',
+      'さらに読み込む...',
+    ), collapsibleState);
+  }
+
+  public command = {
+    command: 'qiita.expandItems',
+    title:   localize('commands.expandItems.title', 'さらに読み込む...'),
+    arguments: [],
+  };
+
+  public contextValue = 'qiitaItems';
+}
+
+
+class QiitaItemsProvider implements TreeDataProvider<QiitaItem|ExpandItems> {
+  private _onDidChangeTreeData: EventEmitter<QiitaItem|ExpandItems|undefined> = new EventEmitter<QiitaItem|ExpandItems|undefined>();
+  public readonly onDidChangeTreeData: Event<QiitaItem|ExpandItems|undefined> = this._onDidChangeTreeData.event;
+
+  /**
+   * ツリーデータを更新
+   */
+  public refresh () {
+    this._onDidChangeTreeData.fire();
+  }
+
+  /**
+   * `element` に対応するツリーアイテムを取得
+   * @param element 取得するelement
+   * @return ツリーアイテム
+   */
+  public getTreeItem (element: QiitaItem): TreeItem {
+    return element;
+  }
+
+  /**
+   * 子要素を取得
+   * @param element 取得するelement
+   */
+  public async getChildren (): Promise<(QiitaItem|ExpandItems)[]> {
+    if (itemsStore.items.size === 0) {
+      await itemsStore.refreshItems();
+    }
+
+    const children = [];
+
+    for (const item of itemsStore.items) {
+      const command = {
+        command:   'qiita.openItem',
+        title:     localize('commands.openItem.title', '開く'),
+        arguments: [ item ],
+      };
+
+      children.push(new QiitaItem(item, TreeItemCollapsibleState.None, command));
+    }
+
+    // アイテムが最後まで読み込まれていない場合、「さらに読み込む...」を挿入する
+    if (!itemsStore.done) {
+      children.push(new ExpandItems(TreeItemCollapsibleState.None));
+    }
+
+    return children;
+  }
+}
+
+export const qiitaItemsProvider = new QiitaItemsProvider();
diff --git a/src/extension.ts b/src/extension.ts
@@ -4,11 +4,11 @@ import { compose } from './commands/compose';
 import { deleteItem } from './commands/deleteItem';
 import { editTags } from './commands/editTags';
 import { editTitle } from './commands/editTitle';
+import { expandItems } from './commands/expandItems';
 import { makePublic } from './commands/makePublic';
 import { openItem } from './commands/openItem';
 import { openItemExternal } from './commands/openItemExternal';
-import { qiitaItemsProvider } from './explorer/qiitaItems';
-import './polyfills';
+import { qiitaItemsProvider } from './explorers/qiitaItems';
 
 nls.config(process.env.VSCODE_NLS_CONFIG as nls.Options)();
 
@@ -23,6 +23,7 @@ export function activate (context: ExtensionContext) {
     commands.registerCommand('qiita.openItemExternal', openItemExternal),
     commands.registerCommand('qiita.deleteItem', deleteItem),
     commands.registerCommand('qiita.editTitle', editTitle),
+    commands.registerCommand('qiita.expandItems', expandItems),
   );
 }
 
diff --git a/src/stores/itemsStore.ts b/src/stores/itemsStore.ts
@@ -0,0 +1,38 @@
+import { Item } from 'qiita-js-2';
+import { client } from '../client';
+import '../polyfills';
+
+export class ItemsStore {
+  /** 自分の投稿の配列 */
+  public items = new Set<Item>();
+
+  /** 最後のページまで行ったかどうか */
+  public done = false;
+
+  /** 自分の投稿の配列を返すイテラブル */
+  protected itemsIterable = client.fetchMyItems({ page: 1, per_page: 60 });
+
+  /**
+   * イテラブルを初期化して最初のページを再取得
+   */
+  public async refreshItems () {
+    const { value: items, done } = await this.itemsIterable.next('reset');
+    this.items = new Set<Item>(items);
+    this.done  = done;
+  }
+
+  /**
+   * イテラブルのnextを呼び出し
+   */
+  public async expandItems () {
+    const { value: items, done } = await this.itemsIterable.next();
+
+    items.forEach((item) => {
+      this.items.add(item);
+    });
+
+    this.done  = done;
+  }
+}
+
+export const itemsStore = new ItemsStore();
