From 5a02de2054e4c29488fb3a542a001afcb28db509 Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <figueroa0609@protonmail.com>
Date: Mon, 20 Sep 2021 16:36:40 -0400
Subject: [PATCH] Added Modal Support and a contact modal to nav Modal
 component was created to be used throughout the app Contact Modal was created
 with a form to make and send emails to me redux wired up for the Contact
 Modal

---
 public/index.html                   |  1 +
 src/actions/index.js                | 15 +++++++++-
 src/components/ContactModal.js      | 33 +++++++++++++++++++++
 src/components/Modal.js             | 26 ++++++++++++++++
 src/components/Navigation.js        | 16 ++++++++--
 src/components/css/Modal.css        | 46 +++++++++++++++++++++++++++++
 src/components/css/Navigation.css   | 10 +++++--
 src/reducers/contactModalReducer.js | 13 ++++++++
 src/reducers/index.js               |  4 ++-
 9 files changed, 158 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ContactModal.js
 create mode 100644 src/components/Modal.js
 create mode 100644 src/components/css/Modal.css
 create mode 100644 src/reducers/contactModalReducer.js
diff --git a/public/index.html b/public/index.html
index aa069f2..566f178 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/actions/index.js b/src/actions/index.js
index 306218d..ffc198b 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -2,10 +2,23 @@ import github from '../apis/github';
 
 export const getRepos = () => async (dispatch, getState) => {
   const response = await github.get('/users/RaspberryProgramming/repos');
-  //console.log(response);
 
   dispatch({
     type: 'GET_REPOS',
     payload: response.data,
   });
+};
+
+export const updateEmailBody = (event) => async (dispatch, getState) => {
+  console.log(event);
+  dispatch({
+    type: 'UPDATE_EMAIL_BODY',
+    payload: event.target.value,
+  });
+};
+
+export const toggleContactModal = () => async (dispatch, getState) => {
+  dispatch({
+    type: 'TOGGLE_CONTACT_MODAL',
+  });
 };
\ No newline at end of file
diff --git a/src/components/ContactModal.js b/src/components/ContactModal.js
new file mode 100644
index 0000000..8e2fa95
--- /dev/null
+++ b/src/components/ContactModal.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Modal from './Modal';
+import {toggleContactModal, updateEmailBody} from '../actions'
+
+const ContactModal = props => {
+    const onSubmit = (e) => {
+        e.preventDefault();
+        window.open(`mailto:camerin@camsprojects.online?body=${props.body}`);
+        props.toggleContactModal();
+    };
+
+    const renderContent = () => {
+        return (
+        <form onSubmit={(e)=>onSubmit(e)}>
+            <input className="large" onKeyUp={(e)=>{props.updateEmailBody(e);}}/>
+            <button>Open In Email Editor</button>
+        </form>
+        );
+    };
+
+    return <Modal
+        title="Contact Me"
+        content = {renderContent()}
+        onDismiss={props.toggleContactModal}
+      />
+};
+
+const mapStateToProps = (state) => {
+    return {body: state.contactModal.emailBody};
+}
+
+export default connect(mapStateToProps, {toggleContactModal, updateEmailBody})(ContactModal);
\ No newline at end of file
diff --git a/src/components/Modal.js b/src/components/Modal.js
new file mode 100644
index 0000000..82e14db
--- /dev/null
+++ b/src/components/Modal.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './css/Modal.css';
+
+const Modal = props => {
+  return ReactDOM.createPortal(
+    <div onClick={props.onDismiss} className="modal">
+      <div onClick={(e) => e.stopPropagation()} className="box">
+
+        <div className="title">{props.title}</div>
+
+        <div className="content">
+            { props.content }
+        </div>
+
+        <div className="actions">
+          { props.actions }
+        </div>
+
+      </div>
+    </div>,
+    document.querySelector('#modal')
+  );
+};
+
+export default Modal;
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 8b806f8..becafc7 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -1,9 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import {toggleContactModal} from '../actions'
 import './css/Navigation.css';
-import { HouseDoor, FileEarmarkPerson, Github, Youtube } from 'react-bootstrap-icons';
+import { HouseDoor, FileEarmarkPerson, Github, Youtube, Envelope } from 'react-bootstrap-icons';
+import ContactModal from './ContactModal';
 
 const Navigation = (props) => {
+
   return (
     <div className="Navigation">
       <Link to="/">
@@ -22,9 +26,17 @@ const Navigation = (props) => {
         About
         <FileEarmarkPerson />
       </Link>
+      <button className="end" onClick={()=>props.toggleContactModal()}>
+        Contact Me
+        <Envelope />
+      </button>
+      {props.modal ? <ContactModal /> : ''}
     </div>
   );
 }
 
+const mapStateToProps = (state) => {
+  return {modal: state.contactModal.contactModal}
+}
 
-export default Navigation;
+export default connect(mapStateToProps, {toggleContactModal})(Navigation);
diff --git a/src/components/css/Modal.css b/src/components/css/Modal.css
new file mode 100644
index 0000000..852bfc8
--- /dev/null
+++ b/src/components/css/Modal.css
@@ -0,0 +1,46 @@
+.modal {
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+    position: absolute;
+    top:0;
+    left:0;
+    opacity: 1;
+    background-color: rgba(0,0,0,0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal .box {
+    border-radius: 10px;
+    border-style: solid;
+    border-color: #544545;
+    border-width: 2px;
+    background-color: white;
+    padding: 25px;
+}
+
+.modal .title {
+    font-size: 28px;
+}
+
+.modal form {
+    display: flex;
+    flex-direction: column;
+}
+
+.modal form * {
+    margin-top: 10px;
+}
+
+.modal form button {
+    padding: 10px;
+    width:fit-content;
+    height: fit-content;
+}
+
+.modal input.large {
+    height: 100px;
+    width: 300px;
+}
\ No newline at end of file
diff --git a/src/components/css/Navigation.css b/src/components/css/Navigation.css
index 8fdd9f1..351eff7 100644
--- a/src/components/css/Navigation.css
+++ b/src/components/css/Navigation.css
@@ -10,7 +10,8 @@
     padding:0;
 }
 
-.Navigation a {
+.Navigation a, .Navigation button {
+    border: none;
     color: #CFC0C0 !important;
     display: flex;
     flex-direction: column;
@@ -26,10 +27,15 @@
     background-color: inherit;
 }
 
-.Navigation a:hover {
+.Navigation a:hover, .Navigation button:hover {
     background-color: #2F2F32;
     height: 90px;
     transition: background-color 300ms ease-out, height 300ms ease-out;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
+}
+
+.Navigation .end {
+    margin-left: auto;
+    margin-right: 25px;
 }
\ No newline at end of file
diff --git a/src/reducers/contactModalReducer.js b/src/reducers/contactModalReducer.js
new file mode 100644
index 0000000..75e8305
--- /dev/null
+++ b/src/reducers/contactModalReducer.js
@@ -0,0 +1,13 @@
+let contactModalReducer = (state={contactModal: false, emailBody: ""}, action) => {
+    switch(action.type) {
+      case 'TOGGLE_CONTACT_MODAL':
+        return { ...state, contactModal: !state.contactModal };
+      case 'UPDATE_EMAIL_BODY':
+        return { ...state, emailBody: action.payload };
+      default:
+        return state;
+    }
+  };
+  
+
+export default contactModalReducer;
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 4b69bbb..3f8493f 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,7 +1,9 @@
 import { combineReducers } from "redux";
 
-import githubReducer from './githubReducer'
+import githubReducer from './githubReducer';
+import contactModalReducer from "./contactModalReducer";
 
 export default combineReducers({
     github: githubReducer,
+    contactModal: contactModalReducer,
 });
