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
This commit is contained in:
Camerin Figueroa
parent
11bc2df70a
commit
5a02de2054
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
});
|
||||
};
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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,
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue