Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

Commit

Permalink
C-2129 Decomp shared logic in collections tabs (#2843)
Browse files Browse the repository at this point in the history
Co-authored-by: Nikki Kang <[email protected]>
  • Loading branch information
nicoback2 and nicoback authored Feb 14, 2023
1 parent b712366 commit aad44ed
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 170 deletions.
89 changes: 6 additions & 83 deletions packages/mobile/src/screens/favorites-screen/AlbumsTab.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,17 @@
import { useMemo, useState } from 'react'
import { useState } from 'react'

import {
useProxySelector,
reachabilitySelectors,
shallowCompare
} from '@audius/common'
import { reachabilitySelectors } from '@audius/common'
import { useSelector } from 'react-redux'

import { CollectionList } from 'app/components/collection-list'
import { VirtualizedScrollView } from 'app/components/core'
import { EmptyTileCTA } from 'app/components/empty-tile-cta'
import { useIsOfflineModeEnabled } from 'app/hooks/useIsOfflineModeEnabled'
import type { AppState } from 'app/store'
import {
getOfflineTrackStatus,
getIsDoneLoadingFromDisk,
getOfflineCollectionsStatus
} from 'app/store/offline-downloads/selectors'
import { OfflineDownloadStatus } from 'app/store/offline-downloads/slice'

import { FilterInput } from './FilterInput'
import { NoTracksPlaceholder } from './NoTracksPlaceholder'
import { OfflineContentBanner } from './OfflineContentBanner'
import { getAccountCollections } from './selectors'
import { buildCollectionIdsToNumPlayableTracksMap } from './utils'
import { useCollectionScreenData } from './useCollectionScreenData'

const { getIsReachable } = reachabilitySelectors

Expand All @@ -34,75 +22,10 @@ const messages = {

export const AlbumsTab = () => {
const [filterValue, setFilterValue] = useState('')
const { filteredCollections: userAlbums, collectionIdsToNumTracks } =
useCollectionScreenData(filterValue, 'albums')
const isReachable = useSelector(getIsReachable)
const isOfflineModeEnabled = useIsOfflineModeEnabled()
const isDoneLoadingFromDisk = useSelector(getIsDoneLoadingFromDisk)

const offlineTracksStatus = useProxySelector(
(state: AppState) => {
if (isDoneLoadingFromDisk && isOfflineModeEnabled && !isReachable) {
return getOfflineTrackStatus(state)
}
// We don't need offline download status when we're not offline. This saves us rerenders while we're downloading things and updating the offline download slice.
return undefined
},
[isReachable, isOfflineModeEnabled, isDoneLoadingFromDisk]
)

const userAlbums = useProxySelector(
(state: AppState) => {
if (isOfflineModeEnabled && !isReachable) {
if (!isDoneLoadingFromDisk) {
return []
}
}
const offlineCollectionsStatus = getOfflineCollectionsStatus(state)
return getAccountCollections(state, filterValue).filter((collection) => {
if (!collection.is_album) {
return false
}
if (isOfflineModeEnabled && !isReachable) {
const trackIds =
collection.playlist_contents.track_ids.map(
(trackData) => trackData.track
) ?? []
const collectionDownloadStatus =
offlineCollectionsStatus[collection.playlist_id]
// Don't show a playlist in Offline Mode if it has at least one track but none of the tracks have been downloaded yet OR if it is not marked for download
return (
collection.is_album &&
Boolean(collectionDownloadStatus) &&
collectionDownloadStatus !== OfflineDownloadStatus.INACTIVE &&
(trackIds.length === 0 ||
trackIds.some((t) => {
return (
offlineTracksStatus &&
offlineTracksStatus[t.toString()] ===
OfflineDownloadStatus.SUCCESS
)
}))
)
}
return true
})
},
[
filterValue,
isReachable,
isOfflineModeEnabled,
isDoneLoadingFromDisk,
offlineTracksStatus
],
shallowCompare
)

const numPlayableTracksMap = useMemo(() => {
return buildCollectionIdsToNumPlayableTracksMap(
userAlbums,
isOfflineModeEnabled && !isReachable,
offlineTracksStatus || {}
)
}, [isOfflineModeEnabled, isReachable, offlineTracksStatus, userAlbums])

return (
<VirtualizedScrollView listKey='favorites-albums-view'>
Expand All @@ -124,7 +47,7 @@ export const AlbumsTab = () => {
listKey='favorites-albums'
scrollEnabled={false}
collection={userAlbums}
collectionIdsToNumTracks={numPlayableTracksMap}
collectionIdsToNumTracks={collectionIdsToNumTracks}
style={{ marginVertical: 12 }}
/>
</>
Expand Down
98 changes: 11 additions & 87 deletions packages/mobile/src/screens/favorites-screen/PlaylistsTab.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,21 @@
import { useCallback, useMemo, useState } from 'react'
import { useCallback, useState } from 'react'

import {
useProxySelector,
reachabilitySelectors,
shallowCompare
} from '@audius/common'
import { reachabilitySelectors } from '@audius/common'
import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated'
import { useSelector } from 'react-redux'

import { CollectionList } from 'app/components/collection-list'
import { VirtualizedScrollView, Button } from 'app/components/core'
import { Button, VirtualizedScrollView } from 'app/components/core'
import { EmptyTileCTA } from 'app/components/empty-tile-cta'
import { useIsOfflineModeEnabled } from 'app/hooks/useIsOfflineModeEnabled'
import { useNavigation } from 'app/hooks/useNavigation'
import type { AppState } from 'app/store'
import {
getIsDoneLoadingFromDisk,
getOfflineCollectionsStatus,
getOfflineTrackStatus
} from 'app/store/offline-downloads/selectors'
import { OfflineDownloadStatus } from 'app/store/offline-downloads/slice'

import type { FavoritesTabScreenParamList } from '../app-screen/FavoritesTabScreen'

import { FilterInput } from './FilterInput'
import { NoTracksPlaceholder } from './NoTracksPlaceholder'
import { OfflineContentBanner } from './OfflineContentBanner'
import { getAccountCollections } from './selectors'
import { buildCollectionIdsToNumPlayableTracksMap } from './utils'
import { useCollectionScreenData } from './useCollectionScreenData'

const { getIsReachable } = reachabilitySelectors

Expand All @@ -38,80 +26,16 @@ const messages = {

export const PlaylistsTab = () => {
const navigation = useNavigation<FavoritesTabScreenParamList>()
const [filterValue, setFilterValue] = useState('')
const isOfflineModeEnabled = useIsOfflineModeEnabled()
const isReachable = useSelector(getIsReachable)
const isDoneLoadingFromDisk = useSelector(getIsDoneLoadingFromDisk)
const offlineTracksStatus = useProxySelector(
(state: AppState) => {
if (isDoneLoadingFromDisk && isOfflineModeEnabled && !isReachable) {
return getOfflineTrackStatus(state)
}
// We don't need offline download status when we're not offline. This saves us rerenders while we're downloading things and updating the offline download slice.
return undefined
},
[isReachable, isOfflineModeEnabled, isDoneLoadingFromDisk]
)

const userPlaylists = useProxySelector(
(state: AppState) => {
if (isOfflineModeEnabled && !isReachable) {
if (!isDoneLoadingFromDisk) {
return []
}
}
const offlineCollectionsStatus = getOfflineCollectionsStatus(state)
return getAccountCollections(state, filterValue).filter((collection) => {
if (collection.is_album) {
return false
}
if (isOfflineModeEnabled && !isReachable) {
const trackIds =
collection.playlist_contents.track_ids.map(
(trackData) => trackData.track
) ?? []
const collectionDownloadStatus =
offlineCollectionsStatus[collection.playlist_id]
// Don't show a playlist in Offline Mode if it has at least one track but none of the tracks have been downloaded yet OR if it is not marked for download
return (
!collection.is_album &&
Boolean(collectionDownloadStatus) &&
collectionDownloadStatus !== OfflineDownloadStatus.INACTIVE &&
(trackIds.length === 0 ||
trackIds.some((t) => {
return (
offlineTracksStatus &&
offlineTracksStatus[t.toString()] ===
OfflineDownloadStatus.SUCCESS
)
}))
)
}
return true
})
},
[
filterValue,
isReachable,
isOfflineModeEnabled,
isDoneLoadingFromDisk,
offlineTracksStatus
],
shallowCompare
)

const numPlayableTracksMap = useMemo(() => {
return buildCollectionIdsToNumPlayableTracksMap(
userPlaylists,
isOfflineModeEnabled && !isReachable,
offlineTracksStatus || {}
)
}, [isOfflineModeEnabled, isReachable, offlineTracksStatus, userPlaylists])

const handleNavigateToNewPlaylist = useCallback(() => {
navigation.push('CreatePlaylist')
}, [navigation])

const [filterValue, setFilterValue] = useState('')
const { filteredCollections: userPlaylists, collectionIdsToNumTracks } =
useCollectionScreenData(filterValue, 'playlists')
const isOfflineModeEnabled = useIsOfflineModeEnabled()
const isReachable = useSelector(getIsReachable)

return (
<VirtualizedScrollView listKey='favorites-playlists-view'>
{!userPlaylists?.length && !filterValue ? (
Expand Down Expand Up @@ -143,7 +67,7 @@ export const PlaylistsTab = () => {
listKey='favorites-playlists'
scrollEnabled={false}
collection={userPlaylists}
collectionIdsToNumTracks={numPlayableTracksMap}
collectionIdsToNumTracks={collectionIdsToNumTracks}
/>
</Animated.View>
</>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import { useMemo } from 'react'

import {
reachabilitySelectors,
shallowCompare,
useProxySelector
} from '@audius/common'
import { useSelector } from 'react-redux'

import { useIsOfflineModeEnabled } from 'app/hooks/useIsOfflineModeEnabled'
import type { AppState } from 'app/store'
import {
getIsDoneLoadingFromDisk,
getOfflineCollectionsStatus,
getOfflineTrackStatus
} from 'app/store/offline-downloads/selectors'
import { OfflineDownloadStatus } from 'app/store/offline-downloads/slice'

import { getAccountCollections } from './selectors'
import { buildCollectionIdsToNumPlayableTracksMap } from './utils'

const { getIsReachable } = reachabilitySelectors

export const useCollectionScreenData = (
filterValue = '',
collectionType: 'albums' | 'playlists'
) => {
const isDoneLoadingFromDisk = useSelector(getIsDoneLoadingFromDisk)
const isReachable = useSelector(getIsReachable)
const isOfflineModeEnabled = useIsOfflineModeEnabled()
const offlineTracksStatus = useProxySelector(
(state: AppState) => {
if (isDoneLoadingFromDisk && isOfflineModeEnabled && !isReachable) {
return getOfflineTrackStatus(state)
}
// We don't need offline download status when we're not offline. This saves us rerenders while we're downloading things and updating the offline download slice.
return undefined
},
[isReachable, isOfflineModeEnabled, isDoneLoadingFromDisk]
)

const filteredCollections = useProxySelector(
(state: AppState) => {
if (isOfflineModeEnabled && !isReachable) {
if (!isDoneLoadingFromDisk) {
return []
}
}
const offlineCollectionsStatus = getOfflineCollectionsStatus(state)
return getAccountCollections(state, filterValue).filter((collection) => {
const isCollectionCorrectType =
collectionType === 'albums'
? collection.is_album
: !collection.is_album
if (!isCollectionCorrectType) {
return false
}
if (isOfflineModeEnabled && !isReachable) {
const trackIds =
collection.playlist_contents.track_ids.map(
(trackData) => trackData.track
) ?? []
const collectionDownloadStatus =
offlineCollectionsStatus[collection.playlist_id]
// Don't show a playlist in Offline Mode if it has at least one track but none of the tracks have been downloaded yet OR if it is not marked for download
return (
isCollectionCorrectType &&
Boolean(collectionDownloadStatus) &&
collectionDownloadStatus !== OfflineDownloadStatus.INACTIVE &&
(trackIds.length === 0 ||
trackIds.some((t) => {
return (
offlineTracksStatus &&
offlineTracksStatus[t.toString()] ===
OfflineDownloadStatus.SUCCESS
)
}))
)
}
return true
})
},
[
filterValue,
isReachable,
isOfflineModeEnabled,
isDoneLoadingFromDisk,
offlineTracksStatus
],
shallowCompare
)
const numPlayableTracksMap = useMemo(() => {
return buildCollectionIdsToNumPlayableTracksMap(
filteredCollections,
isOfflineModeEnabled && !isReachable,
offlineTracksStatus || {}
)
}, [
isOfflineModeEnabled,
isReachable,
offlineTracksStatus,
filteredCollections
])

return {
filteredCollections,
collectionIdsToNumTracks: numPlayableTracksMap
}
}

0 comments on commit aad44ed

Please sign in to comment.