Loading follow status correctly; unfollow removes from library but not state, effectively fixing #678

This commit is contained in:
James Barnsley
2021-04-12 21:29:43 +12:00
parent dd4fe089d6
commit 69583494ea
6 changed files with 35 additions and 41 deletions

View File

@ -65,17 +65,8 @@ const FollowButton = ({
);
}
const mapStateToProps = (state, ownProps) => {
const {
uri,
} = ownProps;
const loadingSelector = makeLoadingSelector([
'spotify_me/tracks?',
'spotify_me/albums?',
'spotify_me/following?',
`spotify_playlists/${getFromUri('playlistid', uri)}/followers?`,
]);
const mapStateToProps = (state) => {
const loadingSelector = makeLoadingSelector(['(.*)(follow)|(me\/albums)(.*)']);
return {
loading: loadingSelector(state),

View File

@ -628,10 +628,11 @@ const CoreMiddleware = (function () {
items_uris,
}));
}
store.dispatch(coreActions.removeItem(action.itemUri));
store.dispatch(coreActions.itemLoaded({
uri: action.itemUri,
in_library: false,
}));
localForage.removeItem(action.itemUri);
next(action);
break;
}

View File

@ -809,21 +809,23 @@ export function following(uri, method = 'GET') {
if (method === 'DELETE') {
dispatch(coreActions.removeFromLibrary(`spotify:library:${type}s`, uri));
dispatch(uiActions.createNotification({
content: <span>
Removed
<URILink type={type} uri={uri}>{asset ? asset.name : type}</URILink>
{' '}
from library
content: <span>
Removed
{' '}
<URILink type={type} uri={uri}>{asset ? asset.name : type}</URILink>
{' '}
from library
</span>,
}));
} else if (method === 'PUT' || method === 'POST') {
dispatch(coreActions.addToLibrary(`spotify:library:${type}s`, asset));
dispatch(uiActions.createNotification({
content: <span>
Added
<URILink type={type} uri={uri}>{asset ? asset.name : type}</URILink>
{' '}
to library
content: <span>
Added
{' '}
<URILink type={type} uri={uri}>{asset ? asset.name : type}</URILink>
{' '}
to library
</span>,
}));
}
@ -929,11 +931,11 @@ export function getArtist(uri, { full, forceRefetch } = {}) {
);
// Do we want a full artist, with all supporting material?
if (full) {
if (full) {
// All albums (gets all pages, may take some time to iterate them all)
let albums = [];
const fetchAlbums = (endpoint) => request({
dispatch, getState, endpoint, uri,
const fetchAlbums = (endpoint) => request({
dispatch, getState, endpoint, uri,
})
.then((response) => {
albums = [...albums, ...formatAlbums(response.items)];
@ -953,8 +955,8 @@ export function getArtist(uri, { full, forceRefetch } = {}) {
let tracksEndpoint = `artists/${getFromUri('artistid', uri)}`;
tracksEndpoint += `/top-tracks?country=${getState().spotify.country}`;
if (forceRefetch) tracksEndpoint += `&refetch=${Date.now()}`;
request({
dispatch, getState, endpoint: tracksEndpoint, uri,
request({
dispatch, getState, endpoint: tracksEndpoint, uri,
})
.then(
(response) => {
@ -968,8 +970,8 @@ export function getArtist(uri, { full, forceRefetch } = {}) {
// Related artists
let relatedEndpoint = `artists/${getFromUri('artistid', uri)}/related-artists`;
if (forceRefetch) relatedEndpoint += `?refetch=${Date.now()}`;
request({
dispatch, getState, endpoint: relatedEndpoint, uri,
request({
dispatch, getState, endpoint: relatedEndpoint, uri,
})
.then(
(response) => {
@ -1049,8 +1051,8 @@ export function getUser(uri, { full, forceRefetch } = {}) {
if (full) {
let playlists = [];
const fetchPlaylists = (endpoint) => request({
dispatch, getState, endpoint, uri,
const fetchPlaylists = (endpoint) => request({
dispatch, getState, endpoint, uri,
})
.then((response) => {
playlists = [...playlists, ...formatPlaylists(response.items)];
@ -1115,7 +1117,7 @@ export function getAlbum(uri, { full, forceRefetch } = {}) {
tracks,
}));
}
},
},
);
if (response.tracks.next) {
@ -1276,8 +1278,8 @@ export function getPlaylistTracks(uri, { forceRefetch, callbackAction } = {}) {
let tracks = [];
const fetchTracks = (endpoint) => request({
dispatch, getState, endpoint, uri,
const fetchTracks = (endpoint) => request({
dispatch, getState, endpoint, uri,
})
.then((response) => {
tracks = [...tracks, ...formatTracks(response.items)];
@ -1333,8 +1335,8 @@ export function getPlaylist(uri, options = {}) {
endpoint += `?market=${getState().spotify.country}`;
if (forceRefetch) endpoint += `&refetch=${Date.now()}`;
request({
dispatch, getState, endpoint, uri,
request({
dispatch, getState, endpoint, uri,
})
.then(
(response) => {

View File

@ -348,7 +348,7 @@ class Album extends React.Component {
const mapStateToProps = (state, ownProps) => {
const uri = decodeUri(ownProps.match.params.uri);
const itemSelector = makeItemSelector(uri);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!me\/albums).)*$']);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!me\/albums).)*$', '^((?!followers).)*$']);
return {
uri,
slim_mode: state.ui.slim_mode,

View File

@ -602,7 +602,7 @@ class Artist extends React.Component {
const mapStateToProps = (state, props) => {
const uri = decodeUri(props.match.params.uri);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!albums).)*$', '^((?!related-artists).)*$', '^((?!top-tracks).)*$']);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!albums).)*$', '^((?!related-artists).)*$', '^((?!top-tracks).)*$', '^((?!following).)*$']);
const artistSelector = makeItemSelector(uri);
const artist = artistSelector(state);
let albums = null;

View File

@ -496,7 +496,7 @@ const mapStateToProps = (state, ownProps) => {
const uri = decodeUri(ownProps.match.params.uri);
const itemSelector = makeItemSelector(uri);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!tracks).)*$']);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!tracks).)*$', '^((?!followers).)*$']);
const loadingTracksSelector = makeLoadingSelector([`(.*)${uri}(.*)tracks(.*)`]);
return {