refactor: Splitting API requests from app.js (#1166)

* splitting API requests form app.js

* fix: vip friends display issue

src/classes/apiRequestHandler.js

@@ -297,6 +297,19 @@ export default class extends baseClass {
         };
 
         API.bulk = function (options) {
+            // it's stupid, but I won't waste time on the 'this' context
+            // works, that's enough.
+            if (typeof options.fn === 'function') {
+                options
+                    .fn(options.params)
+                    .catch((err) => {
+                        if ('done' in options) {
+                            options.done.call(this, false, options);
+                        }
+                        throw err;
+                    })
+                    .then((args) => this.$bulk(options, args));
+            } else {
                 this[options.fn](options.params)
                     .catch((err) => {
                         if ('done' in options) {
@@ -305,6 +318,7 @@ export default class extends baseClass {
                         throw err;
                     })
                     .then((args) => this.$bulk(options, args));
+            }
         };
 
         API.statusCodes = {

src/classes/booping.js

@@ -1,4 +1,5 @@
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { notificationRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -62,7 +63,7 @@ export default class extends baseClass {
                 ) {
                     continue;
                 }
-                API.sendNotificationResponse({
+                notificationRequest.sendNotificationResponse({
                     notificationId: ref.id,
                     responseType: 'delete',
                     responseData: ''

src/classes/discordRpc.js

@@ -1,5 +1,6 @@
 import configRepository from '../repository/config.js';
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { worldRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -48,11 +49,14 @@ export default class extends baseClass {
                         L.thumbnailImageUrl = ref.thumbnailImageUrl;
                         L.worldCapacity = ref.capacity;
                     } else {
-                        API.getWorld({
+                        worldRequest
+                            .getWorld({
                                 worldId: L.worldId
-                        }).then((args) => {
+                            })
+                            .then((args) => {
                                 L.worldName = args.ref.name;
-                            L.thumbnailImageUrl = args.ref.thumbnailImageUrl;
+                                L.thumbnailImageUrl =
+                                    args.ref.thumbnailImageUrl;
                                 L.worldCapacity = args.ref.capacity;
                                 return args;
                             });

src/classes/gameLog.js

@@ -3,6 +3,7 @@ import gameLogService from '../service/gamelog.js';
 import configRepository from '../repository/config.js';
 import database from '../repository/database.js';
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { userRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -144,7 +145,7 @@ export default class extends baseClass {
                         if (this.debugGameLog || this.debugWebRequests) {
                             console.log('Fetching user from gameLog:', userId);
                         }
-                        API.getUser({ userId });
+                        userRequest.getUser({ userId });
                     }
                     this.updateVRLastLocation();
                     this.getCurrentInstanceUserList();

src/classes/gameRealtimeLogging.js

@@ -2,6 +2,7 @@ import * as workerTimers from 'worker-timers';
 import configRepository from '../repository/config.js';
 import database from '../repository/database.js';
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { instanceRequest, userRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -1021,7 +1022,9 @@ export default class extends baseClass {
         },
 
         async addPhotonPortalSpawn(gameLogDate, userId, shortName, worldName) {
-            var instance = await API.getInstanceFromShortName({ shortName });
+            var instance = await instanceRequest.getInstanceFromShortName({
+                shortName
+            });
             var location = instance.json.location;
             var L = $utils.parseLocation(location);
             var groupName = '';
@@ -1142,7 +1145,7 @@ export default class extends baseClass {
                     typeof ref.id === 'undefined'
                 ) {
                     try {
-                        var args = await API.getUser({
+                        var args = await userRequest.getUser({
                             userId: user.id
                         });
                         ref = args.ref;

src/classes/groups.js

@@ -1,6 +1,7 @@
 import * as workerTimers from 'worker-timers';
 import configRepository from '../repository/config.js';
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { userRequest, worldRequest, instanceRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -1157,14 +1158,16 @@ export default class extends baseClass {
                         fetchedAt: args.json.fetchedAt
                     }
                 });
-                this.getCachedWorld({
+                worldRequest
+                    .getCachedWorld({
                         worldId: json.world.id
-                }).then((args1) => {
+                    })
+                    .then((args1) => {
                         json.world = args1.ref;
                         return args1;
                     });
                 // get queue size etc
-                this.getInstance({
+                instanceRequest.getInstance({
                     worldId: json.worldId,
                     instanceId: json.instanceId
                 });
@@ -1966,10 +1969,10 @@ export default class extends baseClass {
         },
 
         async groupOwnerChange(ref, oldUserId, newUserId) {
-            var oldUser = await API.getCachedUser({
+            var oldUser = await userRequest.getCachedUser({
                 userId: oldUserId
             });
-            var newUser = await API.getCachedUser({
+            var newUser = await userRequest.getCachedUser({
                 userId: newUserId
             });
             var oldDisplayName = oldUser?.ref?.displayName;
@@ -2180,9 +2183,11 @@ export default class extends baseClass {
                         D.ref = args.ref;
                         D.inGroup = args.ref.membershipStatus === 'member';
                         D.ownerDisplayName = args.ref.ownerId;
-                        API.getCachedUser({
+                        userRequest
+                            .getCachedUser({
                                 userId: args.ref.ownerId
-                        }).then((args1) => {
+                            })
+                            .then((args1) => {
                                 D.ownerDisplayName = args1.ref.displayName;
                                 return args1;
                             });
@@ -2733,7 +2738,7 @@ export default class extends baseClass {
             }
 
             if (userId) {
-                API.getCachedUser({ userId }).then((args) => {
+                userRequest.getCachedUser({ userId }).then((args) => {
                     D.userObject = args.ref;
                 });
                 D.userIds = [userId];
@@ -3604,7 +3609,7 @@ export default class extends baseClass {
                 return;
             }
 
-            var userArgs = await API.getCachedUser({
+            var userArgs = await userRequest.getCachedUser({
                 userId
             });
             member.userId = userArgs.json.id;

src/classes/languages.js

@@ -1,4 +1,5 @@
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { userRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -128,11 +129,13 @@ export default class extends baseClass {
             if (language !== String(language)) {
                 return;
             }
-            var D = this.languageDialog;
+            const D = this.languageDialog;
             D.loading = true;
-            API.addUserTags({
+            userRequest
+                .addUserTags({
                     tags: [`language_${language}`]
-            }).finally(function () {
+                })
+                .finally(function () {
                     D.loading = false;
                 });
         },
@@ -141,11 +144,13 @@ export default class extends baseClass {
             if (language !== String(language)) {
                 return;
             }
-            var D = this.languageDialog;
+            const D = this.languageDialog;
             D.loading = true;
-            API.removeUserTags({
+            userRequest
+                .removeUserTags({
                     tags: [`language_${language}`]
-            }).finally(function () {
+                })
+                .finally(function () {
                     D.loading = false;
                 });
         },

src/classes/prompts.js

@@ -2,6 +2,7 @@ import * as workerTimers from 'worker-timers';
 import configRepository from '../repository/config.js';
 import database from '../repository/database.js';
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { avatarRequest, worldRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -418,10 +419,12 @@ export default class extends baseClass {
                             action === 'confirm' &&
                             instance.inputValue !== avatar.ref.name
                         ) {
-                            API.saveAvatar({
+                            avatarRequest
+                                .saveAvatar({
                                     id: avatar.id,
                                     name: instance.inputValue
-                            }).then((args) => {
+                                })
+                                .then((args) => {
                                     this.$message({
                                         message: $t(
                                             'prompt.rename_avatar.message.success'
@@ -457,10 +460,12 @@ export default class extends baseClass {
                             action === 'confirm' &&
                             instance.inputValue !== avatar.ref.description
                         ) {
-                            API.saveAvatar({
+                            avatarRequest
+                                .saveAvatar({
                                     id: avatar.id,
                                     description: instance.inputValue
-                            }).then((args) => {
+                                })
+                                .then((args) => {
                                     this.$message({
                                         message: $t(
                                             'prompt.change_avatar_description.message.success'
@@ -490,10 +495,12 @@ export default class extends baseClass {
                             action === 'confirm' &&
                             instance.inputValue !== world.ref.name
                         ) {
-                            API.saveWorld({
+                            worldRequest
+                                .saveWorld({
                                     id: world.id,
                                     name: instance.inputValue
-                            }).then((args) => {
+                                })
+                                .then((args) => {
                                     this.$message({
                                         message: $t(
                                             'prompt.rename_world.message.success'
@@ -527,10 +534,12 @@ export default class extends baseClass {
                             action === 'confirm' &&
                             instance.inputValue !== world.ref.description
                         ) {
-                            API.saveWorld({
+                            worldRequest
+                                .saveWorld({
                                     id: world.id,
                                     description: instance.inputValue
-                            }).then((args) => {
+                                })
+                                .then((args) => {
                                     this.$message({
                                         message: $t(
                                             'prompt.change_world_description.message.success'
@@ -563,10 +572,12 @@ export default class extends baseClass {
                             action === 'confirm' &&
                             instance.inputValue !== world.ref.capacity
                         ) {
-                            API.saveWorld({
+                            worldRequest
+                                .saveWorld({
                                     id: world.id,
                                     capacity: instance.inputValue
-                            }).then((args) => {
+                                })
+                                .then((args) => {
                                     this.$message({
                                         message: $t(
                                             'prompt.change_world_capacity.message.success'
@@ -600,10 +611,12 @@ export default class extends baseClass {
                             instance.inputValue !==
                                 world.ref.recommendedCapacity
                         ) {
-                            API.saveWorld({
+                            worldRequest
+                                .saveWorld({
                                     id: world.id,
                                     recommendedCapacity: instance.inputValue
-                            }).then((args) => {
+                                })
+                                .then((args) => {
                                     this.$message({
                                         message: $t(
                                             'prompt.change_world_recommended_capacity.message.success'
@@ -663,10 +676,12 @@ export default class extends baseClass {
                                 instance.inputValue !==
                                 world.ref.previewYoutubeId
                             ) {
-                                API.saveWorld({
+                                worldRequest
+                                    .saveWorld({
                                         id: world.id,
                                         previewYoutubeId: instance.inputValue
-                                }).then((args) => {
+                                    })
+                                    .then((args) => {
                                         this.$message({
                                             message: $t(
                                                 'prompt.change_world_preview.message.success'

src/classes/request/avatar.js

@@ -0,0 +1,159 @@
+// #region | API: Avatar
+
+const avatarReq = {
+    /**
+     * @param {{ avatarId: string }} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    getAvatar(params) {
+        return window.API.call(`avatars/${params.avatarId}`, {
+            method: 'GET'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('AVATAR', args);
+            return args;
+        });
+    },
+
+    /**
+     * @typedef {{
+     *     n: number,
+     *     offset: number,
+     *     search: string,
+     *     userId: string,
+     *     user: 'me' | 'friends'
+     *     sort: 'created' | 'updated' | 'order' | '_created_at' | '_updated_at',
+     *     order: 'ascending' | 'descending',
+     *     releaseStatus: 'public' | 'private' | 'hidden' | 'all',
+     *     featured: boolean
+     * }} GetAvatarsParameter
+     */
+    /**
+     *
+     * @param {GetAvatarsParameter} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    getAvatars(params) {
+        return window.API.call('avatars', {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('AVATAR:LIST', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{ id: string, releaseStatus: 'public' | 'private' }} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    saveAvatar(params) {
+        return window.API.call(`avatars/${params.id}`, {
+            method: 'PUT',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('AVATAR:SAVE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{avatarId: string }} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    selectAvatar(params) {
+        return window.API.call(`avatars/${params.avatarId}/select`, {
+            method: 'PUT',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('AVATAR:SELECT', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ avatarId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    selectFallbackAvatar(params) {
+        return window.API.call(`avatars/${params.avatarId}/selectfallback`, {
+            method: 'PUT',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('AVATAR:SELECT', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ avatarId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    deleteAvatar(params) {
+        return window.API.call(`avatars/${params.avatarId}`, {
+            method: 'DELETE'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('AVATAR:DELETE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ avatarId: string }} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    createImposter(params) {
+        return window.API.call(`avatars/${params.avatarId}/impostor/enqueue`, {
+            method: 'POST'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('AVATAR:IMPOSTER:CREATE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ avatarId: string }} params
+     * @returns {Promise<{json: T, params}>}
+     */
+    deleteImposter(params) {
+        return window.API.call(`avatars/${params.avatarId}/impostor`, {
+            method: 'DELETE'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('AVATAR:IMPOSTER:DELETE', args);
+            return args;
+        });
+    }
+};
+// #endregion
+
+export default avatarReq;

src/classes/request/friend.js

@@ -0,0 +1,111 @@
+// #region | API: Friend
+
+const friendReq = {
+    /**
+     * Fetch friends of current user.
+     * @param {{ n: number, offset: number, offline: boolean }} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    getFriends(params) {
+        return window.API.call('auth/user/friends', {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('FRIEND:LIST', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ userId: string }} params
+     * @returns {Promise<{json: T, params}>}
+     */
+    sendFriendRequest(params) {
+        return window.API.call(`user/${params.userId}/friendRequest`, {
+            method: 'POST'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('FRIEND:REQUEST', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ userId: string }} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    cancelFriendRequest(params) {
+        return window.API.call(`user/${params.userId}/friendRequest`, {
+            method: 'DELETE'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('FRIEND:REQUEST:CANCEL', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ userId: string }} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    deleteFriend(params) {
+        return window.API.call(`auth/user/friends/${params.userId}`, {
+            method: 'DELETE'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('FRIEND:DELETE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ userId: string }} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    getFriendStatus(params) {
+        return window.API.call(`user/${params.userId}/friendStatus`, {
+            method: 'GET'
+        }).then((json) => {
+            console.log('getFriendStatus', json);
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('FRIEND:STATUS', args);
+            return args;
+        });
+    },
+
+    // ------------------- need to test -------------------
+
+    deleteHiddenFriendRequest(params, userId) {
+        return window.API.call(`user/${userId}/friendRequest`, {
+            method: 'DELETE',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params,
+                userId
+            };
+            window.API.$emit('NOTIFICATION:HIDE', args);
+            return args;
+        });
+    }
+};
+// #endregion
+
+export default friendReq;

src/classes/request/index.js

@@ -0,0 +1,23 @@
+/**
+ * API requests
+ * Export all API requests from here
+ *
+ * "window.API" is used as app.js is a large IIFE, preventing direct API export. No current issues
+ * Refactoring may be required
+ */
+
+import userRequest from './user';
+import worldRequest from './world';
+import instanceRequest from './instance';
+import friendRequest from './friend';
+import avatarRequest from './avatar';
+import notificationRequest from './notification';
+
+export {
+    userRequest,
+    worldRequest,
+    instanceRequest,
+    friendRequest,
+    avatarRequest,
+    notificationRequest
+};

src/classes/request/instance.js

@@ -0,0 +1,141 @@
+// #region | API: Instance
+
+const instanceReq = {
+    /**
+     * @param {{worldId: string, instanceId: string}} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    getInstance(params) {
+        return window.API.call(
+            `instances/${params.worldId}:${params.instanceId}`,
+            {
+                method: 'GET'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('INSTANCE', args);
+            return args;
+        });
+    },
+
+    /**
+     * CreateInstanceParameter
+     * @typedef {Object} CreateInstanceParameter
+     * @property {string} worldId
+     * @property {string} type
+     * @property {string} region
+     * @property {string} ownerId
+     * @property {string[]} roleIds
+     * @property {string} groupAccessType
+     * @property {boolean} queueEnabled
+     */
+    /**
+     * @param {CreateInstanceParameter} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    createInstance(params) {
+        return window.API.call('instances', {
+            method: 'POST',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('INSTANCE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ worldId: string, instanceId: string, shortName: string }} instance
+     * @returns {Promise<{instance, json: T, params: {}}>}
+     */
+    getInstanceShortName(instance) {
+        const params = {};
+        if (instance.shortName) {
+            params.shortName = instance.shortName;
+        }
+        return window.API.call(
+            `instances/${instance.worldId}:${instance.instanceId}/shortName`,
+            {
+                method: 'GET',
+                params
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                instance,
+                params
+            };
+            window.API.$emit('INSTANCE:SHORTNAME', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ shortName: string }} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    getInstanceFromShortName(params) {
+        return window.API.call(`instances/s/${params.shortName}`, {
+            method: 'GET'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('INSTANCE', args);
+            return args;
+        });
+    },
+
+    /**
+     * Send invite to current user.
+     * @param {{ worldId: string, instanceId: string, shortName: string }} instance
+     * @returns {Promise<{instance, json: any, params}>}
+     */
+    selfInvite(instance) {
+        /**
+         * @type {{ shortName?: string }}
+         */
+        const params = {};
+        if (instance.shortName) {
+            params.shortName = instance.shortName;
+        }
+        return window.API.call(
+            `invite/myself/to/${instance.worldId}:${instance.instanceId}`,
+            {
+                method: 'POST',
+                params
+            }
+        )
+            .then((json) => {
+                return {
+                    json,
+                    instance,
+                    params
+                };
+            })
+            .catch((err) => {
+                if (err?.error?.message) {
+                    window.$app.$message({
+                        message: err.error.message,
+                        type: 'error'
+                    });
+                    throw err;
+                }
+                window.$app.$message({
+                    message: window.$t('message.instance.not_allowed'),
+                    type: 'error'
+                });
+                throw err;
+            });
+    }
+};
+// #endregion
+
+export default instanceReq;

src/classes/request/notification.js

@@ -0,0 +1,305 @@
+// #region | API: Notification
+
+const notificationReq = {
+    /** @typedef {{
+     *      n: number,
+     *      offset: number,
+     *      sent: boolean,
+     *      type: string,
+     *      //  (ISO8601 or 'five_minutes_ago')
+     *      after: 'five_minutes_ago' | (string & {})
+     * }} NotificationFetchParameter
+     */
+
+    /**
+     *
+     * @param {NotificationFetchParameter} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    getNotifications(params) {
+        return window.API.call('auth/user/notifications', {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('NOTIFICATION:LIST', args);
+            return args;
+        });
+    },
+
+    getHiddenFriendRequests(params) {
+        return window.API.call('auth/user/notifications', {
+            method: 'GET',
+            params: {
+                type: 'friendRequest',
+                hidden: true,
+                ...params
+            }
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('NOTIFICATION:LIST:HIDDEN', args);
+            return args;
+        });
+    },
+
+    getNotificationsV2(params) {
+        return window.API.call('notifications', {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('NOTIFICATION:V2:LIST', args);
+            return args;
+        });
+    },
+
+    /**
+     * string that represents valid serialized JSON of T's value
+     * @template T=any
+     * @typedef {string} JsonString
+     */
+
+    /**
+     * @param {{
+     * receiverUserId: string,
+     * type: string,
+     * message: string,
+     * seen: boolean,
+     * details: JsonString<any>
+     *  }} params
+     * @param receiverUserId
+     * @return { Promise<{json: any, params}> }
+     */
+    sendInvite(params, receiverUserId) {
+        return window.API.call(`invite/${receiverUserId}`, {
+            method: 'POST',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params,
+                receiverUserId
+            };
+            window.API.$emit('NOTIFICATION:INVITE:SEND', args);
+            return args;
+        });
+    },
+    sendInvitePhoto(params, receiverUserId) {
+        return window.API.call(`invite/${receiverUserId}/photo`, {
+            uploadImageLegacy: true,
+            postData: JSON.stringify(params),
+            imageData: window.$app.uploadImage
+        }).then((json) => {
+            const args = {
+                json,
+                params,
+                receiverUserId
+            };
+            window.API.$emit('NOTIFICATION:INVITE:PHOTO:SEND', args);
+            return args;
+        });
+    },
+
+    sendRequestInvite(params, receiverUserId) {
+        return window.API.call(`requestInvite/${receiverUserId}`, {
+            method: 'POST',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params,
+                receiverUserId
+            };
+            window.API.$emit('NOTIFICATION:REQUESTINVITE:SEND', args);
+            return args;
+        });
+    },
+
+    sendRequestInvitePhoto(params, receiverUserId) {
+        return window.API.call(`requestInvite/${receiverUserId}/photo`, {
+            uploadImageLegacy: true,
+            postData: JSON.stringify(params),
+            imageData: window.$app.uploadImage
+        }).then((json) => {
+            const args = {
+                json,
+                params,
+                receiverUserId
+            };
+            window.API.$emit('NOTIFICATION:REQUESTINVITE:PHOTO:SEND', args);
+            return args;
+        });
+    },
+
+    sendInviteResponse(params, inviteId) {
+        return window.API.call(`invite/${inviteId}/response`, {
+            method: 'POST',
+            params,
+            inviteId
+        }).then((json) => {
+            const args = {
+                json,
+                params,
+                inviteId
+            };
+            window.API.$emit('INVITE:RESPONSE:SEND', args);
+            return args;
+        });
+    },
+
+    sendInviteResponsePhoto(params, inviteId) {
+        return window.API.call(`invite/${inviteId}/response/photo`, {
+            uploadImageLegacy: true,
+            postData: JSON.stringify(params),
+            imageData: window.$app.uploadImage,
+            inviteId
+        }).then((json) => {
+            const args = {
+                json,
+                params,
+                inviteId
+            };
+            window.API.$emit('INVITE:RESPONSE:PHOTO:SEND', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ notificationId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    acceptFriendRequestNotification(params) {
+        return window.API.call(
+            `auth/user/notifications/${params.notificationId}/accept`,
+            {
+                method: 'PUT'
+            }
+        )
+            .then((json) => {
+                const args = {
+                    json,
+                    params
+                };
+                window.API.$emit('NOTIFICATION:ACCEPT', args);
+                return args;
+            })
+            .catch((err) => {
+                // if friend request could not be found, delete it
+                if (err && err.message && err.message.includes('404')) {
+                    window.API.$emit('NOTIFICATION:HIDE', { params });
+                }
+            });
+    },
+
+    /**
+     * @param {{ notificationId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    hideNotification(params) {
+        return window.API.call(
+            `auth/user/notifications/${params.notificationId}/hide`,
+            {
+                method: 'PUT'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('NOTIFICATION:HIDE', args);
+            return args;
+        });
+    },
+
+    // ------------------- need to test -------------------
+
+    /**
+     * @param {{
+     * notificationId: string,
+     * responseType: string,
+     * responseData: string
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    sendNotificationResponse(params) {
+        return window.API.call(
+            `notifications/${params.notificationId}/respond`,
+            {
+                method: 'POST',
+                params
+            }
+        )
+            .then((json) => {
+                const args = {
+                    json,
+                    params
+                };
+                window.API.$emit('NOTIFICATION:RESPONSE', args);
+                return args;
+            })
+            .catch((err) => {
+                // TODO: need to test
+                // something went wrong, lets assume it's already expired
+                window.API.$emit('NOTIFICATION:HIDE', { params });
+                notificationReq.hideNotificationV2(params.notificationId);
+                throw err;
+            });
+    },
+    // use in sendNotificationResponse
+    hideNotificationV2(notificationId) {
+        return window.API.call(`notifications/${notificationId}`, {
+            method: 'DELETE'
+        }).then((json) => {
+            const args = {
+                json,
+                params: {
+                    notificationId
+                }
+            };
+            window.API.$emit('NOTIFICATION:V2:HIDE', args);
+            return args;
+        });
+    }
+
+    // ------------------ look like no place use these requests ------------------
+
+    // sendInviteGalleryPhoto(params, receiverUserId) {
+    //     return window.API.call(`invite/${receiverUserId}/photo`, {
+    //         method: 'POST',
+    //         params
+    //     }).then((json) => {
+    //         const args = {
+    //             json,
+    //             params,
+    //             receiverUserId
+    //         };
+    //         window.API.$emit('NOTIFICATION:INVITE:GALLERYPHOTO:SEND', args);
+    //         return args;
+    //     });
+    // },
+
+    // API.clearNotifications = function () {
+    //     return this.call('auth/user/notifications/clear', {
+    //         method: 'PUT'
+    //     }).then((json) => {
+    //         var args = {
+    //             json
+    //         };
+    //         // FIXME: NOTIFICATION:CLEAR 핸들링
+    //         this.$emit('NOTIFICATION:CLEAR', args);
+    //         return args;
+    //     });
+    // };
+};
+// #endregion
+
+export default notificationReq;

src/classes/request/user.js

@@ -0,0 +1,131 @@
+// #region | API: User
+
+const userReq = {
+    /**
+     * Fetch user from API.
+     * @param {{ userId: string }} params identifier of registered user
+     * @returns {Promise<{json: any, params}>}
+     */
+    getUser(params) {
+        return window.API.call(`users/${params.userId}`, {
+            method: 'GET'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('USER', args);
+            return args;
+        });
+    },
+
+    /**
+     * Fetch user from cache if they're in it. Otherwise, calls API.
+     * @param {{ userId: string }} params identifier of registered user
+     * @returns {Promise<{json: any, params}>}
+     */
+    getCachedUser(params) {
+        return new Promise((resolve, reject) => {
+            const ref = window.API.cachedUsers.get(params.userId);
+            if (typeof ref === 'undefined') {
+                userReq.getUser(params).catch(reject).then(resolve);
+            } else {
+                resolve({
+                    cache: true,
+                    json: ref,
+                    params,
+                    ref
+                });
+            }
+        });
+    },
+
+    /**
+     * @typedef {object} GetUsersParameters
+     * @property {number} n
+     * @property {number} offset
+     * @property {string} search
+     * @property {'nuisanceFactor' | 'created' | '_created_at' | 'last_login'} sort
+     * @property {'ascending' | 'descending'} order
+     */
+    /**
+     * Fetch multiple users from API.
+     * @param params {GetUsersParameters} filtering and sorting parameters
+     * @returns {Promise<{json: any, params}>}
+     */
+    getUsers(params) {
+        return window.API.call('users', {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('USER:LIST', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param params {string[]}
+     * @returns {Promise<{json: any, params}>}
+     */
+    addUserTags(params) {
+        return window.API.call(`users/${window.API.currentUser.id}/addTags`, {
+            method: 'POST',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('USER:CURRENT:SAVE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param params {string[]}
+     * @returns {Promise<{json: any, params}>}
+     */
+    removeUserTags(params) {
+        return window.API.call(
+            `users/${window.API.currentUser.id}/removeTags`,
+            {
+                method: 'POST',
+                params
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('USER:CURRENT:SAVE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param params {{ userId: string }}
+     * @returns {Promise<{json: any, params}>}
+     */
+    getUserFeedback(params) {
+        return window.API.call(`users/${params.userId}/feedback`, {
+            method: 'GET',
+            params: {
+                n: 100
+            }
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('USER:FEEDBACK', args);
+            return args;
+        });
+    }
+};
+// #endregion
+
+export default userReq;

src/classes/request/world.js

@@ -0,0 +1,151 @@
+// #region | API: World
+
+const worldReq = {
+    /**
+     * @param {{worldId: string}} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    getWorld(params) {
+        return window.API.call(`worlds/${params.worldId}`, {
+            method: 'GET'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('WORLD', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{worldId: string}} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    getCachedWorld(params) {
+        return new Promise((resolve, reject) => {
+            const ref = window.API.cachedWorlds.get(params.worldId);
+            if (typeof ref === 'undefined') {
+                worldReq.getWorld(params).catch(reject).then(resolve);
+            } else {
+                resolve({
+                    cache: true,
+                    json: ref,
+                    params,
+                    ref
+                });
+            }
+        });
+    },
+
+    /**
+     * @typedef {object} WorldSearchParameter
+     * @property {number} n
+     * @property {number} offset
+     * @property {string} search
+     * @property {string} userId
+     * @property {'me' | 'friend'} user
+     * @property {'popularity' | 'heat' | 'trust' | 'shuffle' | 'favorites' | 'reportScore' | 'reportCount' | 'publicationDate' | 'labsPublicationDate' | 'created' | '_created_at' | 'updated' | '_updated_at' | 'order'} sort
+     * @property {'ascending' | 'descending'} order
+     * @property {'public' | 'private' | 'hidden' | 'all'} releaseStatus
+     * @property {boolean} featured
+     */
+    /**
+     *
+     * @param {WorldSearchParameter} params
+     * @param {string?} option sub-path of calling endpoint
+     * @returns {Promise<{json: any, params, option}>}
+     */
+    getWorlds(params, option) {
+        let endpoint = 'worlds';
+        if (typeof option !== 'undefined') {
+            endpoint = `worlds/${option}`;
+        }
+        return window.API.call(endpoint, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params,
+                option
+            };
+            window.API.$emit('WORLD:LIST', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{worldId: string}} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    deleteWorld(params) {
+        return window.API.call(`worlds/${params.worldId}`, {
+            method: 'DELETE'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('WORLD:DELETE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{id: string}} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    saveWorld(params) {
+        return window.API.call(`worlds/${params.id}`, {
+            method: 'PUT',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('WORLD:SAVE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{worldId: string}} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    publishWorld(params) {
+        return window.API.call(`worlds/${params.worldId}/publish`, {
+            method: 'PUT',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('WORLD:SAVE', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{worldId: string}} params
+     * @returns {Promise<{json: any, params}>}
+     */
+    unpublishWorld(params) {
+        return window.API.call(`worlds/${params.worldId}/publish`, {
+            method: 'DELETE',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('WORLD:SAVE', args);
+            return args;
+        });
+    }
+};
+
+// #endregion
+
+export default worldReq;

src/classes/sharedFeed.js

@@ -1,6 +1,7 @@
 import * as workerTimers from 'worker-timers';
 import configRepository from '../repository/config.js';
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { worldRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -154,7 +155,8 @@ export default class extends baseClass {
                             wristFeed.unshift(feedEntry);
                         } else {
                             // no world cache, fetch world and try again
-                            API.getWorld({
+                            worldRequest
+                                .getWorld({
                                     worldId: ref.$location.worldId
                                 })
                                 .then((args) => {

src/classes/uiComponents.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueMarkdown from 'vue-markdown';
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { userRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -446,7 +447,7 @@ export default class extends baseClass {
                     if (this.hint) {
                         this.username = this.hint;
                     } else if (this.userid) {
-                        var args = await API.getCachedUser({
+                        var args = await userRequest.getCachedUser({
                             userId: this.userid
                         });
                     }

src/classes/vrcxNotifications.js

@@ -1,4 +1,5 @@
 import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { userRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -326,7 +327,8 @@ export default class extends baseClass {
             } else if (noty.imageUrl) {
                 imageUrl = noty.imageUrl;
             } else if (userId && !userId.startsWith('grp_')) {
-                imageUrl = await API.getCachedUser({
+                imageUrl = await userRequest
+                    .getCachedUser({
                         userId
                     })
                     .catch((err) => {

src/components/sidebar/FriendsSidebar.vue

@@ -40,7 +40,7 @@
             </div>
         </div>
         <div
-            v-show="vipFriendsByGroupStatus.length"
+            v-show="vipFriendsDisplayNumber"
             class="x-friend-group x-link"
             @click="
                 isVIPFriends = !isVIPFriends;
@@ -48,7 +48,8 @@
             ">
             <i class="el-icon-arrow-right" :class="{ rotate: isVIPFriends }"></i>
             <span style="margin-left: 5px">
-                {{ $t('side_panel.favorite') }} &horbar; {{ vipFriendsByGroupStatus.length }}
+                {{ $t('side_panel.favorite') }} &horbar;
+                {{ vipFriendsDisplayNumber }}
             </span>
         </div>
         <div v-show="isVIPFriends">
@@ -309,6 +310,11 @@
                 }
 
                 return result.sort((a, b) => a[0].key.localeCompare(b[0].key));
+            },
+            vipFriendsDisplayNumber() {
+                return this.isSidebarDivideByFriendGroup
+                    ? this.vipFriendsDivideByGroup.length
+                    : this.vipFriendsByGroupStatus.length;
             }
         },
         created() {

src/mixins/dialogs/userDialog.pug

@@ -1025,7 +1025,7 @@ mixin userDialog
                                     v-else-if='avatar.releaseStatus === "private"'
                                     style='color: #f56c6c')
                                 span.extra(v-text='avatar.releaseStatus' v-else)
-                el-tab-pane(:label='$t("dialog.user.json.header")' lazy)
+                el-tab-pane(:label='$t("dialog.user.json.header")' lazy style='height: 50vh')
                     el-button(
                         type='default'
                         @click='refreshUserDialogTreeData()'
@@ -1039,7 +1039,7 @@ mixin userDialog
                         icon='el-icon-download'
                         circle
                         style='margin-left: 5px')
-                    el-tree(:data='userDialog.treeData' style='margin-top: 5px; font-size: 12px; height: 50vh')
+                    el-tree(:data='userDialog.treeData' style='margin-top: 5px; font-size: 12px')
                         template(#default='scope')
                             span
                                 span(v-text='scope.data.key' style='font-weight: bold; margin-right: 5px')