get username list

https://youtrack.weseek.co.jp/issue/GW-7773
- Convert CommentMentionHelper to ts
- Filter username based on query
- Show username on the hint

packages/app/src/components/PageEditor/CommentMentionHelper.tsx → packages/app/src/components/PageEditor/CommentMentionHelper.ts

@@ -1,3 +1,4 @@
+import { apiv3Get } from '~/client/util/apiv3-client';
 
 export default class CommentMentionHelper {
 
@@ -5,9 +6,10 @@ export default class CommentMentionHelper {
 
   pattern: RegExp;
 
+
   constructor(editor) {
     this.editor = editor;
-    this.pattern = /@[A-Za-z0-9._-]*/;
+    this.pattern = /@[A-Za-z0-9._-]{1,}/;
   }
 
   showUsernameHint = () => {
@@ -28,8 +30,10 @@ export default class CommentMentionHelper {
       hint: () => {
         const mention = this.editor.getDoc().getRange(sc.from(), sc.to());
         const username = mention.replace('@', '');
+        const users = this.getUsersList(username);
+
         return {
-          list: ['username1', 'username2'],
+          list: users,
           from: sc.from(),
           to: sc.to(),
         };
@@ -37,4 +41,11 @@ export default class CommentMentionHelper {
     });
   }
 
+  getUsersList = async(username) => {
+    const { data } = await apiv3Get('/users/list', { username });
+    return data.users.map(user => ({
+      ...user,
+    }));
+  }
+
 }

packages/app/src/server/routes/apiv3/users.js

@@ -12,9 +12,8 @@ const path = require('path');
 
 const { body, query } = require('express-validator');
 const { isEmail } = require('validator');
-const { serializeUserSecurely } = require('../../models/serializers/user-serializer');
-const { serializePageSecurely } = require('../../models/serializers/page-serializer');
 
+const { serializeUserSecurely } = require('../../models/serializers/user-serializer');
 const ErrorV3 = require('../../models/vo/error-apiv3');
 
 const PAGE_ITEMS = 50;
@@ -899,11 +898,14 @@ module.exports = (crowi) => {
    */
   router.get('/list', accessTokenParser, loginRequired, async(req, res) => {
     const userIds = req.query.userIds || null;
-
+    const username = req.query.username || null;
     let userFetcher;
     if (!userIds || userIds.split(',').length <= 0) {
       userFetcher = User.findAllUsers();
     }
+    else if (username !== null) {
+      userFetcher = User.find({ username: { $regex: username } });
+    }
     else {
       userFetcher = User.findUsersByIds(userIds.split(','));
     }