Make GroupLookup HOC kind of work

app/soapbox/components/hoc/group-lookup-hoc.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { useGroupLookup } from 'soapbox/hooks/api/groups/useGroupLookup';
+
+import { Spinner } from '../ui';
+
+interface IGroupLookup {
+  params: {
+    groupSlug: string
+  }
+}
+
+function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: string } }>) {
+  const GroupLookup: React.FC<IGroupLookup> = (props) => {
+    const { entity: group } = useGroupLookup(props.params.groupSlug);
+    if (!group) return (
+      <Spinner />
+    );
+
+    const newProps = {
+      ...props,
+      params: {
+        ...props.params,
+        id: group.id,
+        groupId: group.id,
+      },
+    };
+
+    return (
+      <Component {...newProps} />
+    );
+  };
+
+  return GroupLookup;
+}
+
+export default GroupLookupHoc;

app/soapbox/components/hoc/with-hoc.tsx

@@ -0,0 +1,11 @@
+type HOC<P, R> = (Component: React.ComponentType<P>) => React.ComponentType<R>
+type AsyncComponent<P> = () => Promise<{ default: React.ComponentType<P> }>
+
+const withHoc = <P, R>(asyncComponent: AsyncComponent<P>, hoc: HOC<P, R>) => {
+  return async () => {
+    const { default: component } = await asyncComponent();
+    return { default: hoc(component) };
+  };
+};
+
+export default withHoc;

app/soapbox/features/ui/index.tsx

@@ -20,6 +20,8 @@ import { fetchScheduledStatuses } from 'soapbox/actions/scheduled-statuses';
 import { connectUserStream } from 'soapbox/actions/streaming';
 import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions';
 import { expandHomeTimeline } from 'soapbox/actions/timelines';
+import GroupLookupHoc from 'soapbox/components/hoc/group-lookup-hoc';
+import withHoc from 'soapbox/components/hoc/with-hoc';
 import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import ThumbNavigation from 'soapbox/components/thumb-navigation';
 import { Layout } from 'soapbox/components/ui';
@@ -137,6 +139,8 @@ import { WrappedRoute } from './util/react-router-helpers';
 // Without this it ends up in ~8 very commonly used bundles.
 import 'soapbox/components/status';
 
+const GroupTimelineSlug = withHoc(GroupTimeline as any, GroupLookupHoc);
+
 const EmptyPage = HomePage;
 
 const keyMap = {
@@ -305,6 +309,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       {features.groups && <WrappedRoute path='/groups/:id/manage/blocks' exact page={ManageGroupsPage} component={GroupBlockedMembers} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage/requests' exact page={ManageGroupsPage} component={GroupMembershipRequests} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:groupId/posts/:statusId' exact page={StatusPage} component={Status} content={children} />}
+      {features.groups && <WrappedRoute path='/group/:groupSlug' exact page={GroupPage} component={GroupTimelineSlug} content={children} />}
 
       <WrappedRoute path='/statuses/new' page={DefaultPage} component={NewStatus} content={children} exact />
       <WrappedRoute path='/statuses/:statusId' exact page={StatusPage} component={Status} content={children} />