octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added notifications filter

This commit is contained in:
Zhiyuan Zheng 2021-03-17 15:30:28 +01:00
parent d03d5600ec
commit 03b312fefe
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
20 changed files with 390 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/@types/react-navigation.d.ts vendored
View File

@ -12,6 +12,9 @@ declare namespace Nav {
type: 'account'
account: Mastodon.Account
}
| {
type: 'notifications_filter'
}
'Screen-Announcements': { showAll: boolean }
'Screen-Compose':
| {

2
src/api/general.ts
View File

@ -9,7 +9,7 @@ export type Params = {
domain?: string
url: string
params?: {
[key: string]: string | number | boolean
[key: string]: string | number | boolean | string[] | number[] | boolean[]
}
headers?: { [key: string]: string }
body?: FormData | Object

2
src/api/instance.ts
View File

@ -10,7 +10,7 @@ export type Params = {
version?: 'v1' | 'v2'
url: string
params?: {
[key: string]: string | number | boolean
[key: string]: string | number | boolean | string[] | number[] | boolean[]
}
headers?: { [key: string]: string }
body?: FormData

1
src/i18n/en/_all.ts
View File

@ -32,5 +32,6 @@ export default {
componentRelativeTime: require('./components/relativeTime').default,
componentTimeline: require('./components/timeline').default,
screenActions: require('./screens/screenActions').default,
screenImageViewer: require('./screens/screenImageViewer').default
}

1
src/i18n/en/common.ts
View File

@ -15,6 +15,7 @@ export default {
localCorrupt: 'Login expired, please login again'
},
buttons: {
apply: 'Apply',
cancel: 'Cancel'
},
toastMessage: {

19
src/i18n/en/screens/screenActions.ts Normal file
View File

@ -0,0 +1,19 @@
export default {
content: {
button: {
apply: '$t(common:buttons.apply)',
cancel: '$t(common:buttons.cancel)'
},
notificationsFilter: {
heading: 'Show notification types',
content: {
follow: '$t(meSettingsPush:content.follow.heading)',
favourite: '$t(meSettingsPush:content.favourite.heading)',
reblog: '$t(meSettingsPush:content.reblog.heading)',
mention: '$t(meSettingsPush:content.mention.heading)',
poll: '$t(meSettingsPush:content.poll.heading)',
follow_request: 'Follow request'
}
}
}
}

1
src/i18n/zh-Hans/_all.ts
View File

@ -32,5 +32,6 @@ export default {
componentRelativeTime: require('./components/relativeTime').default,
componentTimeline: require('./components/timeline').default,
screenActions: require('./screens/screenActions').default,
screenImageViewer: require('./screens/screenImageViewer').default
}

1
src/i18n/zh-Hans/common.ts
View File

@ -14,6 +14,7 @@ export default {
localCorrupt: '登录已过期，请重新登录'
},
buttons: {
apply: '应用',
cancel: '取消'
},
toastMessage: {

19
src/i18n/zh-Hans/screens/screenActions.ts Normal file
View File

@ -0,0 +1,19 @@
export default {
content: {
button: {
apply: '$t(common:buttons.apply)',
cancel: '$t(common:buttons.cancel)'
},
notificationsFilter: {
heading: '显示通知',
content: {
follow: '$t(meSettingsPush:content.follow.heading)',
favourite: '$t(meSettingsPush:content.favourite.heading)',
reblog: '$t(meSettingsPush:content.reblog.heading)',
mention: '$t(meSettingsPush:content.mention.heading)',
poll: '$t(meSettingsPush:content.poll.heading)',
follow_request: '关注请求'
}
}
}
}

94
src/screens/Actions/NotificationsFilter.tsx Normal file
View File

@ -0,0 +1,94 @@
import Button from '@components/Button'
import MenuContainer from '@components/Menu/Container'
import MenuHeader from '@components/Menu/Header'
import MenuRow from '@components/Menu/Row'
import { useNavigation } from '@react-navigation/native'
import {
getInstanceNotificationsFilter,
updateInstanceNotificationsFilter
} from '@utils/slices/instancesSlice'
import { StyleConstants } from '@utils/styles/constants'
import React, { useMemo } from 'react'
import { StyleSheet } from 'react-native'
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { useQueryClient } from 'react-query'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
const ActionsNotificationsFilter: React.FC = () => {
const navigation = useNavigation()
const { t } = useTranslation('screenActions')
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Notifications' }]
const queryClient = useQueryClient()
const dispatch = useDispatch()
const instanceNotificationsFilter = useSelector(
getInstanceNotificationsFilter
)
if (!instanceNotificationsFilter) {
navigation.goBack()
return null
}
const options = useMemo(() => {
return (
instanceNotificationsFilter &&
([
'follow',
'favourite',
'reblog',
'mention',
'poll',
'follow_request'
] as [
'follow',
'favourite',
'reblog',
'mention',
'poll',
'follow_request'
]).map(type => (
<MenuRow
key={type}
title={t(`content.notificationsFilter.content.${type}`)}
switchValue={instanceNotificationsFilter[type]}
switchOnValueChange={() =>
dispatch(
updateInstanceNotificationsFilter({
...instanceNotificationsFilter,
[type]: !instanceNotificationsFilter[type]
})
)
}
/>
))
)
}, [instanceNotificationsFilter])
return (
<>
<MenuContainer>
<MenuHeader heading={t(`content.notificationsFilter.heading`)} />
{options}
</MenuContainer>
<Button
type='text'
content={t('content.button.apply')}
onPress={() => {
queryClient.resetQueries(queryKey)
}}
style={styles.button}
/>
</>
)
}
const styles = StyleSheet.create({
button: {
marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
}
})
export default ActionsNotificationsFilter

39
src/screens/Actions/Root.tsx
View File

@ -28,6 +28,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useSelector } from 'react-redux'
import ActionsAccount from './Account'
import ActionsDomain from './Domain'
import ActionsNotificationsFilter from './NotificationsFilter'
import ActionsShare from './Share'
import ActionsStatus from './Status'
@ -40,21 +41,21 @@ const ScreenActionsRoot = React.memo(
({ route: { params }, navigation }: ScreenAccountProp) => {
const { t } = useTranslation()
const localAccount = useSelector(
const instanceAccount = useSelector(
getInstanceAccount,
(prev, next) => prev?.id === next?.id
)
let sameAccount = false
switch (params.type) {
case 'status':
sameAccount = localAccount?.id === params.status.account.id
sameAccount = instanceAccount?.id === params.status.account.id
break
case 'account':
sameAccount = localAccount?.id === params.account.id
sameAccount = instanceAccount?.id === params.account.id
break
}
const localDomain = useSelector(getInstanceUrl)
const instanceDomain = useSelector(getInstanceUrl)
let sameDomain = true
let statusDomain: string
switch (params.type) {
@ -62,7 +63,7 @@ const ScreenActionsRoot = React.memo(
statusDomain = params.status.uri
? params.status.uri.split(new RegExp(/\/\/(.*?)\//))[1]
: ''
sameDomain = localDomain === statusDomain
sameDomain = instanceDomain === statusDomain
break
}
@ -86,7 +87,6 @@ const ScreenActionsRoot = React.memo(
}
})
const dismiss = useCallback(() => {
panY.value = withTiming(DEFAULT_VALUE)
navigation.goBack()
}, [])
const onGestureEvent = useAnimatedGestureHandler({
@ -137,6 +137,14 @@ const ScreenActionsRoot = React.memo(
type={params.type}
dismiss={dismiss}
/>
<Button
type='text'
content={t('common:buttons.cancel')}
onPress={() => {
analytics('bottomsheet_acknowledge')
}}
style={styles.button}
/>
</>
)
case 'account':
@ -150,8 +158,18 @@ const ScreenActionsRoot = React.memo(
type={params.type}
dismiss={dismiss}
/>
<Button
type='text'
content={t('common:buttons.cancel')}
onPress={() => {
analytics('bottomsheet_acknowledge')
}}
style={styles.button}
/>
</>
)
case 'notifications_filter':
return <ActionsNotificationsFilter />
}
}, [])
@ -188,15 +206,6 @@ const ScreenActionsRoot = React.memo(
]}
/>
{actions}
<Button
type='text'
content={t('common:buttons.cancel')}
onPress={() => {
analytics('bottomsheet_cancel')
// dismiss()
}}
style={styles.button}
/>
</Animated.View>
</PanGestureHandler>
</Animated.View>

4
src/screens/Tabs/Local.tsx
View File

@ -20,7 +20,7 @@ const Stack = createNativeStackNavigator<Nav.TabLocalStackParamList>()
const TabLocal = React.memo(
({ navigation }: TabLocalProp) => {
const { t } = useTranslation('local')
const { t, i18n } = useTranslation('local')
const screenOptions = useMemo(
() => ({
@ -48,7 +48,7 @@ const TabLocal = React.memo(
/>
)
}),
[]
[i18n.language]
)
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Following' }]

35
src/screens/Tabs/Notifications.tsx
View File

@ -1,6 +1,8 @@
import { HeaderCenter } from '@components/Header'
import analytics from '@components/analytics'
import { HeaderCenter, HeaderRight } from '@components/Header'
import Timeline from '@components/Timeline'
import TimelineNotifications from '@components/Timeline/Notifications'
import { useNavigation } from '@react-navigation/native'
import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import React, { useCallback, useMemo } from 'react'
@ -12,9 +14,17 @@ const Stack = createNativeStackNavigator<Nav.TabNotificationsStackParamList>()
const TabNotifications = React.memo(
() => {
const { t } = useTranslation()
const navigation = useNavigation()
const { t, i18n } = useTranslation()
const screenOptions = useMemo(
() => ({
headerHideShadow: true,
headerTopInsetEnabled: false
}),
[]
)
const screenOptionsRoot = useMemo(
() => ({
headerTitle: t('notifications:heading'),
...(Platform.OS === 'android' && {
@ -22,10 +32,19 @@ const TabNotifications = React.memo(
<HeaderCenter content={t('notifications:heading')} />
)
}),
headerHideShadow: true,
headerTopInsetEnabled: false
headerRight: () => (
<HeaderRight
content='Filter'
onPress={() => {
analytics('notificationsfilter_tap')
navigation.navigate('Screen-Actions', {
type: 'notifications_filter'
})
}}
/>
)
}),
[]
[i18n.language]
)
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Notifications' }]
@ -42,7 +61,11 @@ const TabNotifications = React.memo(
return (
<Stack.Navigator screenOptions={screenOptions}>
<Stack.Screen name='Tab-Notifications-Root' children={children} />
<Stack.Screen
name='Tab-Notifications-Root'
children={children}
options={screenOptionsRoot}
/>
{sharedScreens(Stack as any)}
</Stack.Navigator>
)

33
src/store.ts
View File

@ -5,7 +5,7 @@ import {
configureStore,
getDefaultMiddleware
} from '@reduxjs/toolkit'
import { InstancesV3 } from '@utils/migrations/instances/v3'
import instancesMigration from '@utils/migrations/instances/migration'
import contextsSlice from '@utils/slices/contextsSlice'
import instancesSlice from '@utils/slices/instancesSlice'
import settingsSlice from '@utils/slices/settingsSlice'
@ -21,40 +21,13 @@ const contextsPersistConfig = {
storage: AsyncStorage
}
const instancesMigration = {
4: (state: InstancesV3) => {
return {
instances: state.local.instances.map((instance, index) => {
// @ts-ignore
delete instance.notification
return {
...instance,
active: state.local.activeIndex === index,
push: {
global: { loading: false, value: false },
decode: { loading: false, value: false },
alerts: {
follow: { loading: false, value: true },
favourite: { loading: false, value: true },
reblog: { loading: false, value: true },
mention: { loading: false, value: true },
poll: { loading: false, value: true }
},
keys: undefined
}
}
})
}
}
}
const instancesPersistConfig = {
key: 'instances',
prefix,
storage: secureStorage,
version: 4,
version: 5,
// @ts-ignore
migrate: createMigrate(instancesMigration)
migrate: createMigrate(instancesMigration, { debug: true })
}
const settingsPersistConfig = {

53
src/utils/migrations/instances/migration.ts Normal file
View File

@ -0,0 +1,53 @@
import { InstanceV3 } from './v3'
import { InstanceV4 } from './v4'
const instancesMigration = {
4: (state: InstanceV3) => {
return {
instances: state.local.instances.map((instance, index) => {
// @ts-ignore
delete instance.notification
return {
...instance,
active: state.local.activeIndex === index,
push: {
global: { loading: false, value: false },
decode: { loading: false, value: false },
alerts: {
follow: { loading: false, value: true },
favourite: { loading: false, value: true },
reblog: { loading: false, value: true },
mention: { loading: false, value: true },
poll: { loading: false, value: true }
},
keys: undefined
}
}
})
}
},
5: (state: InstanceV4) => {
// Migration is run on each start, don't know why
// @ts-ignore
if (state.instances.length && !state.instances[0].notifications_filter) {
return {
instances: state.instances.map(instance => {
// @ts-ignore
instance.notifications_filter = {
follow: true,
favourite: true,
reblog: true,
mention: true,
poll: true,
follow_request: true
}
return instance
})
}
} else {
return state
}
}
}
export default instancesMigration

2
src/utils/migrations/instances/v3.ts
View File

@ -21,7 +21,7 @@ type InstanceLocal = {
drafts: any[]
}
export type InstancesV3 = {
export type InstanceV3 = {
local: {
activeIndex: number | null
instances: InstanceLocal[]

84
src/utils/migrations/instances/v4.ts Normal file
View File

@ -0,0 +1,84 @@
import { ComposeStateDraft } from "@screens/Compose/utils/types"
type Instance = {
active: boolean
appData: {
clientId: string
clientSecret: string
}
url: string
token: string
uri: Mastodon.Instance['uri']
urls: Mastodon.Instance['urls']
max_toot_chars: number
account: {
id: Mastodon.Account['id']
acct: Mastodon.Account['acct']
avatarStatic: Mastodon.Account['avatar_static']
preferences: Mastodon.Preferences
}
push:
| {
global: { loading: boolean; value: boolean }
decode: { loading: boolean; value: true }
alerts: {
follow: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['follow']
}
favourite: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['favourite']
}
reblog: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['reblog']
}
mention: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['mention']
}
poll: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['poll']
}
}
keys: {
auth: string
public: string
private: string
}
}
| {
global: { loading: boolean; value: boolean }
decode: { loading: boolean; value: false }
alerts: {
follow: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['follow']
}
favourite: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['favourite']
}
reblog: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['reblog']
}
mention: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['mention']
}
poll: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['poll']
}
}
keys: undefined
}
drafts: ComposeStateDraft[]
}
export type InstanceV4 = {
instances: Instance[]
}

16
src/utils/queryHooks/timeline.ts
View File

@ -1,5 +1,10 @@
import apiInstance from '@api/instance'
import haptics from '@components/haptics'
import { store } from '@root/store'
import {
getInstanceActive,
getInstanceNotificationsFilter
} from '@utils/slices/instancesSlice'
import { AxiosError } from 'axios'
import { uniqBy } from 'lodash'
import {
@ -59,10 +64,19 @@ const queryFunction = ({
})
case 'Notifications':
const rootStore = store.getState()
const notificationsFilter = getInstanceNotificationsFilter(rootStore)
return apiInstance<Mastodon.Notification[]>({
method: 'get',
url: 'notifications',
params
params: {
...params,
...(notificationsFilter && {
exclude_types: Object.keys(notificationsFilter)
// @ts-ignore
.filter(filter => notificationsFilter[filter] === false)
})
}
})
case 'Account_Default':

8
src/utils/slices/instances/add.ts
View File

@ -70,6 +70,14 @@ const addInstance = createAsyncThunk(
avatarStatic: avatar_static,
preferences
},
notifications_filter: {
follow: true,
favourite: true,
reblog: true,
mention: true,
poll: true,
follow_request: true
},
push: {
global: { loading: false, value: false },
decode: { loading: false, value: false },

37
src/utils/slices/instancesSlice.ts
View File

@ -29,6 +29,14 @@ export type Instance = {
avatarStatic: Mastodon.Account['avatar_static']
preferences: Mastodon.Preferences
}
notifications_filter: {
follow: boolean
favourite: boolean
reblog: boolean
mention: boolean
poll: boolean
follow_request: boolean
}
push:
| {
global: { loading: boolean; value: boolean }
@ -55,13 +63,11 @@ export type Instance = {
value: Mastodon.PushSubscription['alerts']['poll']
}
}
keys:
| {
auth: string
public: string
private: string
}
| undefined
keys: {
auth: string
public: string
private: string
}
}
| {
global: { loading: boolean; value: boolean }
@ -127,6 +133,13 @@ const instancesSlice = createSlice({
...action.payload
}
},
updateInstanceNotificationsFilter: (
{ instances },
action: PayloadAction<Instance['notifications_filter']>
) => {
const activeIndex = findInstanceActive(instances)
instances[activeIndex].notifications_filter = action.payload
},
updateInstanceDraft: (
{ instances },
action: PayloadAction<ComposeStateDraft>
@ -314,6 +327,15 @@ export const getInstanceAccount = ({ instances: { instances } }: RootState) => {
return instanceActive !== -1 ? instances[instanceActive].account : null
}
export const getInstanceNotificationsFilter = ({
instances: { instances }
}: RootState) => {
const instanceActive = findInstanceActive(instances)
return instanceActive !== -1
? instances[instanceActive].notifications_filter
: null
}
export const getInstancePush = ({ instances: { instances } }: RootState) => {
const instanceActive = findInstanceActive(instances)
return instanceActive !== -1 ? instances[instanceActive].push : null
@ -327,6 +349,7 @@ export const getInstanceDrafts = ({ instances: { instances } }: RootState) => {
export const {
updateInstanceActive,
updateInstanceAccount,
updateInstanceNotificationsFilter,
updateInstanceDraft,
removeInstanceDraft,
disableAllPushes