Add community classes to replies (#9513)

* add community classes to replies * use start date
PostHog · Oct 1, 2024 · 4698799 · 4698799
1 parent 5def800
commit 4698799
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/Squeak/components/Replies.tsx b/src/components/Squeak/components/Replies.tsx
@@ -108,24 +108,35 @@ type ExpandedProps = {
     replies: StrapiData<ReplyData[]>
 }
 
+const getComunityClasses = (reply, isResolution) => {
+    const profile = reply?.attributes?.profile?.data
+    const isTeamMember = !!profile?.attributes?.startDate
+    const isAI = profile?.id === Number(process.env.GATSBY_AI_PROFILE_ID)
+    return `${isAI ? 'community-profile-ai' : isTeamMember ? 'community-profile-mod' : 'community-profile-member'}${
+        isResolution ? ' community-reply-resolution' : ''
+    }`
+}
+
 const Expanded = ({ replies }: ExpandedProps) => {
     const {
         question: {
             profile: {
                 data: { id: questionProfileID },
             },
+            resolvedBy,
         },
     } = useContext(CurrentQuestionContext)
-
     return (
         <>
             {replies.data.map((reply) => {
                 const badgeText = getBadge(questionProfileID, reply?.attributes?.profile?.data?.id)
-
                 return (
                     <li
                         key={reply.id}
-                        className={`pr-[5px] pl-[30px] !mb-0 border-l border-solid border-light dark:border-dark squeak-left-border relative before:border-l-0`}
+                        className={`pr-[5px] pl-[30px] !mb-0 border-l border-solid border-light dark:border-dark squeak-left-border relative before:border-l-0 ${getComunityClasses(
+                            reply,
+                            resolvedBy?.data?.id === reply.id
+                        )}`}
                     >
                         <Reply reply={reply} badgeText={badgeText} />
                     </li>

diff --git a/src/components/Squeak/hooks/useQuestion.tsx b/src/components/Squeak/hooks/useQuestion.tsx
@@ -48,7 +48,7 @@ const query = (id: string | number, isModerator: boolean) =>
                     sort: ['createdAt:asc'],
                     populate: {
                         profile: {
-                            fields: ['id', 'firstName', 'lastName', 'gravatarURL', 'pronouns', 'color'],
+                            fields: ['id', 'firstName', 'lastName', 'gravatarURL', 'pronouns', 'color', 'startDate'],
                             populate: {
                                 avatar: {
                                     fields: ['id', 'url'],