[APP-601] Add muted accounts list (#565)
* Add muted accounts list * Fix icon for muted accountszio/stable
parent
2eb0d8c095
commit
883700e090
|
@ -93,6 +93,7 @@ func serve(cctx *cli.Context) error {
|
||||||
e.GET("/notifications", server.WebGeneric)
|
e.GET("/notifications", server.WebGeneric)
|
||||||
e.GET("/settings", server.WebGeneric)
|
e.GET("/settings", server.WebGeneric)
|
||||||
e.GET("/settings/app-passwords", server.WebGeneric)
|
e.GET("/settings/app-passwords", server.WebGeneric)
|
||||||
|
e.GET("/settings/muted-accounts", server.WebGeneric)
|
||||||
e.GET("/settings/blocked-accounts", server.WebGeneric)
|
e.GET("/settings/blocked-accounts", server.WebGeneric)
|
||||||
e.GET("/sys/debug", server.WebGeneric)
|
e.GET("/sys/debug", server.WebGeneric)
|
||||||
e.GET("/sys/log", server.WebGeneric)
|
e.GET("/sys/log", server.WebGeneric)
|
||||||
|
|
|
@ -49,6 +49,7 @@ import {TermsOfServiceScreen} from './view/screens/TermsOfService'
|
||||||
import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
|
import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
|
||||||
import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
|
import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
|
||||||
import {AppPasswords} from 'view/screens/AppPasswords'
|
import {AppPasswords} from 'view/screens/AppPasswords'
|
||||||
|
import {MutedAccounts} from 'view/screens/MutedAccounts'
|
||||||
import {BlockedAccounts} from 'view/screens/BlockedAccounts'
|
import {BlockedAccounts} from 'view/screens/BlockedAccounts'
|
||||||
import {getRoutingInstrumentation} from 'lib/sentry'
|
import {getRoutingInstrumentation} from 'lib/sentry'
|
||||||
|
|
||||||
|
@ -90,6 +91,7 @@ function commonScreens(Stack: typeof HomeTab) {
|
||||||
/>
|
/>
|
||||||
<Stack.Screen name="CopyrightPolicy" component={CopyrightPolicyScreen} />
|
<Stack.Screen name="CopyrightPolicy" component={CopyrightPolicyScreen} />
|
||||||
<Stack.Screen name="AppPasswords" component={AppPasswords} />
|
<Stack.Screen name="AppPasswords" component={AppPasswords} />
|
||||||
|
<Stack.Screen name="MutedAccounts" component={MutedAccounts} />
|
||||||
<Stack.Screen name="BlockedAccounts" component={BlockedAccounts} />
|
<Stack.Screen name="BlockedAccounts" component={BlockedAccounts} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
@ -20,6 +20,7 @@ export type CommonNavigatorParams = {
|
||||||
CommunityGuidelines: undefined
|
CommunityGuidelines: undefined
|
||||||
CopyrightPolicy: undefined
|
CopyrightPolicy: undefined
|
||||||
AppPasswords: undefined
|
AppPasswords: undefined
|
||||||
|
MutedAccounts: undefined
|
||||||
BlockedAccounts: undefined
|
BlockedAccounts: undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,7 @@ export const router = new Router({
|
||||||
Debug: '/sys/debug',
|
Debug: '/sys/debug',
|
||||||
Log: '/sys/log',
|
Log: '/sys/log',
|
||||||
AppPasswords: '/settings/app-passwords',
|
AppPasswords: '/settings/app-passwords',
|
||||||
|
MutedAccounts: '/settings/muted-accounts',
|
||||||
BlockedAccounts: '/settings/blocked-accounts',
|
BlockedAccounts: '/settings/blocked-accounts',
|
||||||
Support: '/support',
|
Support: '/support',
|
||||||
PrivacyPolicy: '/support/privacy',
|
PrivacyPolicy: '/support/privacy',
|
||||||
|
|
|
@ -0,0 +1,106 @@
|
||||||
|
import {makeAutoObservable} from 'mobx'
|
||||||
|
import {
|
||||||
|
AppBskyGraphGetMutes as GetMutes,
|
||||||
|
AppBskyActorDefs as ActorDefs,
|
||||||
|
} from '@atproto/api'
|
||||||
|
import {RootStoreModel} from '../root-store'
|
||||||
|
import {cleanError} from 'lib/strings/errors'
|
||||||
|
import {bundleAsync} from 'lib/async/bundle'
|
||||||
|
|
||||||
|
const PAGE_SIZE = 30
|
||||||
|
|
||||||
|
export class MutedAccountsModel {
|
||||||
|
// state
|
||||||
|
isLoading = false
|
||||||
|
isRefreshing = false
|
||||||
|
hasLoaded = false
|
||||||
|
error = ''
|
||||||
|
hasMore = true
|
||||||
|
loadMoreCursor?: string
|
||||||
|
|
||||||
|
// data
|
||||||
|
mutes: ActorDefs.ProfileView[] = []
|
||||||
|
|
||||||
|
constructor(public rootStore: RootStoreModel) {
|
||||||
|
makeAutoObservable(
|
||||||
|
this,
|
||||||
|
{
|
||||||
|
rootStore: false,
|
||||||
|
},
|
||||||
|
{autoBind: true},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasContent() {
|
||||||
|
return this.mutes.length > 0
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasError() {
|
||||||
|
return this.error !== ''
|
||||||
|
}
|
||||||
|
|
||||||
|
get isEmpty() {
|
||||||
|
return this.hasLoaded && !this.hasContent
|
||||||
|
}
|
||||||
|
|
||||||
|
// public api
|
||||||
|
// =
|
||||||
|
|
||||||
|
async refresh() {
|
||||||
|
return this.loadMore(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
loadMore = bundleAsync(async (replace: boolean = false) => {
|
||||||
|
if (!replace && !this.hasMore) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this._xLoading(replace)
|
||||||
|
try {
|
||||||
|
const res = await this.rootStore.agent.app.bsky.graph.getMutes({
|
||||||
|
limit: PAGE_SIZE,
|
||||||
|
cursor: replace ? undefined : this.loadMoreCursor,
|
||||||
|
})
|
||||||
|
if (replace) {
|
||||||
|
this._replaceAll(res)
|
||||||
|
} else {
|
||||||
|
this._appendAll(res)
|
||||||
|
}
|
||||||
|
this._xIdle()
|
||||||
|
} catch (e: any) {
|
||||||
|
this._xIdle(e)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// state transitions
|
||||||
|
// =
|
||||||
|
|
||||||
|
_xLoading(isRefreshing = false) {
|
||||||
|
this.isLoading = true
|
||||||
|
this.isRefreshing = isRefreshing
|
||||||
|
this.error = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
_xIdle(err?: any) {
|
||||||
|
this.isLoading = false
|
||||||
|
this.isRefreshing = false
|
||||||
|
this.hasLoaded = true
|
||||||
|
this.error = cleanError(err)
|
||||||
|
if (err) {
|
||||||
|
this.rootStore.log.error('Failed to fetch user followers', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// helper functions
|
||||||
|
// =
|
||||||
|
|
||||||
|
_replaceAll(res: GetMutes.Response) {
|
||||||
|
this.mutes = []
|
||||||
|
this._appendAll(res)
|
||||||
|
}
|
||||||
|
|
||||||
|
_appendAll(res: GetMutes.Response) {
|
||||||
|
this.loadMoreCursor = res.data.cursor
|
||||||
|
this.hasMore = !!this.loadMoreCursor
|
||||||
|
this.mutes = this.mutes.concat(res.data.mutes)
|
||||||
|
}
|
||||||
|
}
|
|
@ -60,7 +60,8 @@ export const ProfileCard = observer(
|
||||||
]}
|
]}
|
||||||
href={`/profile/${profile.handle}`}
|
href={`/profile/${profile.handle}`}
|
||||||
title={profile.handle}
|
title={profile.handle}
|
||||||
asAnchor>
|
asAnchor
|
||||||
|
anchorNoUnderline>
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
<View style={styles.layoutAvi}>
|
<View style={styles.layoutAvi}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
|
|
|
@ -37,6 +37,7 @@ interface Props extends ComponentProps<typeof TouchableOpacity> {
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
noFeedback?: boolean
|
noFeedback?: boolean
|
||||||
asAnchor?: boolean
|
asAnchor?: boolean
|
||||||
|
anchorNoUnderline?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Link = observer(function Link({
|
export const Link = observer(function Link({
|
||||||
|
@ -48,6 +49,7 @@ export const Link = observer(function Link({
|
||||||
noFeedback,
|
noFeedback,
|
||||||
asAnchor,
|
asAnchor,
|
||||||
accessible,
|
accessible,
|
||||||
|
anchorNoUnderline,
|
||||||
...props
|
...props
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
|
@ -78,6 +80,14 @@ export const Link = observer(function Link({
|
||||||
</TouchableWithoutFeedback>
|
</TouchableWithoutFeedback>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (anchorNoUnderline) {
|
||||||
|
// @ts-ignore web only -prf
|
||||||
|
props.dataSet = props.dataSet || {}
|
||||||
|
// @ts-ignore web only -prf
|
||||||
|
props.dataSet.noUnderline = 1
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
testID={testID}
|
testID={testID}
|
||||||
|
|
|
@ -0,0 +1,168 @@
|
||||||
|
import React, {useMemo} from 'react'
|
||||||
|
import {
|
||||||
|
ActivityIndicator,
|
||||||
|
FlatList,
|
||||||
|
RefreshControl,
|
||||||
|
StyleSheet,
|
||||||
|
View,
|
||||||
|
} from 'react-native'
|
||||||
|
import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
|
||||||
|
import {Text} from '../com/util/text/Text'
|
||||||
|
import {useStores} from 'state/index'
|
||||||
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
|
import {isDesktopWeb} from 'platform/detection'
|
||||||
|
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
||||||
|
import {observer} from 'mobx-react-lite'
|
||||||
|
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
||||||
|
import {CommonNavigatorParams} from 'lib/routes/types'
|
||||||
|
import {MutedAccountsModel} from 'state/models/lists/muted-accounts'
|
||||||
|
import {useAnalytics} from 'lib/analytics'
|
||||||
|
import {useFocusEffect} from '@react-navigation/native'
|
||||||
|
import {ViewHeader} from '../com/util/ViewHeader'
|
||||||
|
import {CenteredView} from 'view/com/util/Views'
|
||||||
|
import {ProfileCard} from 'view/com/profile/ProfileCard'
|
||||||
|
|
||||||
|
type Props = NativeStackScreenProps<CommonNavigatorParams, 'MutedAccounts'>
|
||||||
|
export const MutedAccounts = withAuthRequired(
|
||||||
|
observer(({}: Props) => {
|
||||||
|
const pal = usePalette('default')
|
||||||
|
const store = useStores()
|
||||||
|
const {screen} = useAnalytics()
|
||||||
|
const mutedAccounts = useMemo(() => new MutedAccountsModel(store), [store])
|
||||||
|
|
||||||
|
useFocusEffect(
|
||||||
|
React.useCallback(() => {
|
||||||
|
screen('MutedAccounts')
|
||||||
|
store.shell.setMinimalShellMode(false)
|
||||||
|
mutedAccounts.refresh()
|
||||||
|
}, [screen, store, mutedAccounts]),
|
||||||
|
)
|
||||||
|
|
||||||
|
const onRefresh = React.useCallback(() => {
|
||||||
|
mutedAccounts.refresh()
|
||||||
|
}, [mutedAccounts])
|
||||||
|
const onEndReached = React.useCallback(() => {
|
||||||
|
mutedAccounts
|
||||||
|
.loadMore()
|
||||||
|
.catch(err =>
|
||||||
|
store.log.error('Failed to load more muted accounts', err),
|
||||||
|
)
|
||||||
|
}, [mutedAccounts, store])
|
||||||
|
|
||||||
|
const renderItem = ({
|
||||||
|
item,
|
||||||
|
index,
|
||||||
|
}: {
|
||||||
|
item: ActorDefs.ProfileView
|
||||||
|
index: number
|
||||||
|
}) => (
|
||||||
|
<ProfileCard
|
||||||
|
testID={`mutedAccount-${index}`}
|
||||||
|
key={item.did}
|
||||||
|
profile={item}
|
||||||
|
overrideModeration
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
return (
|
||||||
|
<CenteredView
|
||||||
|
style={[
|
||||||
|
styles.container,
|
||||||
|
isDesktopWeb && styles.containerDesktop,
|
||||||
|
pal.view,
|
||||||
|
pal.border,
|
||||||
|
]}
|
||||||
|
testID="mutedAccountsScreen">
|
||||||
|
<ViewHeader title="Muted Accounts" showOnDesktop />
|
||||||
|
<Text
|
||||||
|
type="sm"
|
||||||
|
style={[
|
||||||
|
styles.description,
|
||||||
|
pal.text,
|
||||||
|
isDesktopWeb && styles.descriptionDesktop,
|
||||||
|
]}>
|
||||||
|
Muted accounts have their posts removed from your feed and from your
|
||||||
|
notifications. Mutes are completely private.
|
||||||
|
</Text>
|
||||||
|
{!mutedAccounts.hasContent ? (
|
||||||
|
<View style={[pal.border, !isDesktopWeb && styles.flex1]}>
|
||||||
|
<View style={[styles.empty, pal.viewLight]}>
|
||||||
|
<Text type="lg" style={[pal.text, styles.emptyText]}>
|
||||||
|
You have not muted any accounts yet. To mute an account, go to
|
||||||
|
their profile and selected "Mute account" from the menu on their
|
||||||
|
account.
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<FlatList
|
||||||
|
style={[!isDesktopWeb && styles.flex1]}
|
||||||
|
data={mutedAccounts.mutes}
|
||||||
|
keyExtractor={(item: ActorDefs.ProfileView) => item.did}
|
||||||
|
refreshControl={
|
||||||
|
<RefreshControl
|
||||||
|
refreshing={mutedAccounts.isRefreshing}
|
||||||
|
onRefresh={onRefresh}
|
||||||
|
tintColor={pal.colors.text}
|
||||||
|
titleColor={pal.colors.text}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onEndReached={onEndReached}
|
||||||
|
renderItem={renderItem}
|
||||||
|
initialNumToRender={15}
|
||||||
|
ListFooterComponent={() => (
|
||||||
|
<View style={styles.footer}>
|
||||||
|
{mutedAccounts.isLoading && <ActivityIndicator />}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
extraData={mutedAccounts.isLoading}
|
||||||
|
// @ts-ignore our .web version only -prf
|
||||||
|
desktopFixedHeight
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</CenteredView>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
paddingBottom: isDesktopWeb ? 0 : 100,
|
||||||
|
},
|
||||||
|
containerDesktop: {
|
||||||
|
borderLeftWidth: 1,
|
||||||
|
borderRightWidth: 1,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
textAlign: 'center',
|
||||||
|
marginTop: 12,
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
textAlign: 'center',
|
||||||
|
paddingHorizontal: 30,
|
||||||
|
marginBottom: 14,
|
||||||
|
},
|
||||||
|
descriptionDesktop: {
|
||||||
|
marginTop: 14,
|
||||||
|
},
|
||||||
|
|
||||||
|
flex1: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
empty: {
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
paddingVertical: 20,
|
||||||
|
borderRadius: 16,
|
||||||
|
marginHorizontal: 24,
|
||||||
|
marginTop: 10,
|
||||||
|
},
|
||||||
|
emptyText: {
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
height: 200,
|
||||||
|
paddingTop: 20,
|
||||||
|
},
|
||||||
|
})
|
|
@ -288,6 +288,20 @@ export const SettingsScreen = withAuthRequired(
|
||||||
Content moderation
|
Content moderation
|
||||||
</Text>
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
<Link
|
||||||
|
testID="mutedAccountsBtn"
|
||||||
|
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
|
||||||
|
href="/settings/muted-accounts">
|
||||||
|
<View style={[styles.iconContainer, pal.btn]}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={['far', 'eye-slash']}
|
||||||
|
style={pal.text as FontAwesomeIconStyle}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<Text type="lg" style={pal.text}>
|
||||||
|
Muted accounts
|
||||||
|
</Text>
|
||||||
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
testID="blockedAccountsBtn"
|
testID="blockedAccountsBtn"
|
||||||
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
|
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
|
||||||
|
|
|
@ -67,6 +67,9 @@
|
||||||
a[role="link"]:hover {
|
a[role="link"]:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
a[role="link"][data-no-underline="1"]:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Styling hacks */
|
/* Styling hacks */
|
||||||
*[data-word-wrap] {
|
*[data-word-wrap] {
|
||||||
|
|
Loading…
Reference in New Issue