Refactor JavaScript

[clhenrick]

JS Refactor To Dos

This doc outlines tasks for refactoring the JavaScript in amirentstabilized.com

Code Refactor

• thoroughly review existing JS code to build a mental map of what it's doing
• extract important parts of the code that will need to be referenced later
• refactor JavaScript in previous app/js/app directory
• utilize ES modules & ES6+ features / syntax
• utilize immutable application state management (e.g. Redux or similar)

Components

Create Component classes for each interactive element to isolate its logic, styles, and DOM element(s).

• Component super class
• AddToCalendar
• AddressSearchForm
• AdvanceSlides
• KeyboardNavigation
• LanguageToggle
• LanguageToggleButton
• MapTileLayers
• Navigation
• ProgressIndicator
• RentHistoryEmail
• SearchResultMap
• SearchValidationErrors
• slidesContainer
• StartOver
• Tenants Rights search (maybe save this for a future PR?)
  • needs a modal component (could combine with rent-history modal)
  • needs the tenants rights spatial search query
  • needs async action for fetching data
  • could move hbs template from index.html page to a file
• VerifyRentStabilized

State Management

• use Redux for managing application state
• use Redux Dev Tools for tracking state when in dev mode
• use redux-logger in a "debug" mode for debugging builds when necessary

Frontend Build System Eval

• evaluate the existing frontend build system (Gulp)
• decide whether to upgrade Gulp or to switch to another build system such as Webpack or Parcel
• decide whether or not to incorporate Babel
• code split JS index.html from info/*.html pages
  • decide on whether or not to use multiple entry points vs. separate dynamic imports
• (nice to have) strategy for addressing polyfills that avoids shipping un-necessary polyfill JS bundle to modern browsers

Code Quality Improvement

• set up an ESLint task (or keep using JS Hint?)
• set up a Prettier code formatting task
• set up a testing framework
• write unit tests (in progress)
• setup CI for Github PRs
• error logging via GA or another service(?)
  • use GA exception event logging

Static Assets

• Split up locales JSON files
  • Rename data/ directory to locales/
  • use [page-name]-[lang-code].json file naming convention
  • update translation biz logic to accommodate this new convention

3rd Party Deps

• remove or upgrade GSAP dependencies
  • GSAP now supports modules for bundlers, so could just upgrade (see install docs)
    • docs for ScrollToPlugin
  • could replace slide scroll animation with element.scrollIntoView
  • also see smooth scroll behavior polyfill) [NOTE this doesn't seem to work for my use case with Safari)
• remove packages installed in bower_components (think this is just cartodb.js?)
• remove JQuery (will require removing cartodb.js dep)
• remove cartodb.js
• remove aja.js
• upgrade (or possibly remove?) addthis.js (social media sharing widget)
• upgrade / fix atc.js (Add to Calendar)
• upgrade handlebars.js
• add / use alpine.js to refactor & reduce the amount of JS needed
• decide on whether or not to keep google analytics
  • upgraded now following this migration guide, but will look into alternatives later

Map

• add color to location marker
• resize handler
• pop-up
• use d3-tile, d3-geo
• use CARTO Maps API

Other

• CROSS BROWSER TEST
• move domain name to Netlify DNS (need to do this after merging this PR to master)
• update readme
• use type=“search” attribute in address form input for better UX
• link for "contact a tenants rights group" should open in a new tab
• JS resize handler for setting slide size?
• update title attributes in info/*.pages
• manage focus when scrolling between slides (see this write up for why)
• Fix tab index so that the user can't jump between slides by tabbing
  • maybe set tabIndex="-1" on all focusable elements that aren't in the current slide?
  • look into using the inert html property (video demo) (requires a polyfill for some browsers)
• add a 404 page

Use NYC Planning Labs Geocoder for address search

The current address geocoding API is an earlier version that requires the street address and borough to be passed as separate params. The newer version supports autosuggest which is a better UX.

• documentation
• remove borough select / dropdown
• use autosuggest API endpoint
• add form validations error messages & styling
• update translation text for form input & error validations
  • updated input placeholder content to something like "search an NYC street address"
  • simplify validations to "address not found, try again", and "please enter an NYC street address"
• fix handling of form submit
• make "search" button an actual form submit button
• add label for form text input

Track Bugs Introduced by JS Refactor

• map popup is misaligned on mobile
• address search form button not visible on safari iOS (small screens)
• on mobile searching for an address can jump too far ahead
• map tiles not rendering in IE11 (see: innerSvg polyfill)
• toggling language messes up SearchResultMap's size (maybe a reference is being retained to the old DOM element that was destroyed when the content re-renders?)
• after translating page reset Redux state (or jump to the current slide index?)
  • when slide index > 0 then page is translated, it starts at the first slide but the slides.curIndex property persists so that when GoToNextSlide is dispatched the slides jump ahead multiple slides.
  • event listeners might be added again when translate page render happens, need to remove them first?
• lang toggle buttons not updating in index.html page (Fixed!)

Misc Clean Up

• clear address search input when app state resets
• remove state.slides.canAdvance boolean?
• using composed action creator for address search & RS lookup, if address search fails then RS error will also display
• error handling for when RS Search fails

[clhenrick]

Reviewed up to navigation.js