From 4c6d13e4efdeaa92911be97066a8daa030aa0a0a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 9 Mar 2023 11:21:27 -0600
Subject: [PATCH] Use EntityStore for Groups

---
 app/soapbox/features/groups/index.tsx | 13 +------------
 app/soapbox/hooks/index.ts            |  2 ++
 app/soapbox/hooks/useGroup.ts         | 24 ++++++++++++++++++++++++
 app/soapbox/hooks/useGroups.ts        | 24 ++++++++++++++++++++++++
 app/soapbox/pages/group-page.tsx      |  3 +--
 5 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 app/soapbox/hooks/useGroup.ts
 create mode 100644 app/soapbox/hooks/useGroups.ts

diff --git a/app/soapbox/features/groups/index.tsx b/app/soapbox/features/groups/index.tsx
index f48bd1520..cdebabf6c 100644
--- a/app/soapbox/features/groups/index.tsx
+++ b/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 { useGroups } from 'soapbox/queries/groups';
+import { useAppDispatch, useAppSelector, useGroups, useFeatures } from 'soapbox/hooks';
 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'>
diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts
index afefefd72..dceae2cdf 100644
--- a/app/soapbox/hooks/index.ts
+++ b/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';
diff --git a/app/soapbox/hooks/useGroup.ts b/app/soapbox/hooks/useGroup.ts
new file mode 100644
index 000000000..7a2be8696
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/app/soapbox/hooks/useGroups.ts b/app/soapbox/hooks/useGroups.ts
new file mode 100644
index 000000000..eca2b663b
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/app/soapbox/pages/group-page.tsx b/app/soapbox/pages/group-page.tsx
index 92518a55d..f617b8bd7 100644
--- a/app/soapbox/pages/group-page.tsx
+++ b/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 } from 'soapbox/queries/groups';
+import { useGroup, useOwnAccount } from 'soapbox/hooks';
 
 import { Tabs } from '../components/ui';