diff --git a/src/js/components/GridItem.js b/src/js/components/GridItem.js index f2c90f86..9ef1ee4e 100755 --- a/src/js/components/GridItem.js +++ b/src/js/components/GridItem.js @@ -1,147 +1,147 @@ -import React, { useEffect } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -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 ( - - ); - - case 'artist': - return ( - - ); - - case 'album': - return ( - - ); - - default: - return ( - - ); - } -}; - -const GridItem = ({ - 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 ( - - -
- {item.name ? item.name : {item.uri}} -
-
- {show_source_icon && ( - - )} - -
- - ); -}; - -export { - GridItem, -}; - -export default { - GridItem, -}; +import React, { useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +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 ( + + ); + + case 'artist': + return ( + + ); + + case 'album': + return ( + + ); + + default: + return ( + + ); + } +}; + +const GridItem = ({ + 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 ( + + +
+ {item.name ? item.name : {item.uri}} +
+
+ {show_source_icon && ( + + )} + +
+ + ); +}; + +export { + GridItem, +}; + +export default { + GridItem, +};