Still trying to sniff out cause of re-render when using array-wrapped values

This commit is contained in:
James Barnsley
2020-09-26 22:00:12 +12:00
parent a409ca0f85
commit 3a6d243430
10 changed files with 94 additions and 163 deletions

View File

@ -56,18 +56,6 @@ class LibraryAlbums extends React.Component {
this.getGoogleLibrary();
this.getSpotifyLibrary();
}
/*
componentDidUpdate(prevProps, prevState) {
Object.entries(this.props).forEach(([key, val]) =>
prevProps[key] !== val && console.log(`Prop '${key}' changed`)
);
if (this.state) {
Object.entries(this.state).forEach(([key, val]) =>
prevState[key] !== val && console.log(`State '${key}' changed`)
);
}
}
*/
componentDidUpdate = ({ source: prevSource }) => {
const { source } = this.props;
@ -383,20 +371,17 @@ class LibraryAlbums extends React.Component {
const mapStateToProps = (state) => {
const source = state.ui.library_albums_source ? state.ui.library_albums_source : 'all';
const loadingSelector = makeLoadingSelector(['(.*):library:albums']);
const spotifyLibrarySelector = makeLibrarySelector('spotify:library:albums');
const googleLibrarySelector = makeLibrarySelector('google:library:albums');
const mopidyLibrarySelector = makeLibrarySelector('mopidy:library:albums');
const albums = [
...(source === 'all' || source === 'spotify' ? spotifyLibrarySelector(state) : []),
...(source === 'all' || source === 'google' ? googleLibrarySelector(state) : []),
...(source === 'all' || source === 'local' ? mopidyLibrarySelector(state) : []),
];
const libraryUris = [];
if (source === 'all' || source === 'local') libraryUris.push('mopidy:library:albums');
if (source === 'all' || source === 'spotify') libraryUris.push('spotify:library:albums');
if (source === 'all' || source === 'google') libraryUris.push('google:library:albums');
const librarySelector = makeLibrarySelector(libraryUris);
return {
loading: loadingSelector(state),
mopidy_uri_schemes: state.mopidy.uri_schemes,
albums,
albums: librarySelector(state),
google_available: (state.mopidy.uri_schemes && state.mopidy.uri_schemes.includes('gmusic:')),
spotify_available: state.spotify.access_token,
view: state.ui.library_albums_view,

View File

@ -333,27 +333,18 @@ class LibraryArtists extends React.Component {
const mapStateToProps = (state) => {
const source = state.ui.library_artists_source || 'all';
const loadingSelector = makeLoadingSelector(['(.*):library:artists']);
const spotifyLibrarySelector = makeLibrarySelector('spotify:library:artists');
const googleLibrarySelector = makeLibrarySelector('google:library:artists');
const mopidyLibrarySelector = makeLibrarySelector('mopidy:library:artists');
const artists = [
...(source === 'all' || source === 'spotify' ? spotifyLibrarySelector(state) : []),
...(source === 'all' || source === 'google' ? googleLibrarySelector(state) : []),
...(source === 'all' || source === 'local' ? mopidyLibrarySelector(state) : []),
];
/**
TODO
Apply sort, filter and source rules to the selector.
This will mean we have a universal selector for all libraries. WIN!
**/
const libraryUris = [];
if (source === 'all' || source === 'local') libraryUris.push('mopidy:library:artists');
if (source === 'all' || source === 'spotify') libraryUris.push('spotify:library:artists');
if (source === 'all' || source === 'google') libraryUris.push('google:library:artists');
const librarySelector = makeLibrarySelector(libraryUris);
return {
mopidy_uri_schemes: state.mopidy.uri_schemes,
google_available: (state.mopidy.uri_schemes && state.mopidy.uri_schemes.includes('gmusic:')),
spotify_available: (state.spotify.access_token),
artists,
artists: librarySelector(state),
loading: loadingSelector(state),
source,
sort: (state.ui.library_artists_sort ? state.ui.library_artists_sort : null),

View File

@ -338,21 +338,18 @@ class LibraryPlaylists extends React.Component {
const mapStateToProps = (state) => {
const source = state.ui.library_playlists_source || 'all';
const loadingSelector = makeLoadingSelector(['(.*):library:playlists']);
const spotifyLibrarySelector = makeLibrarySelector('spotify:library:playlists');
const googleLibrarySelector = makeLibrarySelector('google:library:playlists');
const mopidyLibrarySelector = makeLibrarySelector('mopidy:library:playlists');
const playlists = [
...(source === 'all' || source === 'spotify' ? spotifyLibrarySelector(state) : []),
...(source === 'all' || source === 'google' ? googleLibrarySelector(state) : []),
...(source === 'all' || source === 'local' ? mopidyLibrarySelector(state) : []),
];
const libraryUris = [];
if (source === 'all' || source === 'local') libraryUris.push('mopidy:library:playlists');
if (source === 'all' || source === 'spotify') libraryUris.push('spotify:library:playlists');
if (source === 'all' || source === 'google') libraryUris.push('google:library:playlists');
const librarySelector = makeLibrarySelector(libraryUris);
return {
slim_mode: state.ui.slim_mode,
mopidy_uri_schemes: state.mopidy.uri_schemes,
spotify_available: state.spotify.access_token,
playlists,
playlists: librarySelector(state),
loading: loadingSelector(state),
source,
me_id: (state.spotify.me ? state.spotify.me.id : false),