small updates

packages/common/src/hooks/useGatedContent.ts

@@ -19,12 +19,8 @@ import { getAccountUser } from '~/store/account/selectors'
 import { cacheTracksSelectors, cacheUsersSelectors } from '~/store/cache'
 import { gatedContentSelectors } from '~/store/gated-content'
 import { CommonState } from '~/store/reducers'
-import {
-  Nullable,
-  isContentCollection,
-  isContentTrack,
-  removeNullable
-} from '~/utils'
+import { isContentCollection, isContentTrack } from '~/utils/contentTypeUtils'
+import { Nullable, removeNullable } from '~/utils/typeUtils'
 
 const { getTrack } = cacheTracksSelectors
 const { getUser, getUsers } = cacheUsersSelectors

packages/libs/rollup.config.ts

@@ -109,29 +109,6 @@ export const outputConfigs = {
     external
   },
 
-  /**
-   * SDK Node Package (ES Module)
-   */
-  sdkConfigNodeEs: {
-    input: 'src/sdk/index.ts',
-    output: [
-      {
-        dir: 'dist',
-        format: 'es',
-        sourcemap: true,
-        entryFileNames: '[name].node.js'
-      }
-    ],
-    plugins: [
-      resolve({ extensions, preferBuiltins: true }),
-      commonjs({ extensions }),
-      babel({ babelHelpers: 'bundled', extensions }),
-      json(),
-      pluginTypescript
-    ],
-    external
-  },
-
   /**
    * SDK React Native Package
    * Used by the Audius React Native client

packages/libs/src/sdk/services/EntityManager/index.ts

@@ -1,2 +1,3 @@
 export { EntityManager } from './EntityManager'
-export { EntityManagerService, Action as EntityManagerAction } from './types'
+export type { EntityManagerService } from './types'
+export { Action as EntityManagerAction } from './types'

packages/libs/src/sdk/services/Storage/index.ts

@@ -1,2 +1,2 @@
 export { Storage } from './Storage'
-export { StorageService } from './types'
+export type { StorageService } from './types'

packages/web/src/app/ServerReduxProvider.tsx

@@ -43,6 +43,7 @@ export const ServerReduxProvider = ({
 
     // Mount store to window for easy access
     if (typeof window !== 'undefined') {
+      // @ts-ignore
       window.store = store
     }
 

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

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { PropsWithChildren, ReactNode, useRef } from 'react'
 
 import '@audius/harmony/dist/harmony.css'
 import cn from 'classnames'
@@ -22,13 +22,11 @@ import { getSystemAppearance, getTheme } from 'utils/theme/theme'
 
 import styles from './WebPlayer.module.css'
 
-type ServerWebPlayerProps = {
+type ServerWebPlayerProps = PropsWithChildren<{
   ssrContextValue: SsrContextType
-  // TODO: Add children prop
-  children: any
-}
+}>
 
-const InnerProviderContainer = ({ children }: { children: any }) => {
+const InnerProviderContainer = ({ children }: { children: ReactNode }) => {
   const { history } = useHistoryContext()
 
   const initialStoreState = {

packages/web/src/components/nav-banner/NavBanner.tsx

@@ -4,15 +4,10 @@ import { Flex, Button, PopupMenu, IconSort as SortIcon } from '@audius/harmony'
 import cn from 'classnames'
 
 import { ClientOnly } from 'components/client-only/ClientOnly'
+import { removeNullable } from 'utils/typeUtils'
 
 import styles from './NavBanner.module.css'
 
-function removeNullable<T>(
-  value: T
-): value is Exclude<T, false | null | undefined | '' | 0> {
-  return Boolean(value)
-}
-
 const messages = {
   sortByRecent: 'Sort by Recent',
   sortByPopular: 'Sort by Popular',

packages/web/src/components/page/ServerPage.tsx

@@ -12,6 +12,7 @@ import { Nullable } from '@audius/common/utils'
 import cn from 'classnames'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { animated, useSpring } from 'react-spring'
+// @ts-ignore
 import calcScrollbarWidth from 'scrollbar-width'
 
 import { MetaTags, MetaTagsProps } from 'components/meta-tags/MetaTags'

packages/web/src/components/repost-favorites-stats/RepostFavoritesStats.tsx

@@ -2,46 +2,10 @@ import { useCallback, MouseEvent } from 'react'
 
 import { IconHeart as IconFavorite, IconRepost } from '@audius/harmony'
 import cn from 'classnames'
-import numeral from 'numeral'
 
-import styles from './RepostFavoritesStats.module.css'
-
-const pluralize = (
-  message: string,
-  count: number | null,
-  suffix = 's',
-  pluralizeAnyway = false
-) => `${message}${(count ?? 0) > 1 || pluralizeAnyway ? suffix : ''}`
+import { formatCount, pluralize } from 'utils/stringUtils'
 
-/**
- * The format for counting numbers should be 4 characters if possible (3 numbers and 1 Letter) without trailing 0
- * ie.
- * 375 => 375
- * 4,210 => 4.21K
- * 56,010 => 56K
- * 443,123 => 443K
- * 4,001,000 => 4M Followers
- */
-export const formatCount = (count: number) => {
-  if (count >= 1000) {
-    const countStr = count.toString()
-    if (countStr.length % 3 === 0) {
-      return numeral(count).format('0a').toUpperCase()
-    } else if (countStr.length % 3 === 1 && countStr[2] !== '0') {
-      return numeral(count).format('0.00a').toUpperCase()
-    } else if (countStr.length % 3 === 1 && countStr[1] !== '0') {
-      return numeral(count).format('0.0a').toUpperCase()
-    } else if (countStr.length % 3 === 2 && countStr[2] !== '0') {
-      return numeral(count).format('0.0a').toUpperCase()
-    } else {
-      return numeral(count).format('0a').toUpperCase()
-    }
-  } else if (!count) {
-    return '0'
-  } else {
-    return `${count}`
-  }
-}
+import styles from './RepostFavoritesStats.module.css'
 
 export enum Size {
   // With text

packages/web/src/components/scheduled-release-label/ScheduledReleaseLabel.tsx

@@ -2,16 +2,12 @@ import { Text, IconCalendarMonth } from '@audius/harmony'
 import cn from 'classnames'
 import moment from 'moment'
 
-import dayjs from 'utils/dayjs'
+import { getLocalTimezone } from 'utils/dateUtils'
 
 import gatedContentLabelStyles from '../track/GatedContentLabel.module.css'
 
 import styles from './ScheduledReleaseLabel.module.css'
 
-const getLocalTimezone = () => {
-  return dayjs().format('z')
-}
-
 export type ScheduledReleaseLabelProps = {
   released?: string | null
   isUnlisted?: boolean

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

@@ -17,28 +17,14 @@ import Skeleton from 'components/skeleton/Skeleton'
 import { Tile } from 'components/tile'
 import { UserGeneratedText } from 'components/user-generated-text'
 import { moodMap } from 'utils/Moods'
-import dayjs from 'utils/dayjs'
+import { formatDate, formatSeconds } from 'utils/dateUtils'
 
 import Badge from './Badge'
 import { CardTitle } from './CardTitle'
 import styles from './GiantTrackTile.module.css'
 import InfoLabel from './InfoLabel'
 import { ServerGiantArtwork } from './ServerGiantArtwork'
 
-const formatDate = (date: string, format?: string): string => {
-  const dayjsFormat = format || 'M/D/YY'
-  return dayjs(date).format(dayjsFormat)
-}
-
-const formatSeconds = (seconds: number): string => {
-  const time = dayjs.duration(seconds, 'seconds')
-  if (seconds >= 60 * 60) {
-    return time.format('H:mm:ss')
-  } else {
-    return time.format('m:ss')
-  }
-}
-
 const messages = {
   makePublic: 'MAKE PUBLIC',
   releaseNow: 'RELEASE NOW',
@@ -245,6 +231,7 @@ export const ServerGiantTrackTile = ({
         <ServerGiantArtwork
           overrideArtwork={overrideArtwork}
           coSign={coSign}
+          // @ts-ignore
           cid={track?.cover_art_sizes ?? null}
         />
         <div className={styles.infoSection}>

packages/web/src/components/user-generated-text/UserGeneratedText.tsx

@@ -13,22 +13,8 @@ import { IntermediateRepresentation, Opts } from 'linkifyjs'
 
 import { ServerExternalTextLink } from 'components/link/ServerExternalTextLink'
 import { TextLink } from 'components/link/TextLink'
-
-/**
- * Reduces multiple sequential newlines (> 3) into max `\n\n` and
- * trims both leading and trailing newlines
- */
-const squashNewLines = (str: string | null) => {
-  return str ? str.replace(/\n\s*\n\s*\n/g, '\n\n').trim() : str
-}
-
-const audiusUrlRegex =
-  // eslint-disable-next-line no-useless-escape
-  /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?(staging\.)?(audius\.co)(\/.+)?/gim
-
-const isAudiusUrl = (url: string) => new RegExp(audiusUrlRegex).test(url)
-const getPathFromAudiusUrl = (url: string) =>
-  new RegExp(audiusUrlRegex).exec(url)?.[3] ?? null
+import { squashNewLines } from 'utils/stringUtils'
+import { getPathFromAudiusUrl, isAudiusUrl } from 'utils/urlUtils'
 
 type LinkifyTextProps = TextProps<any> & {
   innerRef?: Ref<any>

packages/web/src/pages/server-track-page/ServerTrackPage.tsx

@@ -11,5 +11,6 @@ export const ServerTrackPage = ({
   ...other
 }: ServerTrackPageProps) => {
   // return isMobile ? <MobilePage {...other} /> : <DesktopPage {...other} />
+  // @ts-ignore
   return <DesktopPage {...other} />
 }

packages/web/src/pages/server-track-page/desktop/ServerTrackPage.tsx

@@ -10,7 +10,7 @@ import { getTrackDefaults, emptyStringGuard } from 'pages/track-page/utils'
 import { AppState } from 'store/types'
 import { decodeHashId } from 'utils/hashIds'
 
-import styles from './ServerTrackPage.module.css'
+import styles from '../../track-page/components/desktop/TrackPage.module.css'
 
 export type OwnProps = {
   title: string
@@ -38,10 +38,12 @@ export const ServerTrackPage = ({
   userId,
   badge
 }: OwnProps) => {
+  // @ts-ignore
   const trackId = decodeHashId(heroTrack.id)
   const track = useSelector(
     (state: AppState) => state.tracks.entries[trackId as ID].metadata
   )
+  // @ts-ignore
   const trackOwner = track?.user
 
   const isOwner = track?.owner_id === userId
@@ -62,6 +64,7 @@ export const ServerTrackPage = ({
       userId={trackOwner?.user_id ?? 0}
       artistHandle={emptyStringGuard(trackOwner?.handle)}
       coverArtSizes={defaults.coverArtSizes}
+      // @ts-ignore
       overrideArtwork={heroTrack.artwork['1000x1000']}
       tags={defaults.tags}
       description={defaults.description}

packages/web/src/ssr/collection/+onBeforeRender.ts

@@ -0,0 +1,46 @@
+import { Maybe } from '@audius/common/utils'
+import type { full as FullSdk } from '@audius/sdk'
+import type { PageContextServer } from 'vike/types'
+
+import { audiusSdk } from '../sdk'
+
+export type CollectionPageProps = {
+  collection: Maybe<FullSdk.PlaylistFull>
+}
+
+export async function onBeforeRender(pageContext: PageContextServer) {
+  const { handle, slug } = pageContext.routeParams
+
+  try {
+    // NOTE: This is the playlist api, but works for both albums and playlists
+    const { data: collections } =
+      await audiusSdk.full.playlists.getPlaylistByHandleAndSlug({
+        handle,
+        slug
+      })
+    const collection = collections?.[0]
+
+    return {
+      pageContext: {
+        pageProps: {
+          collection
+        }
+      }
+    }
+  } catch (e) {
+    console.error(
+      'Error fetching collection for collection page SSR',
+      'handle',
+      handle,
+      'slug',
+      slug,
+      'error',
+      e
+    )
+    return {
+      pageContext: {
+        pageProps: {}
+      }
+    }
+  }
+}