digitransit-ui/app/component/routepage/Notification.js

import PropTypes from 'prop-types';
import React, { useState, useEffect } from 'react';
import { intlShape } from 'react-intl';
import { configShape } from '../../util/shapes';
import { getDialogState, setDialogState } from '../../store/localStorage';

import Icon from '../Icon';

const RouteNotification = ({ notification, lang }, context) => {
  const [hideNote, setHideNote] = useState(true);

  const id = { notification };
  const header = notification.header[lang];
  const content = notification.content[lang];
  const link = notification.link?.[lang];
  const linkLabel = notification.linkLabel?.[lang] || link;
  const closeButtonLabel = notification.closeButtonLabel?.[lang];

  useEffect(() => {
    setHideNote(getDialogState(id) || false);
  }, []);

  useEffect(() => {
    setDialogState(id, hideNote);
  }, [hideNote]);

  return (
    <div className={`route-notification ${hideNote ? 'minimized' : ' '}`}>
      <div className="left-block">
        <Icon
          img="icon_info"
          className="route-notification-icon"
          color={context.config.colors.primary}
        />
      </div>
      <div className="right-block">
        <h3>{header}</h3>
        {!hideNote && (
          <>
            {content.length === 1 ? (
              <div className="content"> {content[0]} </div>
            ) : (
              <ul>
                {content.map(bulletpoint => (
                  <li key={bulletpoint}>{bulletpoint}</li>
                ))}
              </ul>
            )}
            <a
              className="route-notification-link"
              href={`https://www.${link}`}
              target="_blank"
              rel="noreferrer"
            >
              {linkLabel}
            </a>
          </>
        )}
      </div>
      <div className="button-block">
        {hideNote && (
          <label htmlFor="route-notification-collapse-button">
            {closeButtonLabel}
          </label>
        )}
        <button
          type="button"
          id="route-notification-collapse-button"
          className="route-notification-collapse-button"
          onClick={() => {
            setHideNote(!hideNote);
          }}
          aria-label={
            hideNote
              ? context.intl.formatMessage({
                  id: 'notification-open',
                  defaultMessage: 'Open message',
                })
              : context.intl.formatMessage({
                  id: 'notification-minimize',
                  defaultMessage: 'Close message',
                })
          }
        >
          <Icon
            img="icon_arrow-dropdown"
            color={context.config.colors.primary}
            className={`route-notification-collapse-icon ${
              !hideNote ? 'inverted' : ''
            }`}
          />
        </button>
      </div>
    </div>
  );
};

RouteNotification.propTypes = {
  notification: PropTypes.objectOf({
    id: PropTypes.string.isRequired,
    header: PropTypes.string.isRequired,
    content: PropTypes.arrayOf(PropTypes.string).isRequired,
    link: PropTypes.string,
    linkLabel: PropTypes.string,
    closeButtonLabel: PropTypes.string,
  }).isRequired,
  lang: PropTypes.string.isRequired,
};

RouteNotification.contextTypes = {
  config: configShape.isRequired,
  intl: intlShape.isRequired,
};

export default RouteNotification;