From ecf01e867fd78164c8c9e748d0d82b6216a60a82 Mon Sep 17 00:00:00 2001
From: hdn <hieudn5293@yahoo.de>
Date: Mon, 26 Dec 2022 01:43:53 +0100
Subject: [PATCH] feat(commands.extract): let user choose name

---
 client/src/extension.ts                       | 12 ++----
 client/src/feature/userInput/userInput.ts     | 37 +++++--------------
 .../extractComponent/extractComponent.ts      | 13 ++++---
 3 files changed, 21 insertions(+), 41 deletions(-)

diff --git a/client/src/extension.ts b/client/src/extension.ts
index c11b125e..d7b60ff0 100644
--- a/client/src/extension.ts
+++ b/client/src/extension.ts
@@ -103,20 +103,14 @@ export async function activate(context: ExtensionContext) {
   //   vscode.window.showWarningMessage(message, 'Close')
   // })
 
-  client.onRequest('get-component-name', () => {
-    getUserInputCommand(context);
-
-    var editor = window.activeTextEditor;
-    /* prettier-ignore */ console.log('>>>> _ >>>> ~ file: extension.ts ~ line 115 ~ editor?.selections', editor?.selections)
-
-    // const message = '[Aurelia] No tsconfig.json found. Please visit the [Usage section](https://github.com/aurelia/vscode-extension#1-usage) for more information.';
-    // window.showWarningMessage(message, 'Close')
+  client.onRequest('get-component-name', async () => {
+    const userInput = await getUserInputCommand(context);
+    return userInput;
   });
 
   client.onRequest('get-editer-selections', () => {
     var editor = window.activeTextEditor;
     const documentText = editor?.document.getText();
-    /* prettier-ignore */ console.log('>>>> _ >>>> ~ file: extension.ts ~ line 120 ~ documentText', documentText)
     return {
       documentText,
       documentUri: editor?.document.uri.toString(),
diff --git a/client/src/feature/userInput/userInput.ts b/client/src/feature/userInput/userInput.ts
index f76e1cb6..b21a5221 100644
--- a/client/src/feature/userInput/userInput.ts
+++ b/client/src/feature/userInput/userInput.ts
@@ -3,31 +3,14 @@ import { CREATE_COMPONEN_TEXT } from '../../shared/constants';
 import { GetComponentState } from '../../shared/types/types';
 import { multiStepInput } from './multiStepInput';
 
-export function getUserInputCommand(context: ExtensionContext) {
-  // return commands.registerCommand('get-component-name', async () => {
-  const outsideState = {};
-  const options: {
-    [key: string]: (context: ExtensionContext) => Promise<void>;
-  } = {
-    [CREATE_COMPONEN_TEXT]: multiStepInput(
-      outsideState,
-      (state: GetComponentState) => {
-        /* prettier-ignore */ console.log('>>>> _ >>>> ~ file: userInput.ts ~ line 16 ~ state.name', state.name)
-      }
-    ),
-  };
-  const quickPick = window.createQuickPick();
-  quickPick.items = Object.keys(options).map((label) => ({ label }));
-  quickPick.onDidChangeSelection((selection) => {
-    /* prettier-ignore */ console.log('>>>> _ >>>> ~ file: userInput.ts ~ line 16 ~ selection', selection)
-    if (selection[0]) {
-      options[selection[0].label](context).catch(console.error);
-    }
-  });
-  quickPick.onDidHide(() => {
-    /* prettier-ignore */ console.log('>>>> _ >>>> ~ file: userInput.ts ~ line 23 ~ outsideState', outsideState)
-    quickPick.dispose();
-  });
-  quickPick.show();
-  // });
+export async function getUserInputCommand(context: ExtensionContext) {
+  const result = await window.showInputBox({
+		// value: 'abcdef',
+		// valueSelection: [2, 4],
+		placeHolder: 'Enter component name',
+		// validateInput: text => {
+		// 	return text === '123' ? 'Not 123!' : null;
+		// }
+	});
+  return result
 }
diff --git a/server/src/feature/commands/extractComponent/extractComponent.ts b/server/src/feature/commands/extractComponent/extractComponent.ts
index 051cf400..3baeb1d2 100644
--- a/server/src/feature/commands/extractComponent/extractComponent.ts
+++ b/server/src/feature/commands/extractComponent/extractComponent.ts
@@ -8,7 +8,10 @@ import {
   GetEditorSelectionResponse,
   UserSuppliedTemplatesFunctions,
 } from '../../../common/types/types';
-import { AureliaProjects, IAureliaProject } from '../../../core/AureliaProjects';
+import {
+  AureliaProjects,
+  IAureliaProject,
+} from '../../../core/AureliaProjects';
 import {
   AllDocumentsInjection,
   ConnectionInjection,
@@ -24,6 +27,7 @@ import { AureliaUtils } from '../../../common/AureliaUtils';
 import { IAureliaClassMember } from '../../../aot/aotTypes';
 
 const workspaceUpdates = new WorkspaceUpdates();
+const getComponentNameRequest = new RequestType('get-component-name');
 
 export class ExtractComponent {
   constructor(
@@ -34,8 +38,7 @@ export class ExtractComponent {
   ) {}
 
   async initExtractComponent() {
-    // const componentName = await getComponentName(connection);
-    const componentName = 'hello-world';
+    const componentName = await this.getComponentName();
     /* prettier-ignore */ console.log('>>>> _ >>>> ~ file: extractComponent.ts ~ line 7 ~ componentName', componentName)
 
     // 2. Get Selection
@@ -198,8 +201,8 @@ export class ExtractComponent {
   }
 
   private async getComponentName() {
-    const req = new RequestType('get-component-name');
-    this.connection.sendRequest(req);
+    const result = await this.connection.sendRequest(getComponentNameRequest);
+    return result as string;
   }
 
   private extractSelectedTexts(