Merge branch 'group-widgets' into 'develop'

Add MyGroupsPanel, improve layout on various group pages

See merge request soapbox-pub/soapbox!2374

app/soapbox/features/ui/components/panels/my-groups-panel.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Widget } from 'soapbox/components/ui';
+import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
+import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
+import { useGroups } from 'soapbox/hooks';
+
+const MyGroupsPanel = () => {
+  const { groups, isFetching, isFetched, isError } = useGroups();
+  const isEmpty = (isFetched && groups.length === 0) || isError;
+
+  if (isEmpty) {
+    return null;
+  }
+
+  return (
+    <Widget
+      title='My Groups'
+    >
+      {isFetching ? (
+        new Array(3).fill(0).map((_, idx) => (
+          <PlaceholderGroupSearch key={idx} />
+        ))
+      ) : (
+        groups.slice(0, 3).map((group) => (
+          <GroupListItem group={group} withJoinAction={false} key={group.id} />
+        ))
+      )}
+    </Widget>
+  );
+};
+
+export default MyGroupsPanel;

app/soapbox/features/ui/util/async-components.ts

@@ -590,6 +590,10 @@ export function NewGroupPanel() {
   return import(/* webpackChunkName: "features/groups" */'../components/panels/new-group-panel');
 }
 
+export function MyGroupsPanel() {
+  return import(/* webpackChunkName: "features/groups" */'../components/panels/my-groups-panel');
+}
+
 export function SuggestedGroupsPanel() {
   return import(/* webpackChunkName: "features/groups" */'../components/panels/suggested-groups-panel');
 }

app/soapbox/pages/group-page.tsx

@@ -10,6 +10,7 @@ import {
   CtaBanner,
   GroupMediaPanel,
   SignUpPanel,
+  SuggestedGroupsPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useGroup, useOwnAccount } from 'soapbox/hooks';
 import { Group } from 'soapbox/schemas';
@@ -127,6 +128,9 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
         <BundleContainer fetchComponent={GroupMediaPanel}>
           {Component => <Component group={group} />}
         </BundleContainer>
+        <BundleContainer fetchComponent={SuggestedGroupsPanel}>
+          {Component => <Component />}
+        </BundleContainer>
         <LinkFooter key='link-footer' />
       </Layout.Aside>
     </>

app/soapbox/pages/groups-page.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import { Route, Routes } from 'react-router-dom-v5-compat';
 
 import { Column, Layout } from 'soapbox/components/ui';
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
-import { NewGroupPanel } from 'soapbox/features/ui/util/async-components';
+import { MyGroupsPanel, NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components';
 
 interface IGroupsPage {
   children: React.ReactNode
@@ -22,10 +23,28 @@ const GroupsPage: React.FC<IGroupsPage> = ({ children }) => (
 
     <Layout.Aside>
       <BundleContainer fetchComponent={NewGroupPanel}>
-        {Component => <Component key='new-group-panel' />}
+        {Component => <Component />}
       </BundleContainer>
+      <Routes>
+        <Route
+          path='/groups'
+          element={(
+            <BundleContainer fetchComponent={SuggestedGroupsPanel}>
+              {Component => <Component />}
+            </BundleContainer>
+          )}
+        />
+        <Route
+          path='/groups/discover'
+          element={(
+            <BundleContainer fetchComponent={MyGroupsPanel}>
+              {Component => <Component />}
+            </BundleContainer>
+          )}
+        />
+      </Routes>
 
-      <LinkFooter key='link-footer' />
+      <LinkFooter />
     </Layout.Aside>
   </>
 );