Tweaked where we place the Suspense for the HelpWinOrDefeatModal.

wevote · Aug 19, 2024 · 4f8b176 · 4f8b176
1 parent 9724fd4
commit 4f8b176
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/src/js/common/components/CampaignSupport/HelpWinOrDefeatModal.jsx b/src/js/common/components/CampaignSupport/HelpWinOrDefeatModal.jsx
@@ -1,16 +1,17 @@
 import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
-import React, { Component, Suspense } from 'react';
+import React, { Component } from 'react';
 import ModalDisplayTemplateA, { templateAStyles, TextFieldWrapper } from '../../../components/Widgets/ModalDisplayTemplateA';
 import { renderLog } from '../../utils/logging';
 import stringContains from '../../utils/stringContains';
 import CandidateStore from '../../../stores/CandidateStore';
 import MeasureStore from '../../../stores/MeasureStore';
 import SupportStore from '../../../stores/SupportStore';
 import VoterStore from '../../../stores/VoterStore';
+import PayToPromoteProcess from './PayToPromoteProcess';
 
-const PayToPromoteProcess = React.lazy(() => import(/* webpackChunkName: 'PayToPromoteProcess' */ './PayToPromoteProcess')); // eslint-disable-line import/no-cycle
+// const PayToPromoteProcess = React.lazy(() => import(/* webpackChunkName: 'PayToPromoteProcess' */ './PayToPromoteProcess')); // eslint-disable-line import/no-cycle
 
 
 class HelpWinOrDefeatModal extends Component {
@@ -150,7 +151,9 @@ class HelpWinOrDefeatModal extends Component {
 
   render () {
     renderLog('HelpWinOrDefeatModal');  // Set LOG_RENDER_EVENTS to log all renders
+    // const { ballotItemWeVoteId } = this.props;
     const { show } = this.props;
+    // console.log('HelpWinOrDefeatModal render, ballotItemWeVoteId: ', ballotItemWeVoteId, ', show: ', show);
     const {
       ballotItemDisplayName, campaignXWeVoteId,
       voterOpposesBallotItem, voterSupportsBallotItem,
@@ -181,13 +184,11 @@ class HelpWinOrDefeatModal extends Component {
     // console.log('HelpWinOrDefeatModal render, voter_address_object: ', voter_address_object);
     const textFieldJSX = (
       <TextFieldWrapper>
-        <Suspense fallback={<></>}>
-          <PayToPromoteProcess
-            campaignXWeVoteId={campaignXWeVoteId}
-            chipInPaymentValueDefault="1.00"
-            lowerDonations
-          />
-        </Suspense>
+        <PayToPromoteProcess
+          campaignXWeVoteId={campaignXWeVoteId}
+          chipInPaymentValueDefault="1.00"
+          lowerDonations
+        />
       </TextFieldWrapper>
     );
 

diff --git a/src/js/components/Widgets/ItemActionBar/ItemActionBar.jsx b/src/js/components/Widgets/ItemActionBar/ItemActionBar.jsx
@@ -2,7 +2,7 @@ import { Comment, Done, NotInterested, ThumbDown, ThumbUp } from '@mui/icons-mat
 import { Button } from '@mui/material';
 import withStyles from '@mui/styles/withStyles';
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Suspense } from 'react';
 import styled from 'styled-components';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
@@ -23,9 +23,10 @@ import PositionPublicToggle from '../PositionPublicToggle';
 import ShareButtonDropDown from '../ShareButtonDropdown';
 import { openSnackbar } from '../../../common/components/Widgets/SnackNotifier';
 import DesignTokenColors from '../../../common/components/Style/DesignTokenColors';
-import HelpWinOrDefeatModal from '../../../common/components/CampaignSupport/HelpWinOrDefeatModal'; // eslint-disable-line import/no-cycle
 import PositionStatementModal from '../PositionStatementModal'; // eslint-disable-line import/no-cycle
 
+const HelpWinOrDefeatModal = React.lazy(() => import(/* webpackChunkName: 'HelpWinOrDefeatModal' */ '../../../common/components/CampaignSupport/HelpWinOrDefeatModal')); // eslint-disable-line import/no-cycle
+
 const NUMBER_OF_BALLOT_CHOICES_ALLOWED_BEFORE_SHOW_MODAL = 3;
 const shareIconSvg = '../../../../img/global/svg-icons/share-icon.svg';
 
@@ -62,6 +63,7 @@ class ItemActionBar extends PureComponent {
   componentDidMount () {
     // console.log('ItemActionBar, NEW componentDidMount');
     const { ballotItemWeVoteId } = this.props;
+    // console.log('ItemActionBar, NEW componentDidMount ballotItemWeVoteId:', ballotItemWeVoteId);
     if (ballotItemWeVoteId) {
       const isCandidate = stringContains('cand', ballotItemWeVoteId); // isCandidate = the default
       const isMeasure = stringContains('meas', ballotItemWeVoteId);
@@ -248,6 +250,8 @@ class ItemActionBar extends PureComponent {
   }
 
   openHelpWinOrDefeatModal = () => {
+    // const { ballotItemWeVoteId } = this.props;
+    // console.log('openHelpWinOrDefeatModal ballotItemWeVoteId: ', ballotItemWeVoteId);
     this.setState({
       helpWinOrDefeatModalOpen: true,
     });
@@ -977,14 +981,14 @@ class ItemActionBar extends PureComponent {
               ballotItemType={ballotItemType}
             />
           )}
-          {helpWinOrDefeatModalOpen && (
+          <Suspense fallback={<></>}>
             <HelpWinOrDefeatModal
               ballotItemWeVoteId={ballotItemWeVoteId}
               // externalUniqueId={externalUniqueId}
               show={helpWinOrDefeatModalOpen}
               toggleModal={this.toggleHelpWinOrDefeatFunction}
             />
-          )}
+          </Suspense>
           {voterTextStatementOpened && (
             <PositionStatementModal
               ballotItemWeVoteId={ballotItemWeVoteId}

diff --git a/src/js/components/Widgets/ModalDisplayTemplateA.jsx b/src/js/components/Widgets/ModalDisplayTemplateA.jsx
@@ -20,7 +20,7 @@ class ModalDisplayTemplateA extends Component {
   render () {
     renderLog('ModalDisplayTemplateA');  // Set LOG_RENDER_EVENTS to log all renders
     const {
-      classes, dialogTitleJSX, externalUniqueId, tallMode, textFieldJSX,
+      classes, dialogTitleJSX, externalUniqueId, show, tallMode, textFieldJSX,
     } = this.props;
     let dialogPaperCombined;
     if (tallMode) {
@@ -32,8 +32,8 @@ class ModalDisplayTemplateA extends Component {
     return (
       <Dialog
         classes={{ paper: dialogPaperCombined }}
-        onClose={() => { this.props.toggleModal(); }}
-        open={this.props.show}
+        onClose={() => this.props.toggleModal()}
+        open={show}
         style={{ paddingTop: `${isCordova() ? '75px' : 'undefined'}` }}
       >
         <DialogTitle classes={{ root: classes.dialogTitle }}>
@@ -44,7 +44,7 @@ class ModalDisplayTemplateA extends Component {
             <IconButton
               aria-label="Close"
               classes={{ root: classes.closeButton }}
-              onClick={() => { this.props.toggleModal(); }}
+              onClick={() => this.props.toggleModal()}
               id={`closeModalDisplayTemplateA${externalUniqueId}`}
               size="large"
             >