Merge pull request wevote#4131 from Succorro/WV-652

WV-652 Add Challenge started line
fdiazq · Oct 20, 2024 · 96ef737 · 96ef737
2 parents 8c227c2 + 026320e
commit 96ef737
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 8 deletions.
diff --git a/src/img/global/svg-icons/rocket-ship-no-thrust.svg b/src/img/global/svg-icons/rocket-ship-no-thrust.svg
diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx
@@ -2,19 +2,26 @@ import withStyles from '@mui/styles/withStyles';
 import { EventOutlined, CampaignOutlined, EmojiEventsOutlined } from '@mui/icons-material';
 import PropTypes from 'prop-types';
 import React, { Suspense } from 'react';
+import { ReactSVG } from 'react-svg';
 import styled from 'styled-components';
 import DesignTokenColors from '../Style/DesignTokenColors';
 import { renderLog } from '../../utils/logging';
 import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
 import ChallengeStore from '../../stores/ChallengeStore';
 import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import normalizedImagePath from '../../utils/normalizedImagePath';
+
+import rocketShipNoThrust from '../../../../img/global/svg-icons/rocket-ship-no-thrust.svg';
 
 function ChallengeAbout ({ challengeWeVoteId }) {
   renderLog('ChallengeAbout');
+  const [challengeCreator, setChallengeCreator] = React.useState('');
   const [challengeInviteesCount, setChallengeInviteesCount] = React.useState(0);
+  const [challengeIsSupporting, setChallengeIsSupporting] = React.useState('');
   const [challengeParticipantCount, setChallengeParticipantCount] = React.useState(0);
   const [daysLeft, setDaysLeft] = React.useState(0);
   const [participantNameWithHighestRank, setParticipantNameWithHighestRank] = React.useState('');
+  const [showDaysLeft, setShowDaysLeft] = React.useState(true);
 
   const onAppObservableStoreChange = () => {
     setParticipantNameWithHighestRank(AppObservableStore.getChallengeParticipantNameWithHighestRankByChallengeWeVoteId(challengeWeVoteId));
@@ -28,6 +35,8 @@ function ChallengeAbout ({ challengeWeVoteId }) {
       setChallengeParticipantCount(ChallengeStore.getNumberOfParticipantsInChallenge(challengeWeVoteId));
     }
     setDaysLeft(ChallengeStore.getDaysUntilChallengeEnds(challengeWeVoteId));
+    setChallengeCreator('Anusha P.');
+    setChallengeIsSupporting('John Smith');
   };
   const onChallengeParticipantStoreChange = () => {
     if (challengeParticipantCount < ChallengeParticipantStore.getNumberOfParticipantsInChallenge(challengeWeVoteId)) {
@@ -55,14 +64,27 @@ function ChallengeAbout ({ challengeWeVoteId }) {
     <span>
       {/* Jan 20, 24 - Sep 10, 24 · */}
       Ends Nov 5, 2024
-      {' '}
-      ·
-      {' '}
-      <strong>
-        {daysLeft}
-        {' '}
-        days left
-      </strong>
+      {showDaysLeft && (
+        <ShowDaysLeftText>
+          {' '}
+          ·
+          {' '}
+          <strong>
+            {daysLeft}
+            {' '}
+            days left
+          </strong>
+        </ShowDaysLeftText>
+      )}
+
+    </span>
+  );
+  const challengeStarted = (
+    <span>
+      Challenge started by 
+      <strong>{challengeCreator}</strong> 
+      to support 
+      <strong>{challengeIsSupporting}</strong>
     </span>
   );
   const remindFriends = 'Remind as many friends as you can about the date of the election, and let them know you will be voting.';
@@ -96,6 +118,28 @@ function ChallengeAbout ({ challengeWeVoteId }) {
             </FlexDivLeft>
           </CardForListRow>
         )}
+        <CardForListRow>
+          <Suspense fallback={<></>}>
+            {challengeStarted && (
+              <FlexDivLeft>
+                <SvgImageWrapper style={{ paddingTop: '3px' }}>
+                  <ReactSVG
+                    src={normalizedImagePath(rocketShipNoThrust)}
+                    alt="Rocket Ship"
+                    beforeInjection={(svg) => {
+                      // Fill property applied to the path element, not SVG element. querySelector to grab the path element and set the attribute.
+                      svg.querySelectorAll('path').forEach((path) => {
+                        path.setAttribute('fill', 'none');
+                        path.setAttribute('stroke', '#606060');
+                      });
+                    }}
+                  />
+                </SvgImageWrapper>
+                <ChallengeStartedDiv>{challengeStarted}</ChallengeStartedDiv>
+              </FlexDivLeft>
+            )}
+          </Suspense>
+        </CardForListRow>
         <CardForListRow>
           <Suspense fallback={<></>}>
             {remindFriends && (
@@ -155,6 +199,9 @@ const ChallengeAboutWrapper = styled('div')`
   white-space: normal;
 `;
 
+const ChallengeStartedDiv = styled('div')`
+`;
+
 export const FlexDivLeft = styled('div')`
   align-items: flex-start;
   display: flex;
@@ -183,4 +230,7 @@ export const CurrentLeaderDiv = styled('div')`
 export const FriendsInvitedDiv = styled('div')`
 `;
 
+const ShowDaysLeftText = styled('span')`
+`;
+
 export default withStyles(styles)(ChallengeAbout);