connected submit to backend; added reusable modal for messages

Fixes #2

src/actions/modalPopup.js

@@ -0,0 +1,17 @@
+import { OPEN_MODAL, CLOSE_MODAL } from '../constants/actionTypes';
+
+export const openModal = (message) => {
+  return {
+    type: OPEN_MODAL,
+    isOpen: true,
+    message: message
+  };
+};
+
+export const closeModal = () => {
+  return {
+    type: CLOSE_MODAL,
+    isOpen: false,
+    message: ''
+  };
+};

src/components/ModalPopup/ModalPopup.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import Popup from 'reactjs-popup'
+import { connect } from 'react-redux'
+import { closeModal } from '../../actions/modalPopup';
+
+  const mapStateToProps = state => {
+  return {
+  modal: state.modal
+}}
+
+function ModalPopup({modal, dispatch}) {
+
+  const popupStyle = {
+    content: {
+      position: "relative",
+      background: "rgb(255, 255, 255)",
+      width: "400px",
+      margin: "auto",
+      border: "10px solid #25646a",
+      fontSize: "1.5rem",
+      fontWeight: "1.5rem",
+      padding: "5px",
+      borderRadius: "4px",
+      height: "200px",
+      textAlign: "center",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }
+  const close = () => {
+      return dispatch(closeModal());
+  }
+
+
+  return (
+    <Popup
+        contentStyle={popupStyle.content}
+	      open={modal.isOpen}
+	      onClose={() => {close()}}>
+          <div className='popup'>
+  <p className='close-button' onClick={() => close()}>
+    &times;
+  </p>
+<p className="popup-message">{modal.message}</p>
+</div>
+    </Popup>
+  )
+}
+
+export default connect(mapStateToProps)(ModalPopup);
+

src/constants/actionTypes.js

@@ -1 +1,3 @@
 export const GET_VICTIMS_REQUEST = 'GET_VICTIMS_REQUEST';
+export const OPEN_MODAL = 'OPEN_MODAL';
+export const CLOSE_MODAL = 'CLOSE_MODAL';

src/index.js

@@ -12,7 +12,7 @@ import './styles/normalize.css';
 import './styles/global.scss';
 import rootReducer from './reducers';
 import * as serviceWorker from './serviceWorker';
-
+import ModalPopup from './components/ModalPopup/ModalPopup'
 import Home from './pages/Home';
 import NotFound from './pages/NotFound';
 import Victims from './pages/Victims';
@@ -42,6 +42,7 @@ const Routes = () => (
 ReactDOM.render(
   <Provider store={store}>
     <Routes />
+    <ModalPopup />
   </Provider>,
   document.getElementById('root')
 );
@@ -50,3 +51,4 @@ ReactDOM.render(
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();
+

src/pages/Submit.js

@@ -1,17 +1,41 @@
 import React, { useRef, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
+import { connect } from 'react-redux';
+import { openModal } from '../actions/modalPopup'
 import MainLayout from '../components/MainLayout';
 import './Submit.scss';
 import langs from '../data/languages.js';
-
 import data from '../data/countries.json';
 
-const Submit = () => {
+const Submit = ({ dispatch }) => {
   const nameRef = useRef();
   const { register, handleSubmit, errors } = useForm()
 
-  const handleFormSubmit = (data) => {
-    console.log(data);
+  const handleFormSubmit = (data, e) => {
+      fetch(`${process.env.REACT_APP_API_BASE}/report`, {
+      method: 'POST',
+			body: JSON.stringify(data),
+			headers: {
+		    'Content-Type': 'application/json'
+	    }
+    })
+    .then(res => res.json())
+    .then(response => {
+      switch(response.status) {
+        case 200:
+          e.target.reset();
+          dispatch(openModal("The report was submitted successfully!"))
+          break;
+        case 400:
+          dispatch(openModal(`Something went wrong! Error: ${response.message}`))
+          break;
+        default:
+          dispatch(openModal("Something went wrong!"))
+      }})
+    .catch(err => {
+      dispatch(openModal("Something went wrong!"))
+    })
+
   };
 
   useEffect(() => {
@@ -45,7 +69,7 @@ const Submit = () => {
                 <input
                   id="email"
                   name="email"
-                  type="text"
+                  type="email"
                   ref={register({ required: true })}
                 />
                 {errors.email &&
@@ -245,4 +269,5 @@ const Submit = () => {
   );
 };
 
-export default Submit;
+export default connect()(Submit);
+

src/reducers/index.js

@@ -1,6 +1,8 @@
 import { combineReducers } from 'redux';
 import victims from './victims';
+import modal from './modalPopup';
 
 export default combineReducers({
   victims,
+  modal
 });

src/reducers/modalPopup.js

@@ -0,0 +1,18 @@
+const initialState = {
+    isOpen: false,
+    message: ''
+}
+
+const modal = (state = initialState, action) => {
+    switch(action.type) {
+        case 'OPEN_MODAL':
+            return {isOpen: true, message: action.message}
+        case 'CLOSE_MODAL':
+            return {isOpen: false, message: action.message}
+        default:
+            return {isOpen: false, message: ''}
+    }
+
+}
+
+export default modal;