Add topic pages

app/soapbox/hooks/api/groups/useGroupTag.ts

@@ -0,0 +1,21 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks';
+import { type GroupTag, groupTagSchema } from 'soapbox/schemas';
+
+function useGroupTag(tagId: string) {
+  const api = useApi();
+
+  const { entity: tag, ...result } = useEntity<GroupTag>(
+    [Entities.GROUP_TAGS, tagId],
+    () => api.get(`/api/v1/tags/${tagId }`),
+    { schema: groupTagSchema },
+  );
+
+  return {
+    ...result,
+    tag,
+  };
+}
+
+export { useGroupTag };

app/soapbox/hooks/api/groups/useGroupsFromTag.ts

@@ -5,6 +5,8 @@ import { groupSchema } from 'soapbox/schemas';
 import { useApi } from '../../useApi';
 import { useFeatures } from '../../useFeatures';
 
+import { useGroupRelationships } from './useGroups';
+
 import type { Group } from 'soapbox/schemas';
 
 function useGroupsFromTag(tagId: string) {
@@ -13,16 +15,22 @@ function useGroupsFromTag(tagId: string) {
 
   const { entities, ...result } = useEntities<Group>(
     [Entities.GROUPS, 'tags', tagId],
-    () => api.get(`/api/mock/tags/${tagId}/groups`),
+    () => api.get(`/api/v1/tags/${tagId}/groups`),
     {
       schema: groupSchema,
       enabled: features.groupsDiscovery,
     },
   );
+  const { relationships } = useGroupRelationships(entities.map(entity => entity.id));
+
+  const groups = entities.map((group) => ({
+    ...group,
+    relationship: relationships[group.id] || null,
+  }));
 
   return {
     ...result,
-    groups: entities,
+    groups,
   };
 }
 

app/soapbox/hooks/api/groups/usePopularTags.ts

@@ -11,7 +11,7 @@ function usePopularTags() {
 
   const { entities, ...result } = useEntities<GroupTag>(
     [Entities.GROUP_TAGS],
-    () => api.get('/api/mock/groups/tags'),
+    () => api.get('/api/v1/groups/tags'),
     {
       schema: groupTagSchema,
       enabled: features.groupsDiscovery,