diff --git a/.changeset/rename-chronological-feed-to-latest.md b/.changeset/rename-chronological-feed-to-latest.md new file mode 100644 index 00000000000..0f80cd3cea6 --- /dev/null +++ b/.changeset/rename-chronological-feed-to-latest.md @@ -0,0 +1,7 @@ +--- +'@audius/web': patch +'@audius/mobile': patch +'@audius/common': patch +--- + +Rename the Feed page's "Chronological" tab to "Latest" on web and mobile. The persisted `feed-page:tab` localStorage value is migrated transparently so existing users land on the same tab they had selected. diff --git a/packages/common/src/api/tan-query/feed/useFeedPreferences.ts b/packages/common/src/api/tan-query/feed/useFeedPreferences.ts index 08294cbf11f..d465b8d42eb 100644 --- a/packages/common/src/api/tan-query/feed/useFeedPreferences.ts +++ b/packages/common/src/api/tan-query/feed/useFeedPreferences.ts @@ -11,7 +11,7 @@ const FEED_TAB_LS_KEY = 'feed-page:tab' const FEED_FILTER_LS_KEY = 'feed-page:filter' const isFeedTab = (value: string | null): value is FeedTab => - value === FeedTab.FOR_YOU || value === FeedTab.CHRONOLOGICAL + value === FeedTab.FOR_YOU || value === FeedTab.LATEST const isFeedFilter = (value: string | null): value is FeedFilter => value === FeedFilter.ALL || @@ -19,7 +19,7 @@ const isFeedFilter = (value: string | null): value is FeedFilter => value === FeedFilter.REPOST /** - * Persisted active tab on the Feed page (For You vs Chronological). Backed by + * Persisted active tab on the Feed page (For You vs Latest). Backed by * the tan-query cache so reads in any component see the same value, with * localStorage as the durable store. */ @@ -31,6 +31,9 @@ export const useFeedTab = (): [FeedTab, (tab: FeedTab) => void] => { queryKey: [QUERY_KEYS.feedTab], queryFn: async () => { const stored = await localStorage.getItem(FEED_TAB_LS_KEY) + // Migrate the pre-rename persisted value so existing users land on the + // same tab they had selected. + if (stored === 'CHRONOLOGICAL') return FeedTab.LATEST return isFeedTab(stored) ? stored : FeedTab.FOR_YOU }, staleTime: Infinity, @@ -49,7 +52,7 @@ export const useFeedTab = (): [FeedTab, (tab: FeedTab) => void] => { } /** - * Persisted post-type filter for the Chronological feed. Same tan-query + * Persisted post-type filter for the Latest feed. Same tan-query * shared-store pattern as {@link useFeedTab}. */ export const useFeedFilter = (): [FeedFilter, (filter: FeedFilter) => void] => { diff --git a/packages/common/src/models/FeedTab.ts b/packages/common/src/models/FeedTab.ts index 0b368cc1601..016b20cec81 100644 --- a/packages/common/src/models/FeedTab.ts +++ b/packages/common/src/models/FeedTab.ts @@ -1,4 +1,4 @@ export enum FeedTab { FOR_YOU = 'FOR_YOU', - CHRONOLOGICAL = 'CHRONOLOGICAL' + LATEST = 'LATEST' } diff --git a/packages/mobile/src/screens/feed-screen/FeedTabs.tsx b/packages/mobile/src/screens/feed-screen/FeedTabs.tsx index 76a5f389dab..77ef1ad36c6 100644 --- a/packages/mobile/src/screens/feed-screen/FeedTabs.tsx +++ b/packages/mobile/src/screens/feed-screen/FeedTabs.tsx @@ -5,10 +5,10 @@ import { Flex, SelectablePill, useTheme } from '@audius/harmony-native' const tabLabels: Record = { [FeedTab.FOR_YOU]: 'For You', - [FeedTab.CHRONOLOGICAL]: 'Chronological' + [FeedTab.LATEST]: 'Latest' } -const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.CHRONOLOGICAL] +const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.LATEST] type FeedTabsProps = { currentTab: FeedTab diff --git a/packages/web/src/pages/feed-page/components/FeedTabs.tsx b/packages/web/src/pages/feed-page/components/FeedTabs.tsx index 70d9fc7fffa..bf49324e70b 100644 --- a/packages/web/src/pages/feed-page/components/FeedTabs.tsx +++ b/packages/web/src/pages/feed-page/components/FeedTabs.tsx @@ -10,15 +10,15 @@ type FeedTabsProps = { const messages = { forYou: 'For You', - chronological: 'Chronological' + latest: 'Latest' } const tabToLabel: Record = { [FeedTab.FOR_YOU]: messages.forYou, - [FeedTab.CHRONOLOGICAL]: messages.chronological + [FeedTab.LATEST]: messages.latest } -const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.CHRONOLOGICAL] +const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.LATEST] export const FeedTabs = ({ currentTab, onSelectTab }: FeedTabsProps) => { const handleChange = useCallback( diff --git a/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx b/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx index 259d86dd145..abc07413b79 100644 --- a/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx +++ b/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx @@ -52,7 +52,7 @@ const FeedPageContent = ({ containerRef }: FeedPageContentProps) => { const isForYou = feedTab === FeedTab.FOR_YOU - // Chronological lineup. Disabled while For You is active. + // Latest lineup. Disabled while For You is active. const feedArgs = useMemo( () => ({ userId: currentUserId,