refactor: Group Dialog (#1207)

src/classes/request/group.js

@@ -0,0 +1,773 @@
+const groupReq = {
+    /**
+     * @param {string} groupId
+     * @param {{isRepresenting: bool}} params
+     * @returns
+     */
+    setGroupRepresentation(groupId, params) {
+        return window.API.call(`groups/${groupId}/representation`, {
+            method: 'PUT',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                groupId,
+                params
+            };
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ groupId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    cancelGroupRequest(params) {
+        return window.API.call(`groups/${params.groupId}/requests`, {
+            method: 'DELETE'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+
+    /**
+     * @param {{ groupId: string, postId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    deleteGroupPost(params) {
+        return window.API.call(
+            `groups/${params.groupId}/posts/${params.postId}`,
+            {
+                method: 'DELETE'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string }} params
+     */
+    getGroup(params) {
+        return window.API.call(`groups/${params.groupId}`, {
+            method: 'GET',
+            params: {
+                includeRoles: params.includeRoles || false
+            }
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{ userId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getRepresentedGroup(params) {
+        return window.API.call(`users/${params.userId}/groups/represented`, {
+            method: 'GET'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP:REPRESENTED', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{ userId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroups(params) {
+        return window.API.call(`users/${params.userId}/groups`, {
+            method: 'GET'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP:LIST', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    joinGroup(params) {
+        return window.API.call(`groups/${params.groupId}/join`, {
+            method: 'POST'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP:JOIN', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    leaveGroup(params) {
+        return window.API.call(`groups/${params.groupId}/leave`, {
+            method: 'POST'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{ query: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    groupStrictsearch(params) {
+        return window.API.call(`groups/strictsearch`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+    userId: string,
+    groupId: string,
+    params: {
+        visibility: string,
+        isSubscribedToAnnouncements: bool,
+        managerNotes: string
+    }
+    */
+    setGroupMemberProps(userId, groupId, params) {
+        return window.API.call(`groups/${groupId}/members/${userId}`, {
+            method: 'PUT',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                userId,
+                groupId,
+                params
+            };
+            window.API.$emit('GROUP:MEMBER:PROPS', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     * userId: string,
+     * groupId: string,
+     * roleId: string
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    addGroupMemberRole(params) {
+        return window.API.call(
+            `groups/${params.groupId}/members/${params.userId}/roles/${params.roleId}`,
+            {
+                method: 'PUT'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // window.API.$emit('GROUP:MEMBER:ROLE:CHANGE', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     * userId: string,
+     * groupId: string,
+     * roleId: string
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    removeGroupMemberRole(params) {
+        return window.API.call(
+            `groups/${params.groupId}/members/${params.userId}/roles/${params.roleId}`,
+            {
+                method: 'DELETE'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // window.API.$emit('GROUP:MEMBER:ROLE:CHANGE', args);
+            return args;
+        });
+    },
+    getGroupPermissions(params) {
+        return window.API.call(`users/${params.userId}/groups/permissions`, {
+            method: 'GET'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP:PERMISSIONS', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     groupId: string,
+     n: number,
+     offset: number
+     }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupPosts(params) {
+        return window.API.call(`groups/${params.groupId}/posts`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP:POSTS', args);
+            return args;
+        });
+    },
+    editGroupPost(params) {
+        return window.API.call(
+            `groups/${params.groupId}/posts/${params.postId}`,
+            {
+                method: 'PUT',
+                params
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP:POST', args);
+            return args;
+        });
+    },
+    createGroupPost(params) {
+        return window.API.call(`groups/${params.groupId}/posts`, {
+            method: 'POST',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP:POST', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     * groupId: string,
+     * userId: string
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupMember(params) {
+        return window.API.call(
+            `groups/${params.groupId}/members/${params.userId}`,
+            {
+                method: 'GET'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // window.API.$emit('GROUP:MEMBER', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     * groupId: string,
+     * n: number,
+     * offset: number
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupMembers(params) {
+        return window.API.call(`groups/${params.groupId}/members`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP:MEMBERS', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     * groupId: string,
+     * query: string,
+     * n: number,
+     * offset: number
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupMembersSearch(params) {
+        return window.API.call(`groups/${params.groupId}/members/search`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     * groupId: string
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    blockGroup(params) {
+        return window.API.call(`groups/${params.groupId}/block`, {
+            method: 'POST'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     * groupId: string,
+     * userId: string
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    unblockGroup(params) {
+        return window.API.call(
+            `groups/${params.groupId}/members/${params.userId}`,
+            {
+                method: 'DELETE'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     * groupId: string,
+     * userId: string
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    sendGroupInvite(params) {
+        return window.API.call(`groups/${params.groupId}/invites`, {
+            method: 'POST',
+            params: {
+                userId: params.userId
+            }
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            window.API.$emit('GROUP:INVITE', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     * groupId: string,
+     * userId: string
+     * }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    kickGroupMember(params) {
+        return window.API.call(
+            `groups/${params.groupId}/members/${params.userId}`,
+            {
+                method: 'DELETE'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // useless code
+            // window.API.$emit('GROUP:MEMBER:KICK', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string, userId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    banGroupMember(params) {
+        return window.API.call(`groups/${params.groupId}/bans`, {
+            method: 'POST',
+            params: {
+                userId: params.userId
+            }
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // useless code
+            // window.API.$emit('GROUP:MEMBER:BAN', args);
+            return args;
+        });
+    },
+    unbanGroupMember(params) {
+        return window.API.call(
+            `groups/${params.groupId}/bans/${params.userId}`,
+            {
+                method: 'DELETE'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // useless code
+            // window.API.$emit('GROUP:MEMBER:UNBAN', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string, userId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    deleteSentGroupInvite(params) {
+        return window.API.call(
+            `groups/${params.groupId}/invites/${params.userId}`,
+            {
+                method: 'DELETE'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // useless code
+            // window.API.$emit('GROUP:INVITE:DELETE', args);
+            return args;
+        });
+    },
+    deleteBlockedGroupRequest(params) {
+        return window.API.call(
+            `groups/${params.groupId}/members/${params.userId}`,
+            {
+                method: 'DELETE'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // useless code
+            // window.API.$emit('GROUP:BLOCKED:DELETE', args);
+            return args;
+        });
+    },
+    acceptGroupInviteRequest(params) {
+        return window.API.call(
+            `groups/${params.groupId}/requests/${params.userId}`,
+            {
+                method: 'PUT',
+                params: {
+                    action: 'accept'
+                }
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // useless code
+            // window.API.$emit('GROUP:INVITE:ACCEPT', args);
+            return args;
+        });
+    },
+    rejectGroupInviteRequest(params) {
+        return window.API.call(
+            `groups/${params.groupId}/requests/${params.userId}`,
+            {
+                method: 'PUT',
+                params: {
+                    action: 'reject'
+                }
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // useless code
+            // window.API.$emit('GROUP:INVITE:REJECT', args);
+            return args;
+        });
+    },
+    blockGroupInviteRequest(params) {
+        return window.API.call(
+            `groups/${params.groupId}/requests/${params.userId}`,
+            {
+                method: 'PUT',
+                params: {
+                    action: 'reject',
+                    block: true
+                }
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // useless code
+            // window.API.$emit('GROUP:INVITE:BLOCK', args);
+            return args;
+        });
+    },
+    getGroupBans(params) {
+        return window.API.call(`groups/${params.groupId}/bans`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupAuditLogTypes(params) {
+        return window.API.call(`groups/${params.groupId}/auditLogTypes`, {
+            method: 'GET'
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string, eventTypes: array }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupLogs(params) {
+        return window.API.call(`groups/${params.groupId}/auditLogs`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupInvites(params) {
+        return window.API.call(`groups/${params.groupId}/invites`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupJoinRequests(params) {
+        return window.API.call(`groups/${params.groupId}/requests`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // window.API.$emit('GROUP:JOINREQUESTS', args);
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupInstances(params) {
+        return window.API.call(
+            `users/${window.API.currentUser.id}/instances/groups/${params.groupId}`,
+            {
+                method: 'GET'
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{ groupId: string }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupRoles(params) {
+        return window.API.call(`groups/${params.groupId}/roles`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            // useless code
+            // this.$emit('GROUP:ROLES', args);
+            return args;
+        });
+    },
+    getUsersGroupInstances() {
+        return window.API.call(
+            `users/${window.API.currentUser.id}/instances/groups`,
+            {
+                method: 'GET'
+            }
+        ).then((json) => {
+            const args = {
+                json
+            };
+            window.API.$emit('GROUP:USER:INSTANCES', args);
+            return args;
+        });
+    },
+
+    /**
+     * @param {{
+     query: string,
+     n: number,
+     offset: number,
+     order: string,
+     sortBy: string
+     }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    groupSearch(params) {
+        return window.API.call(`groups`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+    /**
+     * @param {{
+     groupId: string,
+     galleryId: string,
+     n: number,
+     offset: number
+     }} params
+     * @return { Promise<{json: any, params}> }
+     */
+    getGroupGallery(params) {
+        return window.API.call(
+            `groups/${params.groupId}/galleries/${params.galleryId}`,
+            {
+                method: 'GET',
+                params: {
+                    n: params.n,
+                    offset: params.offset
+                }
+            }
+        ).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    }
+
+    // no place to use this
+    // getRequestedGroups() {
+    //     return window.API.call(
+    //         `users/${window.API.currentUser.id}/groups/requested`,
+    //         {
+    //             method: 'GET'
+    //         }
+    //     ).then((json) => {
+    //         const args = {
+    //             json
+    //         };
+    //         window.API.$emit('GROUP:REQUESTED', args);
+    //         return args;
+    //     });
+    // }
+
+    // ----------------- left over code -----------------
+    // /**
+    // * @param {{ groupId: string }} params
+    // * @return { Promise<{json: any, params}> }
+    // */
+    // API.getGroupAnnouncement = function (params) {
+    //     return this.call(`groups/${params.groupId}/announcement`, {
+    //         method: 'GET'
+    //     }).then((json) => {
+    //         var args = {
+    //             json,
+    //             params
+    //         };
+    //         this.$emit('GROUP:ANNOUNCEMENT', args);
+    //         return args;
+    //     });
+    // };
+};
+
+export default groupReq;

src/classes/request/index.js

@@ -20,6 +20,7 @@ import vrcPlusImageRequest from './vrcPlusImage';
 import inviteMessagesRequest from './inviteMessages';
 import imageRequest from './image';
 import miscRequest from './misc';
+import groupRequest from './group';
 
 window.request = {
     userRequest,
@@ -35,7 +36,8 @@ window.request = {
     vrcPlusImageRequest,
     inviteMessagesRequest,
     imageRequest,
-    miscRequest
+    miscRequest,
+    groupRequest
 };
 
 export {
@@ -52,5 +54,6 @@ export {
     vrcPlusImageRequest,
     inviteMessagesRequest,
     imageRequest,
-    miscRequest
+    miscRequest,
+    groupRequest
 };

src/classes/sharedFeed.js

@@ -1,7 +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';
+import { baseClass, $app, API } from './baseClass.js';
+import { worldRequest, groupRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -121,13 +121,15 @@ export default class extends baseClass {
                                 groupName = groupRef.name;
                             } else {
                                 // no group cache, fetch group and try again
-                                API.getGroup({
-                                    groupId: ref.$location.groupId
-                                })
+                                groupRequest
+                                    .getGroup({
+                                        groupId: ref.$location.groupId
+                                    })
                                     .then((args) => {
                                         workerTimers.setTimeout(() => {
                                             // delay to allow for group cache to update
-                                            $app.sharedFeed.pendingUpdate = true;
+                                            $app.sharedFeed.pendingUpdate =
+                                                true;
                                             $app.updateSharedFeed(false);
                                         }, 100);
                                         return args;

src/classes/uiComponents.js

@@ -169,7 +169,7 @@ export default class extends baseClass {
                     if (!L.groupId) {
                         return;
                     }
-                    API.$emit('SHOW_GROUP_DIALOG', L.groupId);
+                    this.showGroupDialog(L.groupId);
                 }
             },
             watch: {
@@ -320,7 +320,7 @@ export default class extends baseClass {
                         // check group perms
                         var groupId = this.instance.ownerId;
                         var group = API.cachedGroups.get(groupId);
-                        this.canCloseInstance = $app.hasGroupPermission(
+                        this.canCloseInstance = utils.hasGroupPermission(
                             group,
                             'group-instance-moderate'
                         );
@@ -339,7 +339,7 @@ export default class extends baseClass {
                     }
                 },
                 showUserDialog(userId) {
-                    API.$emit('SHOW_USER_DIALOG', userId);
+                    this.showUserDialog(userId);
                 }
             },
             watch: {

src/classes/updateLoop.js

@@ -1,5 +1,6 @@
 import * as workerTimers from 'worker-timers';
-import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { baseClass, $app, API } from './baseClass.js';
+import { groupRequest } from './request/index.js';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -47,7 +48,7 @@ export default class extends baseClass {
                     if (--this.nextGroupInstanceRefresh <= 0) {
                         if (this.friendLogInitStatus) {
                             this.nextGroupInstanceRefresh = 300; // 5min
-                            API.getUsersGroupInstances();
+                            groupRequest.getUsersGroupInstances();
                         }
                         AppApi.CheckGameRunning();
                     }

src/classes/utils.js

@@ -448,5 +448,46 @@ export default {
         return `https://vrchat.com/home/launch?worldId=${encodeURIComponent(
             L.worldId
         )}`;
+    },
+    getFaviconUrl(resource) {
+        try {
+            const url = new URL(resource);
+            return `https://icons.duckduckgo.com/ip2/${url.host}.ico`;
+        } catch (err) {
+            return '';
+        }
+    },
+    copyToClipboard(text) {
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+                window.$app.$message({
+                    message: 'Copied successfully!',
+                    type: 'success'
+                });
+            })
+            .catch((err) => {
+                console.error('Copy failed:', err);
+                this.$message.error('Copy failed!');
+            });
+    },
+    hasGroupPermission(ref, permission) {
+        if (
+            ref &&
+            ref.myMember &&
+            ref.myMember.permissions &&
+            (ref.myMember.permissions.includes('*') ||
+                ref.myMember.permissions.includes(permission))
+        ) {
+            return true;
+        }
+        return false;
+    },
+    getAuditLogTypeName(auditLogType) {
+        if (!auditLogType) return '';
+        return auditLogType
+            .replace('group.', '')
+            .replace(/\./g, ' ')
+            .replace(/\b\w/g, (l) => l.toUpperCase());
     }
 };

src/classes/websocket.js

@@ -1,6 +1,7 @@
 import * as workerTimers from 'worker-timers';
 import Noty from 'noty';
-import { baseClass, $app, API, $t, $utils } from './baseClass.js';
+import { baseClass, $app, API, $utils } from './baseClass.js';
+import { groupRequest } from './request';
 
 export default class extends baseClass {
     constructor(_app, _API, _t) {
@@ -450,7 +451,7 @@ export default class extends baseClass {
 
                 case 'group-role-updated':
                     var groupId = content.role.groupId;
-                    API.getGroup({ groupId, includeRoles: true });
+                    groupRequest.getGroup({ groupId, includeRoles: true });
                     console.log('group-role-updated', content);
 
                     // content {