Skip to content

Commit

Permalink
Merge pull request wevote#4059 from DaleMcGrew/Dale_WebApp_Sept25-2024
Browse files Browse the repository at this point in the history 
Joining a challenge now works. Inviting an invitee works as well. Updates to ChallengeHeaderSimple. Should be able to publish a challenge without a photo now.
  • Loading branch information
@DaleMcGrew
DaleMcGrew authored Sep 26, 2024
2 parents bf745c0 + d7370bd commit 9faf270
Show file tree
Hide file tree
Showing 13 changed files with 290 additions and 127 deletions.
23 changes: 15 additions & 8 deletions src/js/common/components/Challenge/JoinChallengeButton.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import historyPush from '../../utils/historyPush';
import { renderLog } from '../../utils/logging';
import AppObservableStore from '../../stores/AppObservableStore';
import ChallengeStore from '../../stores/ChallengeStore';
import ChallengeParticipantActions from '../../actions/ChallengeParticipantActions';
import ReadyStore from '../../../stores/ReadyStore';
import VoterStore from '../../../stores/VoterStore';
import { getChallengeValuesFromIdentifiers } from '../../utils/challengeUtils';
Expand Down Expand Up @@ -50,7 +51,7 @@ class JoinChallengeButton extends React.Component {
this.setState({
challengeSEOFriendlyPath,
});
} else {
} else if (challengeSEOFriendlyPathFromProps) {
this.setState({
challengeSEOFriendlyPath: challengeSEOFriendlyPathFromProps,
});
Expand All @@ -64,7 +65,7 @@ class JoinChallengeButton extends React.Component {
// voterCanEditThisChallenge,
voterIsChallengeParticipant,
});
} else {
} else if (challengeWeVoteIdFromProps) {
voterIsChallengeParticipant = ChallengeStore.getVoterIsChallengeParticipant(challengeWeVoteIdFromProps);
this.setState({
challengeWeVoteId: challengeWeVoteIdFromProps,
Expand Down Expand Up @@ -114,14 +115,12 @@ class JoinChallengeButton extends React.Component {
goToJoinChallenge = () => {
const challengeBasePath = this.getChallengeBasePath();
// console.log('goToJoinChallenge challengeBasePath: ', challengeBasePath);
const { voterFirstName, voterPhotoUrlLarge } = this.state;
const { challengeWeVoteId, voterFirstName, voterPhotoUrlLarge } = this.state;
const upcomingGoogleCivicElectionId = VoterStore.electionId();
const voterPlanCreatedForThisElection = ReadyStore.getVoterPlanTextForVoterByElectionId(upcomingGoogleCivicElectionId);
console.log('upcomingGoogleCivicElectionId: ', upcomingGoogleCivicElectionId, 'voterPlanCreatedForThisElection: ', voterPlanCreatedForThisElection);
const itemsAreMissing = !(voterFirstName) || !(voterPhotoUrlLarge) || !(voterPlanCreatedForThisElection); // Temporarily assume we have something we need from voter
// console.log('upcomingGoogleCivicElectionId: ', upcomingGoogleCivicElectionId, 'voterPlanCreatedForThisElection: ', voterPlanCreatedForThisElection);
const itemsAreMissing = !(voterFirstName) || !(voterPhotoUrlLarge) || (upcomingGoogleCivicElectionId && !(voterPlanCreatedForThisElection));
if (VoterStore.getVoterIsSignedIn()) {
// TODO: Make API call that joins this challenge

let joinChallengeNextStepPath = '';
if (itemsAreMissing) {
joinChallengeNextStepPath = `${challengeBasePath}join-challenge`;
Expand All @@ -131,7 +130,15 @@ class JoinChallengeButton extends React.Component {
const { location: { pathname: currentPathname } } = window;
AppObservableStore.setSetUpAccountBackLinkPath(currentPathname);
AppObservableStore.setSetUpAccountEntryPath(joinChallengeNextStepPath);
historyPush(joinChallengeNextStepPath);
if (itemsAreMissing) {
historyPush(joinChallengeNextStepPath);
} else {
ChallengeParticipantActions.challengeParticipantSave(challengeWeVoteId);
// Delay the redirect, so we have time to fire the above API call first
this.timer = setTimeout(() => {
historyPush(joinChallengeNextStepPath);
}, 500);
}
} else {
this.setState({
goToNextStepAfterSignIn: true,
Expand Down
2 changes: 1 addition & 1 deletion src/js/common/components/ChallengeInviteeListRoot/InviteFriendToChallengeInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const InviteFriendToChallengeInput = ({ classes, challengeWeVoteId, externalUniq
<Button
classes={{ root: classes.buttonDesktop }}
color="primary"
id="joinChallengeNow"
id="inviteToChallengeNow"
onClick={() => ChallengeInviteeActions.challengeInviteeSave(challengeWeVoteId, friendName)}
variant="contained"
>
Expand Down
83 changes: 40 additions & 43 deletions src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,18 @@ import { renderLog } from '../../utils/logging';
// import numberWithCommas from '../../utils/numberWithCommas';
// import ChallengeOwnersList from '../ChallengeInviteeListRoot/ChallengeOwnersList';
import {
CampaignActionButtonsWrapper,
CampaignImageDesktop, CampaignImageDesktopPlaceholder,
CampaignImageMobile, CampaignImageMobilePlaceholder,
CampaignImagePlaceholderText,
// CampaignPoliticianImageDesktop, CampaignPoliticianImageMobile,
CandidateCardForListWrapper, OneCampaignDescription,
OneCampaignInnerWrapper, OneCampaignOuterWrapper,
OneCampaignPhotoDesktopColumn, OneCampaignPhotoWrapperMobile,
OneCampaignTextColumn, OneCampaignTitleLink, SupportersActionLink,
SupportersCount, SupportersWrapper, TitleAndTextWrapper,
} from '../Style/CampaignCardStyles';
import { BlockedIndicator, BlockedReason, DraftModeIndicator, EditIndicator, ElectionInPast, IndicatorDefaultButtonWrapper, IndicatorButtonWrapper, IndicatorRow } from '../Style/CampaignIndicatorStyles';
ChallengeImageDesktop, ChallengeImageDesktopPlaceholder,
ChallengeImageMobile, ChallengeImageMobilePlaceholder,
ChallengeImagePlaceholderText,
CandidateCardForListWrapper,
OneChallengeInnerWrapper, OneChallengeOuterWrapper,
OneChallengePhotoDesktopColumn, OneChallengePhotoWrapperMobile,
OneChallengeTextColumn, OneChallengeTitleLink, TitleAndTextWrapper,
} from '../Style/ChallengeCardStyles';
import { DraftModeIndicator, IndicatorDefaultButtonWrapper, IndicatorRow } from '../Style/CampaignIndicatorStyles';
import DesignTokenColors from '../Style/DesignTokenColors';
import SvgImage from '../Widgets/SvgImage';

const SupportButtonBeforeCompletionScreen = React.lazy(() => import(/* webpackChunkName: 'SupportButtonBeforeCompletionScreen' */ '../CampaignSupport/SupportButtonBeforeCompletionScreen'));

// React functional component example
function ChallengeCardForListBody (props) {
renderLog('ChallengeCardForListBody'); // Set LOG_RENDER_EVENTS to log all renders
Expand All @@ -42,21 +37,21 @@ function ChallengeCardForListBody (props) {
// /////////////////////// START OF DISPLAY
return (
<CandidateCardForListWrapper limitCardWidth={limitCardWidth}>
<OneCampaignOuterWrapper limitCardWidth={limitCardWidth}>
<OneCampaignInnerWrapper
<OneChallengeOuterWrapper limitCardWidth={limitCardWidth}>
<OneChallengeInnerWrapper
hideCardMargins={hideCardMargins}
useVerticalCard={limitCardWidth || useVerticalCard || isMobileScreenSize()}
>
<OneCampaignTextColumn hideCardMargins={hideCardMargins}>
<OneChallengeTextColumn hideCardMargins={hideCardMargins}>
<TitleAndTextWrapper hideCardMargins={hideCardMargins}>
<OneCampaignTitleLink>
<OneChallengeTitleLink>
<Link
id="challengeCardDisplayName"
to={onChallengeClickLink()}
>
{challengeTitle}
</Link>
</OneCampaignTitleLink>
</OneChallengeTitleLink>
{/*
<SupportersWrapper>
<SupportersCount>
Expand All @@ -82,7 +77,7 @@ function ChallengeCardForListBody (props) {
</SupportersActionLink>
)}
</SupportersWrapper>
<OneCampaignDescription
<OneChallengeDescription
className="u-cursor--pointer"
id="challengeCardDescription"
onClick={onChallengeClick}
Expand All @@ -96,7 +91,7 @@ function ChallengeCardForListBody (props) {
{challengeDescription}
</div>
</TruncateMarkup>
</OneCampaignDescription>
</OneChallengeDescription>
*/}
{/*
<ChallengeOwnersWrapper>
Expand Down Expand Up @@ -163,6 +158,7 @@ function ChallengeCardForListBody (props) {
</IndicatorButtonWrapper>
)}
*/}
{/*
{voterCanEditThisChallenge && (
<IndicatorButtonWrapper>
<EditIndicator onClick={onChallengeEditClick}>
Expand All @@ -175,6 +171,7 @@ function ChallengeCardForListBody (props) {
</EditIndicator>
</IndicatorButtonWrapper>
)}
*/}
{/*
{(challengeSupported && !inDraftMode) && (
<IndicatorButtonWrapper>
Expand All @@ -190,28 +187,28 @@ function ChallengeCardForListBody (props) {
)}
*/}
</IndicatorRow>
</OneCampaignTextColumn>
<OneCampaignPhotoWrapperMobile
</OneChallengeTextColumn>
<OneChallengePhotoWrapperMobile
className="u-cursor--pointer u-show-mobile"
onClick={onChallengeClick}
>
{photoLargeUrl ? (
<CampaignImageMobilePlaceholder
<ChallengeImageMobilePlaceholder
id="cimp4"
profileImageBackgroundColor={profileImageBackgroundColor}
useVerticalCard={useVerticalCard}
>
<CampaignImageMobile
<ChallengeImageMobile
alt=""
src={photoLargeUrl}
style={useVerticalCard ? {
borderBottom: `1px solid ${DesignTokenColors.neutralUI100}`,
borderTop: `1px solid ${DesignTokenColors.neutralUI100}`,
} : {}}
/>
</CampaignImageMobilePlaceholder>
</ChallengeImageMobilePlaceholder>
) : (
<CampaignImageMobilePlaceholder
<ChallengeImageMobilePlaceholder
id="cimp2"
profileImageBackgroundColor={profileImageBackgroundColor}
useVerticalCard={useVerticalCard}
Expand All @@ -225,14 +222,14 @@ function ChallengeCardForListBody (props) {
marginBottom="-10px"
opacity="0.33"
/>
<CampaignImagePlaceholderText>
<ChallengeImagePlaceholderText>
No image available.
</CampaignImagePlaceholderText>
</ChallengeImagePlaceholderText>
</SvgWatermarkWrapper>
</CampaignImageMobilePlaceholder>
</ChallengeImageMobilePlaceholder>
)}
</OneCampaignPhotoWrapperMobile>
<OneCampaignPhotoDesktopColumn
</OneChallengePhotoWrapperMobile>
<OneChallengePhotoDesktopColumn
className="u-cursor--pointer u-show-desktop-tablet"
hideCardMargins={hideCardMargins}
id={`${tagIdBaseName}PhotoDesktop`}
Expand All @@ -244,13 +241,13 @@ function ChallengeCardForListBody (props) {
{photoLargeUrl ? (
<>
{useVerticalCard ? (
<CampaignImageDesktopPlaceholder
<ChallengeImageDesktopPlaceholder
id="cidp4"
limitCardWidth={limitCardWidth}
profileImageBackgroundColor={profileImageBackgroundColor}
useVerticalCard={useVerticalCard}
>
<CampaignImageDesktop
<ChallengeImageDesktop
src={photoLargeUrl}
alt=""
style={useVerticalCard ? {
Expand All @@ -260,19 +257,19 @@ function ChallengeCardForListBody (props) {
width={limitCardWidth ? '257px' : '320px'}
height={limitCardWidth ? '157px' : '168px'}
/>
</CampaignImageDesktopPlaceholder>
</ChallengeImageDesktopPlaceholder>
) : (
<CampaignImageDesktop src={photoLargeUrl} alt="" width="117px" height="117px" />
<ChallengeImageDesktop src={photoLargeUrl} alt="" width="117px" height="117px" />
)}
</>
) : (
<CampaignImageDesktopPlaceholder
<ChallengeImageDesktopPlaceholder
id="cidp5"
limitCardWidth={limitCardWidth}
profileImageBackgroundColor={profileImageBackgroundColor}
useVerticalCard={useVerticalCard}
>
<CampaignImagePlaceholderText>
<ChallengeImagePlaceholderText>
<SvgImage
applyFillColor
color={DesignTokenColors.neutralUI300}
Expand All @@ -282,12 +279,12 @@ function ChallengeCardForListBody (props) {
opacity="0.33"
/>
No image available.
</CampaignImagePlaceholderText>
</CampaignImageDesktopPlaceholder>
</ChallengeImagePlaceholderText>
</ChallengeImageDesktopPlaceholder>
)}
</OneCampaignPhotoDesktopColumn>
</OneCampaignInnerWrapper>
</OneCampaignOuterWrapper>
</OneChallengePhotoDesktopColumn>
</OneChallengeInnerWrapper>
</OneChallengeOuterWrapper>
</CandidateCardForListWrapper>
);
}
Expand Down
10 changes: 5 additions & 5 deletions src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import styled from 'styled-components';
import withStyles from '@mui/styles/withStyles';
import PropTypes from 'prop-types';
import React, { Component, Suspense } from 'react';
import { CampaignsNotAvailableToShow, ListWrapper, LoadMoreItemsManuallyWrapper, StartACampaignWrapper } from '../Style/CampaignCardStyles';
import { ChallengesNotAvailableToShow, ListWrapper, LoadMoreItemsManuallyWrapper } from '../Style/ChallengeCardStyles';
import isMobileScreenSize from '../../utils/isMobileScreenSize';
import { renderLog } from '../../utils/logging';
import ChallengeCardForList from './ChallengeCardForList';
Expand Down Expand Up @@ -146,7 +146,7 @@ class ChallengeCardList extends Component {
})}
{/*
{!!(numberDisplayed && (searchText || showAllEndorsements || showThisYear || showUpcomingEndorsements)) && (
<StartACampaignWrapper>
<StartAChallengeWrapper>
<Link className="u-link-color" to="/start-a-challenge">
Start a challenge
{(searchText && searchText.length > 0) && (
Expand All @@ -160,7 +160,7 @@ class ChallengeCardList extends Component {
</>
)}
</Link>
</StartACampaignWrapper>
</StartAChallengeWrapper>
)}
*/}
{!!(challengeList &&
Expand All @@ -179,7 +179,7 @@ class ChallengeCardList extends Component {
<DelayedLoad loadingTextLeftAlign showLoadingText waitBeforeShow={2000}>
<div>
{!(numberDisplayed) && (
<CampaignsNotAvailableToShow>
<ChallengesNotAvailableToShow>
No challenges match.
{/*
{!!(searchText || showAllEndorsements || showThisYear || showUpcomingEndorsements) && (
Expand All @@ -202,7 +202,7 @@ class ChallengeCardList extends Component {
</>
)}
*/}
</CampaignsNotAvailableToShow>
</ChallengesNotAvailableToShow>
)}
</div>
</DelayedLoad>
Expand Down
7 changes: 4 additions & 3 deletions src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import styled from 'styled-components';
import ChallengeParticipantListItem from './ChallengeParticipantListItem';
import VoterStore from '../../../stores/VoterStore';

const ChallengeParticipantList = ({ participantList }) => {
const ChallengeParticipantList = ({ participantList, uniqueExternalId }) => {
const [voterWeVoteID, setVoterWeVoteID] = React.useState('');

const handleVoterStoreChange = () => {
const voterID = VoterStore.getVoterWeVoteId();
console.log('Fetching voterWeVoteID:', voterID);
// console.log('Fetching voterWeVoteID:', voterID);
setVoterWeVoteID(voterID);
};

Expand All @@ -26,7 +26,7 @@ const ChallengeParticipantList = ({ participantList }) => {
<LeaderboardListContainer>
{participantList.map((participant) => (
<ChallengeParticipantListItem
key={`participantKey-${participant.voter_we_vote_id}`}
key={`participantKey-${participant.voter_we_vote_id}-${uniqueExternalId}`}
participant={participant}
isCurrentUser={participant.voter_we_vote_id === voterWeVoteID}
/>
Expand All @@ -36,6 +36,7 @@ const ChallengeParticipantList = ({ participantList }) => {
};
ChallengeParticipantList.propTypes = {
participantList: PropTypes.array,
uniqueExternalId: PropTypes.string,
};

const LeaderboardListContainer = styled.div`
Expand Down
4 changes: 3 additions & 1 deletion src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantListRoot.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function searchFunction () {
}


const ChallengeParticipantListRoot = ({ challengeWeVoteId, classes }) => {
const ChallengeParticipantListRoot = ({ challengeWeVoteId, classes, uniqueExternalId }) => {
// eslint-disable-next-line no-unused-vars
const [latestParticipants, setLatestParticipants] = React.useState([]);

Expand Down Expand Up @@ -124,6 +124,7 @@ const ChallengeParticipantListRoot = ({ challengeWeVoteId, classes }) => {
<ChallengeParticipantList
// participantList={latestParticipants}
participantList={participantListDummyData}
uniqueExternalId={uniqueExternalId}
/>
<Suspense fallback={<></>}>
<FirstChallengeParticipantListController challengeWeVoteId={challengeWeVoteId} searchText="SEARCH TEXT HERE" />
Expand All @@ -136,6 +137,7 @@ ChallengeParticipantListRoot.propTypes = {
// clearSearchFunction: PropTypes.func.isRequired,
// searchFunction: PropTypes.func.isRequired,
challengeWeVoteId: PropTypes.string,
uniqueExternalId: PropTypes.string,
};

const styles = () => ({
Expand Down
Loading

0 comments on commit 9faf270

Please sign in to comment.