List users with a given a badge

app/web/features/badges/BadgesPage.tsx

@@ -1,4 +1,3 @@
-import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
 import {
   Divider,
   DividerProps,
@@ -7,10 +6,13 @@ import {
   styled,
   Typography,
 } from "@mui/material";
+import Button from "components/Button";
+import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
 import HtmlMeta from "components/HtmlMeta";
 import PageTitle from "components/PageTitle";
+import UsersList from "components/UsersList";
 import Badge from "features/badges/Badge";
-import { useBadges } from "features/badges/hooks";
+import { useBadges, useBadgeUsers } from "features/badges/hooks";
 import { useTranslation } from "i18n";
 import { GLOBAL, PROFILE } from "i18n/namespaces";
 
@@ -36,6 +38,31 @@ const CenteredDiv = styled(ContentDiv)(({ theme }) => ({
   justifyContent: "center",
 }));
 
+export interface BadgeUserListProps {
+  badgeId: string;
+}
+
+function BadgeUserList({ badgeId }: BadgeUserListProps) {
+  const { badgeUserIds, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    useBadgeUsers(badgeId);
+
+  return (
+    <UsersList
+      userIds={badgeUserIds}
+      endChildren={
+        hasNextPage && (
+          <Button loading={isFetchingNextPage} onClick={() => fetchNextPage()}>
+            Load more
+          </Button>
+        )
+      }
+      emptyListChildren={
+        <Typography variant="body1">No people with this badge!</Typography>
+      }
+    />
+  );
+}
+
 export interface BadgesPageProps {
   badgeId?: string;
 }
@@ -75,6 +102,7 @@ export default function BadgesPage({ badgeId = undefined }: BadgesPageProps) {
                   </Typography>
                 </FlexDiv>
                 <StyledDivider />
+                <BadgeUserList badgeId={badgeId} />
               </>
             ) : (
               <>Badge not found</>

app/web/features/badges/hooks.ts

@@ -4,7 +4,6 @@ import { ListBadgeUsersRes } from "proto/api_pb";
 import { Badge } from "proto/resources_pb";
 import { useInfiniteQuery, useQuery } from "react-query";
 import { service } from "service";
-import type { ListBadgeUsersInput } from "service/api";
 
 export const useBadges = () => {
   const { data, ...rest } = useQuery(badgesKey, () =>
@@ -27,14 +26,16 @@ export const useBadges = () => {
   };
 };
 
-export function useBadgeUsers({
-  badgeId,
-  pageSize,
-}: Omit<ListBadgeUsersInput, "pageToken">) {
-  return useInfiniteQuery<ListBadgeUsersRes.AsObject, RpcError>({
-    queryKey: badgeUsersKey,
+export function useBadgeUsers(badgeId: string) {
+  const query = useInfiniteQuery<ListBadgeUsersRes.AsObject, RpcError>({
+    queryKey: badgeUsersKey({ badgeId }),
     queryFn: ({ pageParam }) =>
-      service.api.listBadgeUsers({ badgeId, pageSize, pageToken: pageParam }),
-    getNextPageParam: (lastPage) => lastPage.nextPageToken ?? undefined,
+      service.api.listBadgeUsers({ badgeId, pageToken: pageParam }),
+    getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined,
   });
+  const badgeUserIds = query.data?.pages.flatMap((res) => res.userIdsList);
+  return {
+    ...query,
+    badgeUserIds,
+  };
 }

app/web/features/communities/events/EventUsers.tsx

@@ -49,7 +49,7 @@ export default function EventUsers({
           )
         }
         emptyListChildren={
-          !error && <Typography variant="body1">{emptyState}</Typography>
+          <Typography variant="body1">{emptyState}</Typography>
         }
       />
     </Card>

app/web/features/queryKeys.ts

@@ -156,4 +156,10 @@ export const myEventsKey = (type: EventsType) => ["myEvents", { type }];
 export const activeLoginsKey = "activeLogins";
 
 // Badges
-export const badgeUsersKey = "badgeUsers";
+export interface BadgeUsersInput {
+  badgeId: string;
+}
+export const badgeUsersKey = ({ badgeId }: BadgeUsersInput) => [
+  "badgeUsers",
+  badgeId,
+];