Merge branch 'pending-groups' into 'develop'

Add support for pending Group Requests

See merge request soapbox-pub/soapbox!2327

app/soapbox/features/ui/components/panels/suggested-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 { useSuggestedGroups } from 'soapbox/queries/groups';
+
+const SuggestedGroupsPanel = () => {
+  const { groups, isFetching, isFetched, isError } = useSuggestedGroups();
+  const isEmpty = (isFetched && groups.length === 0) || isError;
+
+  if (isEmpty) {
+    return null;
+  }
+
+  return (
+    <Widget
+      title='Suggested 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 SuggestedGroupsPanel;

app/soapbox/features/ui/index.tsx

@@ -32,6 +32,7 @@ import EventPage from 'soapbox/pages/event-page';
 import EventsPage from 'soapbox/pages/events-page';
 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 ProfilePage from 'soapbox/pages/profile-page';
 import RemoteInstancePage from 'soapbox/pages/remote-instance-page';
@@ -117,6 +118,7 @@ import {
   Events,
   Groups,
   GroupsDiscover,
+  PendingGroupRequests,
   GroupMembers,
   GroupTimeline,
   ManageGroup,
@@ -287,6 +289,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
 
       {features.groups && <WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} />}
       {features.groupsDiscovery && <WrappedRoute path='/groups/discover' exact page={GroupsPage} component={GroupsDiscover} content={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} />}

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

@@ -550,6 +550,10 @@ export function GroupsDiscover() {
   return import(/* webpackChunkName: "features/groups/discover" */'../../groups/discover');
 }
 
+export function PendingGroupRequests() {
+  return import(/* webpackChunkName: "features/groups/discover" */'../../groups/pending-requests');
+}
+
 export function GroupMembers() {
   return import(/* webpackChunkName: "features/groups" */'../../group/group-members');
 }
@@ -578,6 +582,10 @@ export function NewGroupPanel() {
   return import(/* webpackChunkName: "features/groups" */'../components/panels/new-group-panel');
 }
 
+export function SuggestedGroupsPanel() {
+  return import(/* webpackChunkName: "features/groups" */'../components/panels/suggested-groups-panel');
+}
+
 export function GroupMediaPanel() {
   return import(/* webpackChunkName: "features/groups" */'../components/group-media-panel');
 }