Fix short trending bug

packages/web/src/app/web-player/WebPlayer.jsx

@@ -46,11 +46,7 @@ import DesktopRoute from 'components/routes/DesktopRoute'
 import MobileRoute from 'components/routes/MobileRoute'
 import TrendingGenreSelectionPage from 'components/trending-genre-selection/TrendingGenreSelectionPage'
 import { USDCBalanceFetcher } from 'components/usdc-balance-fetcher/USDCBalanceFetcher'
-import {
-  MainContentContext,
-  MainContentContextProvider,
-  MAIN_CONTENT_ID
-} from 'pages/MainContentContext'
+import { MainContentContext, MAIN_CONTENT_ID } from 'pages/MainContentContext'
 import { AiAttributedTracksPage } from 'pages/ai-attributed-tracks-page'
 import { AudioRewardsPage } from 'pages/audio-rewards-page/AudioRewardsPage'
 import { AudioTransactionsPage } from 'pages/audio-transactions-page'
@@ -475,7 +471,7 @@ class WebPlayer extends Component {
           <Notice />
           <Navigator />
           <div
-            ref={this.props.mainContentRef}
+            ref={this.props.setMainContentRef}
             id={MAIN_CONTENT_ID}
             role='main'
             className={cn(styles.mainContentWrapper, {
@@ -1058,13 +1054,13 @@ const RouterWebPlayer = withRouter(
 
 const MainContentRouterWebPlayer = () => {
   return (
-    <MainContentContextProvider>
-      <MainContentContext.Consumer>
-        {({ mainContentRef }) => (
-          <RouterWebPlayer mainContentRef={mainContentRef} />
-        )}
-      </MainContentContext.Consumer>
-    </MainContentContextProvider>
+    <MainContentContext.Consumer>
+      {({ ref, setRef }) => {
+        return (
+          <RouterWebPlayer setMainContentRef={setRef} mainContentRef={ref} />
+        )
+      }}
+    </MainContentContext.Consumer>
   )
 }
 

packages/web/src/components/artist-recommendations/ArtistRecommendationsPopup.tsx

@@ -1,11 +1,11 @@
-import { RefObject, useContext } from 'react'
+import { RefObject } from 'react'
 
 import { ID, User } from '@audius/common/models'
 import { cacheUsersSelectors } from '@audius/common/store'
 import { Popup } from '@audius/harmony'
 import { useSelector } from 'react-redux'
 
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 import { AppState } from 'store/types'
 import zIndex from 'utils/zIndex'
 
@@ -22,7 +22,7 @@ type Props = {
 
 export const ArtistRecommendationsPopup = (props: Props) => {
   const { anchorRef, artistId, isVisible, onClose } = props
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
 
   // Get the artist
   const user = useSelector<AppState, User | null>((state) =>

packages/web/src/components/collectibles/components/CollectiblesPage.tsx

@@ -53,7 +53,7 @@ import Toast from 'components/toast/Toast'
 import { ToastContext } from 'components/toast/ToastContext'
 import { ComponentPlacement, MountPlacement } from 'components/types'
 import UserBadges from 'components/user-badges/UserBadges'
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 import { copyToClipboard, getCopyableLink } from 'utils/clipboardUtil'
 import {
   BASE_GA_URL,
@@ -560,7 +560,7 @@ const CollectiblesPage = (props: CollectiblesPageProps) => {
       onClick: handleEditClick
     })
   }
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
 
   return (
     <div

packages/web/src/components/header/desktop/HeaderGutter.tsx

@@ -1,9 +1,7 @@
-import { useContext } from 'react'
-
 import cn from 'classnames'
 
 import { usePortal } from 'hooks/usePortal'
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 
 import styles from './HeaderGutter.module.css'
 
@@ -27,7 +25,7 @@ export const HeaderGutter = ({
   scrollBarWidth,
   className
 }: HeaderGutterProps) => {
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
   // Portal to the main content parent, which is the app (not body, to account for banners)
   const Portal = usePortal({
     container: mainContentRef.current?.parentElement ?? undefined

packages/web/src/components/image-selection/ImageSelectionPopup.jsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useContext } from 'react'
+import { useState, useCallback, useRef } from 'react'
 
 import { RandomImage } from '@audius/common/services'
 import { accountSelectors } from '@audius/common/store'
@@ -11,7 +11,7 @@ import { useWindowSize } from 'react-use'
 
 import { Dropzone } from 'components/upload/Dropzone'
 import InvalidFileType from 'components/upload/InvalidFileType'
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 import zIndex from 'utils/zIndex'
 
 import styles from './ImageSelectionPopup.module.css'
@@ -228,7 +228,7 @@ const ImageSelectionPopup = ({
   onSelect,
   source
 }) => {
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
   const [page, setPage] = useState(messages.uploadYourOwn)
   const windowSize = useWindowSize()
   const { collectibles, collectibleList, solanaCollectibleList } =

packages/web/src/components/menu/Menu.tsx

@@ -1,8 +1,8 @@
-import { forwardRef, useContext } from 'react'
+import { forwardRef } from 'react'
 
 import { PopupMenu, PopupMenuItem, PopupMenuProps } from '@audius/harmony'
 
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 
 import CollectionMenu, {
   OwnProps as CollectionMenuProps
@@ -24,8 +24,7 @@ export type MenuProps = {
 
 const Menu = forwardRef<HTMLDivElement, MenuProps>((props, ref) => {
   const { menu, onClose, zIndex, children, ...other } = props
-
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
 
   const renderMenu = (items: PopupMenuItem[]) => (
     <PopupMenu

packages/web/src/components/track/ViewerActionButtons.tsx

@@ -49,7 +49,7 @@ type EntityDetails = {
 }
 
 const useTrackEntityDetails = (id: ID): EntityDetails => {
-  const { data: track } = useGetTrackById({ id })
+  const { data: track } = useGetTrackById({ id }, { disabled: id === -1 })
 
   const {
     stream_conditions: streamConditions,
@@ -67,7 +67,10 @@ const useTrackEntityDetails = (id: ID): EntityDetails => {
 }
 
 const useCollectionEntityDetails = (id: ID): EntityDetails => {
-  const { data: collection } = useGetPlaylistById({ playlistId: id })
+  const { data: collection } = useGetPlaylistById(
+    { playlistId: id },
+    { disabled: id === -1 }
+  )
 
   const {
     stream_conditions: streamConditions,

packages/web/src/pages/MainContentContext.tsx

@@ -2,28 +2,39 @@ import {
   createContext,
   memo,
   useRef,
-  MutableRefObject,
-  useContext
+  useContext,
+  useState,
+  MutableRefObject
 } from 'react'
 
 export const MAIN_CONTENT_ID = 'mainContent'
 
 export const MainContentContext = createContext({
-  mainContentRef: {} as MutableRefObject<HTMLDivElement | undefined>
+  setRef: (() => {}) as (node: HTMLDivElement) => void,
+  ref: {} as MutableRefObject<HTMLDivElement | undefined>,
+  ready: false
 })
 
 export const useMainContentRef = () => {
-  const { mainContentRef } = useContext(MainContentContext)
-  return mainContentRef
+  const { ref } = useContext(MainContentContext)
+  return ref
 }
 
 export const MainContentContextProvider = memo(
   (props: { children: JSX.Element }) => {
-    const mainContentRef = useRef<HTMLDivElement>()
+    const ref = useRef<HTMLDivElement>()
+    const [ready, setReady] = useState(false)
     return (
       <MainContentContext.Provider
         value={{
-          mainContentRef
+          setRef: (node: HTMLDivElement) => {
+            if (node && !ref.current) {
+              ref.current = node
+              setReady(true)
+            }
+          },
+          ref,
+          ready
         }}
       >
         {props.children}

packages/web/src/pages/audio-transactions-page/AudioTransactionsPage.tsx

@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useState,
-  useContext,
-  useLayoutEffect
-} from 'react'
+import { useCallback, useEffect, useState, useLayoutEffect } from 'react'
 
 import { statusIsNotFinalized } from '@audius/common/models'
 import {
@@ -23,7 +17,7 @@ import { AudioTransactionsTable } from 'components/audio-transactions-table'
 import Header from 'components/header/desktop/Header'
 import Page from 'components/page/Page'
 import EmptyTable from 'components/tracks-table/EmptyTable'
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 import { useSelector } from 'utils/reducer'
 
 import styles from './AudioTransactionsPage.module.css'
@@ -80,7 +74,7 @@ export const AudioTransactionsPage = () => {
     useState<full.GetAudioTransactionHistorySortDirectionEnum>(
       full.GetAudioTransactionHistorySortDirectionEnum.Desc
     )
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
   const dispatch = useDispatch()
   const setVisibility = useSetVisibility()
 

packages/web/src/pages/pay-and-earn-page/components/PurchasesTab.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import { useGetPurchases, useGetPurchasesCount, Id } from '@audius/common/api'
 import { useAllPaginatedQuery } from '@audius/common/audius-query'
@@ -18,7 +18,7 @@ import { useDispatch } from 'react-redux'
 
 import { useErrorPageOnFailedStatus } from 'hooks/useErrorPageOnFailedStatus'
 import { useIsMobile } from 'hooks/useIsMobile'
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 import { audiusSdk } from 'services/audius-sdk'
 import { formatToday } from 'utils/dateUtils'
 import { useSelector } from 'utils/reducer'
@@ -181,7 +181,7 @@ export const PurchasesTab = ({
   onClickRow,
   fetchMore
 }: Omit<ReturnType<typeof usePurchases>, 'downloadCSV'>) => {
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
   const isMobile = useIsMobile()
 
   const columns = isMobile

packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import { useGetSales, useGetSalesCount, Id } from '@audius/common/api'
 import { useAllPaginatedQuery } from '@audius/common/audius-query'
@@ -18,7 +18,7 @@ import { useDispatch } from 'react-redux'
 
 import { useErrorPageOnFailedStatus } from 'hooks/useErrorPageOnFailedStatus'
 import { useIsMobile } from 'hooks/useIsMobile'
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 import { audiusSdk } from 'services/audius-sdk'
 import { formatToday } from 'utils/dateUtils'
 import { useSelector } from 'utils/reducer'
@@ -174,7 +174,7 @@ export const SalesTab = ({
   isLoading
 }: Omit<ReturnType<typeof useSales>, 'downloadCSV'>) => {
   const isMobile = useIsMobile()
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
 
   const columns = isMobile
     ? (['contentName', 'date', 'value'] as SalesTableColumn[])

packages/web/src/pages/pay-and-earn-page/components/WithdrawalsTab.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import {
   Id,
@@ -35,7 +35,7 @@ import { ThunkDispatch } from 'redux-thunk'
 
 import { useErrorPageOnFailedStatus } from 'hooks/useErrorPageOnFailedStatus'
 import { useIsMobile } from 'hooks/useIsMobile'
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 import { make, track } from 'services/analytics'
 import { audiusSdk } from 'services/audius-sdk'
 import { formatToday } from 'utils/dateUtils'
@@ -308,7 +308,7 @@ export const WithdrawalsTab = ({
   isLoading
 }: Omit<ReturnType<typeof useWithdrawals>, 'downloadCSV'>) => {
   const isMobile = useIsMobile()
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
 
   const columns = isMobile
     ? (['date', 'amount'] as WithdrawalsTableColumn[])

packages/web/src/pages/saved-page/components/desktop/SavedPage.tsx

@@ -1,5 +1,3 @@
-import { useContext } from 'react'
-
 import { Kind, Status, ID, UID, Lineup, User } from '@audius/common/models'
 import {
   savedPageSelectors,
@@ -28,7 +26,7 @@ import { dateSorter } from 'components/table'
 import { TracksTable, TracksTableColumn } from 'components/tracks-table'
 import EmptyTable from 'components/tracks-table/EmptyTable'
 import useTabs from 'hooks/useTabs/useTabs'
-import { MainContentContext } from 'pages/MainContentContext'
+import { useMainContentRef } from 'pages/MainContentContext'
 
 import { emptyStateMessages } from '../emptyStateMessages'
 
@@ -120,7 +118,7 @@ const SavedPage = ({
   onClickRepost,
   onSortTracks
 }: SavedPageProps) => {
-  const { mainContentRef } = useContext(MainContentContext)
+  const mainContentRef = useMainContentRef()
   const initFetch = useSelector(getInitialFetchStatus)
 
   const emptyTracksHeader = useSelector((state: CommonState) => {