Iris/src/js/components/GridItem.js

import React, { useEffect, memo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import handleViewport from 'react-in-viewport';
import { scrollTo, sourceIcon } from '../util/helpers';
import Link from './Link';
import Icon from './Icon';
import Thumbnail from './Thumbnail';
import LinksSentence from './LinksSentence';
import { I18n } from '../locale';
import { encodeUri } from '../util/format';

import * as uiActions from '../services/ui/actions';
import * as mopidyActions from '../services/mopidy/actions';
import * as spotifyActions from '../services/spotify/actions';

const SecondaryLine = ({
  item: {
    type,
    tracks_total,
    tracks = [],
    followers,
    albums_uris,
    artists,
  } = {},
}) => {
  let trackCount = 0;
  if (tracks) trackCount = tracks.length;
  if (tracks_total) trackCount = tracks_total;

  switch (type) {
    case 'playlist':
      return (
        <span className="grid__item__secondary__content">
          <I18n path="specs.tracks" count={trackCount} />
        </span>
      );

    case 'artist':
      return (
        <span className="grid__item__secondary__content">
          {followers && <I18n path="specs.followers" count={followers.toLocaleString()} />}
          {albums_uris && <I18n path="specs.albums" count={albums_uris.length} />}
        </span>
      );

    case 'album':
      return (
        <span className="grid__item__secondary__content">
          {artists && <LinksSentence nolinks items={artists} type="artist" />}
        </span>
      );

    default:
      return (
        <span className="grid__item__secondary__content">
          {artists && <LinksSentence nolinks items={artists} type="artist" /> }
          {followers && <I18n path="specs.followers" count={followers.toLocaleString()} />}
        </span>
      );
  }
};

const GridItemActual = ({
  item: itemProp,
  getLink,
  show_source_icon,
}) => {
  let item = itemProp;
  if (item.album) item = { ...item, ...item.album };

  const dispatch = useDispatch();
  const grid_glow_enabled = useSelector((state) => state.ui.grid_glow_enabled);
  const spotify_available = useSelector((state) => state.spotify.access_token);

  const onContextMenu = (e) => {
    e.preventDefault();
    dispatch(
      uiActions.showContextMenu({
        e,
        context: item.type,
        uris: [item.uri],
        items: [item],
        tracklist_uri: item.uri, // not needed?
      }),
    );
  };

  // Load images
  useEffect(() => {
    if (!item.images) {
      switch (item.type) {
        case 'artist':
          if (spotify_available) {
            dispatch(spotifyActions.getArtistImages(item));
          }
          break;
        case 'album':
          dispatch(mopidyActions.getImages([item.uri]));
          break;
        default:
          break;
      }
    }
  }, [item.images]);

  // Build link
  let to = '';
  if (getLink) {
    to = getLink(item);
  } else if (item.link) {
    to = item.link;
  } else {
    to = `/${item.type}/${encodeUri(item.uri)}`;
  }

  return (
    <Link
      to={to}
      onClick={scrollTo}
      onContextMenu={onContextMenu}
      className="grid__item__inner"
    >
      <Thumbnail
        glow={grid_glow_enabled}
        size="medium"
        className="grid__item__thumbnail"
        images={item.images || item.icons}
        type={item.type}
      />
      <div className="grid__item__name">
        {item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
      </div>
      <div className="grid__item__secondary">
        {show_source_icon && (
          <Icon name={sourceIcon(item.uri)} type="fontawesome" className="source" />
        )}
        <SecondaryLine item={item} />
      </div>
    </Link>
  );
};

const GridItemIndex = ({
  item: itemProp,
  itemHeight,
  getLink,
  show_source_icon,
  isFirst,
  inViewport,
  forwardedRef,
  setItemHeight,
}) => {
  if (!itemProp) return null;

  // Listen for changes to our height, and pass it up to our Grid. This is then used to build the
  // placeholder elements when out of viewport. We only care about the first item because this
  // represents the same heights for everything else (in almost all circumstances).
  const { current: { clientHeight } = {} } = forwardedRef;
  useEffect(() => {
    if (isFirst && clientHeight !== itemHeight) {
      setItemHeight(clientHeight);
    }
  }, [clientHeight]);

  return (
    <span className={`grid__item grid__item--${itemProp.type}`} ref={forwardedRef}>
      {inViewport || isFirst ? (
        <GridItemActual
          item={itemProp}
          getLink={getLink}
          show_source_icon={show_source_icon}
        />
      ) : (
        <div style={{ height: itemHeight }} />
      )}
    </span>
  );
};

const GridItem = handleViewport(GridItemIndex);

export {
  GridItem,
};

export default {
  GridItem,
};