2021-05-23 22:40:42 +02:00
|
|
|
import analytics from '@components/analytics'
|
2021-05-12 22:45:51 +02:00
|
|
|
import Button from '@components/Button'
|
2021-12-15 23:08:51 +01:00
|
|
|
import Icon from '@components/Icon'
|
2021-05-12 22:45:51 +02:00
|
|
|
import { MenuContainer, MenuRow } from '@components/Menu'
|
2022-05-07 00:52:32 +02:00
|
|
|
import CustomText from '@components/Text'
|
2022-04-30 23:47:52 +02:00
|
|
|
import { useAppDispatch } from '@root/store'
|
2022-05-15 00:40:49 +02:00
|
|
|
import { isDevelopment } from '@utils/checkEnvironment'
|
2022-06-03 21:25:20 +02:00
|
|
|
import { getExpoToken } from '@utils/slices/appSlice'
|
2021-05-12 22:45:51 +02:00
|
|
|
import { updateInstancePush } from '@utils/slices/instances/updatePush'
|
|
|
|
import { updateInstancePushAlert } from '@utils/slices/instances/updatePushAlert'
|
|
|
|
import { updateInstancePushDecode } from '@utils/slices/instances/updatePushDecode'
|
|
|
|
import {
|
|
|
|
clearPushLoading,
|
|
|
|
getInstanceAccount,
|
|
|
|
getInstancePush,
|
|
|
|
getInstanceUri
|
|
|
|
} from '@utils/slices/instancesSlice'
|
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import layoutAnimation from '@utils/styles/layoutAnimation'
|
2021-12-15 23:08:51 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2021-05-12 22:45:51 +02:00
|
|
|
import * as Notifications from 'expo-notifications'
|
|
|
|
import * as WebBrowser from 'expo-web-browser'
|
|
|
|
import React, { useState, useEffect, useMemo } from 'react'
|
2021-05-11 21:38:48 +02:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-05-07 00:52:32 +02:00
|
|
|
import { AppState, Linking, ScrollView, View } from 'react-native'
|
2022-04-30 23:47:52 +02:00
|
|
|
import { useSelector } from 'react-redux'
|
2021-05-11 21:38:48 +02:00
|
|
|
|
2021-05-12 22:45:51 +02:00
|
|
|
const TabMePush: React.FC = () => {
|
2022-02-12 14:51:01 +01:00
|
|
|
const { colors } = useTheme()
|
2021-03-28 23:31:10 +02:00
|
|
|
const { t } = useTranslation('screenTabs')
|
2021-05-12 22:45:51 +02:00
|
|
|
const instanceAccount = useSelector(
|
|
|
|
getInstanceAccount,
|
|
|
|
(prev, next) => prev?.acct === next?.acct
|
|
|
|
)
|
|
|
|
const instanceUri = useSelector(getInstanceUri)
|
|
|
|
|
2022-04-30 23:47:52 +02:00
|
|
|
const dispatch = useAppDispatch()
|
2021-05-12 22:45:51 +02:00
|
|
|
const instancePush = useSelector(getInstancePush)
|
|
|
|
|
2022-05-15 00:40:49 +02:00
|
|
|
const [pushAvailable, setPushAvailable] = useState<boolean>()
|
2021-05-12 22:45:51 +02:00
|
|
|
const [pushEnabled, setPushEnabled] = useState<boolean>()
|
|
|
|
const [pushCanAskAgain, setPushCanAskAgain] = useState<boolean>()
|
|
|
|
const checkPush = async () => {
|
|
|
|
const settings = await Notifications.getPermissionsAsync()
|
|
|
|
layoutAnimation()
|
|
|
|
setPushEnabled(settings.granted)
|
|
|
|
setPushCanAskAgain(settings.canAskAgain)
|
|
|
|
}
|
2022-06-03 21:25:20 +02:00
|
|
|
const expoToken = useSelector(getExpoToken)
|
2021-05-12 22:45:51 +02:00
|
|
|
useEffect(() => {
|
2022-01-02 22:28:33 +01:00
|
|
|
if (isDevelopment) {
|
2022-05-15 00:40:49 +02:00
|
|
|
setPushAvailable(true)
|
2022-01-02 22:28:33 +01:00
|
|
|
} else {
|
2022-06-03 21:25:20 +02:00
|
|
|
setPushAvailable(!!expoToken)
|
2022-01-02 22:28:33 +01:00
|
|
|
}
|
|
|
|
|
2021-05-12 22:45:51 +02:00
|
|
|
checkPush()
|
2021-12-15 23:08:51 +01:00
|
|
|
const subscription = AppState.addEventListener('change', checkPush)
|
2021-05-12 22:45:51 +02:00
|
|
|
return () => {
|
2021-12-15 23:08:51 +01:00
|
|
|
subscription.remove()
|
2021-05-12 22:45:51 +02:00
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
dispatch(clearPushLoading())
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
const isLoading = instancePush?.global.loading || instancePush?.decode.loading
|
|
|
|
|
|
|
|
const alerts = useMemo(() => {
|
|
|
|
return instancePush?.alerts
|
2021-12-15 23:08:51 +01:00
|
|
|
? (
|
2022-05-29 01:57:15 +02:00
|
|
|
[
|
2021-12-15 23:08:51 +01:00
|
|
|
'follow',
|
2022-05-29 01:57:15 +02:00
|
|
|
'follow_request',
|
2021-12-15 23:08:51 +01:00
|
|
|
'favourite',
|
|
|
|
'reblog',
|
|
|
|
'mention',
|
2022-05-29 01:57:15 +02:00
|
|
|
'poll',
|
|
|
|
'status'
|
|
|
|
] as [
|
|
|
|
'follow',
|
|
|
|
'follow_request',
|
|
|
|
'favourite',
|
|
|
|
'reblog',
|
|
|
|
'mention',
|
|
|
|
'poll',
|
|
|
|
'status'
|
2021-12-15 23:08:51 +01:00
|
|
|
]
|
|
|
|
).map(alert => (
|
2021-05-12 22:45:51 +02:00
|
|
|
<MenuRow
|
|
|
|
key={alert}
|
|
|
|
title={t(`me.push.${alert}.heading`)}
|
|
|
|
switchDisabled={
|
|
|
|
!pushEnabled || !instancePush.global.value || isLoading
|
|
|
|
}
|
|
|
|
switchValue={instancePush?.alerts[alert].value}
|
2021-05-23 22:40:42 +02:00
|
|
|
switchOnValueChange={() => {
|
|
|
|
analytics(`me_push_${alert}`, {
|
|
|
|
current: instancePush?.alerts[alert].value,
|
|
|
|
new: !instancePush?.alerts[alert].value
|
|
|
|
})
|
2021-05-12 22:45:51 +02:00
|
|
|
dispatch(
|
|
|
|
updateInstancePushAlert({
|
|
|
|
changed: alert,
|
|
|
|
alerts: {
|
|
|
|
...instancePush?.alerts,
|
|
|
|
[alert]: {
|
|
|
|
...instancePush?.alerts[alert],
|
|
|
|
value: !instancePush?.alerts[alert].value
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
2021-05-23 22:40:42 +02:00
|
|
|
}}
|
2021-05-12 22:45:51 +02:00
|
|
|
/>
|
|
|
|
))
|
|
|
|
: null
|
|
|
|
}, [pushEnabled, instancePush?.global, instancePush?.alerts, isLoading])
|
2021-02-27 16:33:54 +01:00
|
|
|
|
|
|
|
return (
|
2021-05-12 22:45:51 +02:00
|
|
|
<ScrollView>
|
2022-05-14 22:20:21 +02:00
|
|
|
{!!pushAvailable ? (
|
2021-12-15 23:08:51 +01:00
|
|
|
<>
|
|
|
|
{pushEnabled === false ? (
|
|
|
|
<MenuContainer>
|
|
|
|
<Button
|
|
|
|
type='text'
|
|
|
|
content={
|
|
|
|
pushCanAskAgain
|
|
|
|
? t('me.push.enable.direct')
|
|
|
|
: t('me.push.enable.settings')
|
|
|
|
}
|
|
|
|
style={{
|
|
|
|
marginTop: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
marginHorizontal:
|
|
|
|
StyleConstants.Spacing.Global.PagePadding * 2
|
|
|
|
}}
|
|
|
|
onPress={async () => {
|
|
|
|
if (pushCanAskAgain) {
|
|
|
|
analytics('me_push_enabled_dialogue')
|
|
|
|
const result = await Notifications.requestPermissionsAsync()
|
|
|
|
setPushEnabled(result.granted)
|
|
|
|
setPushCanAskAgain(result.canAskAgain)
|
|
|
|
} else {
|
|
|
|
analytics('me_push_enabled_setting')
|
|
|
|
Linking.openSettings()
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</MenuContainer>
|
|
|
|
) : null}
|
|
|
|
<MenuContainer>
|
|
|
|
<MenuRow
|
|
|
|
title={t('me.push.global.heading', {
|
|
|
|
acct: `@${instanceAccount?.acct}@${instanceUri}`
|
|
|
|
})}
|
|
|
|
description={t('me.push.global.description')}
|
|
|
|
loading={instancePush?.global.loading}
|
|
|
|
switchDisabled={!pushEnabled || isLoading}
|
|
|
|
switchValue={
|
|
|
|
pushEnabled === false ? false : instancePush?.global.value
|
2021-05-12 22:45:51 +02:00
|
|
|
}
|
2021-12-15 23:08:51 +01:00
|
|
|
switchOnValueChange={() => {
|
|
|
|
analytics('me_push_global', {
|
|
|
|
current: instancePush?.global.value,
|
|
|
|
new: !instancePush?.global.value
|
|
|
|
})
|
|
|
|
dispatch(updateInstancePush(!instancePush?.global.value))
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</MenuContainer>
|
|
|
|
<MenuContainer>
|
|
|
|
<MenuRow
|
|
|
|
title={t('me.push.decode.heading')}
|
|
|
|
description={t('me.push.decode.description')}
|
|
|
|
loading={instancePush?.decode.loading}
|
|
|
|
switchDisabled={
|
|
|
|
!pushEnabled || !instancePush?.global.value || isLoading
|
|
|
|
}
|
|
|
|
switchValue={instancePush?.decode.value}
|
|
|
|
switchOnValueChange={() => {
|
|
|
|
analytics('me_push_decode', {
|
|
|
|
current: instancePush?.decode.value,
|
|
|
|
new: !instancePush?.decode.value
|
|
|
|
})
|
|
|
|
dispatch(updateInstancePushDecode(!instancePush?.decode.value))
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<MenuRow
|
|
|
|
title={t('me.push.howitworks')}
|
|
|
|
iconBack='ExternalLink'
|
|
|
|
onPress={() => {
|
|
|
|
analytics('me_push_howitworks')
|
|
|
|
WebBrowser.openBrowserAsync('https://tooot.app/how-push-works')
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</MenuContainer>
|
|
|
|
<MenuContainer>{alerts}</MenuContainer>
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
minHeight: '100%',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center'
|
2021-05-23 22:40:42 +02:00
|
|
|
}}
|
2021-12-15 23:08:51 +01:00
|
|
|
>
|
|
|
|
<Icon
|
|
|
|
name='Frown'
|
|
|
|
size={StyleConstants.Font.Size.L}
|
2022-02-12 14:51:01 +01:00
|
|
|
color={colors.primaryDefault}
|
2021-12-15 23:08:51 +01:00
|
|
|
/>
|
2022-05-07 00:52:32 +02:00
|
|
|
<CustomText fontStyle='M' style={{ color: colors.primaryDefault }}>
|
2021-12-15 23:08:51 +01:00
|
|
|
{t('me.push.notAvailable')}
|
2022-05-07 00:52:32 +02:00
|
|
|
</CustomText>
|
2021-12-15 23:08:51 +01:00
|
|
|
</View>
|
|
|
|
)}
|
2021-05-12 22:45:51 +02:00
|
|
|
</ScrollView>
|
2021-02-27 16:33:54 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-05-09 21:59:03 +02:00
|
|
|
export default TabMePush
|