From 27c0505c8243c65cbc2041fdd11e5330b562c109 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Mon, 26 Sep 2022 22:27:08 -0700 Subject: [PATCH 1/2] [C-1164] Fix collections screen loading issues --- .../collection-screen/CollectionScreen.tsx | 8 +++- .../CollectionScreenDetailsTile.tsx | 41 ++++++++++++------- 2 files changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx b/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx index 396424ed75..a839ced90a 100644 --- a/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx +++ b/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx @@ -19,8 +19,10 @@ import { shareModalUIActions, RepostType, repostsUserListActions, - favoritesUserListActions + favoritesUserListActions, + collectionPageLineupActions as tracksActions } from '@audius/common' +import { useFocusEffect } from '@react-navigation/native' import { useDispatch, useSelector } from 'react-redux' import { Screen, VirtualizedScrollView } from 'app/components/core' @@ -62,10 +64,12 @@ export const CollectionScreen = () => { // params is incorrectly typed and can sometimes be undefined const { id, searchCollection } = params ?? {} - useEffect(() => { + const handleFetchCollection = useCallback(() => { dispatch(fetchCollection(id)) }, [dispatch, id]) + useFocusEffect(handleFetchCollection) + const cachedCollection = useSelector((state) => getCollection(state, { id }) ) as Collection diff --git a/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx b/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx index 48171d1a0f..86a1cd8636 100644 --- a/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx +++ b/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx @@ -2,6 +2,8 @@ import { useCallback, useEffect, useMemo } from 'react' import type { ID, UID } from '@audius/common' import { + useProxySelector, + collectionPageActions, playerSelectors, Status, Name, @@ -11,6 +13,7 @@ import { collectionPageLineupActions as tracksActions, collectionPageSelectors } from '@audius/common' +import { useFocusEffect } from '@react-navigation/native' import { Text, View } from 'react-native' import { useDispatch, useSelector } from 'react-redux' @@ -23,7 +26,9 @@ import { TrackList } from 'app/components/track-list' import { make, track } from 'app/services/analytics' import { makeStyles } from 'app/styles' import { formatCount } from 'app/utils/format' -const { getCollectionTracksLineup } = collectionPageSelectors +const { getCollectionTracksLineup, getCollectionUid, getUserUid } = + collectionPageSelectors +const { resetCollection } = collectionPageActions const { makeGetTableMetadatas } = lineupSelectors const { getPlaying, getUid, getCurrentTrack } = playerSelectors @@ -83,15 +88,23 @@ export const CollectionScreenDetailsTile = ({ const styles = useStyles() const dispatch = useDispatch() - useEffect(() => { + const collectionUid = useSelector(getCollectionUid) + const userUid = useSelector(getUserUid) + const { entries, status } = useProxySelector(getTracksLineup, []) + const tracksLoading = status === Status.LOADING + const numTracks = entries.length + + const resetCollectionLineup = useCallback(() => { + if (collectionUid && userUid) { + dispatch(resetCollection(collectionUid, userUid)) + } dispatch(tracksActions.fetchLineupMetadatas(0, 200, false, undefined)) + // eslint-disable-next-line react-hooks/exhaustive-deps }, [dispatch]) - const tracksLineup = useSelector(getTracksLineup) - const tracksLoading = tracksLineup.status === Status.LOADING - const numTracks = tracksLineup.entries.length + useFocusEffect(resetCollectionLineup) - const duration = tracksLineup.entries?.reduce( + const duration = entries?.reduce( (duration, entry) => duration + entry.duration, 0 ) @@ -120,9 +133,7 @@ export const CollectionScreenDetailsTile = ({ const playingTrack = useSelector(getCurrentTrack) const trackId = playingTrack?.track_id - const isQueued = tracksLineup.entries.some( - (entry) => playingUid === entry.uid - ) + const isQueued = entries.some((entry) => playingUid === entry.uid) const handlePressPlay = useCallback(() => { if (isPlaying && isQueued) { @@ -131,11 +142,11 @@ export const CollectionScreenDetailsTile = ({ } else if (!isPlaying && isQueued) { dispatch(tracksActions.play()) recordPlay(trackId) - } else if (tracksLineup.entries.length > 0) { - dispatch(tracksActions.play(tracksLineup.entries[0].uid)) - recordPlay(tracksLineup.entries[0].track_id) + } else if (entries.length > 0) { + dispatch(tracksActions.play(entries[0].uid)) + recordPlay(entries[0].track_id) } - }, [dispatch, isPlaying, trackId, tracksLineup, isQueued]) + }, [dispatch, isPlaying, trackId, entries, isQueued]) const handlePressTrackListItemPlay = useCallback( (uid: UID, id: ID) => { @@ -178,7 +189,7 @@ export const CollectionScreenDetailsTile = ({ ) - return tracksLineup.entries.length === 0 ? ( + return entries.length === 0 ? ( {messages.empty} ) : ( <> @@ -187,7 +198,7 @@ export const CollectionScreenDetailsTile = ({ hideArt showDivider togglePlay={handlePressTrackListItemPlay} - tracks={tracksLineup.entries} + tracks={entries} /> ) From ab13d117b469819393b5db2883a65ceaa6d5b545 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Tue, 27 Sep 2022 17:20:06 -0700 Subject: [PATCH 2/2] Fix lints --- .../src/screens/collection-screen/CollectionScreen.tsx | 5 ++--- .../collection-screen/CollectionScreenDetailsTile.tsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx b/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx index a839ced90a..e128722644 100644 --- a/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx +++ b/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo } from 'react' +import { useCallback, useMemo } from 'react' import type { Collection, User } from '@audius/common' import { @@ -19,8 +19,7 @@ import { shareModalUIActions, RepostType, repostsUserListActions, - favoritesUserListActions, - collectionPageLineupActions as tracksActions + favoritesUserListActions } from '@audius/common' import { useFocusEffect } from '@react-navigation/native' import { useDispatch, useSelector } from 'react-redux' diff --git a/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx b/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx index 86a1cd8636..2ba548b6e9 100644 --- a/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx +++ b/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo } from 'react' +import { useCallback, useMemo } from 'react' import type { ID, UID } from '@audius/common' import {