[APP-601] Add muted accounts list (#565)

* Add muted accounts list

* Fix icon for muted accounts
zio/stable
Paul Frazee 2023-05-02 23:32:16 -05:00 committed by GitHub
parent 2eb0d8c095
commit 883700e090
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 308 additions and 1 deletions

View File

@ -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)

View File

@ -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} />
</> </>
) )

View File

@ -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
} }

View File

@ -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',

View File

@ -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)
}
}

View File

@ -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

View File

@ -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}

View File

@ -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,
},
})

View File

@ -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]}

View File

@ -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] {