add stable classname to flair badge img

coralproject · Aug 10, 2023 · 56e9485 · 56e9485
1 parent 55ba208
commit 56e9485
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/src/core/client/admin/routes/Configure/sections/General/FlairBadgeConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/General/FlairBadgeConfigContainer.tsx
@@ -73,11 +73,11 @@ const FlairBadgeConfigContainer: FunctionComponent<Props> = ({
     [deleteFlairBadge]
   );
   const validFlairURL = useCallback(
-    (values: any) => {
+    (values: string) => {
       const isValid = validateImageURL(flairBadgeURLInput, values);
       return !(isValid === undefined);
     },
-    [flairBadgeURLInput]
+    [flairBadgeURLInput, validateImageURL]
   );
   return (
     <ConfigBox

diff --git a/src/core/client/stream/classes.ts b/src/core/client/stream/classes.ts
@@ -349,6 +349,11 @@ const CLASSES = {
        */
       userBadge: "coral coral-userBadge coral-comment-userBadge",
 
+      /**
+       * flairBadge can be used to target a flair badge image associated with a User.
+       */
+      flairBadge: "coral coral-flairBadge coral-comment-flairBadge",
+
       /**
        * commentTag can be used to target a tag associated with a Comment.
        */

diff --git a/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx
@@ -1,7 +1,9 @@
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
+import CLASSES from "coral-stream/classes";
 import { Tag } from "coral-ui/components/v2";
 
 import { AuthorBadgesContainer_settings } from "coral-stream/__generated__/AuthorBadgesContainer_settings.graphql";
@@ -27,8 +29,17 @@ const AuthorBadgesContainer: FunctionComponent<Props> = ({
           {badges.map((badge) => {
             if (/\.(jpe?g|png|gif)$/i.test(badge)) {
               if (settings.flairBadges?.flairBadgeURLs?.includes(badge)) {
-                // todo: add stable classname specific to flair badge
-                return <img src={badge} alt="" className={styles.flairBadge} />;
+                return (
+                  <img
+                    key={badge}
+                    src={badge}
+                    alt=""
+                    className={cn(
+                      styles.flairBadge,
+                      CLASSES.comment.topBar.flairBadge
+                    )}
+                  />
+                );
               } else {
                 return null;
               }