47 lines
1.7 KiB
JavaScript
47 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import Modal from './Modal';
|
|
import {toggleContactModal, updateEmailBody} from '../../actions'
|
|
|
|
const ContactModal = props => {
|
|
/**
|
|
* ContactModal - an adaptation of the Modal.js component which will create a modal and pass all required functionality to make it work for
|
|
* to develop the Contact Modal. In the contact modal, a form along with an onSubmit function is created an passed to the content for the
|
|
* Modal.js. Actions will not be used since we will perform all of the functionality within the content area. Once displayed, a user can
|
|
* type some message and open that message directly in their email client by using the mailto: link.
|
|
*
|
|
* Required props:
|
|
* show - determines whether or not to display the modal
|
|
*
|
|
*/
|
|
const onSubmit = (e) => {
|
|
e.preventDefault(); // Prevent default submit function
|
|
|
|
window.open(`mailto:cam@camscode.com?body=${props.body}`); // Open the message in user's email client
|
|
|
|
props.toggleContactModal(); // Close the contact modal
|
|
};
|
|
|
|
const renderContent = () => {
|
|
// Render the contact modal form
|
|
return (
|
|
<form onSubmit={(e)=>onSubmit(e)}>
|
|
<textarea className="large" onKeyUp={(e)=>{props.updateEmailBody(e);}}/>
|
|
<button>Open In Email Editor</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
return <Modal
|
|
title="Contact Me"
|
|
content = {renderContent()}
|
|
onDismiss={props.toggleContactModal}
|
|
show={props.show}
|
|
/>
|
|
};
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {body: state.contactModal.emailBody};
|
|
}
|
|
|
|
export default connect(mapStateToProps, {toggleContactModal, updateEmailBody})(ContactModal); |