Repository: neherlab/covid19_scenarios
File: src/components/LandingPage/LandingPage.tsx (TypeScript)

Code before:
import React, { useState } from 'react'

import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import './LandingPage.scss'
import promoImage from './tool.jpg'
import { setShouldSkipLandingPage } from '../../state/ui/ui.actions'
import { SKIP_LANDING_PAGE_KEY } from '../../state/ui/ui.reducer'
import { State } from '../../state/reducer'

function LandingPage() {
  const [isSkipLandingChecked, setSkipLandingChecked] = useState(false)
  const showSkipCheckbox = useSelector(({ ui }: State) => !ui.skipLandingPage)
  const dispatch = useDispatch()
  return (
    <>
      <div className="landing-page">
        <div className="landing-page__hero-section">
          <div className="landing-page__header">
            <h1 className="landing-page__heading">COVID-19 Scenarios</h1>
            <p className="landing-page__sub-heading">Tool that models COVID-19 outbreak and hospital demand</p>
          </div>
          <Link
            onClick={() => {
              dispatch(setShouldSkipLandingPage({ shouldSkip: true }))
              if (isSkipLandingChecked) {
                localStorage.setItem(SKIP_LANDING_PAGE_KEY, '1')
              }
            }}
            to="/"
            className="landing-page__simulate-link"
          >
            Simulate
          </Link>
        </div>
        <div className="landing-page__content-section">
          <img className="landing-page__promo-image" src={promoImage} alt="Simulator showing results" />
          <div className="landing-page__content-section-text">
            <h1>Simulate Outbreaks</h1>
            <p>
              This tool simulates a COVID19 outbreak. The primary purpose of the tool is to explore the dynamics of
              COVID19 cases and the associated strain on the health care system in the near future. The outbreak is
              influenced by infection control measures such as school closures, lock-down etc. Analogously, you can
              explore the effect of isolation on specific age groups.

Review comment (suggestion):
No need to cast to a string here.  This results in the LocalStorage value being `"true"`, rather than `true`.  If this value is changed to `"false"` (as opposed to `false`), the ui reducer cast to a boolean actually doesn't work as expected, because `Boolean('false')` is actually `true`.  The UI reducer as is here will actually return `true` for anything except `null`/`undefined`/`''` (the initial state), because any string that isn't empty is truthy.

I'm signing off because the behavior functions as expected, and requires someone to manually change the LocalStorage value for it to misbehave.

Code after:
import React, { useState, useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'

import LocalStorage, { LOCAL_STORAGE_KEYS } from '../../helpers/localStorage'
import { setShouldSkipLandingPage } from '../../state/ui/ui.actions'
import { State } from '../../state/reducer'
import promoImage from './tool.jpg'
import './LandingPage.scss'

function LandingPage() {
  const [isSkipLandingChecked, setSkipLandingChecked] = useState(false)
  const showSkipCheckbox = useSelector(({ ui }: State) => !ui.skipLandingPage)
  const dispatch = useDispatch()
  const onLinkClick = useCallback(() => {
    dispatch(setShouldSkipLandingPage({ shouldSkip: true }))

    if (isSkipLandingChecked) {
      LocalStorage.set(LOCAL_STORAGE_KEYS.SKIP_LANDING_PAGE, String(true))
    }
  }, [dispatch, isSkipLandingChecked])

  const onCheckboxChange = useCallback((e) => {
    setSkipLandingChecked(e.target.checked)
  }, [])

  return (
      <div className="landing-page">
        <div className="landing-page__hero-section">
          <div className="landing-page__header">
            <h1 className="landing-page__heading">COVID-19 Scenarios</h1>
            <p className="landing-page__sub-heading">Tool that models COVID-19 outbreak and hospital demand</p>
          </div>
          <Link
            onClick={onLinkClick}
            to="/"
            className="landing-page__simulate-link"
          >
            Simulate
          </Link>
        </div>
        <div className="landing-page__content-section">
          <img className="landing-page__promo-image" src={promoImage} alt="Simulator showing results" />
          <div className="landing-page__content-section-text">