Merge pull request #4175 from jedwardmook/WV-659

WV-659 VoterPositionEntryAndDisplay: Open modal when you click "What's your opinion?" input

src/js/common/components/PositionItem/VoterPositionEntryAndDisplay.jsx

@@ -6,10 +6,12 @@ import { ThumbDownAltRounded } from '@mui/icons-material';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import { Popover } from '@mui/material';
 import DesignTokenColors from '../Style/DesignTokenColors';
+import VoterPositionEditModal from '../../../components/PositionItem/VoterPositionEditModal';
 
 function VoterPositionEntryAndDisplay () {
   const [voterOpinion, setVoterOpinion] = useState(null);
   const [anchorEl, setAnchorEL] = useState(null);
+  const [showVoterEdit, setShowVoterEdit] = useState(false);
 
   const voter = {
     first_name: 'David',
@@ -18,21 +20,27 @@ function VoterPositionEntryAndDisplay () {
     voter_photo_url_medium: '',
   };
 
+  const candidateName = 'Holly Mitchell';
+
   const opinion = {
     opinion_body: 'Holly can get the job done',
     opinion_time_created: new Date(),
     opinion_likes: ['Blair H', 'Malena H', 'Anusha K', 'Ayobami B', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H', 'Blair H'],
     opinion_dislikes: ['Enrique C'],
   };
 
-  const handleVoterEditClick = () => {
-    console.log('Edit voter logic will go here');
+  // const handleVoterEditClick = () => {
+  //   console.log('Edit voter logic will go here');
+  // };
+
+  const handleSetOpinonClick = () => {
+    setVoterOpinion(opinion);
   };
 
   const formatNewDate = (date) => new Intl.DateTimeFormat('en-US', { month: '2-digit', day: 'numeric', year: '2-digit' }).format(date);
 
   const voterOpinionClick = () => {
-    setVoterOpinion(opinion);
+    setShowVoterEdit(!showVoterEdit);
   };
 
   const handleEditCommentClick = (e) => {
@@ -83,11 +91,17 @@ function VoterPositionEntryAndDisplay () {
               </>
             )}
         </VoterAvatar>
-        <VoterEdit onClick={handleVoterEditClick}>
+        <VoterEdit onClick={handleSetOpinonClick}>
           <EditIcon />
         </VoterEdit>
       </VoterAvatarDisplayContainer>
       <VoterOpinionDisplayContainer>
+        <VoterPositionEditModal
+          showVoterEdit={showVoterEdit}
+          setShowVoterEdit={setShowVoterEdit}
+          candidateName={candidateName}
+          voter={voter}
+        />
         {voterOpinion ? (
           <VoterOpinionContainer>
             <VoterTitle>

src/js/common/stories/VoterPositionEntryAndDisplay.stories.js

@@ -1,9 +1,17 @@
 import React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
 import VoterPositionEntryAndDisplay from '../components/PositionItem/VoterPositionEntryAndDisplay';
+import muiTheme from '../components/Style/muiTheme';
+
+
 
 export default {
   title: 'Components/PositionItem/VoterPositionEntryAndDisplay',
   component: VoterPositionEntryAndDisplay,
 };
 
-export const Default = () => <VoterPositionEntryAndDisplay />;
+export const Default = () => (
+  <ThemeProvider theme={muiTheme}>
+    <VoterPositionEntryAndDisplay />
+  </ThemeProvider>
+);

src/js/components/Activity/ActivityPostModal.jsx

@@ -65,8 +65,10 @@ const ActivityPostModal = (props) => {
     }
   }, [initialFocusSet]);
 
-  // onBlurInput = () => {
-  // };
+  const onBlurInput = () => {
+    restoreStylesAfterCordovaKeyboard('ActivityPostModal');
+  };
+
 
   const onFocusInput = () => {
     prepareForCordovaKeyboard('ActivityPostModal');
@@ -81,7 +83,6 @@ const ActivityPostModal = (props) => {
     const visibilitySetting = visibilityIsPublic ? 'SHOW_PUBLIC' : 'FRIENDS_ONLY';
     ActivityActions.activityPostSave(activityTidbitWeVoteId, statementText, visibilitySetting);
     toggleModal();
-    restoreStylesAfterCordovaKeyboard('ActivityPostModal');
   };
 
   const updateStatementTextToBeSaved = (e) => {