diff --git a/packages/web/index.html b/packages/web/index.html index b4782c0b9eb..cf825450dee 100644 --- a/packages/web/index.html +++ b/packages/web/index.html @@ -191,7 +191,7 @@
- + diff --git a/packages/web/src/root.tsx b/packages/web/src/Root.tsx similarity index 91% rename from packages/web/src/root.tsx rename to packages/web/src/Root.tsx index 34b80e8f4ad..dfd3d825b4d 100644 --- a/packages/web/src/root.tsx +++ b/packages/web/src/Root.tsx @@ -9,9 +9,8 @@ import { localStorage } from 'services/local-storage' import { useIsMobile, isElectron } from 'utils/clientUtil' import { getPathname, HOME_PAGE, publicSiteRoutes } from 'utils/route' -const Dapp = lazy(() => import('./app')) - -const PublicSite = lazy(() => import('./pages/PublicSite')) +const App = lazy(() => import('./app')) +const PublicSite = lazy(() => import('./public-site')) const isPublicSiteRoute = (location = window.location) => { const pathname = getPathname(location).toLowerCase() @@ -25,7 +24,7 @@ const isPublicSiteSubRoute = (location = window.location) => { const clientIsElectron = isElectron() -const Root = () => { +export const Root = () => { const [renderPublicSite, setRenderPublicSite] = useState(isPublicSiteRoute()) const isMobileClient = useIsMobile() @@ -54,9 +53,7 @@ const Root = () => { return ( }> - + ) } - -export default Root diff --git a/packages/web/src/app.tsx b/packages/web/src/app.tsx deleted file mode 100644 index 14f9eba09af..00000000000 --- a/packages/web/src/app.tsx +++ /dev/null @@ -1,106 +0,0 @@ -// @refresh reset -import { useState, useMemo } from 'react' - -import { - AudiusQueryContext, - accountSelectors, - createAudiusTrpcClient, - trpc -} from '@audius/common' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { ConnectedRouter } from 'connected-react-router' -import { Provider, useSelector } from 'react-redux' -import { Route, Switch } from 'react-router-dom' -import { LastLocationProvider } from 'react-router-last-location' -import { PersistGate } from 'redux-persist/integration/react' - -import { CoinbasePayButtonProvider } from 'components/coinbase-pay-button' -import App from 'pages/App' -import { AppErrorBoundary } from 'pages/AppErrorBoundary' -import AppProviders from 'pages/AppProviders' -import { MainContentContext } from 'pages/MainContentContext' -import DemoTrpcPage from 'pages/demo-trpc/DemoTrpcPage' -import { OAuthLoginPage } from 'pages/oauth-login-page/OAuthLoginPage' -import { SomethingWrong } from 'pages/something-wrong/SomethingWrong' -import { apiClient } from 'services/audius-api-client' -import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance' -import { audiusSdk } from 'services/audius-sdk/audiusSdk' -import { env } from 'services/env' -import { remoteConfigInstance } from 'services/remote-config/remote-config-instance' -import history from 'utils/history' - -import { store, persistor } from './store/configureStore' -import { reportToSentry } from './store/errors/reportToSentry' - -import './index.css' -import './services/webVitals' - -const AudiusTrpcProvider = ({ children }: { children: React.ReactNode }) => { - const currentUserId = useSelector(accountSelectors.getUserId) - const [queryClient] = useState(() => new QueryClient()) - const trpcClient = useMemo( - () => createAudiusTrpcClient(currentUserId), - [currentUserId] - ) - return ( - - {children} - - ) -} - -const AudiusApp = () => { - return ( - - - - - - - - - {({ mainContentRef }) => ( - <> - - - - - - - - - - - - - - - - )} - - - - - - - - - ) -} - -export default AudiusApp diff --git a/packages/web/src/app/App.tsx b/packages/web/src/app/App.tsx new file mode 100644 index 00000000000..2e0782c0d74 --- /dev/null +++ b/packages/web/src/app/App.tsx @@ -0,0 +1,37 @@ +// @refresh reset + +import { Route, Switch } from 'react-router-dom' + +import { CoinbasePayButtonProvider } from 'components/coinbase-pay-button' +import DemoTrpcPage from 'pages/demo-trpc/DemoTrpcPage' +import { OAuthLoginPage } from 'pages/oauth-login-page/OAuthLoginPage' +import { SomethingWrong } from 'pages/something-wrong/SomethingWrong' + +import '../services/webVitals' + +import { AppErrorBoundary } from './AppErrorBoundary' +import { AppProviders } from './AppProviders' +import WebPlayer from './web-player/WebPlayer' + +export const App = () => { + return ( + + + + + + + + + + + + + + + + + + + ) +} diff --git a/packages/web/src/pages/AppContextProvider.tsx b/packages/web/src/app/AppContextProvider.tsx similarity index 100% rename from packages/web/src/pages/AppContextProvider.tsx rename to packages/web/src/app/AppContextProvider.tsx diff --git a/packages/web/src/pages/AppErrorBoundary.tsx b/packages/web/src/app/AppErrorBoundary.tsx similarity index 100% rename from packages/web/src/pages/AppErrorBoundary.tsx rename to packages/web/src/app/AppErrorBoundary.tsx diff --git a/packages/web/src/app/AppProviders.tsx b/packages/web/src/app/AppProviders.tsx new file mode 100644 index 00000000000..3b03f104091 --- /dev/null +++ b/packages/web/src/app/AppProviders.tsx @@ -0,0 +1,59 @@ +import { ReactNode } from 'react' + +import { ConnectedRouter } from 'connected-react-router' +import { Provider } from 'react-redux' +import { LastLocationProvider } from 'react-router-last-location' +import { PersistGate } from 'redux-persist/integration/react' + +import { RouterContextProvider } from 'components/animated-switch/RouterContextProvider' +import { HeaderContextProvider } from 'components/header/mobile/HeaderContextProvider' +import { NavProvider } from 'components/nav/store/context' +import { ScrollProvider } from 'components/scroll-provider/ScrollProvider' +import { ToastContextProvider } from 'components/toast/ToastContext' +import { persistor, store } from 'store/configureStore' +import history from 'utils/history' + +import { MainContentContextProvider } from '../pages/MainContentContext' + +import { AppContextProvider } from './AppContextProvider' +import { AudiusQueryProvider } from './AudiusQueryProvider' +import { ThemeProvider } from './ThemeProvider' +import { TrpcProvider } from './TrpcProvider' + +type AppContextProps = { + children: ReactNode +} + +export const AppProviders = ({ children }: AppContextProps) => { + return ( + + + + + + + + + + + + + + + {children} + + + + + + + + + + + + + + + ) +} diff --git a/packages/web/src/app/AudiusQueryProvider.tsx b/packages/web/src/app/AudiusQueryProvider.tsx new file mode 100644 index 00000000000..93ec861b4dc --- /dev/null +++ b/packages/web/src/app/AudiusQueryProvider.tsx @@ -0,0 +1,35 @@ +import { ReactNode } from 'react' + +import { AudiusQueryContext } from '@audius/common' + +import { apiClient } from 'services/audius-api-client' +import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance' +import { audiusSdk } from 'services/audius-sdk' +import { env } from 'services/env' +import { remoteConfigInstance } from 'services/remote-config/remote-config-instance' +import { store } from 'store/configureStore' +import { reportToSentry } from 'store/errors/reportToSentry' + +type AudiusQueryProviderProps = { + children: ReactNode +} + +const audiusQueryContext = { + apiClient, + audiusBackend: audiusBackendInstance, + audiusSdk, + dispatch: store.dispatch, + reportToSentry, + env, + fetch, + remoteConfigInstance +} + +export const AudiusQueryProvider = (props: AudiusQueryProviderProps) => { + const { children } = props + return ( + + {children} + + ) +} diff --git a/packages/web/src/pages/ThemeProvider.tsx b/packages/web/src/app/ThemeProvider.tsx similarity index 100% rename from packages/web/src/pages/ThemeProvider.tsx rename to packages/web/src/app/ThemeProvider.tsx diff --git a/packages/web/src/app/TrpcProvider.tsx b/packages/web/src/app/TrpcProvider.tsx new file mode 100644 index 00000000000..b427adffff5 --- /dev/null +++ b/packages/web/src/app/TrpcProvider.tsx @@ -0,0 +1,24 @@ +import { ReactNode, useMemo, useState } from 'react' + +import { accountSelectors, createAudiusTrpcClient, trpc } from '@audius/common' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { useSelector } from 'react-redux' + +type TrpcProviderProps = { + children: ReactNode +} + +export const TrpcProvider = (props: TrpcProviderProps) => { + const { children } = props + const currentUserId = useSelector(accountSelectors.getUserId) + const [queryClient] = useState(() => new QueryClient()) + const trpcClient = useMemo( + () => createAudiusTrpcClient(currentUserId), + [currentUserId] + ) + return ( + + {children} + + ) +} diff --git a/packages/web/src/app/index.ts b/packages/web/src/app/index.ts new file mode 100644 index 00000000000..796fc1492d7 --- /dev/null +++ b/packages/web/src/app/index.ts @@ -0,0 +1 @@ +export { App as default } from './App' diff --git a/packages/web/src/pages/App.module.css b/packages/web/src/app/web-player/App.module.css similarity index 100% rename from packages/web/src/pages/App.module.css rename to packages/web/src/app/web-player/App.module.css diff --git a/packages/web/src/app/web-player/WebPlayer.d.ts b/packages/web/src/app/web-player/WebPlayer.d.ts new file mode 100644 index 00000000000..b95407f4f8c --- /dev/null +++ b/packages/web/src/app/web-player/WebPlayer.d.ts @@ -0,0 +1,9 @@ +import { MutableRefObject } from 'react' + +type WebPlayerProps = { + mainContentRef: MutableRefObject +} + +const WebPlayer: () => JSX.Element + +export default WebPlayer diff --git a/packages/web/src/pages/App.jsx b/packages/web/src/app/web-player/WebPlayer.jsx similarity index 93% rename from packages/web/src/pages/App.jsx rename to packages/web/src/app/web-player/WebPlayer.jsx index d240a5cfd49..1260af68c96 100644 --- a/packages/web/src/pages/App.jsx +++ b/packages/web/src/app/web-player/WebPlayer.jsx @@ -27,15 +27,22 @@ import { } from 'common/store/pages/signon/actions' import { getStatus as getSignOnStatus } from 'common/store/pages/signon/selectors' import { Pages as SignOnPages } from 'common/store/pages/signon/types' +import AnimatedSwitch from 'components/animated-switch/AnimatedSwitch' import AppRedirectListener from 'components/app-redirect-popover/AppRedirectListener' import { AppRedirectPopover } from 'components/app-redirect-popover/components/AppRedirectPopover' import { AppBannerWrapper } from 'components/banner/AppBannerWrapper' +import { DownloadAppBanner } from 'components/banner/DownloadAppBanner' +import { UpdateAppBanner } from 'components/banner/UpdateAppBanner' +import { Web3ErrorBanner } from 'components/banner/Web3ErrorBanner' +import { ChatListener } from 'components/chat-listener/ChatListener' import CookieBanner from 'components/cookie-banner/CookieBanner' import { DevModeMananger } from 'components/dev-mode-manager/DevModeManager' import { HeaderContextConsumer } from 'components/header/mobile/HeaderContextProvider' import Konami from 'components/konami/Konami' import ConnectedMusicConfetti from 'components/music-confetti/ConnectedMusicConfetti' import Navigator from 'components/nav/Navigator' +import TopLevelPage from 'components/nav/mobile/TopLevelPage' +import Notice from 'components/notice/Notice' import { NotificationPage } from 'components/notification' import PinnedTrackConfirmation from 'components/pin-track-confirmation/PinTrackConfirmation' import PlayBarProvider from 'components/play-bar/PlayBarProvider' @@ -43,30 +50,52 @@ import { RewardClaimedToast } from 'components/reward-claimed-toast/RewardClaime import DesktopRoute from 'components/routes/DesktopRoute' import MobileRoute from 'components/routes/MobileRoute' import TrendingGenreSelectionPage from 'components/trending-genre-selection/TrendingGenreSelectionPage' +import { + MainContentContext, + MainContentContextProvider, + 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' +import { ChatPageProvider } from 'pages/chat-page/ChatPageProvider' import CheckPage from 'pages/check-page/CheckPage' +import { CollectiblesPlaylistPage } from 'pages/collectibles-playlist-page' import CollectionPage from 'pages/collection-page/CollectionPage' import { DashboardPage } from 'pages/dashboard-page/DashboardPage' +import { DeactivateAccountPage } from 'pages/deactivate-account-page/DeactivateAccountPage' import EmptyPage from 'pages/empty-page/EmptyPage' +import ExploreCollectionsPage from 'pages/explore-page/ExploreCollectionsPage' import ExplorePage from 'pages/explore-page/ExplorePage' import FavoritesPage from 'pages/favorites-page/FavoritesPage' +import { FbSharePage } from 'pages/fb-share-page/FbSharePage' import FeedPage from 'pages/feed-page/FeedPage' +import FollowersPage from 'pages/followers-page/FollowersPage' +import FollowingPage from 'pages/following-page/FollowingPage' import HistoryPage from 'pages/history-page/HistoryPage' import NotFoundPage from 'pages/not-found-page/NotFoundPage' import NotificationUsersPage from 'pages/notification-users-page/NotificationUsersPage' +import { PayAndEarnPage } from 'pages/pay-and-earn-page/PayAndEarnPage' +import { PremiumTracksPage } from 'pages/premium-tracks-page/PremiumTracksPage' import ProfilePage from 'pages/profile-page/ProfilePage' import RemixesPage from 'pages/remixes-page/RemixesPage' import RepostsPage from 'pages/reposts-page/RepostsPage' import RequiresUpdate from 'pages/requires-update/RequiresUpdate' import SavedPage from 'pages/saved-page/SavedPage' import SearchPage from 'pages/search-page/SearchPage' +import SettingsPage from 'pages/settings-page/SettingsPage' +import { SubPage } from 'pages/settings-page/components/mobile/SettingsPage' +import { SignInPage } from 'pages/sign-in-page' +import { SignUpRootPage } from 'pages/sign-up-page' +import SmartCollectionPage from 'pages/smart-collection/SmartCollectionPage' +import SupportingPage from 'pages/supporting-page/SupportingPage' +import TopSupportersPage from 'pages/top-supporters-page/TopSupportersPage' import TrackPage from 'pages/track-page/TrackPage' import TrendingPage from 'pages/trending-page/TrendingPage' import TrendingPlaylistsPage from 'pages/trending-playlists/TrendingPlaylistPage' import TrendingUndergroundPage from 'pages/trending-underground/TrendingUndergroundPage' import Visualizer from 'pages/visualizer/Visualizer' +import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers' import { remoteConfigInstance } from 'services/remote-config/remote-config-instance' import { initializeSentry } from 'services/sentry' import { setVisibility as setAppModalCTAVisibility } from 'store/application/ui/app-cta-modal/slice' @@ -76,7 +105,6 @@ import { decrementScrollCount as decrementScrollCountAction } from 'store/application/ui/scrollLock/actions' import { isMobile, getClient } from 'utils/clientUtil' -import lazyWithPreload from 'utils/lazyWithPreload' import 'utils/redirect' import { FEED_PAGE, @@ -154,34 +182,7 @@ import { } from 'utils/route' import { getTheme as getSystemTheme } from 'utils/theme/theme' -import AnimatedSwitch from '../components/animated-switch/AnimatedSwitch' -// import { DirectMessagesBanner } from '../components/banner/DirectMessagesBanner' -// import { TermsOfServiceUpdateBanner } from '../components/banner/TermsOfServiceUpdateBanner' -import { DownloadAppBanner } from '../components/banner/DownloadAppBanner' -import { UpdateAppBanner } from '../components/banner/UpdateAppBanner' -import { Web3ErrorBanner } from '../components/banner/Web3ErrorBanner' -import { ChatListener } from '../components/chat-listener/ChatListener' -import TopLevelPage from '../components/nav/mobile/TopLevelPage' -import Notice from '../components/notice/Notice' -import { getFeatureEnabled } from '../services/remote-config/featureFlagHelpers' - import styles from './App.module.css' -import { ChatPageProvider } from './chat-page/ChatPageProvider' -import { CollectiblesPlaylistPage } from './collectibles-playlist-page' -import { DeactivateAccountPage } from './deactivate-account-page/DeactivateAccountPage' -import ExploreCollectionsPage from './explore-page/ExploreCollectionsPage' -import { FbSharePage } from './fb-share-page/FbSharePage' -import FollowersPage from './followers-page/FollowersPage' -import FollowingPage from './following-page/FollowingPage' -import { PayAndEarnPage } from './pay-and-earn-page/PayAndEarnPage' -import { PremiumTracksPage } from './premium-tracks-page/PremiumTracksPage' -import SettingsPage from './settings-page/SettingsPage' -import { SubPage } from './settings-page/components/mobile/SettingsPage' -import { SignInPage } from './sign-in-page' -import { SignUpRootPage } from './sign-up-page' -import SmartCollectionPage from './smart-collection/SmartCollectionPage' -import SupportingPage from './supporting-page/SupportingPage' -import TopSupportersPage from './top-supporters-page/TopSupportersPage' const { setTheme } = themeActions const { getTheme } = themeSelectors @@ -192,9 +193,7 @@ const { getHasAccount, getAccountStatus, getUserId, getUserHandle } = const SignOn = lazy(() => import('pages/sign-on/SignOn')) const UploadPage = lazy(() => import('pages/upload-page')) -const Modals = lazyWithPreload(() => import('./modals/Modals'), 0) - -export const MAIN_CONTENT_ID = 'mainContent' +const Modals = lazy(() => import('pages/modals/Modals')) const includeSearch = (search) => { return search.includes('oauth_token') || search.includes('code') @@ -202,7 +201,7 @@ const includeSearch = (search) => { initializeSentry() -class App extends Component { +class WebPlayer extends Component { state = { mainContent: null, @@ -1014,4 +1013,20 @@ const mapDispatchToProps = (dispatch) => ({ } }) -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App)) +const RouterWebPlayer = withRouter( + connect(mapStateToProps, mapDispatchToProps)(WebPlayer) +) + +const MainContentRouterWebPlayer = () => { + return ( + + + {({ mainContentRef }) => ( + + )} + + + ) +} + +export default MainContentRouterWebPlayer diff --git a/packages/web/src/pages/App.test.tsx b/packages/web/src/app/web-player/WebPlayer.test.tsx similarity index 80% rename from packages/web/src/pages/App.test.tsx rename to packages/web/src/app/web-player/WebPlayer.test.tsx index b8833aeeb7d..2a3e82baecf 100644 --- a/packages/web/src/pages/App.test.tsx +++ b/packages/web/src/app/web-player/WebPlayer.test.tsx @@ -1,5 +1,3 @@ -import { createRef, MutableRefObject } from 'react' - import { ConnectedRouter } from 'connected-react-router' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' @@ -8,7 +6,7 @@ import { describe, it, vitest } from 'vitest' import { store } from 'store/configureStore' import history from 'utils/history' -import App from './App' +import WebPlayer from './WebPlayer' vitest.mock('jimp/es', () => null) vitest.mock('./visualizer/Visualizer', () => () => null) @@ -31,14 +29,10 @@ vitest.mock('services/solana-client/SolanaClient', () => ({ describe('smoke test', () => { it('renders without crashing', () => { const rootNode = document.createElement('div') - const mainContentRef = - createRef() as MutableRefObject< - HTMLDivElement | undefined - > ReactDOM.render( - + , rootNode diff --git a/packages/web/src/components/toast/ToastContext.tsx b/packages/web/src/components/toast/ToastContext.tsx index ef8748f2448..f5ddc32e163 100644 --- a/packages/web/src/components/toast/ToastContext.tsx +++ b/packages/web/src/components/toast/ToastContext.tsx @@ -1,4 +1,4 @@ -import { createContext, useCallback } from 'react' +import { createContext, ReactNode, useCallback } from 'react' import { CommonState, toastActions } from '@audius/common' import { useDispatch, useSelector } from 'react-redux' @@ -48,7 +48,7 @@ export const ToastContext = createContext({ toast: () => {} }) -export const ToastContextProvider = (props: { children: JSX.Element }) => { +export const ToastContextProvider = (props: { children: ReactNode }) => { const toasts = useSelector((state: CommonState) => state.ui.toast.toasts) const dispatch = useDispatch() diff --git a/packages/web/src/index.jsx b/packages/web/src/index.tsx similarity index 55% rename from packages/web/src/index.jsx rename to packages/web/src/index.tsx index 3dad04c6271..eac6ef17d57 100644 --- a/packages/web/src/index.jsx +++ b/packages/web/src/index.tsx @@ -3,12 +3,9 @@ import 'setimmediate' import { createRoot } from 'react-dom/client' import './index.css' +import { Root } from './Root' -// Import CSS first so it's resolved in the right order. -// Unsure why importing this component first would change that, but it appears to -// when running in dev mode. -import Root from './root' - +// @ts-ignore window.global ||= window const container = document.getElementById('root') diff --git a/packages/web/src/pages/App.d.ts b/packages/web/src/pages/App.d.ts deleted file mode 100644 index d2165163295..00000000000 --- a/packages/web/src/pages/App.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { MutableRefObject } from 'react' - -type AppProps = { - mainContentRef: MutableRefObject -} - -const App: (props: AppProps) => JSX.Element - -export const MAIN_CONTENT_ID: 'mainContent' - -export default App diff --git a/packages/web/src/pages/AppProviders.tsx b/packages/web/src/pages/AppProviders.tsx deleted file mode 100644 index 64d99eb917a..00000000000 --- a/packages/web/src/pages/AppProviders.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { RouterContextProvider } from 'components/animated-switch/RouterContextProvider' -import { HeaderContextProvider } from 'components/header/mobile/HeaderContextProvider' -import { NavProvider } from 'components/nav/store/context' -import { ScrollProvider } from 'components/scroll-provider/ScrollProvider' -import { ToastContextProvider } from 'components/toast/ToastContext' -import { MainContentContextProvider } from 'pages/MainContentContext' - -import { AppContextProvider } from './AppContextProvider' -import { ThemeProvider } from './ThemeProvider' - -type AppContextProps = { - children: JSX.Element -} - -const AppProviders = ({ children }: AppContextProps) => { - return ( - - - - - - - - {children} - - - - - - - - ) -} - -export default AppProviders diff --git a/packages/web/src/pages/MainContentContext.tsx b/packages/web/src/pages/MainContentContext.tsx index e48c9fa313d..e5737ad4ee5 100644 --- a/packages/web/src/pages/MainContentContext.tsx +++ b/packages/web/src/pages/MainContentContext.tsx @@ -1,5 +1,7 @@ import { createContext, memo, useRef, MutableRefObject } from 'react' +export const MAIN_CONTENT_ID = 'mainContent' + export const MainContentContext = createContext({ mainContentRef: {} as MutableRefObject }) diff --git a/packages/web/src/pages/sign-on/components/mobile/FollowPage.tsx b/packages/web/src/pages/sign-on/components/mobile/FollowPage.tsx index 2e4780c12a1..f69e85b59a4 100644 --- a/packages/web/src/pages/sign-on/components/mobile/FollowPage.tsx +++ b/packages/web/src/pages/sign-on/components/mobile/FollowPage.tsx @@ -11,7 +11,7 @@ import { } from 'common/store/pages/signon/types' import UserCard from 'components/card/UserCard' import SelectablePills from 'components/selectable-pill/SelectablePills' -import { MAIN_CONTENT_ID } from 'pages/App' +import { MAIN_CONTENT_ID } from 'pages/MainContentContext' import styles from './FollowPage.module.css' diff --git a/packages/web/src/pages/PublicSite.tsx b/packages/web/src/public-site/PublicSite.tsx similarity index 90% rename from packages/web/src/pages/PublicSite.tsx rename to packages/web/src/public-site/PublicSite.tsx index 4e372a67459..45f3ab69ed6 100644 --- a/packages/web/src/pages/PublicSite.tsx +++ b/packages/web/src/public-site/PublicSite.tsx @@ -3,8 +3,7 @@ import { lazy, Suspense, useState, useCallback, useEffect } from 'react' import { BrowserRouter as Router, Route } from 'react-router-dom' import LoadingSpinnerFullPage from 'components/loading-spinner-full-page/LoadingSpinnerFullPage' -import NavScreen from 'components/public-site/NavOverlay' -import LandingPage from 'pages/landing-page/LandingPage' +import NavScreen from 'public-site/components/NavOverlay' import { TRENDING_PAGE, SIGN_UP_PAGE, @@ -13,16 +12,18 @@ import { AUDIUS_PRESS_LINK } from 'utils/route' -import { AppContextProvider } from './AppContextProvider' +import { AppContextProvider } from '../app/AppContextProvider' + +import LandingPage from './pages/landing-page/LandingPage' const BASENAME = process.env.VITE_PUBLIC_URL const PrivacyPolicyPage = lazy( - () => import('pages/privacy-policy-page/PrivacyPolicyPage') + () => import('./pages/privacy-policy-page/PrivacyPolicyPage') ) -const DownloadPage = lazy(() => import('pages/download-page/DownloadPage')) +const DownloadPage = lazy(() => import('./pages/download-page/DownloadPage')) const TermsOfUsePage = lazy( - () => import('pages/terms-of-use-page/TermsOfUsePage') + () => import('./pages/terms-of-use-page/TermsOfUsePage') ) const ROOT_ID = 'root' @@ -37,7 +38,8 @@ type PublicSiteProps = { setRenderPublicSite: (shouldRender: boolean) => void } -const PublicSite = ({ isMobile, setRenderPublicSite }: PublicSiteProps) => { +export const PublicSite = (props: PublicSiteProps) => { + const { isMobile, setRenderPublicSite } = props const [isMobileOrNarrow, setIsMobileOrNarrow] = useState(isMobile) const handleMobileMediaQuery = useCallback(() => { if (MOBILE_WIDTH_MEDIA_QUERY.matches) setIsMobileOrNarrow(true) @@ -160,5 +162,3 @@ const PublicSite = ({ isMobile, setRenderPublicSite }: PublicSiteProps) => { ) } - -export default PublicSite diff --git a/packages/web/src/components/public-site/Footer.module.css b/packages/web/src/public-site/components/Footer.module.css similarity index 100% rename from packages/web/src/components/public-site/Footer.module.css rename to packages/web/src/public-site/components/Footer.module.css diff --git a/packages/web/src/components/public-site/Footer.tsx b/packages/web/src/public-site/components/Footer.tsx similarity index 100% rename from packages/web/src/components/public-site/Footer.tsx rename to packages/web/src/public-site/components/Footer.tsx diff --git a/packages/web/src/components/public-site/NavBanner.module.css b/packages/web/src/public-site/components/NavBanner.module.css similarity index 100% rename from packages/web/src/components/public-site/NavBanner.module.css rename to packages/web/src/public-site/components/NavBanner.module.css diff --git a/packages/web/src/components/public-site/NavBanner.tsx b/packages/web/src/public-site/components/NavBanner.tsx similarity index 100% rename from packages/web/src/components/public-site/NavBanner.tsx rename to packages/web/src/public-site/components/NavBanner.tsx diff --git a/packages/web/src/components/public-site/NavOverlay.module.css b/packages/web/src/public-site/components/NavOverlay.module.css similarity index 100% rename from packages/web/src/components/public-site/NavOverlay.module.css rename to packages/web/src/public-site/components/NavOverlay.module.css diff --git a/packages/web/src/components/public-site/NavOverlay.tsx b/packages/web/src/public-site/components/NavOverlay.tsx similarity index 100% rename from packages/web/src/components/public-site/NavOverlay.tsx rename to packages/web/src/public-site/components/NavOverlay.tsx diff --git a/packages/web/src/components/public-site/handleClickRoute.ts b/packages/web/src/public-site/components/handleClickRoute.ts similarity index 100% rename from packages/web/src/components/public-site/handleClickRoute.ts rename to packages/web/src/public-site/components/handleClickRoute.ts diff --git a/packages/web/src/public-site/index.ts b/packages/web/src/public-site/index.ts new file mode 100644 index 00000000000..9fb6f33cd21 --- /dev/null +++ b/packages/web/src/public-site/index.ts @@ -0,0 +1 @@ +export { PublicSite as default } from './PublicSite' diff --git a/packages/web/src/pages/download-page/DownloadPage.module.css b/packages/web/src/public-site/pages/download-page/DownloadPage.module.css similarity index 100% rename from packages/web/src/pages/download-page/DownloadPage.module.css rename to packages/web/src/public-site/pages/download-page/DownloadPage.module.css diff --git a/packages/web/src/pages/download-page/DownloadPage.tsx b/packages/web/src/public-site/pages/download-page/DownloadPage.tsx similarity index 96% rename from packages/web/src/pages/download-page/DownloadPage.tsx rename to packages/web/src/public-site/pages/download-page/DownloadPage.tsx index be2c68f13fa..a32e5c3426c 100644 --- a/packages/web/src/pages/download-page/DownloadPage.tsx +++ b/packages/web/src/public-site/pages/download-page/DownloadPage.tsx @@ -3,16 +3,16 @@ import { useCallback, useEffect, useState } from 'react' import { MobileOS, OS } from '@audius/common' import { IconDownload } from '@audius/stems' import cn from 'classnames' -import * as queryString from 'query-string' +import queryString from 'query-string' import { useLocation } from 'react-router-dom' import { ParallaxProvider } from 'react-scroll-parallax' import IconDownloadDesktop from 'assets/img/publicSite/downloadDesktop.svg' import IconDownloadMobile from 'assets/img/publicSite/downloadMobile.svg' import { CookieBanner } from 'components/cookie-banner/CookieBanner' -import Footer from 'components/public-site/Footer' -import NavBanner from 'components/public-site/NavBanner' -import CTAStartListening from 'pages/landing-page/components/CTAStartListening' +import Footer from 'public-site/components/Footer' +import NavBanner from 'public-site/components/NavBanner' +import CTAStartListening from 'public-site/pages/landing-page/components/CTAStartListening' import DownloadApp from 'services/download-app/DownloadApp' import { getIOSAppLink } from 'utils/appLinks' import { getOS } from 'utils/clientUtil' diff --git a/packages/web/src/pages/download-page/components/DownloadStartingMessage.module.css b/packages/web/src/public-site/pages/download-page/components/DownloadStartingMessage.module.css similarity index 100% rename from packages/web/src/pages/download-page/components/DownloadStartingMessage.module.css rename to packages/web/src/public-site/pages/download-page/components/DownloadStartingMessage.module.css diff --git a/packages/web/src/pages/download-page/components/DownloadStartingMessage.tsx b/packages/web/src/public-site/pages/download-page/components/DownloadStartingMessage.tsx similarity index 100% rename from packages/web/src/pages/download-page/components/DownloadStartingMessage.tsx rename to packages/web/src/public-site/pages/download-page/components/DownloadStartingMessage.tsx diff --git a/packages/web/src/pages/landing-page/LandingPage.module.css b/packages/web/src/public-site/pages/landing-page/LandingPage.module.css similarity index 100% rename from packages/web/src/pages/landing-page/LandingPage.module.css rename to packages/web/src/public-site/pages/landing-page/LandingPage.module.css diff --git a/packages/web/src/pages/landing-page/LandingPage.tsx b/packages/web/src/public-site/pages/landing-page/LandingPage.tsx similarity index 97% rename from packages/web/src/pages/landing-page/LandingPage.tsx rename to packages/web/src/public-site/pages/landing-page/LandingPage.tsx index 6f59ae0c658..f779e97f177 100644 --- a/packages/web/src/pages/landing-page/LandingPage.tsx +++ b/packages/web/src/public-site/pages/landing-page/LandingPage.tsx @@ -5,8 +5,8 @@ import { ParallaxProvider } from 'react-scroll-parallax' import { FanburstBanner } from 'components/banner/FanburstBanner' import { CookieBanner } from 'components/cookie-banner/CookieBanner' -import Footer from 'components/public-site/Footer' -import NavBannerV2 from 'components/public-site/NavBanner' +import Footer from 'public-site/components/Footer' +import NavBannerV2 from 'public-site/components/NavBanner' import { shouldShowCookieBanner, dismissCookieBanner } from 'utils/gdpr' import { getPathname } from 'utils/route' diff --git a/packages/web/src/pages/landing-page/components/ArtistInvestors.module.css b/packages/web/src/public-site/pages/landing-page/components/ArtistInvestors.module.css similarity index 100% rename from packages/web/src/pages/landing-page/components/ArtistInvestors.module.css rename to packages/web/src/public-site/pages/landing-page/components/ArtistInvestors.module.css diff --git a/packages/web/src/pages/landing-page/components/ArtistInvestors.tsx b/packages/web/src/public-site/pages/landing-page/components/ArtistInvestors.tsx similarity index 100% rename from packages/web/src/pages/landing-page/components/ArtistInvestors.tsx rename to packages/web/src/public-site/pages/landing-page/components/ArtistInvestors.tsx diff --git a/packages/web/src/pages/landing-page/components/CTAGetStarted.module.css b/packages/web/src/public-site/pages/landing-page/components/CTAGetStarted.module.css similarity index 100% rename from packages/web/src/pages/landing-page/components/CTAGetStarted.module.css rename to packages/web/src/public-site/pages/landing-page/components/CTAGetStarted.module.css diff --git a/packages/web/src/pages/landing-page/components/CTAGetStarted.tsx b/packages/web/src/public-site/pages/landing-page/components/CTAGetStarted.tsx similarity index 97% rename from packages/web/src/pages/landing-page/components/CTAGetStarted.tsx rename to packages/web/src/public-site/pages/landing-page/components/CTAGetStarted.tsx index f5d39456735..34bd0162169 100644 --- a/packages/web/src/pages/landing-page/components/CTAGetStarted.tsx +++ b/packages/web/src/public-site/pages/landing-page/components/CTAGetStarted.tsx @@ -10,7 +10,7 @@ import capshunBg from 'assets/img/publicSite/CapshunBG.webp' import capshunBg2 from 'assets/img/publicSite/CapshunBG@2x.webp' import capshunBg3 from 'assets/img/publicSite/CapshunBG@3x.webp' import capshunBg4 from 'assets/img/publicSite/CapshunBG@4x.webp' -import { handleClickRoute } from 'components/public-site/handleClickRoute' +import { handleClickRoute } from 'public-site/components/handleClickRoute' import { AUDIUS_LISTENING_LINK } from 'utils/route' import { useMatchesBreakpoint } from 'utils/useMatchesBreakpoint' @@ -113,7 +113,7 @@ const CTAGetStarted = (props: CTAGetStartedProps) => { {titleSpring.map( ({ x, wordYPosition, ...rest }: any, index: number) => ( { components: '/src/components', hooks: '/src/hooks', pages: '/src/pages', + 'public-site': '/src/public-site', services: '/src/services', store: '/src/store', workers: '/src/workers',