Add list hidden screen (#4958)
Co-authored-by: Hailey <me@haileyok.com> Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Hailey
GitHub
parent
e54298ec2c
commit
723896a45f
12 changed files with 494 additions and 339 deletions
216
src/screens/List/ListHiddenScreen.tsx
Normal file
216
src/screens/List/ListHiddenScreen.tsx
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {AppBskyGraphDefs} from '@atproto/api'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useQueryClient} from '@tanstack/react-query'
|
||||
|
||||
import {logger} from '#/logger'
|
||||
import {RQKEY_ROOT as listQueryRoot} from '#/state/queries/list'
|
||||
import {useGoBack} from 'lib/hooks/useGoBack'
|
||||
import {sanitizeHandle} from 'lib/strings/handles'
|
||||
import {useListBlockMutation, useListMuteMutation} from 'state/queries/list'
|
||||
import {
|
||||
UsePreferencesQueryResponse,
|
||||
useRemoveFeedMutation,
|
||||
} from 'state/queries/preferences'
|
||||
import {useSession} from 'state/session'
|
||||
import * as Toast from 'view/com/util/Toast'
|
||||
import {CenteredView} from 'view/com/util/Views'
|
||||
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
|
||||
import {Loader} from '#/components/Loader'
|
||||
import {useHider} from '#/components/moderation/Hider'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export function ListHiddenScreen({
|
||||
list,
|
||||
preferences,
|
||||
}: {
|
||||
list: AppBskyGraphDefs.ListView
|
||||
preferences: UsePreferencesQueryResponse
|
||||
}) {
|
||||
const {_} = useLingui()
|
||||
const t = useTheme()
|
||||
const {currentAccount} = useSession()
|
||||
const {gtMobile} = useBreakpoints()
|
||||
const isOwner = currentAccount?.did === list.creator.did
|
||||
const goBack = useGoBack()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const isModList = list.purpose === AppBskyGraphDefs.MODLIST
|
||||
|
||||
const [isProcessing, setIsProcessing] = React.useState(false)
|
||||
const listBlockMutation = useListBlockMutation()
|
||||
const listMuteMutation = useListMuteMutation()
|
||||
const {mutateAsync: removeSavedFeed} = useRemoveFeedMutation()
|
||||
|
||||
const {setIsContentVisible} = useHider()
|
||||
|
||||
const savedFeedConfig = preferences.savedFeeds.find(f => f.value === list.uri)
|
||||
|
||||
const onUnsubscribe = async () => {
|
||||
setIsProcessing(true)
|
||||
if (list.viewer?.muted) {
|
||||
try {
|
||||
await listMuteMutation.mutateAsync({uri: list.uri, mute: false})
|
||||
} catch (e) {
|
||||
setIsProcessing(false)
|
||||
logger.error('Failed to unmute list', {message: e})
|
||||
Toast.show(
|
||||
_(
|
||||
msg`There was an issue. Please check your internet connection and try again.`,
|
||||
),
|
||||
)
|
||||
return
|
||||
}
|
||||
}
|
||||
if (list.viewer?.blocked) {
|
||||
try {
|
||||
await listBlockMutation.mutateAsync({uri: list.uri, block: false})
|
||||
} catch (e) {
|
||||
setIsProcessing(false)
|
||||
logger.error('Failed to unblock list', {message: e})
|
||||
Toast.show(
|
||||
_(
|
||||
msg`There was an issue. Please check your internet connection and try again.`,
|
||||
),
|
||||
)
|
||||
return
|
||||
}
|
||||
}
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [listQueryRoot],
|
||||
})
|
||||
Toast.show(_(msg`Unsubscribed from list`))
|
||||
setIsProcessing(false)
|
||||
}
|
||||
|
||||
const onRemoveList = async () => {
|
||||
if (!savedFeedConfig) return
|
||||
try {
|
||||
await removeSavedFeed(savedFeedConfig)
|
||||
Toast.show(_(msg`Removed from saved feeds`))
|
||||
} catch (e) {
|
||||
logger.error('Failed to remove list from saved feeds', {message: e})
|
||||
Toast.show(
|
||||
_(
|
||||
msg`There was an issue. Please check your internet connection and try again.`,
|
||||
),
|
||||
)
|
||||
} finally {
|
||||
setIsProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<CenteredView
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.align_center,
|
||||
a.gap_5xl,
|
||||
!gtMobile && a.justify_between,
|
||||
t.atoms.border_contrast_low,
|
||||
{paddingTop: 175, paddingBottom: 110},
|
||||
]}
|
||||
sideBorders={true}>
|
||||
<View style={[a.w_full, a.align_center, a.gap_lg]}>
|
||||
<EyeSlash
|
||||
style={{color: t.atoms.text_contrast_medium.color}}
|
||||
height={42}
|
||||
width={42}
|
||||
/>
|
||||
<View style={[a.gap_sm, a.align_center]}>
|
||||
<Text style={[a.font_bold, a.text_3xl]}>
|
||||
<Trans>List has been hidden</Trans>
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
a.text_md,
|
||||
a.text_center,
|
||||
a.px_md,
|
||||
t.atoms.text_contrast_high,
|
||||
{lineHeight: 1.4},
|
||||
]}>
|
||||
<Trans>
|
||||
This list - created by{' '}
|
||||
<Text style={[a.text_md, !isOwner && a.font_bold]}>
|
||||
{isOwner
|
||||
? _(msg`you`)
|
||||
: sanitizeHandle(list.creator.handle, '@')}
|
||||
</Text>{' '}
|
||||
- contains possible violations of Bluesky's community guidelines
|
||||
in its name or description.
|
||||
</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}>
|
||||
<View style={[a.gap_md]}>
|
||||
{savedFeedConfig ? (
|
||||
<Button
|
||||
variant="solid"
|
||||
color="secondary"
|
||||
size="medium"
|
||||
label={_(msg`Remove from saved feeds`)}
|
||||
onPress={onRemoveList}
|
||||
disabled={isProcessing}>
|
||||
<ButtonText>
|
||||
<Trans>Removed from saved feeds</Trans>
|
||||
</ButtonText>
|
||||
{isProcessing ? (
|
||||
<ButtonIcon icon={Loader} position="right" />
|
||||
) : null}
|
||||
</Button>
|
||||
) : null}
|
||||
{isOwner ? (
|
||||
<Button
|
||||
variant="solid"
|
||||
color="secondary"
|
||||
size="medium"
|
||||
label={_(msg`Show list anyway`)}
|
||||
onPress={() => setIsContentVisible(true)}
|
||||
disabled={isProcessing}>
|
||||
<ButtonText>
|
||||
<Trans>Show anyway</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
) : list.viewer?.muted || list.viewer?.blocked ? (
|
||||
<Button
|
||||
variant="solid"
|
||||
color="secondary"
|
||||
size="medium"
|
||||
label={_(msg`Unsubscribe from list`)}
|
||||
onPress={() => {
|
||||
if (isModList) {
|
||||
onUnsubscribe()
|
||||
} else {
|
||||
onRemoveList()
|
||||
}
|
||||
}}
|
||||
disabled={isProcessing}>
|
||||
<ButtonText>
|
||||
<Trans>Unsubscribe from list</Trans>
|
||||
</ButtonText>
|
||||
{isProcessing ? (
|
||||
<ButtonIcon icon={Loader} position="right" />
|
||||
) : null}
|
||||
</Button>
|
||||
) : null}
|
||||
</View>
|
||||
<Button
|
||||
variant="solid"
|
||||
color="primary"
|
||||
label={_(msg`Return to previous page`)}
|
||||
onPress={goBack}
|
||||
size="medium"
|
||||
disabled={isProcessing}>
|
||||
<ButtonText>
|
||||
<Trans>Go Back</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
</CenteredView>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue