Added commentary & cleaned up code

client/src/components/AboutUs/AboutUs.js

@@ -26,6 +26,9 @@ class AboutUs extends React.Component {
                 </div>
                 <span></span>
                 <div>
+                    {
+                        //inluded Timeline component from Timeline.js}
+                    }
                     <Timeline />
                 </div>
                 <div class="Facer-Comparison">

client/src/components/SignUp/SignUp.js

@@ -15,17 +15,19 @@ class FormPage extends React.Component {
   handleSubmit = () => alert("Thank you for Subscribing!");
 
   onSubmit(e) {
+    //prevents page from refreshing and losing form data
     e.preventDefault();
 
+    //object to hold form fields
     let user = {};
     user.name = e.target[0].value;
     user.email = e.target[1].value;
-    //user.timestamp = new Date();
+
 
     console.log("username: ", user.name);
     console.log("useremail: ", user.email);
-    //console.log("date added: ", user.timestamp);
-
+
+    //axios used to post the information to the database
     axios
       .post("/signup", user)
       .then(res => {

client/src/components/Timeline/Timeline.js

@@ -1,83 +1,81 @@
 import React from 'react'
 import './Timeline.css'
 import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
-//import 'react-vertical-timeline-component/style.min.css';
 
-class Timeline extends React.Component {
 
+class Timeline extends React.Component {
+//timeline component used from react-vertical-timeline
     render() {
         return (
         <VerticalTimeline contentStyle={{ background: '#000'}}>
-  <VerticalTimelineElement
-    className="vertical-timeline-element--work"
-    contentStyle={{ background: '#A9A9A9', color: '#fff' }}
-    contentArrowStyle={{ borderRight: '7px solid  #A9A9A9' }}
-    /*date="2011 - present"*/
-    /*iconStyle={{ background: '#000', color: '#fff' }}*/
-
-  >
-    <h3 className="vertical-timeline-element-title block-title">Tumbler Lock</h3>
-    <h4 className="vertical-timeline-element-subtitle block-text">1778</h4>
-    <p className="block-text">
-    uses pins of varying lengths to prevent the lock from opening without the correct key
-    </p>
-  </VerticalTimelineElement>
-  <VerticalTimelineElement
-    className="vertical-timeline-element--work"
-    contentStyle={{ background: '#A9A9A9', color: '#fff' }}
-    contentArrowStyle={{ borderRight: '7px solid  #A9A9A9' }}
-    /*date="2010 - 2011"*/
-    /*iconStyle={{ background: '#000', color: '#fff' }}*/
-  >
-    <h3 className="vertical-timeline-element-title block-title">Flat Key</h3>
-    <h4 className="vertical-timeline-element-subtitle block-text">1851</h4>
-    <p className="block-text">
-    key with serrated edges as well as pins of varying lengths within the lock itself
-    </p>
-  </VerticalTimelineElement>
-  <VerticalTimelineElement
-    className="vertical-timeline-element--work"
-    contentStyle={{ background: '#808080', color: '#fff' }}
-    contentArrowStyle={{ borderRight: '7px solid  #808080' }}
-    /*date="2008 - 2010"*/
-    /*iconStyle={{ background: '#000', color: '#fff' }}*/
-
-  >
-    <h3 className="vertical-timeline-element-title block-title">Electronic Locks</h3>
-    <h4 className="vertical-timeline-element-subtitle block-text">1970s</h4>
-    <p className="block-text">
-     lock or unlock with the assistance of an electrical current
-    </p>
-  </VerticalTimelineElement>
-  <VerticalTimelineElement
-    className="vertical-timeline-element--work"
-    contentStyle={{ background: '#808080', color: '#fff' }}
-    contentArrowStyle={{ borderRight: '7px solid  #808080' }}
-    /*date="2006 - 2008"*/
-    /*iconStyle={{ background: '#000', color: '#fff' }}*/
-  >
-    <h3 className="vertical-timeline-element-title block-title">Smart Lock</h3>
-    <h4 className="vertical-timeline-element-subtitle block-text">2014</h4>
-    <p className="block-text">
-    opens wirelessly with authorized user authentication
-    </p>
-  </VerticalTimelineElement>
-  <VerticalTimelineElement
-    className="vertical-timeline-element--education"
-    contentStyle={{ background: '#FF0000', color: '#fff' }}
-    contentArrowStyle={{ borderRight: '7px solid  #FF0000' }}
-    /*date="April 2013"*/
-    /*iconStyle={{ background: '#000', color: '#fff' }}*/
-  >
-    <h3 className="vertical-timeline-element-title block-title">FaceR</h3>
-    <h4 className="vertical-timeline-element-subtitle block-text">2020</h4>
-    <p className="block-text">
-      uses facial recognition as a form of user authentication to unlock 
-    </p>
-  </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: '#A9A9A9', color: '#fff' }}
+          contentArrowStyle={{ borderRight: '7px solid  #A9A9A9' }}
+          /*date="2011 - present"*/
+          /*iconStyle={{ background: '#000', color: '#fff' }}*/
+        >
+        <h3 className="vertical-timeline-element-title block-title">Tumbler Lock</h3>
+        <h4 className="vertical-timeline-element-subtitle block-text">1778</h4>
+        <p className="block-text">
+          uses pins of varying lengths to prevent the lock from opening without the correct key
+        </p>
+        </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: '#A9A9A9', color: '#fff' }}
+          contentArrowStyle={{ borderRight: '7px solid  #A9A9A9' }}
+          /*date="2010 - 2011"*/
+          /*iconStyle={{ background: '#000', color: '#fff' }}*/
+        >
+        <h3 className="vertical-timeline-element-title block-title">Flat Key</h3>
+        <h4 className="vertical-timeline-element-subtitle block-text">1851</h4>
+        <p className="block-text">
+          key with serrated edges as well as pins of varying lengths within the lock itself
+        </p>
+        </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: '#808080', color: '#fff' }}
+          contentArrowStyle={{ borderRight: '7px solid  #808080' }}
+          /*date="2008 - 2010"*/
+          /*iconStyle={{ background: '#000', color: '#fff' }}*/
 
-</VerticalTimeline>
-        )
+        >
+        <h3 className="vertical-timeline-element-title block-title">Electronic Locks</h3>
+        <h4 className="vertical-timeline-element-subtitle block-text">1970s</h4>
+        <p className="block-text">
+          lock or unlock with the assistance of an electrical current
+        </p>
+        </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--work"
+          contentStyle={{ background: '#808080', color: '#fff' }}
+          contentArrowStyle={{ borderRight: '7px solid  #808080' }}
+        /*date="2006 - 2008"*/
+        /*iconStyle={{ background: '#000', color: '#fff' }}*/
+        >
+        <h3 className="vertical-timeline-element-title block-title">Smart Lock</h3>
+        <h4 className="vertical-timeline-element-subtitle block-text">2014</h4>
+        <p className="block-text">
+          opens wirelessly with authorized user authentication
+        </p>
+        </VerticalTimelineElement>
+        <VerticalTimelineElement
+          className="vertical-timeline-element--education"
+          contentStyle={{ background: '#FF0000', color: '#fff' }}
+          contentArrowStyle={{ borderRight: '7px solid  #FF0000' }}
+          /*date="April 2013"*/
+          /*iconStyle={{ background: '#000', color: '#fff' }}*/
+        >
+        <h3 className="vertical-timeline-element-title block-title">FaceR</h3>
+        <h4 className="vertical-timeline-element-subtitle block-text">2020</h4>
+        <p className="block-text">
+          uses facial recognition as a form of user authentication to unlock 
+        </p>
+      </VerticalTimelineElement>
+      </VerticalTimeline>
+      )
     }
 
 }

client/src/views/AdminList/AdminList.js

@@ -12,31 +12,30 @@ class AdminList extends React.Component {
         };
     }
 
+    //function gets database information and stores it in the usersCollection array
     componentDidMount() {
         axios.get('/signup')
             .then(res => {
                 this.setState({ usersCollection: res.data });
-                //console.log(res.data[1].created_at);
-                //console.log(new Date(res.data[1].created_at).getMonth());
-
             })
             .catch(function (err) {
                 console.log(err);
             })
     }
 
     render() {
+      //array starts with zero users for each month
         let usersPerMonth = [0,0,0,0,0,0,0,0,0,0,0,0];
         let emails = [];
         this.state.usersCollection.forEach((item) => {
             console.log(item.name);
             emails.push(item.email);
+            //gets the month from the date and iincrements the corresponding month
             var index = new Date(item.created_at).getMonth();
             usersPerMonth[index]++;
         });
-        console.log(usersPerMonth);
-        console.log(emails);
 
+        //zingchart bar graph configuration 
         let graphConfig = {
             type: 'bar',
             title: {