From dfc732b3e5e42af6c9fd8ada37917c6461a2e8e7 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Fri, 26 Aug 2022 09:06:05 -0700 Subject: [PATCH 1/3] [C-903] Migrate feed to native store --- .../components/lineup-tile/CollectionTile.tsx | 18 +++---------- .../src/components/lineup-tile/TrackTile.tsx | 13 +++------- .../mobile/src/components/lineup/Lineup.tsx | 16 ++++++------ .../src/screens/feed-screen/FeedScreen.tsx | 26 ++++++++++--------- packages/mobile/src/store/sagas.ts | 6 +++++ 5 files changed, 35 insertions(+), 44 deletions(-) diff --git a/packages/mobile/src/components/lineup-tile/CollectionTile.tsx b/packages/mobile/src/components/lineup-tile/CollectionTile.tsx index 20fca324a4..930f1a6acd 100644 --- a/packages/mobile/src/components/lineup-tile/CollectionTile.tsx +++ b/packages/mobile/src/components/lineup-tile/CollectionTile.tsx @@ -29,7 +29,6 @@ import { useSelector } from 'react-redux' import { useCollectionCoverArt } from 'app/hooks/useCollectionCoverArt' import { useDispatchWeb } from 'app/hooks/useDispatchWeb' import { useNavigation } from 'app/hooks/useNavigation' -import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb' import type { AppState } from 'app/store' import { getPlayingUid } from 'app/store/audio/selectors' @@ -51,20 +50,11 @@ const getUserId = accountSelectors.getUserId export const CollectionTile = (props: LineupItemProps) => { const { uid } = props - const collection = useSelectorWeb( - (state) => getCollection(state, { uid }), - isEqual - ) + const collection = useSelector((state) => getCollection(state, { uid })) - const tracks = useSelectorWeb( - (state) => getTracksFromCollection(state, { uid }), - isEqual - ) + const tracks = useSelector((state) => getTracksFromCollection(state, { uid })) - const user = useSelectorWeb( - (state) => getUserFromCollection(state, { uid }), - isEqual - ) + const user = useSelector((state) => getUserFromCollection(state, { uid })) if (!collection || !tracks || !user) { console.warn( @@ -102,7 +92,7 @@ const CollectionTileComponent = ({ }: CollectionTileProps) => { const dispatchWeb = useDispatchWeb() const navigation = useNavigation() - const currentUserId = useSelectorWeb(getUserId) + const currentUserId = useSelector(getUserId) const currentTrack = useSelector((state: AppState) => { const uid = getPlayingUid(state) return tracks.find((track) => track.uid === uid) ?? null diff --git a/packages/mobile/src/components/lineup-tile/TrackTile.tsx b/packages/mobile/src/components/lineup-tile/TrackTile.tsx index 040b414e20..fa2c59b3d0 100644 --- a/packages/mobile/src/components/lineup-tile/TrackTile.tsx +++ b/packages/mobile/src/components/lineup-tile/TrackTile.tsx @@ -23,7 +23,6 @@ import { useSelector } from 'react-redux' import type { LineupItemProps } from 'app/components/lineup-tile/types' import { useDispatchWeb } from 'app/hooks/useDispatchWeb' import { useNavigation } from 'app/hooks/useNavigation' -import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb' import { useTrackCoverArt } from 'app/hooks/useTrackCoverArt' import type { AppState } from 'app/store' import { getPlayingUid } from 'app/store/audio/selectors' @@ -40,15 +39,9 @@ const getUserId = accountSelectors.getUserId export const TrackTile = (props: LineupItemProps) => { const { uid } = props - // Using isEqual as the equality function to prevent rerenders due to object references - // not being preserved when syncing redux state from client. - // This can be removed when no longer dependent on web client - const track = useSelectorWeb((state) => getTrack(state, { uid }), isEqual) + const track = useSelector((state) => getTrack(state, { uid })) - const user = useSelectorWeb( - (state) => getUserFromTrack(state, { uid }), - isEqual - ) + const user = useSelector((state) => getUserFromTrack(state, { uid })) if (!track || !user) { console.warn('Track or user missing for TrackTile, preventing render') @@ -75,7 +68,7 @@ const TrackTileComponent = ({ }: TrackTileProps) => { const dispatchWeb = useDispatchWeb() const navigation = useNavigation() - const currentUserId = useSelectorWeb(getUserId) + const currentUserId = useSelector(getUserId) const isPlayingUid = useSelector( (state: AppState) => getPlayingUid(state) === lineupTileProps.uid ) diff --git a/packages/mobile/src/components/lineup/Lineup.tsx b/packages/mobile/src/components/lineup/Lineup.tsx index 4a4be41289..c665c06211 100644 --- a/packages/mobile/src/components/lineup/Lineup.tsx +++ b/packages/mobile/src/components/lineup/Lineup.tsx @@ -11,6 +11,7 @@ import { import { range } from 'lodash' import type { SectionList as RNSectionList } from 'react-native' import { Dimensions, StyleSheet, View } from 'react-native' +import { useDispatch } from 'react-redux' import { SectionList } from 'app/components/core' import { @@ -18,7 +19,6 @@ import { TrackTile, LineupTileSkeleton } from 'app/components/lineup-tile' -import { useDispatchWeb } from 'app/hooks/useDispatchWeb' import { useScrollToTop } from 'app/hooks/useScrollToTop' import { useSelectorWeb } from 'app/hooks/useSelectorWeb' import { make, track } from 'app/services/analytics' @@ -141,7 +141,7 @@ export const Lineup = ({ ...listProps }: LineupProps) => { const showTip = useSelectorWeb(getShowTip) - const dispatchWeb = useDispatchWeb() + const dispatch = useDispatch() const ref = useRef(null) const [isPastLoadThreshold, setIsPastLoadThreshold] = useState(false) useScrollToTop(() => { @@ -187,7 +187,7 @@ export const Lineup = ({ if (shouldLoadMore) { const itemLoadCount = itemCounts.initial + page * itemCounts.loadMore - dispatchWeb(actions.setPage(page + 1)) + dispatch(actions.setPage(page + 1)) const limit = Math.min(itemLoadCount, Math.max(countOrDefault, itemCounts.minimum)) - @@ -196,7 +196,7 @@ export const Lineup = ({ if (loadMore) { loadMore(offset, limit, page === 0) } else { - dispatchWeb( + dispatch( actions.fetchLineupMetadatas(offset, limit, page === 0, fetchPayload) ) } @@ -204,7 +204,7 @@ export const Lineup = ({ }, [ actions, countOrDefault, - dispatchWeb, + dispatch, fetchPayload, includeLineupStatus, itemCounts, @@ -247,7 +247,7 @@ export const Lineup = ({ // we remove the web-view. setImmediate(() => { if (!isPlayingUid || !isPlaying) { - dispatchWeb(actions.play(uid)) + dispatch(actions.play(uid)) track( make({ eventName: Name.PLAYBACK_PLAY, @@ -256,7 +256,7 @@ export const Lineup = ({ }) ) } else { - dispatchWeb(actions.pause()) + dispatch(actions.pause()) track( make({ eventName: Name.PLAYBACK_PAUSE, @@ -267,7 +267,7 @@ export const Lineup = ({ } }) }, - [actions, dispatchWeb] + [actions, dispatch] ) const getLineupTileComponent = (item: LineupItem) => { diff --git a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx index 9cb7265788..3058d188b9 100644 --- a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx +++ b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx @@ -5,17 +5,17 @@ import { lineupSelectors, feedPageLineupActions as feedActions, feedPageSelectors, - modalsActions + modalsActions, + constructPlaylistFolder } from '@audius/common' -import { omit } from 'lodash' -import { useSelector } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import { Screen } from 'app/components/core' import { Header } from 'app/components/header' import { Lineup } from 'app/components/lineup' import { useDispatchWeb } from 'app/hooks/useDispatchWeb' import { usePopToTopOnDrawerOpen } from 'app/hooks/usePopToTopOnDrawerOpen' -import { useSelectorWeb, isEqual } from 'app/hooks/useSelectorWeb' +import { useSelectorWeb } from 'app/hooks/useSelectorWeb' import { make, track } from 'app/services/analytics' import { getIsSignedIn } from 'app/store/lifecycle/selectors' @@ -34,20 +34,22 @@ export const FeedScreen = () => { usePopToTopOnDrawerOpen() const dispatchWeb = useDispatchWeb() - const feedLineup = useSelectorWeb(getFeedLineup, (a, b) => { - const omitUneeded = (o: T) => omit(o, ['inView']) - return isEqual(omitUneeded(a), omitUneeded(b)) - }) + const dispatch = useDispatch() + + const feedLineup = useSelector(getFeedLineup) const signedIn = useSelector(getIsSignedIn) const feedFilter = useSelectorWeb(getFeedFilter) const [isRefreshing, setIsRefreshing] = useState(false) + console.log('feed lineup!!', feedLineup) + const loadMore = useCallback( (offset: number, limit: number, overwrite: boolean) => { - dispatchWeb(feedActions.fetchLineupMetadatas(offset, limit, overwrite)) + console.log('load more!') + dispatch(feedActions.fetchLineupMetadatas(offset, limit, overwrite)) track(make({ eventName: Name.FEED_PAGINATE, offset, limit })) }, - [dispatchWeb] + [dispatch] ) useEffect(() => { @@ -58,8 +60,8 @@ export const FeedScreen = () => { const handleRefresh = useCallback(() => { setIsRefreshing(true) - dispatchWeb(feedActions.refreshInView(true)) - }, [dispatchWeb]) + dispatch(feedActions.refreshInView(true)) + }, [dispatch]) const handleFilterButtonPress = useCallback(() => { dispatchWeb(setVisibility({ modal: 'FeedFilter', visible: true })) diff --git a/packages/mobile/src/store/sagas.ts b/packages/mobile/src/store/sagas.ts index b4079085a7..b75173142b 100644 --- a/packages/mobile/src/store/sagas.ts +++ b/packages/mobile/src/store/sagas.ts @@ -8,8 +8,10 @@ import tracksSagas from 'common/store/cache/tracks/sagas' import usersSagas from 'common/store/cache/users/sagas' import confirmerSagas from 'common/store/confirmer/sagas' import collectionPageSagas from 'common/store/pages/collection/sagas' +import feedPageSagas from 'common/store/pages/feed/sagas' import signOnSagas from 'common/store/pages/signon/sagas' import trackPageSagas from 'common/store/pages/track/sagas' +import queueSagas from 'common/store/queue/sagas' import searchBarSagas from 'common/store/search-bar/sagas' import signOutSagas from 'common/store/sign-out/sagas' import { all, fork } from 'typed-redux-saga' @@ -33,6 +35,9 @@ export default function* rootSaga() { ...tracksSagas(), ...usersSagas(), + // Playback + queueSagas(), + // Sign in / Sign out ...signOnSagas(), ...signOutSagas(), @@ -40,6 +45,7 @@ export default function* rootSaga() { // Pages ...trackPageSagas(), ...collectionPageSagas(), + ...feedPageSagas(), initKeyboardEvents, ...remoteConfig(), From c14b64afef5408b367b773419967faa86d2dfff6 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Fri, 26 Aug 2022 09:09:26 -0700 Subject: [PATCH 2/3] remove logs --- packages/mobile/src/screens/feed-screen/FeedScreen.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx index 3058d188b9..0a21867d63 100644 --- a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx +++ b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx @@ -41,11 +41,8 @@ export const FeedScreen = () => { const feedFilter = useSelectorWeb(getFeedFilter) const [isRefreshing, setIsRefreshing] = useState(false) - console.log('feed lineup!!', feedLineup) - const loadMore = useCallback( (offset: number, limit: number, overwrite: boolean) => { - console.log('load more!') dispatch(feedActions.fetchLineupMetadatas(offset, limit, overwrite)) track(make({ eventName: Name.FEED_PAGINATE, offset, limit })) }, From 492475878e5fdfff731c23ff8bb84ebb4a7076c7 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Fri, 26 Aug 2022 09:16:26 -0700 Subject: [PATCH 3/3] Fix imports --- packages/mobile/src/screens/feed-screen/FeedScreen.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx index 0a21867d63..9d9f4d4d46 100644 --- a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx +++ b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx @@ -5,8 +5,7 @@ import { lineupSelectors, feedPageLineupActions as feedActions, feedPageSelectors, - modalsActions, - constructPlaylistFolder + modalsActions } from '@audius/common' import { useDispatch, useSelector } from 'react-redux'