Add comprehensive routing for coins/fan clubs feature pages

packages/common/src/api/tan-query/comments/useDeleteTextPost.ts

@@ -39,10 +39,7 @@ export const useDeleteTextPost = () => {
           newState.pages = newState.pages.map((page: FanClubFeedItem[]) =>
             page.filter(
               (item) =>
-                !(
-                  item.itemType === 'text_post' &&
-                  item.commentId === commentId
-                )
+                !(item.itemType === 'text_post' && item.commentId === commentId)
             )
           )
         }
@@ -69,9 +66,7 @@ export const useDeleteTextPost = () => {
         name: 'Comments',
         feature: Feature.Comments
       })
-      dispatch(
-        toast({ content: 'There was an error deleting the post.' })
-      )
+      dispatch(toast({ content: 'There was an error deleting the post.' }))
       // Reset to server state
       queryClient.invalidateQueries({
         queryKey: getFanClubFeedQueryKey({

packages/common/src/utils/route.ts

@@ -77,10 +77,17 @@ export const COIN_DETAIL_BUY_PAGE = '/coins/:ticker/buy'
 export const COIN_REDEEM_PAGE = '/coins/:ticker/redeem/:code?'
 export const COIN_EXCLUSIVE_TRACKS_PAGE = '/coins/:ticker/exclusive-tracks'
 export const EDIT_COIN_DETAILS_PAGE = '/coins/:ticker/edit'
+/** Primary club detail route */
+export const CLUB_DETAIL_PAGE = '/clubs/:ticker'
+export const CLUB_DETAIL_BUY_PAGE = '/clubs/:ticker/buy'
+export const CLUB_REDEEM_PAGE = '/clubs/:ticker/redeem/:code?'
+export const CLUB_EXCLUSIVE_TRACKS_PAGE = '/clubs/:ticker/exclusive-tracks'
+export const EDIT_CLUB_DETAILS_PAGE = '/clubs/:ticker/edit'
 export const WALLET_PAGE = '/wallet'
 export const WALLET_GUIDE_PAGE = '/wallet/guide'
 export const CASH_PAGE = '/cash'
 export const COINS_CREATE_PAGE = '/coins/create'
+export const CLUBS_CREATE_PAGE = '/clubs/create'
 /** Legacy explore URL; app redirects to CLUBS_EXPLORE_PAGE. */
 export const COINS_EXPLORE_PAGE = '/coins'
 /** Fan club discovery (primary); same UI as legacy /coins. */
@@ -160,8 +167,11 @@ export const FOLLOWING_USERS_ROUTE = '/following'
 export const FOLLOWERS_USERS_ROUTE = '/followers'
 export const LEADERBOARD_USERS_ROUTE = '/leaderboard'
 export const COIN_DETAIL_MOBILE_WEB_ROUTE = '/coins/:ticker/details'
+export const CLUB_DETAIL_MOBILE_WEB_ROUTE = '/clubs/:ticker/details'
 export const COIN_EXCLUSIVE_TRACKS_MOBILE_ROUTE =
   '/coins/:ticker/exclusive-tracks/mobile'
+export const CLUB_EXCLUSIVE_TRACKS_MOBILE_ROUTE =
+  '/clubs/:ticker/exclusive-tracks/mobile'
 export const ACCOUNT_SETTINGS_PAGE = '/settings/account'
 export const NOTIFICATION_SETTINGS_PAGE = '/settings/notifications'
 export const ABOUT_SETTINGS_PAGE = '/settings/about'
@@ -243,6 +253,7 @@ export const authenticatedRoutes = [
   PAYMENTS_PAGE,
   WITHDRAWALS_PAGE,
   COINS_CREATE_PAGE,
+  CLUBS_CREATE_PAGE,
   WALLET_GUIDE_PAGE,
   CASH_PAGE
 ]
@@ -297,12 +308,15 @@ export const orderedRoutes = [
   AUDIO_PAGE,
   WALLET_AUDIO_PAGE,
   COIN_DETAIL_PAGE,
+  CLUB_DETAIL_PAGE,
   EDIT_COIN_DETAILS_PAGE,
+  EDIT_CLUB_DETAILS_PAGE,
   WALLET_PAGE,
   CASH_PAGE,
   COINS_EXPLORE_PAGE,
   CLUBS_EXPLORE_PAGE,
   COINS_CREATE_PAGE,
+  CLUBS_CREATE_PAGE,
   WALLET_GUIDE_PAGE,
   REWARDS_PAGE,
   SETTINGS_PAGE,
@@ -354,6 +368,7 @@ export const staticRoutes = new Set([
   COINS_EXPLORE_PAGE,
   CLUBS_EXPLORE_PAGE,
   COINS_CREATE_PAGE,
+  CLUBS_CREATE_PAGE,
   WALLET_AUDIO_PAGE,
   CASH_PAGE,
   REWARDS_PAGE,
@@ -466,5 +481,11 @@ export const searchPage = (searchOptions: SearchOptions) => {
 export const coinPage = (ticker: string) =>
   `/coins/${formatTickerForUrl(ticker)}`
 
+export const clubPage = (ticker: string) =>
+  `/clubs/${formatTickerForUrl(ticker)}`
+
 export const coinRedeemPage = (ticker: string, code?: string) =>
   `/coins/${formatTickerForUrl(ticker)}/redeem${code ? `/${code}` : ''}`
+
+export const clubRedeemPage = (ticker: string, code?: string) =>
+  `/clubs/${formatTickerForUrl(ticker)}/redeem${code ? `/${code}` : ''}`

packages/mobile/src/screens/coin-details-screen/components/FanClubTab.tsx

@@ -377,9 +377,7 @@ export const FanClubTab = ({ mint, onSwitchToCoinTab }: FanClubTabProps) => {
         <CoinLeaderboardCard mint={mint} />
       ) : null}
 
-      {membershipKnown ? (
-        <FanClubFeed mint={mint} />
-      ) : null}
+      {membershipKnown ? <FanClubFeed mint={mint} /> : null}
     </Flex>
   )
 }

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

@@ -18,6 +18,14 @@ import { Client, Status } from '@audius/common/models'
 import { StringKeys } from '@audius/common/services'
 import {
   COIN_DETAIL_BUY_PAGE,
+  CLUB_DETAIL_PAGE,
+  CLUB_DETAIL_BUY_PAGE,
+  CLUB_REDEEM_PAGE,
+  CLUB_EXCLUSIVE_TRACKS_PAGE,
+  CLUB_EXCLUSIVE_TRACKS_MOBILE_ROUTE,
+  CLUB_DETAIL_MOBILE_WEB_ROUTE,
+  EDIT_CLUB_DETAILS_PAGE,
+  CLUBS_CREATE_PAGE,
   guestRoutes
 } from '@audius/common/src/utils/route'
 import { route } from '@audius/common/utils'
@@ -382,10 +390,13 @@ const FanClubDetailPageRoute = ({
   const { ticker } = params
 
   if (ticker && ticker !== ticker.toUpperCase()) {
+    // Preserve the current path prefix (/clubs or /coins)
+    const isClubsRoute = location.pathname.startsWith('/clubs')
+    const detailPage = isClubsRoute ? CLUB_DETAIL_PAGE : COIN_DETAIL_PAGE
     return (
       <Navigate
         to={{
-          pathname: COIN_DETAIL_PAGE.replace(':ticker', ticker.toUpperCase()),
+          pathname: detailPage.replace(':ticker', ticker.toUpperCase()),
           search: location.search,
           hash: location.hash
         }}
@@ -398,8 +409,11 @@ const FanClubDetailPageRoute = ({
 
 const CoinExclusiveTracksLegacyRedirect = () => {
   const params = useParams<{ ticker?: string }>()
+  const location = useLocation()
   const ticker = (params.ticker ?? '').toUpperCase()
-  return <Navigate to={generatePath(COIN_DETAIL_PAGE, { ticker })} replace />
+  const isClubsRoute = location.pathname.startsWith('/clubs')
+  const detailPage = isClubsRoute ? CLUB_DETAIL_PAGE : COIN_DETAIL_PAGE
+  return <Navigate to={generatePath(detailPage, { ticker })} replace />
 }
 
 type HomePageRedirectProps = {
@@ -924,32 +938,62 @@ const WebPlayer = (props: WebPlayerProps) => {
                   path='/coins/sort'
                   element={<MobileArtistCoinsSortPage />}
                 />
+                <Route
+                  path='/clubs/sort'
+                  element={<MobileArtistCoinsSortPage />}
+                />
                 <Route path={COINS_CREATE_PAGE} element={<LaunchpadPage />} />
+                <Route path={CLUBS_CREATE_PAGE} element={<LaunchpadPage />} />
                 <Route
                   path={COIN_DETAIL_PAGE}
                   element={
                     <FanClubDetailPageRoute mainContentRef={mainContentRef} />
                   }
                 />
+                <Route
+                  path={CLUB_DETAIL_PAGE}
+                  element={
+                    <FanClubDetailPageRoute mainContentRef={mainContentRef} />
+                  }
+                />
                 <Route
                   path={COIN_DETAIL_BUY_PAGE}
                   element={
                     <FanClubDetailPageRoute mainContentRef={mainContentRef} />
                   }
                 />
+                <Route
+                  path={CLUB_DETAIL_BUY_PAGE}
+                  element={
+                    <FanClubDetailPageRoute mainContentRef={mainContentRef} />
+                  }
+                />
                 <Route path={COIN_REDEEM_PAGE} element={<CoinRedeemPage />} />
+                <Route path={CLUB_REDEEM_PAGE} element={<CoinRedeemPage />} />
                 <Route
                   path={COIN_EXCLUSIVE_TRACKS_PAGE}
                   element={<CoinExclusiveTracksLegacyRedirect />}
                 />
+                <Route
+                  path={CLUB_EXCLUSIVE_TRACKS_PAGE}
+                  element={<CoinExclusiveTracksLegacyRedirect />}
+                />
                 <Route
                   path={COIN_EXCLUSIVE_TRACKS_MOBILE_ROUTE}
                   element={<CoinExclusiveTracksLegacyRedirect />}
                 />
+                <Route
+                  path={CLUB_EXCLUSIVE_TRACKS_MOBILE_ROUTE}
+                  element={<CoinExclusiveTracksLegacyRedirect />}
+                />
                 <Route
                   path={EDIT_COIN_DETAILS_PAGE}
                   element={<EditCoinDetailsPage />}
                 />
+                <Route
+                  path={EDIT_CLUB_DETAILS_PAGE}
+                  element={<EditCoinDetailsPage />}
+                />
                 <Route path={PAYMENTS_PAGE} element={<WalletPage />} />
                 <Route path={WALLET_PAGE} element={<WalletPage />} />
                 <Route path={CASH_PAGE} element={<CashPage />} />
@@ -1166,6 +1210,10 @@ const WebPlayer = (props: WebPlayerProps) => {
                       path={COIN_DETAIL_MOBILE_WEB_ROUTE}
                       element={<ArtistFanClubDetailsPage />}
                     />
+                    <Route
+                      path={CLUB_DETAIL_MOBILE_WEB_ROUTE}
+                      element={<ArtistFanClubDetailsPage />}
+                    />
                     <Route path={EMPTY_PAGE} element={<EmptyPage />} />
                   </>
                 ) : (
@@ -1194,6 +1242,10 @@ const WebPlayer = (props: WebPlayerProps) => {
                       path={COIN_DETAIL_MOBILE_WEB_ROUTE}
                       element={<Navigate to={TRENDING_PAGE} replace />}
                     />
+                    <Route
+                      path={CLUB_DETAIL_MOBILE_WEB_ROUTE}
+                      element={<Navigate to={TRENDING_PAGE} replace />}
+                    />
                     <Route
                       path={EMPTY_PAGE}
                       element={<Navigate to={TRENDING_PAGE} replace />}
@@ -1328,31 +1380,57 @@ const WebPlayer = (props: WebPlayerProps) => {
                   element={<ArtistCoinsExplorePage />}
                 />
                 <Route path={COINS_CREATE_PAGE} element={<LaunchpadPage />} />
+                <Route path={CLUBS_CREATE_PAGE} element={<LaunchpadPage />} />
                 <Route
                   path={COIN_DETAIL_PAGE}
                   element={
                     <FanClubDetailPageRoute mainContentRef={mainContentRef} />
                   }
                 />
+                <Route
+                  path={CLUB_DETAIL_PAGE}
+                  element={
+                    <FanClubDetailPageRoute mainContentRef={mainContentRef} />
+                  }
+                />
                 <Route
                   path={COIN_DETAIL_BUY_PAGE}
                   element={
                     <FanClubDetailPageRoute mainContentRef={mainContentRef} />
                   }
                 />
+                <Route
+                  path={CLUB_DETAIL_BUY_PAGE}
+                  element={
+                    <FanClubDetailPageRoute mainContentRef={mainContentRef} />
+                  }
+                />
                 <Route path={COIN_REDEEM_PAGE} element={<CoinRedeemPage />} />
+                <Route path={CLUB_REDEEM_PAGE} element={<CoinRedeemPage />} />
                 <Route
                   path={COIN_EXCLUSIVE_TRACKS_PAGE}
                   element={<CoinExclusiveTracksLegacyRedirect />}
                 />
+                <Route
+                  path={CLUB_EXCLUSIVE_TRACKS_PAGE}
+                  element={<CoinExclusiveTracksLegacyRedirect />}
+                />
                 <Route
                   path={COIN_EXCLUSIVE_TRACKS_MOBILE_ROUTE}
                   element={<CoinExclusiveTracksLegacyRedirect />}
                 />
+                <Route
+                  path={CLUB_EXCLUSIVE_TRACKS_MOBILE_ROUTE}
+                  element={<CoinExclusiveTracksLegacyRedirect />}
+                />
                 <Route
                   path={EDIT_COIN_DETAILS_PAGE}
                   element={<EditCoinDetailsPage />}
                 />
+                <Route
+                  path={EDIT_CLUB_DETAILS_PAGE}
+                  element={<EditCoinDetailsPage />}
+                />
                 <Route path={PAYMENTS_PAGE} element={<WalletPage />} />
                 <Route path={WALLET_PAGE} element={<WalletPage />} />
                 <Route path={CASH_PAGE} element={<CashPage />} />
@@ -1499,6 +1577,10 @@ const WebPlayer = (props: WebPlayerProps) => {
                   path={COIN_DETAIL_MOBILE_WEB_ROUTE}
                   element={<Navigate to={TRENDING_PAGE} replace />}
                 />
+                <Route
+                  path={CLUB_DETAIL_MOBILE_WEB_ROUTE}
+                  element={<Navigate to={TRENDING_PAGE} replace />}
+                />
                 <Route
                   path={EMPTY_PAGE}
                   element={<Navigate to={TRENDING_PAGE} replace />}

packages/web/src/pages/fan-club-detail-page/FanClubDetailPage.tsx

@@ -4,10 +4,10 @@ import {
   useUser
 } from '@audius/common/api'
 import { coinDetailsMessages } from '@audius/common/messages'
-import { coinPage } from '@audius/common/src/utils/route'
+import { coinPage, clubPage } from '@audius/common/src/utils/route'
 import { formatTickerForUrl, route } from '@audius/common/utils'
 import { Flex, LoadingSpinner } from '@audius/harmony'
-import { Navigate, useParams } from 'react-router'
+import { Navigate, useLocation, useParams } from 'react-router'
 
 import { Header } from 'components/header/desktop/Header'
 import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
@@ -87,9 +87,11 @@ const MobileFanClubDetailPageContent = ({
 
 export const FanClubDetailPage = () => {
   const { ticker } = useParams<{ ticker?: string }>()
+  const location = useLocation()
   const isMobile = useIsMobile()
   const { data: currentUserId } = useCurrentUserId()
   const formattedTicker = formatTickerForUrl(ticker ?? '')
+  const isClubsRoute = location.pathname.startsWith('/clubs')
 
   const {
     data: coin,
@@ -107,7 +109,8 @@ export const FanClubDetailPage = () => {
   }
 
   if (ticker !== formattedTicker) {
-    return <Navigate to={coinPage(formattedTicker)} replace />
+    const detailPage = isClubsRoute ? clubPage : coinPage
+    return <Navigate to={detailPage(formattedTicker)} replace />
   }
 
   if (isError || (isSuccess && !coin)) {

packages/web/src/ssr/coins/+route.ts

@@ -1,3 +1,25 @@
 import { makePageRoute } from 'ssr/util'
 
-export default makePageRoute(['/clubs', '/coins'], 'Fan Clubs Page')
+export default makePageRoute(
+  [
+    '/clubs',
+    '/coins',
+    '/coins/create',
+    '/coins/sort',
+    '/coins/@ticker',
+    '/coins/@ticker/buy',
+    '/coins/@ticker/redeem',
+    '/coins/@ticker/redeem/@code',
+    '/coins/@ticker/exclusive-tracks',
+    '/coins/@ticker/edit',
+    '/clubs/create',
+    '/clubs/sort',
+    '/clubs/@ticker',
+    '/clubs/@ticker/buy',
+    '/clubs/@ticker/redeem',
+    '/clubs/@ticker/redeem/@code',
+    '/clubs/@ticker/exclusive-tracks',
+    '/clubs/@ticker/edit'
+  ],
+  'Fan Clubs Page'
+)