From 356700bf6fa5873bfbe19ccb686c6b971828dc73 Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <figueroa0609@protonmail.com>
Date: Mon, 27 Sep 2021 16:39:22 -0400
Subject: [PATCH] Added comments and documentation to subcomponents

---
 src/components/subcomponents/Card.js         | 10 ++++++++++
 src/components/subcomponents/ContactModal.js | 19 ++++++++++++++++---
 src/components/subcomponents/Modal.js        | 18 ++++++++++++++++++
 src/components/subcomponents/Theater.js      | 16 +++++++++++++++-
 4 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/src/components/subcomponents/Card.js b/src/components/subcomponents/Card.js
index 7fbfff1..20faf12 100644
--- a/src/components/subcomponents/Card.js
+++ b/src/components/subcomponents/Card.js
@@ -2,6 +2,16 @@ import React from 'react';
 import '../css/Card.css';
 
 const Card = (props) => {
+    /**
+     * Card - A card box used to display information
+     * Card requires a title and some jsx passed between the two Card tags as props.
+     * You can add an image by adding an image prop in the form of a path to the file.
+     * 
+     * title - title that will be displayed at the top of the card
+     * image - picture displayed next to the tag
+     * children - jsx that will be displayed in the content of the card
+     * 
+     */
     return (
         <div className="card">
             <div>
diff --git a/src/components/subcomponents/ContactModal.js b/src/components/subcomponents/ContactModal.js
index 3ac8008..3943325 100644
--- a/src/components/subcomponents/ContactModal.js
+++ b/src/components/subcomponents/ContactModal.js
@@ -4,13 +4,26 @@ 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();
-        window.open(`mailto:camerin@camsprojects.online?body=${props.body}`);
-        props.toggleContactModal();
+        e.preventDefault(); // Prevent default submit function
+
+        window.open(`mailto:camerin@camsprojects.online?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)}>
             <input className="large" onKeyUp={(e)=>{props.updateEmailBody(e);}}/>
diff --git a/src/components/subcomponents/Modal.js b/src/components/subcomponents/Modal.js
index afa7b4d..8f8458b 100644
--- a/src/components/subcomponents/Modal.js
+++ b/src/components/subcomponents/Modal.js
@@ -3,6 +3,24 @@ import ReactDOM from 'react-dom';
 import '../css/Modal.css';
 
 const Modal = props => {
+  /**
+   * Modal - a component to help create other modal components. A modal can be displayed anywhere in the app and
+   *  will display above all other components given that the z-index of the modal makes it priority. Based on the development
+   *  thus far, the modal will have an entering animation from the left once enabled. If you'd like to change this you can modify
+   *  the Modal.css file in the src/components/css/ folder.
+   * 
+   * Modal takes a few props to ensure it is working properly.
+   * 
+   * Required props:
+   *  title - the title of the modal window
+   *  content - the content that will be displayed at the center of the modal window
+   *
+   * Optional props:
+   *  actions - this should be buttons or other controls that the user can use to control the outcome or answer the
+   *    modal message
+   *  show - a control which determines whether or not the modal will show. This is not immediately required but will need to be enabled
+   *    once you're ready to display the modal. If it exists or is set to true it will display the modal.
+   */
   return ReactDOM.createPortal(
     <div onClick={props.onDismiss} className={`modal ${props.show?'show':''}`}>
       <div onClick={(e) => e.stopPropagation()} className="box">
diff --git a/src/components/subcomponents/Theater.js b/src/components/subcomponents/Theater.js
index c8a1008..66f73ee 100644
--- a/src/components/subcomponents/Theater.js
+++ b/src/components/subcomponents/Theater.js
@@ -2,7 +2,21 @@ import React from 'react';
 import '../css/Theater.css';
 
 const Theater = (props) => {
-    
+    /**
+     * Theater - A short display and description of the page
+     * 
+     * The theater takes a title and description prop which is displayed in the center of the Theater component
+     * Optional props include background and extraClasses
+     * 
+     * Required props:
+     *  title - title for the page
+     *  description - desription of the page which can be jsx
+     * 
+     * Optional props:
+     *  extraClasses - a string containing extra classes to apply to the theater such as h-50v, h-100
+     *  backgroundImage - a new background image in the form of a path to the image. This image should
+     *      exist in the public directory of the project unless provided by remove service. Example: <Theater ... backgroundImage="/img/background.webp"/>
+     */
     return (
         <div className={`theater ${props.extraClasses ? props.extraClasses:''}`}>
             <div className="theater-bg" style={props.background ? {backgroundImage: `url(${props.background})`} : {}}/>