scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source
This commit is contained in:
Karishma Chadha 2020-10-02 14:58:54 -04:00
parent 7b48b50fc1
commit d3e3171efa
1 changed files with 98 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

194
src/views/annual-report/annual-report.jsx
View file

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