index.js

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { sendEventViewItem } from '../../../utility/analytics/events';
import PlainText from '../../composite/plain-text';

import './index.scss';

export default function ComedianList({ comedians }) {
  const location = useLocation();

  function send(params) {
    sendEventViewItem(params, location);
  }

  return (
    <ul className="comedians-list flex-wrap">
      {comedians
        ? comedians.map((comedian, index) => {
            const loadingType = index < 12 ? 'auto' : 'lazy';
            const { photoURL, name, id } = comedian;
            const linkUrl = `/comedians/${id}`;
            return (
              <li className="card comedian-card" key={id}>
                <Link to={linkUrl} onClick={() => send({ to: linkUrl, name, id })}>
                  <img className="thumbnail" src={photoURL} alt={`thumbnail image of ${name}`} loading={loadingType} />
                  <h3 className="name">
                    <PlainText text={name} />
                  </h3>
                </Link>
              </li>
            );
          })
        : null}
    </ul>
  );
}