Use react query to fetch syncplay groups

src/apps/experimental/components/AppToolbar/menus/SyncPlayMenu.tsx

@@ -19,6 +19,7 @@ import React, { FC, useCallback, useEffect, useState } from 'react';
 
 import { pluginManager } from 'components/pluginManager';
 import { useApi } from 'hooks/useApi';
+import { useSyncPlayGroups } from 'hooks/useSyncPlayGroups';
 import globalize from 'scripts/globalize';
 import { PluginType } from 'types/plugin';
 import Events from 'utils/events';
@@ -47,33 +48,14 @@ const SyncPlayMenu: FC<SyncPlayMenuProps> = ({
 }) => {
     const [ syncPlay, setSyncPlay ] = useState<SyncPlayInstance>();
     const { __legacyApiClient__, api, user } = useApi();
-    const [ groups, setGroups ] = useState<GroupInfoDto[]>([]);
     const [ currentGroup, setCurrentGroup ] = useState<GroupInfoDto>();
     const isSyncPlayEnabled = Boolean(currentGroup);
 
     useEffect(() => {
         setSyncPlay(pluginManager.firstOfType(PluginType.SyncPlay)?.instance);
     }, []);
 
-    useEffect(() => {
-        let isMounted = true;
-
-        const fetchGroups = async () => {
-            if (api) {
-                const response = await getSyncPlayApi(api).syncPlayGetGroups();
-                if (isMounted) setGroups(response.data);
-            }
-        };
-
-        fetchGroups()
-            .catch(err => {
-                console.error('[SyncPlayMenu] unable to fetch SyncPlay groups', err);
-            });
-
-        return () => {
-            isMounted = false;
-        };
-    }, [ api ]);
+    const { data: groups } = useSyncPlayGroups();
 
     const onGroupAddClick = useCallback(() => {
         if (api && user) {
@@ -231,7 +213,7 @@ const SyncPlayMenu: FC<SyncPlayMenuProps> = ({
                 />
             </MenuItem>
         );
-    } else if (groups.length === 0 && user?.Policy?.SyncPlayAccess !== SyncPlayUserAccessType.CreateAndJoinGroups) {
+    } else if (!groups?.length && user?.Policy?.SyncPlayAccess !== SyncPlayUserAccessType.CreateAndJoinGroups) {
         menuItems.push(
             <MenuItem key='sync-play-unavailable' disabled>
                 <ListItemIcon>
@@ -241,7 +223,7 @@ const SyncPlayMenu: FC<SyncPlayMenuProps> = ({
             </MenuItem>
         );
     } else {
-        if (groups.length > 0) {
+        if (groups && groups.length > 0) {
             groups.forEach(group => {
                 menuItems.push(
                     <MenuItem

src/hooks/useSyncPlayGroups.ts

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import { JellyfinApiContext, useApi } from './useApi';
+import { getSyncPlayApi } from '@jellyfin/sdk/lib/utils/api/sync-play-api';
+import { AxiosRequestConfig } from 'axios';
+
+const fetchSyncPlayGroups = async (
+    currentApi: JellyfinApiContext,
+    options?: AxiosRequestConfig
+) => {
+    const { api } = currentApi;
+    if (!api) throw new Error('No API instance available');
+
+    const response = await getSyncPlayApi(api)
+        .syncPlayGetGroups(options);
+    return response.data;
+};
+
+export const useSyncPlayGroups = () => {
+    const currentApi = useApi();
+    return useQuery({
+        queryKey: [ 'SyncPlay', 'Groups' ],
+        queryFn: ({ signal }) => fetchSyncPlayGroups(currentApi, { signal })
+    });
+};