diff --git a/packages/audius-mobile-client/src/App.tsx b/packages/audius-mobile-client/src/App.tsx
index 23e017e107..f7623e15db 100644
--- a/packages/audius-mobile-client/src/App.tsx
+++ b/packages/audius-mobile-client/src/App.tsx
@@ -20,6 +20,7 @@ import SignOnNav from './components/signon/NavigationStack'
import { WebRefContextProvider } from './components/web/WebRef'
import BottomBar from './components/bottom-bar'
import MobileUploadDrawer from './components/mobile-upload-drawer'
+import EnablePushNotificationsDrawer from './components/enable-push-notifications-drawer'
import CollectibleDetailsDrawer from './components/collectible-details-drawer'
const store = createStore()
@@ -71,6 +72,7 @@ const App = () => {
*/}
{/* */}
+
diff --git a/packages/audius-mobile-client/src/assets/images/iconCoSign.svg b/packages/audius-mobile-client/src/assets/images/iconCoSign.svg
new file mode 100644
index 0000000000..cb70b67e4e
--- /dev/null
+++ b/packages/audius-mobile-client/src/assets/images/iconCoSign.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/audius-mobile-client/src/assets/images/iconExploreNewReleases.svg b/packages/audius-mobile-client/src/assets/images/iconExploreNewReleases.svg
new file mode 100755
index 0000000000..3ae422149f
--- /dev/null
+++ b/packages/audius-mobile-client/src/assets/images/iconExploreNewReleases.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/packages/audius-mobile-client/src/assets/images/iconFollow.svg b/packages/audius-mobile-client/src/assets/images/iconFollow.svg
new file mode 100755
index 0000000000..252ceb3dd0
--- /dev/null
+++ b/packages/audius-mobile-client/src/assets/images/iconFollow.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/packages/audius-mobile-client/src/assets/images/iconGradientNotification.svg b/packages/audius-mobile-client/src/assets/images/iconGradientNotification.svg
new file mode 100644
index 0000000000..3e9a023a63
--- /dev/null
+++ b/packages/audius-mobile-client/src/assets/images/iconGradientNotification.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/packages/audius-mobile-client/src/components/animated-button/AnimatedButtonProvider.tsx b/packages/audius-mobile-client/src/components/animated-button/AnimatedButtonProvider.tsx
index 9cc9512e6f..a8c534434e 100644
--- a/packages/audius-mobile-client/src/components/animated-button/AnimatedButtonProvider.tsx
+++ b/packages/audius-mobile-client/src/components/animated-button/AnimatedButtonProvider.tsx
@@ -36,7 +36,7 @@ const AnimatedButton = ({
} else {
animationRef.current?.play(0, 0)
}
- }, [isActive])
+ }, [iconJSON, isActive])
const handleClick = useCallback(() => {
if (isDisabled) {
@@ -48,7 +48,7 @@ const AnimatedButton = ({
}
onClick()
- }, [isDisabled, onClick])
+ }, [isActive, isDisabled, onClick])
return (
{
// Actions
const dispatchWeb = useDispatchWeb()
- const openSignOn = () => {
+ const openSignOn = useCallback(() => {
dispatchWeb(_openSignOn(false))
dispatchWeb(showRequiresAccountModal())
- }
+ }, [dispatchWeb])
const goToRoute = (route: string) => dispatchWeb(push(route))
const resetExploreTab = () => dispatchWeb(setTab(Tabs.FOR_YOU))
const scrollToTop = () =>
diff --git a/packages/audius-mobile-client/src/components/button/Button.tsx b/packages/audius-mobile-client/src/components/button/Button.tsx
new file mode 100644
index 0000000000..42f2ec4b85
--- /dev/null
+++ b/packages/audius-mobile-client/src/components/button/Button.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { TouchableHighlight, ViewStyle, StyleSheet } from 'react-native'
+import { useThemeColors } from '../../utils/theme'
+import Text from '../../components/text'
+
+import { ThemeColors, useThemedStyles } from '../../hooks/useThemedStyles'
+
+const createStyles = (themeColors: ThemeColors) =>
+ StyleSheet.create({
+ button: {
+ backgroundColor: themeColors.primary,
+ borderRadius: 4,
+ display: 'flex',
+ alignItems: 'center',
+ padding: 16
+ },
+ text: {
+ color: themeColors.staticWhite,
+ fontSize: 16
+ }
+ })
+
+type ButtonProps = {
+ onPress: () => void
+ title: string
+ style?: ViewStyle
+}
+
+const Button = ({ style, onPress, title }: ButtonProps) => {
+ const styles = useThemedStyles(createStyles)
+ const { primaryDark1 } = useThemeColors()
+ return (
+
+
+ {title}
+
+
+ )
+}
+
+export default Button
diff --git a/packages/audius-mobile-client/src/components/button/index.ts b/packages/audius-mobile-client/src/components/button/index.ts
new file mode 100644
index 0000000000..3389ecb836
--- /dev/null
+++ b/packages/audius-mobile-client/src/components/button/index.ts
@@ -0,0 +1 @@
+export { default } from './Button'
diff --git a/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDate.tsx b/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDate.tsx
index c575219cff..fcf2051f1c 100644
--- a/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDate.tsx
+++ b/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDate.tsx
@@ -1,9 +1,10 @@
import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
import { formatDateWithTimezoneOffset } from 'audius-client/src/common/utils/timeUtil'
+import Text from '../../components/text'
import { ThemeColors, useThemedStyles } from '../../hooks/useThemedStyles'
const createStyles = (themeColors: ThemeColors) =>
@@ -16,8 +17,7 @@ const createStyles = (themeColors: ThemeColors) =>
},
dateTitle: {
- color: themeColors.neutralLight4,
- fontFamily: 'AvenirNextLTPro-Bold'
+ color: themeColors.neutralLight4
},
date: {
@@ -38,7 +38,9 @@ export const CollectibleDate = ({
return (
- {label}
+
+ {label}
+
{formatDateWithTimezoneOffset(date)}
)
diff --git a/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDetailsDrawer.tsx b/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDetailsDrawer.tsx
index 3af1e3340a..a0adb5afca 100644
--- a/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDetailsDrawer.tsx
+++ b/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDetailsDrawer.tsx
@@ -12,8 +12,9 @@ import { getCollectible } from 'audius-client/src/common/store/ui/collectible-de
import { Chain } from 'audius-client/src/common/models/Chain'
import { useDispatchWeb } from '../../hooks/useDispatchWeb'
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
import { ThemeColors, useThemedStyles } from '../../hooks/useThemedStyles'
+import Text from '../../components/text'
import { CollectibleMedia } from './CollectibleMedia'
import { CollectibleDate } from './CollectibleDate'
@@ -34,13 +35,10 @@ const createStyles = (themeColors: ThemeColors) =>
},
detailsDescription: {
- color: themeColors.neutralLight2,
marginBottom: 24
},
detailsTitle: {
- color: themeColors.neutral,
- fontFamily: 'AvenirNextLTPro-Bold',
textAlign: 'center',
fontSize: 16,
marginBottom: 24
@@ -56,7 +54,6 @@ const createStyles = (themeColors: ThemeColors) =>
badge: {
color: themeColors.white,
- fontFamily: 'AvenirNextLTPro-Bold',
textAlign: 'center',
paddingTop: 4,
paddingRight: 8,
@@ -120,13 +117,16 @@ const CollectibleDetails = () => {
- {collectible.name}
+
+ {collectible.name}
+
{collectible.isOwned ? messages.owned : messages.created}
diff --git a/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleLink.tsx b/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleLink.tsx
index 5b5cd07302..99651e6b68 100644
--- a/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleLink.tsx
+++ b/packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleLink.tsx
@@ -3,13 +3,13 @@ import React, { useCallback } from 'react'
import {
Linking,
StyleSheet,
- Text,
TouchableWithoutFeedback,
View
} from 'react-native'
import IconLink from '../../assets/images/iconLink.svg'
-import { useColor } from '../../utils/theme'
+import Text from '../../components/text'
+import { useThemeColors } from '../../utils/theme'
import { ThemeColors, useThemedStyles } from '../../hooks/useThemedStyles'
const createStyles = (themeColors: ThemeColors) =>
@@ -23,7 +23,6 @@ const createStyles = (themeColors: ThemeColors) =>
linkText: {
color: themeColors.secondary,
- fontFamily: 'AvenirNextLTPro-Heavy',
textDecorationLine: 'underline'
},
@@ -44,18 +43,20 @@ export const CollectibleLink = ({
Linking.openURL(url)
}, [url])
- const secondaryColor = useColor('secondary')
+ const { secondary } = useThemeColors()
return (
- {text}
+
+ {text}
+
)
diff --git a/packages/audius-mobile-client/src/components/drawer/Drawer.tsx b/packages/audius-mobile-client/src/components/drawer/Drawer.tsx
index 8472db1203..7192c1c233 100644
--- a/packages/audius-mobile-client/src/components/drawer/Drawer.tsx
+++ b/packages/audius-mobile-client/src/components/drawer/Drawer.tsx
@@ -13,6 +13,7 @@ import {
PanResponder,
StyleSheet,
TouchableOpacity,
+ TouchableWithoutFeedback,
View
} from 'react-native'
import { Portal } from '@gorhom/portal'
@@ -68,6 +69,14 @@ const createStyles = (themeColors: ThemeColors) =>
}
},
+ background: {
+ position: 'absolute',
+ top: 0,
+ height: '100%',
+ width: '100%',
+ opacity: 0
+ },
+
skirt: {
backgroundColor: themeColors.neutralLight10,
width: '100%',
@@ -201,10 +210,6 @@ const Drawer = ({ isOpen, children, onClose, isFullscreen }: DrawerProps) => {
}
})
- // TODO: sk - click outside
- // NOTE: This is currently handled by the web app
- // const clickOutsideRef = useClickOutside(() => close())
-
// NOTE: sk - Need to interpolate the border radius bc of a funky
// issue with border radius under 1 in ios
const interpolatedBorderRadius = borderRadiusAnim.interpolate({
@@ -214,47 +219,54 @@ const Drawer = ({ isOpen, children, onClose, isFullscreen }: DrawerProps) => {
return (
-
-
- {
- if (!isFullscreen) {
- const { height } = event.nativeEvent.layout
- setDrawerHeight(height)
- }
- }}
- >
- {isFullscreen && (
-
-
-
- )}
- {children}
-
-
-
-
+ <>
+ {isOpen && (
+
+
+
+ )}
+
+
+ {
+ if (!isFullscreen) {
+ const { height } = event.nativeEvent.layout
+ setDrawerHeight(height)
+ }
+ }}
+ >
+ {isFullscreen && (
+
+
+
+ )}
+ {children}
+
+
+
+
+
)
}
diff --git a/packages/audius-mobile-client/src/components/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx b/packages/audius-mobile-client/src/components/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx
new file mode 100644
index 0000000000..a1ec739051
--- /dev/null
+++ b/packages/audius-mobile-client/src/components/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx
@@ -0,0 +1,204 @@
+import React, { useCallback } from 'react'
+
+import { StyleSheet, View } from 'react-native'
+
+import IconNotification from '../../assets/images/iconGradientNotification.svg'
+import IconHeart from '../../assets/images/iconHeart.svg'
+import IconRepost from '../../assets/images/iconRepost.svg'
+import IconRemix from '../../assets/images/iconRemix.svg'
+import IconExploreNewReleases from '../../assets/images/iconExploreNewReleases.svg'
+import IconFollow from '../../assets/images/iconFollow.svg'
+import IconCoSign from '../../assets/images/iconCoSign.svg'
+
+import Button from '../../components/button'
+import Drawer from '../../components/drawer'
+import Text from '../../components/text'
+
+// Importing directly from audius-client temporarily until
+// settings page is migrated because we still need push notification logic to work
+// on settings page and it doesn't necessarily make sense in common
+import { togglePushNotificationSetting } from 'audius-client/src/containers/settings-page/store/actions'
+import { PushNotificationSetting } from 'audius-client/src/containers/settings-page/store/types'
+
+import { useDrawer } from '../../hooks/useDrawer'
+import { ThemeColors, useThemedStyles } from '../../hooks/useThemedStyles'
+import { useThemeColors } from '../../utils/theme'
+import LinearGradient from 'react-native-linear-gradient'
+import MaskedView from '@react-native-masked-view/masked-view'
+import { useDispatchWeb } from '../../hooks/useDispatchWeb'
+
+const messages = {
+ dontMiss: "Don't Miss a Beat!",
+ turnOn: 'Turn on Notifications',
+ favorites: 'Favorites',
+ reposts: 'Reposts',
+ followers: 'Followers',
+ coSigns: 'Co-Signs',
+ remixes: 'Remixes',
+ newReleases: 'New Releases',
+ enable: 'Enable Notifications'
+}
+
+const actions = [
+ {
+ label: messages.favorites,
+ icon: IconHeart
+ },
+ {
+ label: messages.reposts,
+ icon: IconRepost
+ },
+ {
+ label: messages.followers,
+ icon: IconFollow
+ },
+ {
+ label: messages.coSigns,
+ icon: IconCoSign
+ },
+ {
+ label: messages.remixes,
+ icon: IconRemix
+ },
+ {
+ label: messages.newReleases,
+ icon: IconExploreNewReleases
+ }
+]
+
+const createStyles = (themeColors: ThemeColors) =>
+ StyleSheet.create({
+ drawer: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-evenly',
+ alignItems: 'center',
+ paddingTop: 32,
+ paddingBottom: 64
+ },
+
+ cta: {
+ marginTop: 16,
+ fontSize: 28
+ },
+
+ turnOn: {
+ color: themeColors.neutral,
+ fontSize: 24,
+ lineHeight: 29,
+ marginTop: 4
+ },
+
+ top: {
+ marginBottom: 32,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center'
+ },
+
+ actions: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'flex-start',
+ marginBottom: 32
+ },
+
+ action: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginBottom: 12
+ },
+
+ actionText: {
+ fontSize: 24,
+ color: themeColors.neutralLight2
+ },
+
+ actionIcon: {
+ marginRight: 16
+ },
+
+ button: {
+ width: '100%'
+ }
+ })
+
+const EnablePushNotificationsDrawer = () => {
+ const dispatchWeb = useDispatchWeb()
+ const [isOpen, setIsOpen] = useDrawer('EnablePushNotifications')
+ const styles = useThemedStyles(createStyles)
+ const {
+ background,
+ neutralLight2,
+ pageHeaderGradientColor1,
+ pageHeaderGradientColor2
+ } = useThemeColors()
+
+ const onClose = useCallback(() => {
+ setIsOpen(false)
+ }, [setIsOpen])
+
+ const enablePushNotifications = useCallback(() => {
+ dispatchWeb(
+ togglePushNotificationSetting(PushNotificationSetting.MobilePush, true)
+ )
+ onClose()
+ }, [dispatchWeb, onClose])
+
+ return (
+
+
+
+
+
+ {messages.dontMiss}
+
+ }
+ >
+
+
+ {messages.dontMiss}
+
+
+
+ {messages.turnOn}
+
+
+ {actions.map(({ label, icon: Icon }) => (
+
+
+
+ {label}
+
+
+ ))}
+
+
+
+
+ )
+}
+
+export default EnablePushNotificationsDrawer
diff --git a/packages/audius-mobile-client/src/components/enable-push-notifications-drawer/index.ts b/packages/audius-mobile-client/src/components/enable-push-notifications-drawer/index.ts
new file mode 100644
index 0000000000..010e2c259f
--- /dev/null
+++ b/packages/audius-mobile-client/src/components/enable-push-notifications-drawer/index.ts
@@ -0,0 +1 @@
+export { default } from './EnablePushNotificationsDrawer'
diff --git a/packages/audius-mobile-client/src/components/mobile-upload-drawer/MobileUploadDrawer.tsx b/packages/audius-mobile-client/src/components/mobile-upload-drawer/MobileUploadDrawer.tsx
index ab1ef79526..2c4d00def5 100644
--- a/packages/audius-mobile-client/src/components/mobile-upload-drawer/MobileUploadDrawer.tsx
+++ b/packages/audius-mobile-client/src/components/mobile-upload-drawer/MobileUploadDrawer.tsx
@@ -1,18 +1,18 @@
import React from 'react'
-import { Image, StyleSheet, Text, View } from 'react-native'
+import { Image, StyleSheet, View } from 'react-native'
import MaskedView from '@react-native-masked-view/masked-view'
import IconUpload from '../../assets/images/iconGradientUpload.svg'
import HeavyCheckMark from '../../assets/images/emojis/white-heavy-check-mark.png'
+import Text from '../../components/text'
import { getIsOpen } from 'audius-client/src/common/store/ui/mobile-upload-drawer/selectors'
import { hide } from 'audius-client/src/common/store/ui/mobile-upload-drawer/slice'
import Drawer from '../drawer'
-import { getIsKeyboardOpen } from '../../store/keyboard/selectors'
import { useSelectorWeb } from '../../hooks/useSelectorWeb'
import { useDispatchWeb } from '../../hooks/useDispatchWeb'
-import { useColor, useTheme } from '../../utils/theme'
+import { useThemeColors } from '../../utils/theme'
import LinearGradient from 'react-native-linear-gradient'
const styles = StyleSheet.create({
@@ -25,14 +25,8 @@ const styles = StyleSheet.create({
padding: 16
},
- iconUpload: {
- width: 66,
- height: 66
- },
-
cta: {
marginTop: 16,
- fontFamily: 'AvenirNextLTPro-Heavy',
fontSize: 32,
lineHeight: 34,
textAlign: 'center'
@@ -63,7 +57,6 @@ const styles = StyleSheet.create({
},
actionLabel: {
- fontFamily: 'AvenirNextLTPro-Bold',
fontSize: 24,
lineHeight: 40
},
@@ -88,15 +81,10 @@ const MobileUploadDrawer = () => {
const dispatchWeb = useDispatchWeb()
const close = () => dispatchWeb(hide())
- const bodyTextColorStyle = useTheme(
- {},
- {
- color: 'neutral'
- }
- )
-
- const gradientColor1 = useColor('pageHeaderGradientColor1')
- const gradientColor2 = useColor('pageHeaderGradientColor2')
+ const {
+ pageHeaderGradientColor1,
+ pageHeaderGradientColor2
+ } = useThemeColors()
const CheckMark = () => (
@@ -109,32 +97,38 @@ const MobileUploadDrawer = () => {
{messages.start}}
+ maskElement={
+
+ {messages.start}
+
+ }
>
- {messages.start}
+
+ {messages.start}
+
-
- {messages.visit}
-
+ {messages.visit}
{[messages.unlimited, messages.clear, messages.exclusive].map(m => (
- {m}
+
+ {m}
+
))}
diff --git a/packages/audius-mobile-client/src/components/notification-reminder/NotificationReminder.tsx b/packages/audius-mobile-client/src/components/notification-reminder/NotificationReminder.tsx
index b409bf12bc..08a51d6778 100644
--- a/packages/audius-mobile-client/src/components/notification-reminder/NotificationReminder.tsx
+++ b/packages/audius-mobile-client/src/components/notification-reminder/NotificationReminder.tsx
@@ -1,21 +1,18 @@
-import React, { RefObject, useCallback } from 'react'
+import React, { useCallback } from 'react'
import { checkNotifications, RESULTS } from 'react-native-permissions'
-import { MessagePostingWebView } from '../../types/MessagePostingWebView'
-import { postMessage as postMessageUtil } from '../../utils/postMessage'
+import { useDrawer } from '../../hooks/useDrawer'
import useSessionCount from '../../hooks/useSessionCount'
-import { Message, MessageType } from '../../message'
const REMINDER_EVERY_N_SESSIONS = 10
type OwnProps = {
- webRef: RefObject
isSignedIn: boolean
}
-const NotificationReminderWrapper = ({ webRef, isSignedIn }: OwnProps) => {
+const NotificationReminderWrapper = ({ isSignedIn }: OwnProps) => {
if (isSignedIn) {
- return
+ return
}
return null
}
@@ -23,7 +20,7 @@ const NotificationReminderWrapper = ({ webRef, isSignedIn }: OwnProps) => {
// Sends a notification to the WebApp to turn on push notifications if we're in the DENIED
// state. Is called from the `NotificationsReminder` component as well as `handleMessage`
export const remindUserToTurnOnNotifications = (
- postMessage: (message: Message) => void
+ setIsReminderOpen: (isVisible: boolean) => void
) => {
checkNotifications()
.then(({ status }) => {
@@ -48,10 +45,7 @@ export const remindUserToTurnOnNotifications = (
case RESULTS.DENIED:
// The permission has not been requested or has been denied but it still requestable
// Appeal to the user to enable notifications
- postMessage({
- type: MessageType.ENABLE_PUSH_NOTIFICATIONS_REMINDER,
- isAction: true
- })
+ setIsReminderOpen(true)
}
})
.catch(error => {
@@ -60,20 +54,16 @@ export const remindUserToTurnOnNotifications = (
})
}
-const NotificationReminder = ({
- webRef
-}: {
- webRef: RefObject
-}) => {
+const NotificationReminder = () => {
+ const [_, setIsOpen] = useDrawer('EnablePushNotifications')
+
// Sets up reminders to turn on push notifications
const reminder = useCallback(() => {
- const sender = webRef.current
- if (!sender) return
- remindUserToTurnOnNotifications((msg: Message) =>
- postMessageUtil(sender, msg)
- )
- }, [webRef])
+ remindUserToTurnOnNotifications(setIsOpen)
+ }, [setIsOpen])
+
useSessionCount(reminder, REMINDER_EVERY_N_SESSIONS)
+
// No UI component
return null
}
diff --git a/packages/audius-mobile-client/src/components/signon/SignOn.tsx b/packages/audius-mobile-client/src/components/signon/SignOn.tsx
index d8915295e1..53daff242e 100644
--- a/packages/audius-mobile-client/src/components/signon/SignOn.tsx
+++ b/packages/audius-mobile-client/src/components/signon/SignOn.tsx
@@ -35,8 +35,10 @@ import {
import { getIsSignedIn, getDappLoaded } from '../../store/lifecycle/selectors'
import { track, make } from '../../utils/analytics'
import { EventNames } from '../../types/analytics'
+import { setVisibility } from '../../store/drawers/slice'
import { RootStackParamList } from './NavigationStack'
import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import { remindUserToTurnOnNotifications } from '../../components/notification-reminder/NotificationReminder'
const image = backgImage
const windowWidth = Dimensions.get('window').width
@@ -361,6 +363,9 @@ const SignOn = ({ navigation }: SignOnProps) => {
const emailIsValid = useSelector(getEmailIsValid)
const emailStatus = useSelector(getEmailStatus)
+ const setPushNotificationsReminderVisible = (visible: boolean) =>
+ dispatch(setVisibility({ drawer: 'EnablePushNotifications', visible }))
+
const topDrawer = useRef(new Animated.Value(-800)).current
const animateDrawer = useCallback(() => {
Animated.timing(topDrawer, {
@@ -401,8 +406,12 @@ const SignOn = ({ navigation }: SignOnProps) => {
setIsWorking(false)
setEmail('')
setPassword('')
+
+ if (isSignin) {
+ remindUserToTurnOnNotifications(setPushNotificationsReminderVisible)
+ }
}
- }, [signedIn])
+ }, [signedIn, isSignin])
useEffect(() => {
if (dappLoaded) {
diff --git a/packages/audius-mobile-client/src/components/text/Text.tsx b/packages/audius-mobile-client/src/components/text/Text.tsx
new file mode 100644
index 0000000000..d6984afaa1
--- /dev/null
+++ b/packages/audius-mobile-client/src/components/text/Text.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { Text as RNText } from 'react-native'
+import { useThemeColors } from '../../utils/theme'
+
+const fontByWeight = {
+ heavy: 'AvenirNextLTPro-Heavy',
+ bold: 'AvenirNextLTPro-Bold',
+ medium: 'AvenirNextLTPro-Medium',
+ regular: 'AvenirNextLTPro-Regular',
+ light: 'AvenirNextLTPro-Light',
+ thin: 'AvenirNextLTPro-Thin',
+ ultraLight: 'AvenirNextLTPro-UltLt'
+}
+
+type Props = {
+ children: React.ReactNode
+ weight?: keyof typeof fontByWeight
+} & ConstructorParameters[0]
+
+/**
+ * A custom Text component that applies the default font family and color
+ */
+const Text = ({ children, weight = 'regular', style, ...props }: Props) => {
+ const { neutral } = useThemeColors()
+ return (
+
+ {children}
+
+ )
+}
+
+export default Text
diff --git a/packages/audius-mobile-client/src/components/text/index.ts b/packages/audius-mobile-client/src/components/text/index.ts
new file mode 100644
index 0000000000..e1e5fa74e1
--- /dev/null
+++ b/packages/audius-mobile-client/src/components/text/index.ts
@@ -0,0 +1 @@
+export { default } from './Text'
diff --git a/packages/audius-mobile-client/src/hooks/useDispatchWeb.ts b/packages/audius-mobile-client/src/hooks/useDispatchWeb.ts
index 3ae1317ceb..42a8c79eb8 100644
--- a/packages/audius-mobile-client/src/hooks/useDispatchWeb.ts
+++ b/packages/audius-mobile-client/src/hooks/useDispatchWeb.ts
@@ -1,7 +1,6 @@
import { useCallback, useContext } from 'react'
import { WebRefContext } from '../components/web/WebRef'
import { postMessage } from '../utils/postMessage'
-import { MessageType } from '../message'
// When mobile-client is no longer dependent on the web client
// calls to useDispatchWeb can be replaced with useDispatch
diff --git a/packages/audius-mobile-client/src/hooks/useDrawer.ts b/packages/audius-mobile-client/src/hooks/useDrawer.ts
new file mode 100644
index 0000000000..485cf6322b
--- /dev/null
+++ b/packages/audius-mobile-client/src/hooks/useDrawer.ts
@@ -0,0 +1,23 @@
+import { Drawer, setVisibility } from '../store/drawers/slice'
+import { getVisibility } from '../store/drawers/selectors'
+import { useDispatch, useSelector } from 'react-redux'
+
+/**
+ * Hook to get and set the visibility of a drawer
+ * @param drawer
+ * @returns [isOpen, setIsOpen]
+ *
+ * Example:
+ *
+ * const [isOpen, setIsOpen] = useDrawer('EnablePushNotificationsReminder')
+ */
+export const useDrawer = (
+ drawer: Drawer
+): [boolean, (isVisible: boolean) => void] => {
+ const dispatch = useDispatch()
+ const isOpen = useSelector(getVisibility(drawer))
+ const setIsOpen = (visible: boolean) =>
+ dispatch(setVisibility({ drawer, visible }))
+
+ return [isOpen, setIsOpen]
+}
diff --git a/packages/audius-mobile-client/src/hooks/useSessionCount.ts b/packages/audius-mobile-client/src/hooks/useSessionCount.ts
index 69c1d7e8b3..9f9393e5f8 100644
--- a/packages/audius-mobile-client/src/hooks/useSessionCount.ts
+++ b/packages/audius-mobile-client/src/hooks/useSessionCount.ts
@@ -25,7 +25,7 @@ const useSessionCount = (
startAt = 1
) => {
// Memoize each time the callback is invoked to guard against callback
- // being redefined each rernder and over triggering
+ // being redefined each rerender and over triggering
const [calledAtCount, setCalledAtCount] = useState(null)
useEffect(() => {
diff --git a/packages/audius-mobile-client/src/message/handlers/notification.ts b/packages/audius-mobile-client/src/message/handlers/notification.ts
index 90afb9c547..ce1e9f85e0 100644
--- a/packages/audius-mobile-client/src/message/handlers/notification.ts
+++ b/packages/audius-mobile-client/src/message/handlers/notification.ts
@@ -1,9 +1,10 @@
import * as notificationsActions from '../../store/notifications/actions'
import PushNotifications from '../../notifications'
-import { remindUserToTurnOnNotifications } from '../../components/notification-reminder/NotificationReminder'
import { Status } from '../../types/status'
import { MessageType, MessageHandlers } from '../types'
+import { setVisibility } from '../../store/drawers/slice'
+import { remindUserToTurnOnNotifications } from '../../components/notification-reminder/NotificationReminder'
export const messageHandlers: Partial = {
[MessageType.ENABLE_PUSH_NOTIFICATIONS]: async ({ message, postMessage }) => {
@@ -30,8 +31,10 @@ export const messageHandlers: Partial = {
[MessageType.RESET_NOTIFICATIONS_BADGE_COUNT]: () => {
PushNotifications.setBadgeCount(0)
},
- [MessageType.PROMPT_PUSH_NOTIFICATION_REMINDER]: ({ postMessage }) => {
- remindUserToTurnOnNotifications(postMessage)
+ [MessageType.PROMPT_PUSH_NOTIFICATION_REMINDER]: ({ dispatch }) => {
+ const setVisible = (visible: boolean) =>
+ dispatch(setVisibility({ drawer: 'EnablePushNotifications', visible }))
+ remindUserToTurnOnNotifications(setVisible)
},
[MessageType.OPEN_NOTIFICATIONS]: ({ dispatch, postMessage }) => {
dispatch(notificationsActions.open())
diff --git a/packages/audius-mobile-client/src/store/drawers/selectors.ts b/packages/audius-mobile-client/src/store/drawers/selectors.ts
new file mode 100644
index 0000000000..dddb8147fb
--- /dev/null
+++ b/packages/audius-mobile-client/src/store/drawers/selectors.ts
@@ -0,0 +1,9 @@
+import { AppState } from '../'
+
+import { Drawer } from './slice'
+
+export const getVisibility = (drawer: Drawer) => (state: AppState) =>
+ state.drawers[drawer]
+
+export const getIsOpen = (state: AppState) =>
+ Object.values(state.drawers).some(isOpen => isOpen)
diff --git a/packages/audius-mobile-client/src/store/drawers/slice.ts b/packages/audius-mobile-client/src/store/drawers/slice.ts
new file mode 100644
index 0000000000..49f17186cb
--- /dev/null
+++ b/packages/audius-mobile-client/src/store/drawers/slice.ts
@@ -0,0 +1,30 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export type Drawer = 'EnablePushNotifications'
+
+export type DrawersState = { [drawer in Drawer]: boolean }
+
+const initialState: DrawersState = {
+ EnablePushNotifications: false
+}
+
+const slice = createSlice({
+ name: 'DRAWERS',
+ initialState,
+ reducers: {
+ setVisibility: (
+ state,
+ action: PayloadAction<{
+ drawer: Drawer
+ visible: boolean
+ }>
+ ) => {
+ const { drawer, visible } = action.payload
+ state[drawer] = visible
+ }
+ }
+})
+
+export const { setVisibility } = slice.actions
+
+export default slice.reducer
diff --git a/packages/audius-mobile-client/src/store/index.ts b/packages/audius-mobile-client/src/store/index.ts
index 72d2473024..c64faea86d 100644
--- a/packages/audius-mobile-client/src/store/index.ts
+++ b/packages/audius-mobile-client/src/store/index.ts
@@ -1,3 +1,4 @@
+import { CommonState } from 'audius-client/src/common/store'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { composeWithDevTools } from 'redux-devtools-extension'
@@ -11,6 +12,7 @@ import notifications, { NotificationsState } from './notifications/reducer'
import search, { SearchState } from './search/reducer'
import signon, { SignonState } from './signon/reducer'
import theme, { ThemeState } from './theme/reducer'
+import drawers, { DrawersState } from './drawers/slice'
import clientStore from './clientStore/slice'
import rootSaga from './sagas'
@@ -18,30 +20,32 @@ import { KeyboardState } from './keyboard/slice'
export type AppState = {
audio: AudioState
- web: WebState
- oauth: OAuthState
- lifecycle: LifecycleState
+ clientStore: CommonState
+ drawers: DrawersState
googleCast: GoogleCastState
+ keyboard: KeyboardState
+ lifecycle: LifecycleState
notifications: NotificationsState
- theme: ThemeState
+ oauth: OAuthState
search: SearchState
- clientStore: any
- keyboard: KeyboardState
signon: SignonState
+ theme: ThemeState
+ web: WebState
}
const createRootReducer = () =>
combineReducers({
- clientStore,
audio,
- web,
- oauth,
- lifecycle,
+ clientStore,
+ drawers,
googleCast,
+ lifecycle,
notifications,
- theme,
+ oauth,
search,
- signon
+ signon,
+ theme,
+ web
})
export default () => {