From a94d2d036e1c5fe06bdc1e4e4c80c2eac0c2a6e7 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 5 Apr 2023 10:29:57 -0400
Subject: [PATCH] Update aside for Manage Group pages

---
 app/soapbox/features/ui/index.tsx        |  9 ++++---
 app/soapbox/pages/manage-groups-page.tsx | 32 ++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 app/soapbox/pages/manage-groups-page.tsx

diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 4fd8d93948..c934edda34 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -34,6 +34,7 @@ import GroupPage from 'soapbox/pages/group-page';
 import GroupsPage from 'soapbox/pages/groups-page';
 import GroupsPendingPage from 'soapbox/pages/groups-pending-page';
 import HomePage from 'soapbox/pages/home-page';
+import ManageGroupsPage from 'soapbox/pages/manage-groups-page';
 import ProfilePage from 'soapbox/pages/profile-page';
 import RemoteInstancePage from 'soapbox/pages/remote-instance-page';
 import StatusPage from 'soapbox/pages/status-page';
@@ -297,10 +298,10 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       {features.groupsPending && <WrappedRoute path='/groups/pending-requests' exact page={GroupsPendingPage} component={PendingGroupRequests} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id' exact page={GroupPage} component={GroupTimeline} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/members' exact page={GroupPage} component={GroupMembers} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/manage' exact page={DefaultPage} component={ManageGroup} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/manage/edit' exact page={DefaultPage} component={EditGroup} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/manage/blocks' exact page={DefaultPage} component={GroupBlockedMembers} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/manage/requests' exact page={DefaultPage} component={GroupMembershipRequests} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:id/manage' exact page={ManageGroupsPage} component={ManageGroup} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:id/manage/edit' exact page={ManageGroupsPage} component={EditGroup} content={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} />}
 
       <WrappedRoute path='/statuses/new' page={DefaultPage} component={NewStatus} content={children} exact />
diff --git a/app/soapbox/pages/manage-groups-page.tsx b/app/soapbox/pages/manage-groups-page.tsx
new file mode 100644
index 0000000000..7155cecdfa
--- /dev/null
+++ b/app/soapbox/pages/manage-groups-page.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Layout } from 'soapbox/components/ui';
+import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
+import { MyGroupsPanel, NewGroupPanel } from 'soapbox/features/ui/util/async-components';
+
+interface IGroupsPage {
+  children: React.ReactNode
+}
+
+/** Page to display groups. */
+const ManageGroupsPage: React.FC<IGroupsPage> = ({ children }) => (
+  <>
+    <Layout.Main>
+      {children}
+    </Layout.Main>
+
+    <Layout.Aside>
+      <BundleContainer fetchComponent={NewGroupPanel}>
+        {Component => <Component />}
+      </BundleContainer>
+      <BundleContainer fetchComponent={MyGroupsPanel}>
+        {Component => <Component />}
+      </BundleContainer>
+
+      <LinkFooter />
+    </Layout.Aside>
+  </>
+);
+
+export default ManageGroupsPage;