From 0e0eb4816db505d876caaf74486b743daa58ad88 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Wed, 12 Oct 2022 17:29:40 -0700 Subject: [PATCH 1/2] [C-1291] Add base architecture for navbar overhaul --- .../services/remote-config/feature-flags.ts | 23 +++- .../services/remote-config/remote-config.ts | 19 +++- .../mobile/src/assets/images/iconMenu.svg | 4 + .../NotificationsButton.tsx | 37 +++++++ .../bottom-tab-bar-buttons/index.ts | 5 +- .../now-playing-drawer/NowPlayingDrawer.tsx | 4 +- .../src/components/user/ProfilePicture.tsx | 6 +- .../screens/account-screen/AccountDrawer.tsx | 28 +++++ .../src/screens/account-screen/index.tsx | 1 + .../AppDrawerContext.tsx} | 29 ++--- .../app-drawer-screen/AppDrawerScreen.tsx | 82 ++++++++++++++ .../src/screens/app-drawer-screen/index.ts | 3 + .../useAppDrawerNavigation.ts} | 6 +- .../app-screen/AccountPictureHeader.tsx | 30 +++++ .../src/screens/app-screen/AppScreen.tsx | 14 ++- .../src/screens/app-screen/AppTabScreen.tsx | 4 +- .../app-screen/NotificationsTabScreen.tsx | 13 +++ .../app-screen/useAppScreenOptions.tsx | 19 +++- .../screens/explore-screen/ExploreScreen.tsx | 9 +- .../favorites-screen/FavoritesScreen.tsx | 6 +- .../Notification/EntityLink.tsx | 4 +- .../Notification/ProfilePicture.tsx | 4 +- .../Notification/UserNameLink.tsx | 4 +- .../notifications-screen/NotificationList.tsx | 5 +- .../AddTrackToPlaylistNotification.tsx | 4 +- .../Notifications/MilestoneNotification.tsx | 4 +- .../Notifications/RemixCosignNotification.tsx | 4 +- .../Notifications/RemixCreateNotification.tsx | 4 +- .../TrendingTrackNotification.tsx | 4 +- .../UserSubscriptionNotification.tsx | 4 +- .../Notifications/useSocialActionHandler.ts | 4 +- .../NotificationsDrawer.tsx | 42 +++++++ .../NotificationsDrawerScreen.tsx | 50 +++++++++ .../NotificationsScreen.tsx | 46 +++----- .../Reaction/ReactionList.tsx | 7 +- .../screens/notifications-screen/TopBar.tsx | 4 +- .../src/screens/notifications-screen/index.ts | 3 +- .../src/screens/root-screen/HomeScreen.tsx | 103 ------------------ .../src/screens/root-screen/RootScreen.tsx | 5 +- .../remote-config/remote-config-instance.ts | 4 +- .../remote-config/remote-config-instance.ts | 5 +- 41 files changed, 442 insertions(+), 214 deletions(-) create mode 100644 packages/mobile/src/assets/images/iconMenu.svg create mode 100644 packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/NotificationsButton.tsx create mode 100644 packages/mobile/src/screens/account-screen/AccountDrawer.tsx create mode 100644 packages/mobile/src/screens/account-screen/index.tsx rename packages/mobile/src/screens/{notifications-screen/NotificationsDrawerNavigationContext.tsx => app-drawer-screen/AppDrawerContext.tsx} (55%) create mode 100644 packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx create mode 100644 packages/mobile/src/screens/app-drawer-screen/index.ts rename packages/mobile/src/screens/{notifications-screen/useDrawerNavigation.ts => app-drawer-screen/useAppDrawerNavigation.ts} (62%) create mode 100644 packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx create mode 100644 packages/mobile/src/screens/app-screen/NotificationsTabScreen.tsx create mode 100644 packages/mobile/src/screens/notifications-screen/NotificationsDrawer.tsx create mode 100644 packages/mobile/src/screens/notifications-screen/NotificationsDrawerScreen.tsx delete mode 100644 packages/mobile/src/screens/root-screen/HomeScreen.tsx diff --git a/packages/common/src/services/remote-config/feature-flags.ts b/packages/common/src/services/remote-config/feature-flags.ts index ea4ffc870f..780a49adc2 100644 --- a/packages/common/src/services/remote-config/feature-flags.ts +++ b/packages/common/src/services/remote-config/feature-flags.ts @@ -1,3 +1,5 @@ +import { Environment } from '../env' + /* FeatureFlags must be lowercase snake case */ export enum FeatureFlags { SOLANA_LISTEN_ENABLED = 'solana_listen_enabled', @@ -25,13 +27,27 @@ export enum FeatureFlags { BUY_AUDIO_COINBASE_ENABLED = 'buy_audio_coinbase_enabled', BUY_AUDIO_STRIPE_ENABLED = 'buy_audio_stripe_enabled', OFFLINE_MODE_ENABLED = 'offline_mode_enabled', - AUTO_SUBSCRIBE_ON_FOLLOW = 'auto_subscribe_on_follow' + AUTO_SUBSCRIBE_ON_FOLLOW = 'auto_subscribe_on_follow', + MOBILE_NAV_OVERHAUL = 'mobile_nav_overhaul' +} + +type FlagDefaults = Record + +export const environmentFlagDefaults: Record< + Environment, + Partial +> = { + development: {}, + staging: { + [FeatureFlags.MOBILE_NAV_OVERHAUL]: true + }, + production: {} } /** * If optimizely errors, these default values are used. */ -export const flagDefaults: { [key in FeatureFlags]: boolean } = { +export const flagDefaults: FlagDefaults = { [FeatureFlags.SOLANA_LISTEN_ENABLED]: false, [FeatureFlags.PLAYLIST_UPDATES_ENABLED]: false, [FeatureFlags.SHARE_SOUND_TO_TIKTOK]: false, @@ -57,5 +73,6 @@ export const flagDefaults: { [key in FeatureFlags]: boolean } = { [FeatureFlags.BUY_AUDIO_COINBASE_ENABLED]: false, [FeatureFlags.BUY_AUDIO_STRIPE_ENABLED]: false, [FeatureFlags.OFFLINE_MODE_ENABLED]: false, - [FeatureFlags.AUTO_SUBSCRIBE_ON_FOLLOW]: false + [FeatureFlags.AUTO_SUBSCRIBE_ON_FOLLOW]: false, + [FeatureFlags.MOBILE_NAV_OVERHAUL]: false } diff --git a/packages/common/src/services/remote-config/remote-config.ts b/packages/common/src/services/remote-config/remote-config.ts index b5b0df44af..d91d16c92a 100644 --- a/packages/common/src/services/remote-config/remote-config.ts +++ b/packages/common/src/services/remote-config/remote-config.ts @@ -5,13 +5,19 @@ import optimizely from '@optimizely/optimizely-sdk' import { ID } from 'models' import { Nullable } from 'utils' +import { Environment } from '../env' + import { remoteConfigIntDefaults, remoteConfigStringDefaults, remoteConfigDoubleDefaults, remoteConfigBooleanDefaults } from './defaults' -import { FeatureFlags, flagDefaults } from './feature-flags' +import { + environmentFlagDefaults, + FeatureFlags, + flagDefaults +} from './feature-flags' import { IntKeys, StringKeys, @@ -36,6 +42,7 @@ export type RemoteConfigOptions = { getFeatureFlagSessionId: () => Promise> setFeatureFlagSessionId: (id: number) => Promise setLogLevel: () => void + environment: Environment } export const remoteConfig = < @@ -52,7 +59,8 @@ export const remoteConfig = < createOptimizelyClient, getFeatureFlagSessionId, setFeatureFlagSessionId, - setLogLevel + setLogLevel, + environment }: RemoteConfigOptions) => { const state: State = { didInitialize: false, @@ -200,10 +208,11 @@ export const remoteConfig = < * Gets whether a given feature flag is enabled. */ function getFeatureEnabled(flag: FeatureFlags) { - // If the client is not ready yet, return early with `null` - if (!client || !state.id) return null + const defaultVal = + environmentFlagDefaults[environment][flag] ?? flagDefaults[flag] - const defaultVal = flagDefaults[flag] + // If the client is not ready yet, return early with `null` + if (!client || !state.id) return defaultVal const id = state.id diff --git a/packages/mobile/src/assets/images/iconMenu.svg b/packages/mobile/src/assets/images/iconMenu.svg new file mode 100644 index 0000000000..1437769646 --- /dev/null +++ b/packages/mobile/src/assets/images/iconMenu.svg @@ -0,0 +1,4 @@ + + + diff --git a/packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/NotificationsButton.tsx b/packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/NotificationsButton.tsx new file mode 100644 index 0000000000..8a43f9e2fb --- /dev/null +++ b/packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/NotificationsButton.tsx @@ -0,0 +1,37 @@ +import { useMemo } from 'react' + +import IconExploreLight from 'app/assets/animations/iconExploreLight.json' +import { colorize } from 'app/utils/colorizeLottie' +import { useThemeColors } from 'app/utils/theme' + +import type { BaseBottomTabBarButtonProps } from './BottomTabBarButton' +import { BottomTabBarButton } from './BottomTabBarButton' + +type NotificationsButtonProps = BaseBottomTabBarButtonProps + +export const NotificationsButton = (props: NotificationsButtonProps) => { + const { primary, neutral } = useThemeColors() + + const IconExplore = useMemo( + () => + colorize(IconExploreLight, { + // icon_Explore Outlines.Group 1.Fill 1 + 'layers.0.shapes.0.it.4.c.k.0.s': neutral, + // icon_Explore Outlines.Group 1.Fill 1 + 'layers.0.shapes.0.it.4.c.k.1.s': primary, + // icon_Explore Outlines.Group 2.Fill 1 + 'layers.0.shapes.1.it.0.c.k.0.s': primary, + // icon_Explore Outlines.Group 2.Fill 1 + 'layers.0.shapes.1.it.0.c.k.1.s': neutral + }), + [primary, neutral] + ) + + return ( + + ) +} diff --git a/packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/index.ts b/packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/index.ts index ee768d0308..01ad152e03 100644 --- a/packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/index.ts +++ b/packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/index.ts @@ -1,6 +1,7 @@ import { ExploreButton } from './ExploreButton' import { FavoritesButton } from './FavoritesButton' import { FeedButton } from './FeedButton' +import { NotificationsButton } from './NotificationsButton' import { ProfileButton } from './ProfileButton' import { TrendingButton } from './TrendingButton' @@ -9,7 +10,8 @@ export const bottomTabBarButtons = { trending: TrendingButton, explore: ExploreButton, favorites: FavoritesButton, - profile: ProfileButton + profile: ProfileButton, + notifications: NotificationsButton } export * from './ExploreButton' @@ -17,3 +19,4 @@ export * from './FavoritesButton' export * from './FeedButton' export * from './ProfileButton' export * from './TrendingButton' +export * from './NotificationsButton' diff --git a/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx b/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx index e9c10f46ea..4c6f73a797 100644 --- a/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx +++ b/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx @@ -30,8 +30,8 @@ import Drawer, { } from 'app/components/drawer' import { Scrubber } from 'app/components/scrubber' import { useDrawer } from 'app/hooks/useDrawer' +import { AppDrawerContext } from 'app/screens/app-drawer-screen' import { AppTabNavigationContext } from 'app/screens/app-screen' -import { NotificationsDrawerNavigationContext } from 'app/screens/notifications-screen/NotificationsDrawerNavigationContext' import { getAndroidNavigationBarHeight } from 'app/store/mobileUi/selectors' import { makeStyles } from 'app/styles' @@ -111,7 +111,7 @@ export const NowPlayingDrawer = memo(function NowPlayngDrawer( const isPlaying = useSelector(getPlaying) const [isPlayBarShowing, setIsPlayBarShowing] = useState(false) - const { drawerNavigation } = useContext(NotificationsDrawerNavigationContext) + const { drawerNavigation } = useContext(AppDrawerContext) // When audio starts playing, open the playbar to the initial offset useEffect(() => { diff --git a/packages/mobile/src/components/user/ProfilePicture.tsx b/packages/mobile/src/components/user/ProfilePicture.tsx index 23295116d2..4bb8f49bb4 100644 --- a/packages/mobile/src/components/user/ProfilePicture.tsx +++ b/packages/mobile/src/components/user/ProfilePicture.tsx @@ -38,10 +38,8 @@ export const ProfilePicture = (props: ProfilePictureProps) => { uri={profilePicture} styles={{ ...stylesProp, - ...{ - root: { - ...styles.profilePhoto - } + root: { + ...styles.profilePhoto } }} {...other} diff --git a/packages/mobile/src/screens/account-screen/AccountDrawer.tsx b/packages/mobile/src/screens/account-screen/AccountDrawer.tsx new file mode 100644 index 0000000000..3e20a50f7d --- /dev/null +++ b/packages/mobile/src/screens/account-screen/AccountDrawer.tsx @@ -0,0 +1,28 @@ +import { useCallback } from 'react' + +import { accountSelectors } from '@audius/common' +import type { DrawerContentComponentProps } from '@react-navigation/drawer' +import { DrawerContentScrollView } from '@react-navigation/drawer' +import { useSelector } from 'react-redux' + +import { Text } from 'app/components/core' + +import { useAppDrawerNavigation } from '../app-drawer-screen' +const { getAccountUser } = accountSelectors + +type AccountDrawerProps = DrawerContentComponentProps + +export const AccountDrawer = (props: AccountDrawerProps) => { + const accountUser = useSelector(getAccountUser) + const navigation = useAppDrawerNavigation() + + const handlePressAccount = useCallback(() => { + navigation.navigate('Profile', { handle: 'accountUser' }) + }, [navigation]) + + return ( + + {accountUser?.name} + + ) +} diff --git a/packages/mobile/src/screens/account-screen/index.tsx b/packages/mobile/src/screens/account-screen/index.tsx new file mode 100644 index 0000000000..822869cba8 --- /dev/null +++ b/packages/mobile/src/screens/account-screen/index.tsx @@ -0,0 +1 @@ +export * from './AccountDrawer' diff --git a/packages/mobile/src/screens/notifications-screen/NotificationsDrawerNavigationContext.tsx b/packages/mobile/src/screens/app-drawer-screen/AppDrawerContext.tsx similarity index 55% rename from packages/mobile/src/screens/notifications-screen/NotificationsDrawerNavigationContext.tsx rename to packages/mobile/src/screens/app-drawer-screen/AppDrawerContext.tsx index 92dce9791e..10c1c60475 100644 --- a/packages/mobile/src/screens/notifications-screen/NotificationsDrawerNavigationContext.tsx +++ b/packages/mobile/src/screens/app-drawer-screen/AppDrawerContext.tsx @@ -3,33 +3,25 @@ import { useMemo, createContext } from 'react' // eslint-disable-next-line import/no-unresolved import type { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types' -import type { - DrawerNavigationState, - NavigationProp, - ParamListBase -} from '@react-navigation/native' +import type { NavigationProp } from '@react-navigation/native' -type ContextType = { +type AppDrawerContextType = { drawerHelpers: DrawerNavigationHelpers drawerNavigation?: NavigationProp gesturesDisabled?: boolean setGesturesDisabled?: (gestureDisabled: boolean) => void - state?: DrawerNavigationState } -type NotificationsDrawerNavigationContextValue = - | ContextType - | Record +type AppDrawerContextValue = AppDrawerContextType | Record -export const NotificationsDrawerNavigationContext = - createContext({}) +export const AppDrawerContext = createContext({}) -type ProviderProps = ContextType & { +type AppDrawerContextProviderProps = AppDrawerContextType & { children: ReactNode } -export const NotificationsDrawerNavigationContextProvider = ( - props: ProviderProps +export const AppDrawerContextProvider = ( + props: AppDrawerContextProviderProps ) => { const { children, @@ -38,7 +30,8 @@ export const NotificationsDrawerNavigationContextProvider = ( gesturesDisabled, setGesturesDisabled } = props - const other = useMemo( + + const context = useMemo( () => ({ drawerHelpers, drawerNavigation, @@ -48,8 +41,8 @@ export const NotificationsDrawerNavigationContextProvider = ( [drawerHelpers, drawerNavigation, gesturesDisabled, setGesturesDisabled] ) return ( - + {children} - + ) } diff --git a/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx b/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx new file mode 100644 index 0000000000..a2f49b2b52 --- /dev/null +++ b/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx @@ -0,0 +1,82 @@ +import { useMemo, useState } from 'react' + +import { FeatureFlags } from '@audius/common' +import { createDrawerNavigator } from '@react-navigation/drawer' +// eslint-disable-next-line import/no-unresolved +import type { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types' +import { useNavigation } from '@react-navigation/native' +import { Dimensions } from 'react-native' + +import { useFeatureFlag } from 'app/hooks/useRemoteConfig' +import { NotificationsDrawer } from 'app/screens/notifications-screen' + +import { AccountDrawer } from '../account-screen' +import { AppScreen } from '../app-screen' + +import { AppDrawerContextProvider } from './AppDrawerContext' + +const SCREEN_WIDTH = Dimensions.get('window').width + +const baseDrawerScreenOptions = { + drawerType: 'slide' as const, + headerShown: false, + swipeEdgeWidth: SCREEN_WIDTH +} + +const Drawer = createDrawerNavigator() + +type AppTabScreenProps = { + navigation: DrawerNavigationHelpers +} + +/** + * The app stack after signing up or signing in + */ +const AppStack = (props: AppTabScreenProps) => { + const { navigation: drawerHelpers } = props + const drawerNavigation = useNavigation() + return ( + + + + ) +} + +export const AppDrawerScreen = () => { + const [disableGestures, setDisableGestures] = useState(false) + const { isEnabled } = useFeatureFlag(FeatureFlags.MOBILE_NAV_OVERHAUL) + const DrawerComponent = isEnabled ? AccountDrawer : NotificationsDrawer + + const drawerScreenOptions = useMemo( + () => ({ + ...baseDrawerScreenOptions, + drawerStyle: { + width: isEnabled ? '75%' : '100%' + }, + gestureHandlerProps: { + enabled: !disableGestures + } + }), + [isEnabled, disableGestures] + ) + + return ( + ( + + )} + > + + + ) +} diff --git a/packages/mobile/src/screens/app-drawer-screen/index.ts b/packages/mobile/src/screens/app-drawer-screen/index.ts new file mode 100644 index 0000000000..2595d593b3 --- /dev/null +++ b/packages/mobile/src/screens/app-drawer-screen/index.ts @@ -0,0 +1,3 @@ +export * from './AppDrawerScreen' +export * from './AppDrawerContext' +export * from './useAppDrawerNavigation' diff --git a/packages/mobile/src/screens/notifications-screen/useDrawerNavigation.ts b/packages/mobile/src/screens/app-drawer-screen/useAppDrawerNavigation.ts similarity index 62% rename from packages/mobile/src/screens/notifications-screen/useDrawerNavigation.ts rename to packages/mobile/src/screens/app-drawer-screen/useAppDrawerNavigation.ts index da0a265b6b..5da2f2acbb 100644 --- a/packages/mobile/src/screens/notifications-screen/useDrawerNavigation.ts +++ b/packages/mobile/src/screens/app-drawer-screen/useAppDrawerNavigation.ts @@ -5,10 +5,10 @@ import { useNavigation } from 'app/hooks/useNavigation' import type { AppTabScreenParamList } from '../app-screen' import type { ProfileTabScreenParamList } from '../app-screen/ProfileTabScreen' -import { NotificationsDrawerNavigationContext } from './NotificationsDrawerNavigationContext' +import { AppDrawerContext } from '.' -export const useDrawerNavigation = () => { - const { drawerHelpers } = useContext(NotificationsDrawerNavigationContext) +export const useAppDrawerNavigation = () => { + const { drawerHelpers } = useContext(AppDrawerContext) return useNavigation({ customNativeNavigation: drawerHelpers }) diff --git a/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx b/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx new file mode 100644 index 0000000000..013635eae8 --- /dev/null +++ b/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx @@ -0,0 +1,30 @@ +import { accountSelectors } from '@audius/common' +import { TouchableOpacity } from 'react-native-gesture-handler' +import { useSelector } from 'react-redux' + +import { ProfilePicture } from 'app/components/user' +import { makeStyles } from 'app/styles' +const { getAccountUser } = accountSelectors + +const useStyles = makeStyles(({ spacing }) => ({ + root: { + height: spacing(8), + width: spacing(8) + } +})) + +type AccountPictureHeaderProps = { + onPress: () => void +} + +export const AccountPictureHeader = (props: AccountPictureHeaderProps) => { + const { onPress } = props + const styles = useStyles() + const accountUser = useSelector(getAccountUser) + + return ( + + + + ) +} diff --git a/packages/mobile/src/screens/app-screen/AppScreen.tsx b/packages/mobile/src/screens/app-screen/AppScreen.tsx index f4e40eab60..32b7020ceb 100644 --- a/packages/mobile/src/screens/app-screen/AppScreen.tsx +++ b/packages/mobile/src/screens/app-screen/AppScreen.tsx @@ -1,12 +1,14 @@ import { useEffect } from 'react' -import { walletActions } from '@audius/common' +import { FeatureFlags, walletActions } from '@audius/common' import { useAppState } from '@react-native-community/hooks' import type { BottomTabBarProps } from '@react-navigation/bottom-tabs' import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import type { NavigatorScreenParams } from '@react-navigation/native' import { useDispatch } from 'react-redux' +import { useFeatureFlag } from 'app/hooks/useRemoteConfig' + import { AppTabBar } from './AppTabBar' import type { ExploreTabScreenParamList } from './ExploreTabScreen' import { ExploreTabScreen } from './ExploreTabScreen' @@ -14,6 +16,7 @@ import type { FavoritesTabScreenParamList } from './FavoritesTabScreen' import { FavoritesTabScreen } from './FavoritesTabScreen' import type { FeedTabScreenParamList } from './FeedTabScreen' import { FeedTabScreen } from './FeedTabScreen' +import { NotificationsTabScreen } from './NotificationsTabScreen' import type { ProfileTabScreenParamList } from './ProfileTabScreen' import { ProfileTabScreen } from './ProfileTabScreen' import type { TrendingTabScreenParamList } from './TrendingTabScreen' @@ -36,6 +39,9 @@ const tabBar = (props: BottomTabBarProps) => export const AppScreen = () => { const dispatch = useDispatch() const appState = useAppState() + const { isEnabled: isNavOverhaulEnabled } = useFeatureFlag( + FeatureFlags.MOBILE_NAV_OVERHAUL + ) useEffect(() => { if (appState === 'active') { @@ -49,7 +55,11 @@ export const AppScreen = () => { - + {isNavOverhaulEnabled ? ( + + ) : ( + + )} ) } diff --git a/packages/mobile/src/screens/app-screen/AppTabScreen.tsx b/packages/mobile/src/screens/app-screen/AppTabScreen.tsx index c8f5c917b0..07d0fa38a4 100644 --- a/packages/mobile/src/screens/app-screen/AppTabScreen.tsx +++ b/packages/mobile/src/screens/app-screen/AppTabScreen.tsx @@ -32,8 +32,8 @@ import { } from 'app/screens/user-list-screen' import type { SearchPlaylist, SearchTrack } from 'app/store/search/types' +import { AppDrawerContext } from '../app-drawer-screen' import { EditPlaylistScreen } from '../edit-playlist-screen/EditPlaylistScreen' -import { NotificationsDrawerNavigationContext } from '../notifications-screen/NotificationsDrawerNavigationContext' import { TipArtistModal } from '../tip-artist-screen' import { TrackRemixesScreen } from '../track-screen/TrackRemixesScreen' @@ -98,7 +98,7 @@ type AppTabScreenProps = { */ export const AppTabScreen = ({ baseScreen, Stack }: AppTabScreenProps) => { const screenOptions = useAppScreenOptions() - const { drawerNavigation } = useContext(NotificationsDrawerNavigationContext) + const { drawerNavigation } = useContext(AppDrawerContext) const { isOpen: isNowPlayingDrawerOpen } = useDrawer('NowPlaying') useEffect(() => { diff --git a/packages/mobile/src/screens/app-screen/NotificationsTabScreen.tsx b/packages/mobile/src/screens/app-screen/NotificationsTabScreen.tsx new file mode 100644 index 0000000000..b0cdc3a5ae --- /dev/null +++ b/packages/mobile/src/screens/app-screen/NotificationsTabScreen.tsx @@ -0,0 +1,13 @@ +import { NotificationsScreen } from '../notifications-screen' + +import type { AppTabScreenParamList } from './AppTabScreen' +import { createAppTabScreenStack } from './createAppTabScreenStack' + +export type NotificationsTabScreenParamList = AppTabScreenParamList & { + Notifications: undefined +} + +export const NotificationsTabScreen = + createAppTabScreenStack((Stack) => ( + + )) diff --git a/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx b/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx index b9f1e1a4a6..97cbb55535 100644 --- a/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx +++ b/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx @@ -22,11 +22,13 @@ import { IconButton } from 'app/components/core' import type { ContextualParams } from 'app/hooks/useNavigation' import { useNavigation } from 'app/hooks/useNavigation' import { useFeatureFlag } from 'app/hooks/useRemoteConfig' -import { NotificationsDrawerNavigationContext } from 'app/screens/notifications-screen/NotificationsDrawerNavigationContext' import { makeStyles } from 'app/styles' import { formatCount } from 'app/utils/format' import { useThemeColors } from 'app/utils/theme' +import { AppDrawerContext } from '../app-drawer-screen' + +import { AccountPictureHeader } from './AccountPictureHeader' import type { AppScreenParamList } from './AppScreen' import type { AppTabScreenParamList } from './AppTabScreen' const { markAllAsViewed } = notificationsActions @@ -103,7 +105,7 @@ export const useAppScreenOptions = ( const dispatch = useDispatch() const notificationCount = useSelector(getNotificationUnviewedCount) const navigation = useNavigation() - const { drawerHelpers } = useContext(NotificationsDrawerNavigationContext) + const { drawerHelpers } = useContext(AppDrawerContext) const handlePressNotification = useCallback(() => { drawerHelpers?.openDrawer() @@ -115,6 +117,9 @@ export const useAppScreenOptions = ( }, [navigation]) const { isEnabled: isEarlyAccess } = useFeatureFlag(FeatureFlags.EARLY_ACCESS) + const { isEnabled: isNavOverhaulEnabled } = useFeatureFlag( + FeatureFlags.MOBILE_NAV_OVERHAUL + ) const screenOptions: (options: Options) => NativeStackNavigationOptions = useCallback( @@ -165,6 +170,13 @@ export const useAppScreenOptions = ( ) } + if (isNavOverhaulEnabled) { + return ( + + + + ) + } return ( { return ( -
+
diff --git a/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx b/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx index 28c64b2873..887200775a 100644 --- a/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx +++ b/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx @@ -15,6 +15,10 @@ import { AlbumsTab } from './AlbumsTab' import { PlaylistsTab } from './PlaylistsTab' import { TracksTab } from './TracksTab' +const messages = { + header: 'Favorites' +} + const favoritesScreens = [ { name: 'tracks', @@ -41,7 +45,7 @@ export const FavoritesScreen = () => { return ( -
+
{ // ScreenContent handles the offline indicator. // Show favorites screen anyway when offline so users can see their downloads diff --git a/packages/mobile/src/screens/notifications-screen/Notification/EntityLink.tsx b/packages/mobile/src/screens/notifications-screen/Notification/EntityLink.tsx index d4a8cca727..f3118b171b 100644 --- a/packages/mobile/src/screens/notifications-screen/Notification/EntityLink.tsx +++ b/packages/mobile/src/screens/notifications-screen/Notification/EntityLink.tsx @@ -4,7 +4,7 @@ import type { EntityType } from '@audius/common' import { Text } from 'app/components/core' -import { useDrawerNavigation } from '../useDrawerNavigation' +import { useAppDrawerNavigation } from '../../app-drawer-screen' type EntityLinkProps = { entity: EntityType @@ -12,7 +12,7 @@ type EntityLinkProps = { export const EntityLink = (props: EntityLinkProps) => { const { entity } = props - const navigation = useDrawerNavigation() + const navigation = useAppDrawerNavigation() const onPress = useCallback(() => { if ('track_id' in entity) { diff --git a/packages/mobile/src/screens/notifications-screen/Notification/ProfilePicture.tsx b/packages/mobile/src/screens/notifications-screen/Notification/ProfilePicture.tsx index f6f9897345..d46e0f0b7d 100644 --- a/packages/mobile/src/screens/notifications-screen/Notification/ProfilePicture.tsx +++ b/packages/mobile/src/screens/notifications-screen/Notification/ProfilePicture.tsx @@ -6,7 +6,7 @@ import type { ProfilePictureProps as ProfilePictureBaseProps } from 'app/compone import { ProfilePicture as ProfilePictureBase } from 'app/components/user' import { makeStyles } from 'app/styles' -import { useDrawerNavigation } from '../useDrawerNavigation' +import { useAppDrawerNavigation } from '../../app-drawer-screen' const useStyles = makeStyles(({ palette, spacing }) => ({ image: { @@ -35,7 +35,7 @@ export const ProfilePicture = (props: ProfilePictureProps) => { ...other } = props const styles = useStyles() - const navigation = useDrawerNavigation() + const navigation = useAppDrawerNavigation() const handlePress = useCallback(() => { if (profile) { diff --git a/packages/mobile/src/screens/notifications-screen/Notification/UserNameLink.tsx b/packages/mobile/src/screens/notifications-screen/Notification/UserNameLink.tsx index 2a3931a109..60b30bd6eb 100644 --- a/packages/mobile/src/screens/notifications-screen/Notification/UserNameLink.tsx +++ b/packages/mobile/src/screens/notifications-screen/Notification/UserNameLink.tsx @@ -5,7 +5,7 @@ import type { User as UserType } from '@audius/common' import type { TextProps } from 'app/components/core' import { Text } from 'app/components/core' import { useNavigation } from 'app/hooks/useNavigation' -import { NotificationsDrawerNavigationContext } from 'app/screens/notifications-screen/NotificationsDrawerNavigationContext' +import { AppDrawerContext } from 'app/screens/app-drawer-screen' type UserNameLinkProps = TextProps & { user: UserType @@ -13,7 +13,7 @@ type UserNameLinkProps = TextProps & { export const UserNameLink = (props: UserNameLinkProps) => { const { user, ...other } = props - const { drawerHelpers } = useContext(NotificationsDrawerNavigationContext) + const { drawerHelpers } = useContext(AppDrawerContext) const navigation = useNavigation({ customNativeNavigation: drawerHelpers }) const onPress = useCallback(() => { diff --git a/packages/mobile/src/screens/notifications-screen/NotificationList.tsx b/packages/mobile/src/screens/notifications-screen/NotificationList.tsx index 976c8b0885..1dd60a63c4 100644 --- a/packages/mobile/src/screens/notifications-screen/NotificationList.tsx +++ b/packages/mobile/src/screens/notifications-screen/NotificationList.tsx @@ -15,9 +15,10 @@ import { FlatList } from 'app/components/core' import LoadingSpinner from 'app/components/loading-spinner' import { makeStyles } from 'app/styles' +import { AppDrawerContext } from '../app-drawer-screen' + import { EmptyNotifications } from './EmptyNotifications' import { NotificationListItem } from './NotificationListItem' -import { NotificationsDrawerNavigationContext } from './NotificationsDrawerNavigationContext' const { fetchNotifications, refreshNotifications } = notificationsActions const { getNotificationHasMore, @@ -108,7 +109,7 @@ export const NotificationList = () => { const hasMore = useSelector(getNotificationHasMore) const [isRefreshing, setIsRefreshing] = useState(false) - const { gesturesDisabled } = useContext(NotificationsDrawerNavigationContext) + const { gesturesDisabled } = useContext(AppDrawerContext) const handleRefresh = useCallback(() => { setIsRefreshing(true) diff --git a/packages/mobile/src/screens/notifications-screen/Notifications/AddTrackToPlaylistNotification.tsx b/packages/mobile/src/screens/notifications-screen/Notifications/AddTrackToPlaylistNotification.tsx index 35508f4ec8..acb9a8ff98 100644 --- a/packages/mobile/src/screens/notifications-screen/Notifications/AddTrackToPlaylistNotification.tsx +++ b/packages/mobile/src/screens/notifications-screen/Notifications/AddTrackToPlaylistNotification.tsx @@ -7,6 +7,7 @@ import { useSelector } from 'react-redux' import IconPlaylists from 'app/assets/images/iconPlaylists.svg' +import { useAppDrawerNavigation } from '../../app-drawer-screen' import { NotificationHeader, NotificationText, @@ -17,7 +18,6 @@ import { ProfilePicture } from '../Notification' import { getEntityScreen } from '../Notification/utils' -import { useDrawerNavigation } from '../useDrawerNavigation' const { getNotificationEntities } = notificationsSelectors const messages = { @@ -39,7 +39,7 @@ export const AddTrackToPlaylistNotification = ( const { track, playlist } = entities const playlistOwner = playlist.user - const navigation = useDrawerNavigation() + const navigation = useAppDrawerNavigation() const handlePress = useCallback(() => { if (playlist) { diff --git a/packages/mobile/src/screens/notifications-screen/Notifications/MilestoneNotification.tsx b/packages/mobile/src/screens/notifications-screen/Notifications/MilestoneNotification.tsx index 0ce7bfc677..d457fdb61f 100644 --- a/packages/mobile/src/screens/notifications-screen/Notifications/MilestoneNotification.tsx +++ b/packages/mobile/src/screens/notifications-screen/Notifications/MilestoneNotification.tsx @@ -15,6 +15,7 @@ import { make } from 'app/services/analytics' import { EventNames } from 'app/types/analytics' import { formatCount } from 'app/utils/format' +import { useAppDrawerNavigation } from '../../app-drawer-screen' import { EntityLink, NotificationHeader, @@ -24,7 +25,6 @@ import { NotificationTwitterButton } from '../Notification' import { getEntityRoute, getEntityScreen } from '../Notification/utils' -import { useDrawerNavigation } from '../useDrawerNavigation' const { getNotificationEntity, getNotificationUser } = notificationsSelectors const messages = { @@ -96,7 +96,7 @@ export const MilestoneNotification = (props: MilestoneNotificationProps) => { ) const user = useSelector((state) => getNotificationUser(state, notification)) - const navigation = useDrawerNavigation() + const navigation = useAppDrawerNavigation() const handlePress = useCallback(() => { if (achievement === Achievement.Followers) { diff --git a/packages/mobile/src/screens/notifications-screen/Notifications/RemixCosignNotification.tsx b/packages/mobile/src/screens/notifications-screen/Notifications/RemixCosignNotification.tsx index 023b43c48a..e483fdf1e0 100644 --- a/packages/mobile/src/screens/notifications-screen/Notifications/RemixCosignNotification.tsx +++ b/packages/mobile/src/screens/notifications-screen/Notifications/RemixCosignNotification.tsx @@ -14,6 +14,7 @@ import { make } from 'app/services/analytics' import { EventNames } from 'app/types/analytics' import { getTrackRoute } from 'app/utils/routes' +import { useAppDrawerNavigation } from '../../app-drawer-screen' import { NotificationHeader, NotificationText, @@ -24,7 +25,6 @@ import { ProfilePicture, NotificationTwitterButton } from '../Notification' -import { useDrawerNavigation } from '../useDrawerNavigation' const { getNotificationEntities, getNotificationUser } = notificationsSelectors const messages = { @@ -42,7 +42,7 @@ export const RemixCosignNotification = ( props: RemixCosignNotificationProps ) => { const { notification } = props - const navigation = useDrawerNavigation() + const navigation = useAppDrawerNavigation() const { childTrackId, parentTrackUserId } = notification const user = useSelector((state) => getNotificationUser(state, notification)) // TODO: casting from EntityType to TrackEntity here, but diff --git a/packages/mobile/src/screens/notifications-screen/Notifications/RemixCreateNotification.tsx b/packages/mobile/src/screens/notifications-screen/Notifications/RemixCreateNotification.tsx index 7c93816487..5b0969a25d 100644 --- a/packages/mobile/src/screens/notifications-screen/Notifications/RemixCreateNotification.tsx +++ b/packages/mobile/src/screens/notifications-screen/Notifications/RemixCreateNotification.tsx @@ -13,6 +13,7 @@ import { make } from 'app/services/analytics' import { EventNames } from 'app/types/analytics' import { getTrackRoute } from 'app/utils/routes' +import { useAppDrawerNavigation } from '../../app-drawer-screen' import { NotificationHeader, NotificationText, @@ -22,7 +23,6 @@ import { UserNameLink, NotificationTwitterButton } from '../Notification' -import { useDrawerNavigation } from '../useDrawerNavigation' const { getNotificationEntities, getNotificationUser } = notificationsSelectors const messages = { @@ -41,7 +41,7 @@ export const RemixCreateNotification = ( ) => { const { notification } = props const { childTrackId, parentTrackId } = notification - const navigation = useDrawerNavigation() + const navigation = useAppDrawerNavigation() const user = useSelector((state) => getNotificationUser(state, notification)) const tracks = useSelector((state) => getNotificationEntities(state, notification) diff --git a/packages/mobile/src/screens/notifications-screen/Notifications/TrendingTrackNotification.tsx b/packages/mobile/src/screens/notifications-screen/Notifications/TrendingTrackNotification.tsx index a1279273f9..05ff6b7aa0 100644 --- a/packages/mobile/src/screens/notifications-screen/Notifications/TrendingTrackNotification.tsx +++ b/packages/mobile/src/screens/notifications-screen/Notifications/TrendingTrackNotification.tsx @@ -10,6 +10,7 @@ import { useSelector } from 'react-redux' import IconTrending from 'app/assets/images/iconTrending.svg' +import { useAppDrawerNavigation } from '../../app-drawer-screen' import { EntityLink, NotificationHeader, @@ -17,7 +18,6 @@ import { NotificationTile, NotificationTitle } from '../Notification' -import { useDrawerNavigation } from '../useDrawerNavigation' const { getNotificationEntity } = notificationsSelectors const getRankSuffix = (rank: number) => { @@ -47,7 +47,7 @@ export const TrendingTrackNotification = ( const track = useSelector((state) => getNotificationEntity(state, notification) ) as Nullable - const navigation = useDrawerNavigation() + const navigation = useAppDrawerNavigation() const handlePress = useCallback(() => { if (track) { diff --git a/packages/mobile/src/screens/notifications-screen/Notifications/UserSubscriptionNotification.tsx b/packages/mobile/src/screens/notifications-screen/Notifications/UserSubscriptionNotification.tsx index cb8d6af1d8..646f9f3d3a 100644 --- a/packages/mobile/src/screens/notifications-screen/Notifications/UserSubscriptionNotification.tsx +++ b/packages/mobile/src/screens/notifications-screen/Notifications/UserSubscriptionNotification.tsx @@ -11,6 +11,7 @@ import { useSelector } from 'react-redux' import IconStars from 'app/assets/images/iconStars.svg' +import { useAppDrawerNavigation } from '../../app-drawer-screen' import { NotificationHeader, NotificationText, @@ -21,7 +22,6 @@ import { ProfilePicture } from '../Notification' import { getEntityScreen } from '../Notification/utils' -import { useDrawerNavigation } from '../useDrawerNavigation' const { getNotificationEntities, getNotificationUser } = notificationsSelectors const messages = { @@ -39,7 +39,7 @@ export const UserSubscriptionNotification = ( ) => { const { notification } = props const { entityType } = notification - const navigation = useDrawerNavigation() + const navigation = useAppDrawerNavigation() const user = useSelector((state) => getNotificationUser(state, notification)) const entities = useProxySelector( (state) => getNotificationEntities(state, notification), diff --git a/packages/mobile/src/screens/notifications-screen/Notifications/useSocialActionHandler.ts b/packages/mobile/src/screens/notifications-screen/Notifications/useSocialActionHandler.ts index d8e28305c1..13ac3d9d8e 100644 --- a/packages/mobile/src/screens/notifications-screen/Notifications/useSocialActionHandler.ts +++ b/packages/mobile/src/screens/notifications-screen/Notifications/useSocialActionHandler.ts @@ -10,7 +10,7 @@ import type { import { notificationsUserListActions } from '@audius/common' import { useDispatch } from 'react-redux' -import { useDrawerNavigation } from '../useDrawerNavigation' +import { useAppDrawerNavigation } from '../../app-drawer-screen' const { setNotificationId } = notificationsUserListActions /** @@ -25,7 +25,7 @@ export const useSocialActionHandler = ( const firstUser = users?.[0] const isMultiUser = userIds.length > 1 const dispatch = useDispatch() - const navigation = useDrawerNavigation() + const navigation = useAppDrawerNavigation() return useCallback(() => { if (isMultiUser) { diff --git a/packages/mobile/src/screens/notifications-screen/NotificationsDrawer.tsx b/packages/mobile/src/screens/notifications-screen/NotificationsDrawer.tsx new file mode 100644 index 0000000000..25b53ef4b4 --- /dev/null +++ b/packages/mobile/src/screens/notifications-screen/NotificationsDrawer.tsx @@ -0,0 +1,42 @@ +import { useEffect } from 'react' + +import type { DrawerContentComponentProps } from '@react-navigation/drawer' +import { useNavigation } from '@react-navigation/native' + +import PushNotifications from 'app/notifications' + +import { AppDrawerContextProvider } from '../app-drawer-screen' + +import { NotificationsDrawerScreen } from './NotificationsDrawerScreen' + +type NotificationDrawerContentsProps = DrawerContentComponentProps & { + disableGestures: boolean + setDisableGestures: (disabled: boolean) => void +} + +/** + * The content of the notifications drawer, which swipes in + */ +export const NotificationsDrawer = (props: NotificationDrawerContentsProps) => { + const { + navigation: drawerHelpers, + disableGestures, + setDisableGestures + } = props + const drawerNavigation = useNavigation() + + useEffect(() => { + PushNotifications.setDrawerHelpers(drawerHelpers) + }, [drawerHelpers]) + + return ( + + + + ) +} diff --git a/packages/mobile/src/screens/notifications-screen/NotificationsDrawerScreen.tsx b/packages/mobile/src/screens/notifications-screen/NotificationsDrawerScreen.tsx new file mode 100644 index 0000000000..521495a71e --- /dev/null +++ b/packages/mobile/src/screens/notifications-screen/NotificationsDrawerScreen.tsx @@ -0,0 +1,50 @@ +import { memo, useEffect } from 'react' + +import { notificationsActions } from '@audius/common' +import { useDrawerStatus } from '@react-navigation/drawer' +import { View } from 'react-native' +import { useDispatch } from 'react-redux' +import { usePrevious } from 'react-use' + +import { makeStyles } from 'app/styles' + +import { ScreenContent } from '../ScreenContent' + +import { NotificationList } from './NotificationList' +import { TopBar } from './TopBar' +const { markAllAsViewed } = notificationsActions + +const useStyles = makeStyles(({ palette }) => ({ + root: { + backgroundColor: palette.background, + height: '100%' + } +})) + +/** + * Memoized to prevent rerender during bottom-bar navigation. + * It's rerendering because navigation context changes. + */ +export const NotificationsDrawerScreen = memo( + function NotificationsDrawerScreen() { + const styles = useStyles() + const dispatch = useDispatch() + const isDrawerOpen = useDrawerStatus() === 'open' + const wasDrawerOpen = usePrevious(isDrawerOpen) + + useEffect(() => { + if (wasDrawerOpen && !isDrawerOpen) { + dispatch(markAllAsViewed()) + } + }, [isDrawerOpen, wasDrawerOpen, dispatch]) + + return ( + + + + + + + ) + } +) diff --git a/packages/mobile/src/screens/notifications-screen/NotificationsScreen.tsx b/packages/mobile/src/screens/notifications-screen/NotificationsScreen.tsx index 47241044a2..289bc9e0e2 100644 --- a/packages/mobile/src/screens/notifications-screen/NotificationsScreen.tsx +++ b/packages/mobile/src/screens/notifications-screen/NotificationsScreen.tsx @@ -1,48 +1,36 @@ -import { memo, useEffect } from 'react' +import { useCallback } from 'react' import { notificationsActions } from '@audius/common' -import { useDrawerStatus } from '@react-navigation/drawer' -import { View } from 'react-native' +import { useFocusEffect } from '@react-navigation/native' import { useDispatch } from 'react-redux' -import { usePrevious } from 'react-use' -import { makeStyles } from 'app/styles' +import { Screen } from 'app/components/core' +import { Header } from 'app/components/header' import { ScreenContent } from '../ScreenContent' import { NotificationList } from './NotificationList' -import { TopBar } from './TopBar' const { markAllAsViewed } = notificationsActions -const useStyles = makeStyles(({ palette }) => ({ - root: { - backgroundColor: palette.background, - height: '100%' - } -})) - -/** - * Memoized to prevent rerender during bottom-bar navigation. - * It's rerendering because navigation context changes. - */ -export const NotificationsScreen = memo(function NotificationsScreen() { - const styles = useStyles() +const messages = { + header: 'Notifications' +} + +export const NotificationsScreen = () => { const dispatch = useDispatch() - const isDrawerOpen = useDrawerStatus() === 'open' - const wasDrawerOpen = usePrevious(isDrawerOpen) - useEffect(() => { - if (wasDrawerOpen && !isDrawerOpen) { + useFocusEffect( + useCallback(() => { dispatch(markAllAsViewed()) - } - }, [isDrawerOpen, wasDrawerOpen, dispatch]) + }, [dispatch]) + ) return ( - - + +
- + ) -}) +} diff --git a/packages/mobile/src/screens/notifications-screen/Reaction/ReactionList.tsx b/packages/mobile/src/screens/notifications-screen/Reaction/ReactionList.tsx index c1e95459ca..97b89249ef 100644 --- a/packages/mobile/src/screens/notifications-screen/Reaction/ReactionList.tsx +++ b/packages/mobile/src/screens/notifications-screen/Reaction/ReactionList.tsx @@ -5,10 +5,9 @@ import type { Nullable, ReactionTypes } from '@audius/common' import type { PanResponderGestureState } from 'react-native' import { View, PanResponder } from 'react-native' +import { AppDrawerContext } from 'app/screens/app-drawer-screen' import { makeStyles } from 'app/styles' -import { NotificationsDrawerNavigationContext } from '../NotificationsDrawerNavigationContext' - import { reactionMap } from './reactions' const useStyles = makeStyles(() => ({ @@ -49,9 +48,7 @@ export const ReactionList = (props: ReactionListProps) => { // The current reaction the user is interacting with. // Note this needs to be a ref since the guesture handler is also a ref const interactingReactionRef = useRef(null) - const { setGesturesDisabled } = useContext( - NotificationsDrawerNavigationContext - ) + const { setGesturesDisabled } = useContext(AppDrawerContext) // Whether or not the user is currently interacting with the reactions const [interacting, setInteracting] = useState(null) const positions = useRef(initialPositions) diff --git a/packages/mobile/src/screens/notifications-screen/TopBar.tsx b/packages/mobile/src/screens/notifications-screen/TopBar.tsx index d3c7e694ed..a7ab0d68e8 100644 --- a/packages/mobile/src/screens/notifications-screen/TopBar.tsx +++ b/packages/mobile/src/screens/notifications-screen/TopBar.tsx @@ -8,7 +8,7 @@ import { IconButton, Text } from 'app/components/core' import { makeStyles } from 'app/styles' import { Theme } from 'app/utils/theme' -import { NotificationsDrawerNavigationContext } from './NotificationsDrawerNavigationContext' +import { AppDrawerContext } from '../app-drawer-screen' const messages = { notifications: 'notifications' @@ -45,7 +45,7 @@ const useStyles = makeStyles(({ spacing, palette, type }) => ({ export const TopBar = () => { const styles = useStyles() - const { drawerHelpers } = useContext(NotificationsDrawerNavigationContext) + const { drawerHelpers } = useContext(AppDrawerContext) const handleClose = useCallback(() => { drawerHelpers?.closeDrawer() diff --git a/packages/mobile/src/screens/notifications-screen/index.ts b/packages/mobile/src/screens/notifications-screen/index.ts index 9f81938369..bc111179db 100644 --- a/packages/mobile/src/screens/notifications-screen/index.ts +++ b/packages/mobile/src/screens/notifications-screen/index.ts @@ -1,2 +1,3 @@ export * from './NotificationsScreen' -export * from './NotificationsDrawerNavigationContext' +export * from './NotificationsDrawerScreen' +export * from './NotificationsDrawer' diff --git a/packages/mobile/src/screens/root-screen/HomeScreen.tsx b/packages/mobile/src/screens/root-screen/HomeScreen.tsx deleted file mode 100644 index 79d103d0dd..0000000000 --- a/packages/mobile/src/screens/root-screen/HomeScreen.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { useEffect, useState } from 'react' - -import type { DrawerContentComponentProps } from '@react-navigation/drawer' -import { createDrawerNavigator } from '@react-navigation/drawer' -// eslint-disable-next-line import/no-unresolved -import type { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types' -import { useNavigation } from '@react-navigation/native' -import { Dimensions } from 'react-native' - -import PushNotifications from 'app/notifications' -import { - NotificationsScreen, - NotificationsDrawerNavigationContextProvider -} from 'app/screens/notifications-screen' - -import { AppScreen } from '../app-screen' - -const SCREEN_WIDTH = Dimensions.get('window').width - -const Drawer = createDrawerNavigator() - -type AppTabScreenProps = { - navigation: DrawerNavigationHelpers -} - -/** - * The app stack after signing up or signing in - */ -const AppStack = (props: AppTabScreenProps) => { - const { navigation: drawerHelpers } = props - const drawerNavigation = useNavigation() - return ( - - - - ) -} - -type NotificationDrawerContentsProps = DrawerContentComponentProps & { - disableGestures: boolean - setDisableGestures: (disabled: boolean) => void -} - -/** - * The content of the notifications drawer, which swipes in - */ -const NotificationDrawer = (props: NotificationDrawerContentsProps) => { - const { - navigation: drawerHelpers, - disableGestures, - setDisableGestures - } = props - const drawerNavigation = useNavigation() - - useEffect(() => { - PushNotifications.setDrawerHelpers(drawerHelpers) - }, [drawerHelpers]) - - return ( - - - - ) -} - -export const HomeScreen = () => { - const [disableGestures, setDisableGestures] = useState(false) - - return ( - ( - - )} - > - - - ) -} diff --git a/packages/mobile/src/screens/root-screen/RootScreen.tsx b/packages/mobile/src/screens/root-screen/RootScreen.tsx index 794429471e..4a4b910931 100644 --- a/packages/mobile/src/screens/root-screen/RootScreen.tsx +++ b/packages/mobile/src/screens/root-screen/RootScreen.tsx @@ -13,10 +13,9 @@ import { SignOnScreen } from 'app/screens/signon' import { UpdateRequiredScreen } from 'app/screens/update-required-screen/UpdateRequiredScreen' import { enterBackground, enterForeground } from 'app/store/lifecycle/actions' +import { AppDrawerScreen } from '../app-drawer-screen' import { SplashScreen } from '../splash-screen' -import { HomeScreen } from './HomeScreen' - const { getHasAccount, getAccountStatus } = accountSelectors export type RootScreenParamList = { @@ -72,7 +71,7 @@ export const RootScreen = ({ isReadyToSetupBackend }: RootScreenProps) => { ) : !hasAccount ? ( ) : ( - + )} )} diff --git a/packages/mobile/src/services/remote-config/remote-config-instance.ts b/packages/mobile/src/services/remote-config/remote-config-instance.ts index a9a0ee3de7..acdff9d0e3 100644 --- a/packages/mobile/src/services/remote-config/remote-config-instance.ts +++ b/packages/mobile/src/services/remote-config/remote-config-instance.ts @@ -1,3 +1,4 @@ +import type { Environment } from '@audius/common' import { remoteConfig } from '@audius/common' import * as optimizely from '@optimizely/optimizely-sdk' import AsyncStorage from '@react-native-async-storage/async-storage' @@ -19,7 +20,8 @@ export const remoteConfigInstance = remoteConfig({ }, setFeatureFlagSessionId: async (id) => AsyncStorage.setItem(FEATURE_FLAG_ASYNC_STORAGE_SESSION_KEY, id.toString()), - setLogLevel: () => optimizely.setLogLevel('warn') + setLogLevel: () => optimizely.setLogLevel('warn'), + environment: Config.ENVIRONMENT as Environment }) remoteConfigInstance.init() diff --git a/packages/web/src/services/remote-config/remote-config-instance.ts b/packages/web/src/services/remote-config/remote-config-instance.ts index deecb9d437..92ed090943 100644 --- a/packages/web/src/services/remote-config/remote-config-instance.ts +++ b/packages/web/src/services/remote-config/remote-config-instance.ts @@ -1,4 +1,4 @@ -import { remoteConfig } from '@audius/common' +import { Environment, remoteConfig } from '@audius/common' import optimizely from '@optimizely/optimizely-sdk' export const FEATURE_FLAG_LOCAL_STORAGE_SESSION_KEY = 'featureFlagSessionId-2' @@ -32,7 +32,8 @@ export const remoteConfigInstance = remoteConfig({ FEATURE_FLAG_LOCAL_STORAGE_SESSION_KEY, id.toString() ), - setLogLevel: () => optimizely.setLogLevel('warn') + setLogLevel: () => optimizely.setLogLevel('warn'), + environment: process.env.REACT_APP_ENVIRONMENT as Environment }) remoteConfigInstance.init() From de388374ab9bf1f82116502ba50fdc993d17b6b2 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Wed, 12 Oct 2022 17:30:50 -0700 Subject: [PATCH 2/2] Remove icon menu --- packages/mobile/src/assets/images/iconMenu.svg | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 packages/mobile/src/assets/images/iconMenu.svg diff --git a/packages/mobile/src/assets/images/iconMenu.svg b/packages/mobile/src/assets/images/iconMenu.svg deleted file mode 100644 index 1437769646..0000000000 --- a/packages/mobile/src/assets/images/iconMenu.svg +++ /dev/null @@ -1,4 +0,0 @@ - - -