Combine group hooks into one useGroups file

app/soapbox/hooks/index.ts

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

app/soapbox/hooks/useGroup.ts

@@ -1,24 +0,0 @@
-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

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { useEntities } from 'soapbox/entity-store/hooks';
+import { useEntities, useEntity } from 'soapbox/entity-store/hooks';
 import { normalizeGroup } from 'soapbox/normalizers';
 
 import type { Group } from 'soapbox/types/entities';
@@ -9,6 +9,8 @@ function useGroups() {
   const result = useEntities<Group>(['Group', ''], '/api/v1/groups');
   const { entities, isLoading, fetchEntities } = result;
 
+  // Note: we have to fetch them in the hook right now because I haven't implemented
+  // max-age or cache expiry in the entity store yet. It's planned.
   useEffect(() => {
     if (!isLoading) {
       fetchEntities();
@@ -21,4 +23,20 @@ function useGroups() {
   };
 }
 
-export { useGroups };
+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, useGroups };