Feature/hrithik/congratulationsPopupWindow #24
Conversation
… where you can specify the text of the button to open the popup
…e overall functionality is also working
| buttonText: string; // Define prop for button text | ||
| } | ||
| const CongratulationsPopupWindow: React.FC<CongratulationsPopupWindowProps> = ({ buttonText }) => { | ||
| const [isOpen, setIsOpen] = useState(false); |
There was a problem hiding this comment.
I think the state of the popup should go outside the pop up this way we can manage the state of the popup from outside. We many not always be triggering the popup using a button. Or at least a way to set the state of the popup from outside the component
Either with state logic outside for example the twobuttonpopup here
Or with a way to set the logic from outside like how Accordian is used in FAQ
There was a problem hiding this comment.
Example on Candidates.tsx
| </div> | ||
| <div className={styles.spacer} style={{ height: "2px" }}></div> {/* Added spacer */} | ||
| <div className={styles.closeButton}> | ||
| <Button onClick={closePopupAndReturn} children="Click here to return to Main Page" /> |
There was a problem hiding this comment.
Chidren can be passed through passing the content through opening and closing tags. Children is a keyworkd and react knows what to do. So it'll be <Button> Click here to return to Main Page </Button>
Also the padding on the button looks a bit thin
There was a problem hiding this comment.
I had to change it in the Button.module.css file since this is a button component.
|
|
||
| const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => { | ||
| if (event.key === "Enter" || event.key === " ") { | ||
| onClose(); |
There was a problem hiding this comment.
Are we purposely having this case not navigate to ccidc.org?
|
|
||
| return ( | ||
| <div> | ||
| <Button onClick={onClose}>{buttonText}</Button> |
There was a problem hiding this comment.
I don't think this button should belong in congratulations popup. This results in when ever we use the popup the will show up but we don't want that.
| cursor: pointer; | ||
| } | ||
|
|
||
| .closeButton:hover { |
There was a problem hiding this comment.
This is a repeat on the cursor style already applied by button.module.css
| <img src={closeIcon} alt="Close Popup" /> | ||
| </button> | ||
| <img className={styles.checkMark} src={checkMark} alt="failed to load" /> | ||
| <div className={styles.mainText}> Congratulations! </div> |
There was a problem hiding this comment.
can we change this div and the div bellow to <p> they make more semantic sense. though it has some styling impacts so either remove the stylings on p or adjust the existing stylings
| </div> | ||
| ); | ||
| }; | ||
| export default CongratulationsPopupWindow; |
There was a problem hiding this comment.
can we just export function this and add the export to the index.ts file in this folder? Just to keep it consistent with the rest of the code.
frontend/src/pages/Candidates.tsx
Outdated
| } | ||
|
|
||
| export default Candidates; |
There was a problem hiding this comment.
can we just export function this. Just to keep it consistent with rest of the code
…called TestCongratulations. Can be accessed by going to /TestCongratulations on the browser.
Tracking Info
Resolves #16
Changes
Imported some new packages, so be sure to run npm install.
I added a pop-up window component that can be called once the user submits the form.
The button can be in the original page and using the onClick method, it can open the component. The component opens as a popup and dims the background.
This is an example call that would be nested in the original page:
<CongratulationsPopupWindow buttonText="Congratulations Window" />, where buttonText is the text that should be in the button. The button automatically takes the style of the Button.tsx component.When the button is clicked on the popup or the close button is clicked, it redirects the user to the home page (https://ccidc.org/).
I also modified the behavior of the Button component to where the onClick is not specified by default, so you have to use "undefined" if the button should not have an onClick:
<Button onClick={undefined}></Button>.Testing
To test the changes worked, I ran it on my machine by adding a custom button to the Candidates Tab called "Congratulations Window", which opens the popup when clicked.
Confirmation of Change
After the button is clicked:
After either the close button or the "Click here.." button is clicked:
