Use EntityStore for Groups

app/soapbox/features/groups/index.tsx

@@ -6,8 +6,7 @@ import { openModal } from 'soapbox/actions/modals';
 import GroupCard from 'soapbox/components/group-card';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useGroups, useFeatures } from 'soapbox/hooks';
-import { useGroups } from 'soapbox/queries/groups';
 import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions';
 
 import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
@@ -16,16 +15,6 @@ import TabBar, { TabItems } from './components/tab-bar';
 
 import type { Group as GroupEntity } from 'soapbox/types/entities';
 
-// const getOrderedGroups = createSelector([
-//   (state: RootState) => state.groups.items,
-//   (state: RootState) => state.group_relationships,
-// ], (groups, group_relationships) => ({
-//   groups: (groups.toList().filter((item: GroupEntity | false) => !!item) as ImmutableList<GroupEntity>)
-//     .map((item) => item.set('relationship', group_relationships.get(item.id) || null))
-//     .filter((item) => item.relationship?.member)
-//     .sort((a, b) => a.display_name.localeCompare(b.display_name)),
-// }));
-
 const EmptyMessage = () => (
   <Stack space={6} alignItems='center' justifyContent='center' className='h-full p-6'>
     <Stack space={2} className='max-w-sm'>

app/soapbox/hooks/index.ts

@@ -5,6 +5,8 @@ export { useAppSelector } from './useAppSelector';
 export { useClickOutside } from './useClickOutside';
 export { useCompose } from './useCompose';
 export { useDebounce } from './useDebounce';
+export { useGroup } from './useGroup';
+export { useGroups } from './useGroups';
 export { useGroupsPath } from './useGroupsPath';
 export { useDimensions } from './useDimensions';
 export { useFeatures } from './useFeatures';

app/soapbox/hooks/useGroup.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+import { useEntity } from 'soapbox/entity-store/hooks';
+import { normalizeGroup } from 'soapbox/normalizers';
+
+import type { Group } from 'soapbox/types/entities';
+
+function useGroup(groupId: string) {
+  const result = useEntity<Group>(['Group', groupId], `/api/v1/groups/${groupId}`);
+  const { entity, isLoading, fetchEntity } = result;
+
+  useEffect(() => {
+    if (!isLoading) {
+      fetchEntity();
+    }
+  }, []);
+
+  return {
+    ...result,
+    group: entity ? normalizeGroup(entity) : undefined,
+  };
+}
+
+export { useGroup };

app/soapbox/hooks/useGroups.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { normalizeGroup } from 'soapbox/normalizers';
+
+import type { Group } from 'soapbox/types/entities';
+
+function useGroups() {
+  const result = useEntities<Group>(['Group', ''], '/api/v1/groups');
+  const { entities, isLoading, fetchEntities } = result;
+
+  useEffect(() => {
+    if (!isLoading) {
+      fetchEntities();
+    }
+  }, []);
+
+  return {
+    ...result,
+    groups: entities.map(normalizeGroup),
+  };
+}
+
+export { useGroups };

app/soapbox/pages/group-page.tsx

@@ -11,8 +11,7 @@ import {
   GroupMediaPanel,
   SignUpPanel,
 } from 'soapbox/features/ui/util/async-components';
-import { useOwnAccount } from 'soapbox/hooks';
+import { useGroup, useOwnAccount } from 'soapbox/hooks';
-import { useGroup } from 'soapbox/queries/groups';
 
 import { Tabs } from '../components/ui';