Skip to content

Commit

Permalink
Updated the submit functions in HeartFavoriteToggleLive to update sup…
Browse files Browse the repository at this point in the history 
…portersCount and opposersCount. Includes local state update in the CampaignStore so we don't have to wait for API response.
  • Loading branch information
@DaleMcGrew
DaleMcGrew committed Jul 22, 2024
1 parent a48da23 commit ea960ae
Show file tree
Hide file tree
Showing 9 changed files with 151 additions and 32 deletions.
17 changes: 16 additions & 1 deletion src/js/common/actions/CampaignActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,22 @@ export default {
});
},

campaignLocalAttributesUpdate (campaignXWeVoteId, supportersCountLocal = false, opposersCountLocal = false) {
const payloadDict = {
campaignXWeVoteId,
};
if (supportersCountLocal !== false) {
payloadDict.supporters_count = supportersCountLocal;
}
if (opposersCountLocal !== false) {
payloadDict.opposers_count = opposersCountLocal;
}
Dispatcher.dispatch({
type: 'campaignLocalAttributesUpdate',
payload: payloadDict,
});
},

campaignRetrieve (campaignWeVoteId) {
let { hostname } = window.location;
hostname = hostname || '';
Expand Down Expand Up @@ -61,5 +77,4 @@ export default {
recommended_campaigns_for_campaignx_we_vote_id: campaignXWeVoteId,
});
},

};
21 changes: 18 additions & 3 deletions src/js/common/components/CampaignSupport/CampaignSupportThermometer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ class CampaignSupportThermometer extends React.Component {
super(props);
this.state = {
finalElectionDateInPast: false,
opposersCount: 0,
politicianWeVoteId: '',
supportersCountNextGoal: CampaignStore.getCampaignXSupportersCountNextGoalDefault(),
supportersCount: 0,
Expand All @@ -37,6 +38,7 @@ class CampaignSupportThermometer extends React.Component {
campaignXWeVoteId,
} = this.props;
const {
opposersCount: opposersCountPrevious,
supportersCount: supportersCountPrevious,
} = prevState;
// console.log('CampaignSupportThermometer componentDidUpdate campaignXWeVoteId:', campaignXWeVoteId);
Expand All @@ -49,13 +51,16 @@ class CampaignSupportThermometer extends React.Component {
const campaignX = CampaignStore.getCampaignXByWeVoteId(campaignXWeVoteId);
const {
campaignx_we_vote_id: campaignXWeVoteIdFromDict,
opposers_count: opposersCount,
supporters_count: supportersCount,
} = campaignX;
let opposersCountChanged = false;
let supportersCountChanged = false;
if (campaignXWeVoteIdFromDict) {
opposersCountChanged = opposersCount !== opposersCountPrevious;
supportersCountChanged = supportersCount !== supportersCountPrevious;
}
if (campaignXWeVoteId !== previousCampaignXWeVoteId || supportersCountChanged) {
if (campaignXWeVoteId !== previousCampaignXWeVoteId || opposersCountChanged || supportersCountChanged) {
this.onCampaignStoreChange();
}
}
Expand All @@ -81,6 +86,7 @@ class CampaignSupportThermometer extends React.Component {
campaignx_we_vote_id: campaignXWeVoteIdFromDict,
final_election_date_in_past: finalElectionDateInPast,
linked_politician_we_vote_id: politicianWeVoteId,
opposers_count: opposersCount,
supporters_count: supportersCount,
supporters_count_next_goal: supportersCountNextGoal,
} = campaignX;
Expand All @@ -89,10 +95,17 @@ class CampaignSupportThermometer extends React.Component {
supportersCountNextGoalWithFloor += 20;
}
if (campaignXWeVoteIdFromDict && politicianWeVoteId) {
const { politicianWeVoteId: politicianWeVoteIdPrevious } = this.state;
if (politicianWeVoteId !== politicianWeVoteIdPrevious) {
const {
opposersCount: opposersCountPrevious,
politicianWeVoteId: politicianWeVoteIdPrevious,
supportersCount: supportersCountPrevious,
} = this.state;
if ((opposersCount !== opposersCountPrevious) ||
(politicianWeVoteId !== politicianWeVoteIdPrevious) ||
(supportersCount !== supportersCountPrevious)) {
this.setState({
finalElectionDateInPast,
opposersCount,
politicianWeVoteId,
supportersCount,
supportersCountNextGoal: supportersCountNextGoalWithFloor,
Expand All @@ -101,6 +114,7 @@ class CampaignSupportThermometer extends React.Component {
} else if (campaignXWeVoteIdFromDict && !politicianWeVoteId) {
this.setState({
finalElectionDateInPast,
opposersCount,
supportersCount,
supportersCountNextGoal: supportersCountNextGoalWithFloor,
});
Expand Down Expand Up @@ -129,6 +143,7 @@ class CampaignSupportThermometer extends React.Component {
// to arrive.
this.setState({
finalElectionDateInPast: false,
opposersCount: 0,
supportersCount: 0,
supportersCountNextGoal: 0,
});
Expand Down
30 changes: 27 additions & 3 deletions src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleBase.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import CampaignActions from '../../../actions/CampaignActions';
import DesignTokenColors from '../../Style/DesignTokenColors';
import numberWithCommas from '../../../utils/numberWithCommas';
import HeartFavoriteToggleIcon from './HeartFavoriteToggleIcon';
Expand Down Expand Up @@ -98,7 +99,7 @@ class HeartFavoriteToggleBase extends Component {
}

handleActionClick = (support = true, oppose = false, stopSupporting = false, stopOpposing = false) => {
const { voterSignedInWithEmail } = this.props;
const { campaignXWeVoteId, voterSignedInWithEmail } = this.props;
const {
campaignXOpposersCountLocal: campaignXOpposersCountLocalPrevious,
campaignXSupportersCountLocal: campaignXSupportersCountLocalPrevious,
Expand All @@ -125,11 +126,19 @@ class HeartFavoriteToggleBase extends Component {
if (this.props.submitSupport) {
this.props.submitSupport();
}
// Local quick update of supporters_count in CampaignX object
const supportersCountLocal = this.state.campaignXSupportersCountLocal;
CampaignActions.campaignLocalAttributesUpdate(campaignXWeVoteId, supportersCountLocal);
});
}
if (voterOpposesLocalPrevious) {
this.setState({
campaignXOpposersCountLocal: Math.max(0, campaignXOpposersCountLocalPrevious - 1),
}, () => {
// Local quick update of opposers_count in CampaignX object
const opposersCountLocal = this.state.campaignXOpposersCountLocal;
const supportersCountLocal = false;
CampaignActions.campaignLocalAttributesUpdate(campaignXWeVoteId, supportersCountLocal, opposersCountLocal);
});
}
} else if (stopSupporting) {
Expand All @@ -140,6 +149,9 @@ class HeartFavoriteToggleBase extends Component {
if (this.props.submitStopSupporting) {
this.props.submitStopSupporting();
}
// Local quick update of supporters_count in CampaignX object
const supportersCountLocal = this.state.campaignXSupportersCountLocal;
CampaignActions.campaignLocalAttributesUpdate(campaignXWeVoteId, supportersCountLocal);
});
}
} else if (oppose) {
Expand All @@ -150,11 +162,19 @@ class HeartFavoriteToggleBase extends Component {
if (this.props.submitOppose) {
this.props.submitOppose();
}
// Local quick update of opposers_count in CampaignX object
const opposersCountLocal = this.state.campaignXOpposersCountLocal;
const supportersCountLocal = false;
CampaignActions.campaignLocalAttributesUpdate(campaignXWeVoteId, supportersCountLocal, opposersCountLocal);
});
}
if (voterSupportsLocalPrevious) {
this.setState({
campaignXSupportersCountLocal: Math.max(0, campaignXSupportersCountLocalPrevious - 1),
}, () => {
// Local quick update of supporters_count in CampaignX object
const supportersCountLocal = this.state.campaignXSupportersCountLocal;
CampaignActions.campaignLocalAttributesUpdate(campaignXWeVoteId, supportersCountLocal);
});
}
} else if (stopOpposing) {
Expand All @@ -165,6 +185,10 @@ class HeartFavoriteToggleBase extends Component {
if (this.props.submitStopOpposing) {
this.props.submitStopOpposing();
}
// Local quick update of opposers_count in CampaignX object
const opposersCountLocal = this.state.campaignXOpposersCountLocal;
const supportersCountLocal = false;
CampaignActions.campaignLocalAttributesUpdate(campaignXWeVoteId, supportersCountLocal, opposersCountLocal);
});
}
}
Expand Down Expand Up @@ -207,7 +231,7 @@ class HeartFavoriteToggleBase extends Component {
)}
{/* Add "like this politician?" popout */}
{(!voterSignedInWithEmail && showSignInPromptSupports) && (
<span onClick={() => this.handleSignInClick()}> sign in</span>
<span onClick={() => this.handleSignInClick()}>&nbsp;sign in</span>
)}
</LikeContainer>
<DislikeContainer onClick={() => {
Expand All @@ -229,7 +253,7 @@ class HeartFavoriteToggleBase extends Component {
)}
{/* Add "Don't like this politician?" popout */}
{(!voterSignedInWithEmail && showSignInPromptOpposes) && (
<span onClick={() => this.handleSignInClick()}> sign in</span>
<span onClick={() => this.handleSignInClick()}>&nbsp;sign in</span>
)}
</DislikeContainer>
</HeartFavoriteToggleContainer>
Expand Down
37 changes: 30 additions & 7 deletions src/js/common/pages/Politician/PoliticianDetailsPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
CampaignOwnersDesktopWrapper, CampaignSubSectionSeeAll, CampaignSubSectionTitle, CampaignSubSectionTitleWrapper, // CampaignTitleAndScoreBar,
CommentsListWrapper, DetailsSectionDesktopTablet, DetailsSectionMobile, OtherElectionsWrapper, SupportButtonFooterWrapperAboveFooterButtons, SupportButtonPanel,
} from '../../components/Style/CampaignDetailsStyles';
import { EditIndicator, ElectionInPast, IndicatorButtonWrapper, IndicatorRow } from '../../components/Style/CampaignIndicatorStyles';
import { EditIndicator, IndicatorButtonWrapper, IndicatorRow } from '../../components/Style/CampaignIndicatorStyles';
import {
CandidateCampaignListDesktop, CandidateCampaignListMobile, CandidateCampaignWrapper,
// OfficeHeldNameDesktop, OfficeHeldNameMobile, PoliticianImageDesktop, PoliticianImageDesktopPlaceholder, PoliticianImageMobile, PoliticianImageMobilePlaceholder, PoliticianNameDesktop, PoliticianNameMobile, PoliticianNameOuterWrapperDesktop,
Expand All @@ -46,18 +46,19 @@ import returnFirstXWords from '../../utils/returnFirstXWords';
import saveCampaignSupportAndGoToNextPage from '../../utils/saveCampaignSupportAndGoToNextPage';
import DesignTokenColors from '../../components/Style/DesignTokenColors';
import OrganizationActions from '../../../actions/OrganizationActions';
import SupportActions from '../../../actions/SupportActions';

// const CampaignCommentsList = React.lazy(() => import(/* webpackChunkName: 'CampaignCommentsList' */ '../../components/Campaign/CampaignCommentsList'));
const CampaignRetrieveController = React.lazy(() => import(/* webpackChunkName: 'CampaignRetrieveController' */ '../../components/Campaign/CampaignRetrieveController'));
const CampaignNewsItemList = React.lazy(() => import(/* webpackChunkName: 'CampaignNewsItemList' */ '../../components/Campaign/CampaignNewsItemList'));
const CampaignShareChunk = React.lazy(() => import(/* webpackChunkName: 'CampaignShareChunk' */ '../../components/Campaign/CampaignShareChunk'));
const ItemActionBar = React.lazy(() => import(/* webpackChunkName: 'ItemActionBar' */ '../../../components/Widgets/ItemActionBar/ItemActionBar'));
const OfficeNameText = React.lazy(() => import(/* webpackChunkName: 'OfficeNameText' */ '../../components/Widgets/OfficeNameText'));
const PoliticianEndorsementsList = React.lazy(() => import(/* webpackChunkName: 'PoliticianEndorsementsList' */ '../../components/Politician/PoliticianEndorsementsList'));
const PoliticianLinks = React.lazy(() => import(/* webpackChunkName: 'PolitianLinks' */ '../../components/Politician/PoliticianLinks'));
const PoliticianRetrieveController = React.lazy(() => import(/* webpackChunkName: 'PoliticianRetrieveController' */ '../../components/Politician/PoliticianRetrieveController'));
const PoliticianPositionRetrieveController = React.lazy(() => import(/* webpackChunkName: 'PoliticianPositionRetrieveController' */ '../../components/Position/PoliticianPositionRetrieveController'));
const ReadMore = React.lazy(() => import(/* webpackChunkName: 'ReadMore' */ '../../components/Widgets/ReadMore'));
const SupportButtonBeforeCompletionScreen = React.lazy(() => import(/* webpackChunkName: 'SupportButtonBeforeCompletionScreen' */ '../../components/CampaignSupport/SupportButtonBeforeCompletionScreen'));
const UpdatePoliticianInformation = React.lazy(() => import(/* webpackChunkName: 'UpdatePoliticianInformation' */ '../../components/Politician/UpdatePoliticianInformation'));

const futureFeaturesDisabled = true;
Expand Down Expand Up @@ -143,6 +144,7 @@ class PoliticianDetailsPage extends Component {
if (apiCalming('organizationsFollowedRetrieve', 60000)) {
OrganizationActions.organizationsFollowedRetrieve();
}
SupportActions.voterAllPositionsRetrieve();

// console.log('componentDidMount triggerSEOPathRedirect: ', triggerSEOPathRedirect, ', politicianSEOFriendlyPathFromObject: ', politicianSEOFriendlyPathFromObject);
if (triggerSEOPathRedirect && politicianSEOFriendlyPathFromObject) {
Expand Down Expand Up @@ -589,6 +591,7 @@ class PoliticianDetailsPage extends Component {
}

const campaignAdminEditUrl = `${webAppConfig.WE_VOTE_SERVER_ROOT_URL}campaign/${linkedCampaignXWeVoteId}/summary`;
const candidateWeVoteId = CandidateStore.getCandidateWeVoteIdRunningFromPoliticianWeVoteId(politicianWeVoteId);

if (politicianDataNotFound) {
return (
Expand Down Expand Up @@ -1065,11 +1068,31 @@ class PoliticianDetailsPage extends Component {
<SupportButtonFooterWrapperAboveFooterButtons className="u-show-mobile">
<SupportButtonPanel>
<Suspense fallback={<span>&nbsp;</span>}>
<SupportButtonBeforeCompletionScreen
campaignXWeVoteId={linkedCampaignXWeVoteId}
functionToUseToKeepHelping={this.functionToUseToKeepHelping}
functionToUseWhenProfileComplete={this.functionToUseWhenProfileComplete}
/>
{(finalElectionDateInPast) ? ( /* || usePoliticianWeVoteIdForBallotItem */
<ItemActionBar
ballotItemWeVoteId={politicianWeVoteId}
ballotItemDisplayName={politicianName}
commentButtonHide
externalUniqueId={`PoliticianDetailsPage-ItemActionBar-${politicianWeVoteId}`}
hidePositionPublicToggle
// inCard
positionPublicToggleWrapAllowed
shareButtonHide
useSupportWording
/>
) : (
<ItemActionBar
ballotItemWeVoteId={candidateWeVoteId}
ballotItemDisplayName={politicianName}
commentButtonHide
externalUniqueId={`PoliticianDetailsPage-ItemActionBar-${candidateWeVoteId}`}
hidePositionPublicToggle
// inCard
positionPublicToggleWrapAllowed
shareButtonHide
// useSupportWording
/>
)}
</Suspense>
</SupportButtonPanel>
</SupportButtonFooterWrapperAboveFooterButtons>
Expand Down
24 changes: 24 additions & 0 deletions src/js/common/stores/CampaignStore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -469,6 +469,30 @@ class CampaignStore extends ReduceStore {
revisedState = { ...revisedState, voterOwnedCampaignXWeVoteIds };
return revisedState;

case 'campaignLocalAttributesUpdate':
// console.log('CampaignStore campaignLocalAttributesUpdate: ', action.payload);
if (action.payload === undefined) {
return state;
} else {
const campaignXWeVoteId = action.payload.campaignXWeVoteId || '';
if (campaignXWeVoteId in allCachedCampaignXDicts) {
campaignX = this.getCampaignXByWeVoteId(campaignXWeVoteId);
if (action.payload.opposers_count) {
campaignX.opposers_count = action.payload.opposers_count;
}
if (action.payload.supporters_count) {
campaignX.supporters_count = action.payload.supporters_count;
}
allCachedCampaignXDicts[campaignXWeVoteId] = campaignX;
return {
...state,
allCachedCampaignXDicts,
};
} else {
return state;
}
}

case 'campaignNewsItemSave':
// console.log('CampaignNewsItemStore campaignNewsItemSave');
if (action.res.campaignx_we_vote_id && action.res.success) {
Expand Down
Loading

0 comments on commit ea960ae

Please sign in to comment.