Clean up annual report jsx file, add comments for functions and constants

src/views/annual-report/annual-report.jsx

@@ -1,27 +1,27 @@
 const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
+const React = require('react');
+const MediaQuery = require('react-responsive').default;
 const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
 const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const intlShape = require('react-intl').intlShape;
-const React = require('react');
 
+const render = require('../../lib/render.jsx');
+const frameless = require('../../lib/frameless');
+
+const Page = require('../../components/page/www/page.jsx');
 const Button = require('../../components/forms/button.jsx');
 const FlexRow = require('../../components/flex-row/flex-row.jsx');
 const Comment = require('../../components/comment/comment.jsx');
-const People = require('./people.json');
-const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
 const WorldMap = require('../../components/world-map/world-map.jsx');
 const CountryUsage = require('./country-usage.json');
-
+const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
-const Page = require('../../components/page/www/page.jsx');
+const People = require('./people.json');
-const render = require('../../lib/render.jsx');
-
-const MediaQuery = require('react-responsive').default;
-const frameless = require('../../lib/frameless');
 
 require('./annual-report.scss');
 
+// Some constants used for the page subnav and section refs
 const SECTIONS = {
     message: 'message',
     mission: 'mission',
@@ -46,6 +46,7 @@ const SECTION_NAMES = {
     donate: <FormattedMessage id="annualReport.subnavDonate" />
 };
 
+// Constants used for world map data processing/formatting for use with Plotly
 const countryKeys = Object.keys(CountryUsage);
 const countryNames = countryKeys.map(key => CountryUsage[key].display);
 const countryData = countryKeys.map(key => CountryUsage[key].count);
@@ -64,7 +65,7 @@ class AnnualReport extends React.Component {
         this.subnavRef = null;
 
         this.state = {
-            currentlyVisible: SECTIONS.message,
+            currentlyVisible: SECTIONS.message, // The currently visible section
             dropdownVisible: false
         };
 
@@ -90,8 +91,8 @@ class AnnualReport extends React.Component {
     // A generic handler for a subnav item that takes the name of the
     // section to scroll to (all lowercase)
     handleSubnavItemClick (sectionName) {
-        // Return a button click handler that scrolls to the
+        // Return a button click handler that will close the dropdown if open
-        // correct section
+        // and scrolls to the correct section
         return () => {
             this.setState({dropdownVisible: false});
             this.scrollTo(this.sectionRefs[sectionName]);
@@ -107,6 +108,8 @@ class AnnualReport extends React.Component {
         }
     }
 
+    // Generically create a ref for the given section, stored in
+    // this.sectionRefs
     setRef (sectionName) {
         return ref => (this.sectionRefs[sectionName] = ref);
     }
@@ -115,6 +118,8 @@ class AnnualReport extends React.Component {
         this.subnavRef = ref;
     }
 
+    // Calculate the dimensions of a given section for use in figuring out
+    // which section is currently visible
     getDimensionsOfSection (sectionRef) {
         const {height} = sectionRef.getBoundingClientRect();
         const offsetTop = sectionRef.offsetTop;
@@ -127,6 +132,7 @@ class AnnualReport extends React.Component {
         };
     }
 
+    // While scrolling, update the subnav to reflect the currently visible section
     handleScroll () {
         const subnavHeight = this.getDimensionsOfSection(this.subnavRef).height;
         // The additional 50 is to account for the main site nav height
@@ -146,12 +152,17 @@ class AnnualReport extends React.Component {
         }
     }
 
+    // Click handler for responsive subnav dropdown
     handleDropDownClick () {
         this.setState({dropdownVisible: !this.state.dropdownVisible});
     }
 
     render () {
-        const subnav = (<FlexRow className="inner">
+        // Element containing buttons to scroll to each of the sections in the
+        // annual report. The layout of this component will be different on
+        // different screen sizes (see below)
+        const subnav =
+            (<FlexRow className="inner">
                 <a
                     className={classNames(
                         {selectedItem: this.state.currentlyVisible === SECTIONS.message}
@@ -226,7 +237,6 @@ class AnnualReport extends React.Component {
                 </a>
             </FlexRow>);
 
-
         return (
             <div>
                 <div
@@ -364,7 +374,6 @@ class AnnualReport extends React.Component {
                     </div>
                     <div
                         className="mission section"
-                        id="mission"
                         ref={this.setRef(SECTIONS.mission)}
                     >
                         {/* <div className="inner">
@@ -372,7 +381,6 @@ class AnnualReport extends React.Component {
                     </div>
                     <div
                         className="milestones-section section"
-                        id="milestones"
                         ref={this.setRef(SECTIONS.milestones)}
                     >
                         <div className="inner">
@@ -584,7 +592,6 @@ class AnnualReport extends React.Component {
                     </div>
                     <div
                         className="reach-section section"
-                        id="reach"
                         ref={this.setRef(SECTIONS.reach)}
                     >
                         <div className="inner">
@@ -698,7 +705,7 @@ class AnnualReport extends React.Component {
                             </div>
                         </div>
                     </div>
-                    <div className="reach-scratch-jr section">
+                    <div className="reach-scratch-jr">
                         <div className="inner">
                             <div className="scratch-jr-intro">
                                 <img src="/images/annual-report/ScratchJr-Logo.svg" />
@@ -725,7 +732,6 @@ class AnnualReport extends React.Component {
                     </div>
                     <div
                         className="initiatives section"
-                        id="initiatives"
                         ref={this.setRef(SECTIONS.initiatives)}
                     >
                         {/* <div className="inner">
@@ -733,7 +739,6 @@ class AnnualReport extends React.Component {
                     </div>
                     <div
                         className="financials-section section"
-                        id="financials"
                         ref={this.setRef(SECTIONS.financials)}
                     >
                         <div className="inner">
@@ -871,7 +876,6 @@ class AnnualReport extends React.Component {
                     </div>
                     <div
                         className="supporters-section section"
-                        id="supporters"
                         ref={this.setRef(SECTIONS.supporters)}
                     >
                         <div className="inner">
@@ -1149,7 +1153,6 @@ class AnnualReport extends React.Component {
                     </div>
                     <div
                         className="leadership-section section"
-                        id="donate"
                         ref={this.setRef(SECTIONS.leadership)}
                     >
                         <div className="inner">
@@ -1238,7 +1241,6 @@ class AnnualReport extends React.Component {
                     </div>
                     <div
                         className="donate-section section"
-                        id="donate"
                         ref={this.setRef(SECTIONS.donate)}
                     >
                         <FlexRow className="donate-info">