From 535870b603d86ff453d086a1368e574c0255d89d Mon Sep 17 00:00:00 2001
From: Steven Gutierrez <stevogbmv@gmail.com>
Date: Tue, 10 Dec 2024 10:17:42 -0800
Subject: [PATCH] WV-652 Reverted challenge started text to previous iteration,
 setup challenge owner to handle up to 4 people's names

---
 .../components/Challenge/ChallengeAbout.jsx   | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx
index 2057e9f1d..273b27a5c 100644
--- a/src/js/common/components/Challenge/ChallengeAbout.jsx
+++ b/src/js/common/components/Challenge/ChallengeAbout.jsx
@@ -73,6 +73,19 @@ function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
       )}
     </span>
   );
+  const challengeOwnersText = (
+    <ChallengeOwnersText>
+      Challenge started by
+      {' '}
+      {challengeOwners.slice(0, 3).map((owner, index) => (
+        <ChallengeOwnersSpan key={owner.organization_we_vote_id}>
+          {owner.organization_name}
+          {index < challengeOwners.slice(0, 3).length - 1 ? ', ' : ''}
+        </ChallengeOwnersSpan>
+      ))}
+      {challengeOwners.length > 3 && ' and others'}
+    </ChallengeOwnersText>
+  );
   const remindFriends = 'Remind as many friends as you can about the date of the election, and let them know you will be voting.';
   const currentLeader = `Current leader: ${participantNameWithHighestRank}`;
   const friendsInvited = (
@@ -87,7 +100,7 @@ function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
     </span>
   );
 
-  const showStartedBy = false;
+  const showStartedBy = true;
   return (
     <ChallengeAboutWrapper>
       <CardRowsWrapper>
@@ -141,13 +154,7 @@ function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
                       beforeInjection={(svg) => svg.setAttribute('style', { padding: '1px 1px 1px 0px' })}
                     />
                   </SvgImageWrapper>
-                  <ChallengeOwnersDiv>
-                    <ChallengeOwnersText>
-                      Challenge started by
-                      {' '}
-                      {challengeOwners.map((owner) => <ChallengeOwnersSpan key={owner.organization_we_vote_id}>{owner.organization_name}</ChallengeOwnersSpan>)}
-                    </ChallengeOwnersText>
-                  </ChallengeOwnersDiv>
+                  <ChallengeOwnersDiv>{challengeOwnersText}</ChallengeOwnersDiv>
                 </FlexDivLeft>
               )}
             </Suspense>