Merge pull request #8766 from Couchers-org/frontend/feature/hide-moderator-badge

Web: Hide moderator badge from the badge explorer behind show_moderator_badge

Author: aapeliv

app/web/features/badges/BadgesPage.tsx

@@ -9,6 +9,7 @@ import {
 import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
 import HtmlMeta from "components/HtmlMeta";
 import PageTitle from "components/PageTitle";
+import { useFeatureValue } from "experimentation";
 import Badge from "features/badges/Badge";
 import { useBadges } from "features/badges/hooks";
 import { useTranslation } from "i18n";
@@ -62,6 +63,12 @@ export default function BadgesPage({ badgeId = undefined }: BadgesPageProps) {
 
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
+  // the catalog still lists the moderator badge; the award job stops granting it once
+  // show_moderator_badge is off, so hide it from the explorer to match.
+  const showModeratorBadge = useFeatureValue("show_moderator_badge", true);
+  const isHiddenBadge = (badgeId: string) =>
+    badgeId === "moderator" && !showModeratorBadge;
+
   return (
     <>
       <HtmlMeta title={t("global:nav.badges")} />
@@ -73,11 +80,13 @@ export default function BadgesPage({ badgeId = undefined }: BadgesPageProps) {
       <ParentFlexDiv>
         <div>
           {badges &&
-            Object.values(badges).map((badge) => (
-              <BadgeListItem key={badge.id}>
-                <Badge badge={badge} />
-              </BadgeListItem>
-            ))}
+            Object.values(badges)
+              .filter((badge) => !isHiddenBadge(badge.id))
+              .map((badge) => (
+                <BadgeListItem key={badge.id}>
+                  <Badge badge={badge} />
+                </BadgeListItem>
+              ))}
         </div>
         <StyledDivider
           orientation={isMobile ? "horizontal" : "vertical"}
@@ -87,7 +96,7 @@ export default function BadgesPage({ badgeId = undefined }: BadgesPageProps) {
           <ContentDiv>
             {isBadgesLoading ? (
               <CenteredSpinner />
-            ) : badges && badgeId in badges ? (
+            ) : badges && badgeId in badges && !isHiddenBadge(badgeId) ? (
               <>
                 <FlexDiv>
                   <Badge badge={badges[badgeId]} />

app/web/features/profile/view/Badges.tsx

@@ -21,7 +21,10 @@ export const Badges = ({ user }: Props) => {
   return (
     <StyledContainer>
       {(user.badgesList || []).map((badgeId) => {
-        const badge = (badges || {})[badgeId];
+        const badge = badges[badgeId];
+        if (!badge) {
+          return null;
+        }
         return <Badge key={badge.id} badge={badge} />;
       })}
     </StyledContainer>