b9abd444e5
* replace delete list button text with icon * fix mute list styling on desktop * add share button to nav bar on a list * fix styling when on profile * bug: add key to ImageHorzList * clean up code & refactor * fix styling for ListItems * create a reusable ListActions component for actions on a list * remove dead styles * add keys to ListActions * add helpers to set list embed * render list embeds * fix list sharing on web * make style prop optional in ListCard * update `@atproto/api` to `0.3.13`
122 lines
3.4 KiB
TypeScript
122 lines
3.4 KiB
TypeScript
import React from 'react'
|
|
import {StyleSheet} from 'react-native'
|
|
import {useFocusEffect, useNavigation} from '@react-navigation/native'
|
|
import {
|
|
FontAwesomeIcon,
|
|
FontAwesomeIconStyle,
|
|
} from '@fortawesome/react-native-fontawesome'
|
|
import {AtUri} from '@atproto/api'
|
|
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
|
|
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
|
import {EmptyStateWithButton} from 'view/com/util/EmptyStateWithButton'
|
|
import {useStores} from 'state/index'
|
|
import {ListsListModel} from 'state/models/lists/lists-list'
|
|
import {ListsList} from 'view/com/lists/ListsList'
|
|
import {Button} from 'view/com/util/forms/Button'
|
|
import {NavigationProp} from 'lib/routes/types'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {CenteredView} from 'view/com/util/Views'
|
|
import {ViewHeader} from 'view/com/util/ViewHeader'
|
|
import {isDesktopWeb} from 'platform/detection'
|
|
|
|
type Props = NativeStackScreenProps<
|
|
CommonNavigatorParams,
|
|
'ModerationMuteLists'
|
|
>
|
|
export const ModerationMuteListsScreen = withAuthRequired(({}: Props) => {
|
|
const pal = usePalette('default')
|
|
const store = useStores()
|
|
const navigation = useNavigation<NavigationProp>()
|
|
|
|
const mutelists: ListsListModel = React.useMemo(
|
|
() => new ListsListModel(store, 'my-modlists'),
|
|
[store],
|
|
)
|
|
|
|
useFocusEffect(
|
|
React.useCallback(() => {
|
|
store.shell.setMinimalShellMode(false)
|
|
mutelists.refresh()
|
|
}, [store, mutelists]),
|
|
)
|
|
|
|
const onPressNewMuteList = React.useCallback(() => {
|
|
store.shell.openModal({
|
|
name: 'create-or-edit-mute-list',
|
|
onSave: (uri: string) => {
|
|
try {
|
|
const urip = new AtUri(uri)
|
|
navigation.navigate('ProfileList', {
|
|
name: urip.hostname,
|
|
rkey: urip.rkey,
|
|
})
|
|
} catch {}
|
|
},
|
|
})
|
|
}, [store, navigation])
|
|
|
|
const renderEmptyState = React.useCallback(() => {
|
|
return (
|
|
<EmptyStateWithButton
|
|
testID="emptyMuteLists"
|
|
icon="users-slash"
|
|
message="You can subscribe to mute lists to automatically mute all of the users they include. Mute lists are public but your subscription to a mute list is private."
|
|
buttonLabel="New Mute List"
|
|
onPress={onPressNewMuteList}
|
|
/>
|
|
)
|
|
}, [onPressNewMuteList])
|
|
|
|
const renderHeaderButton = React.useCallback(
|
|
() => (
|
|
<Button
|
|
type="primary-light"
|
|
onPress={onPressNewMuteList}
|
|
style={styles.createBtn}>
|
|
<FontAwesomeIcon
|
|
icon="plus"
|
|
style={pal.link as FontAwesomeIconStyle}
|
|
size={18}
|
|
/>
|
|
</Button>
|
|
),
|
|
[onPressNewMuteList, pal],
|
|
)
|
|
|
|
return (
|
|
<CenteredView
|
|
style={[
|
|
styles.container,
|
|
pal.view,
|
|
pal.border,
|
|
isDesktopWeb && styles.containerDesktop,
|
|
]}
|
|
testID="moderationMutelistsScreen">
|
|
<ViewHeader
|
|
title="Mute Lists"
|
|
showOnDesktop
|
|
renderButton={renderHeaderButton}
|
|
/>
|
|
<ListsList
|
|
listsList={mutelists}
|
|
showAddBtns={isDesktopWeb}
|
|
renderEmptyState={renderEmptyState}
|
|
onPressCreateNew={onPressNewMuteList}
|
|
/>
|
|
</CenteredView>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
paddingBottom: isDesktopWeb ? 0 : 100,
|
|
},
|
|
containerDesktop: {
|
|
borderLeftWidth: 1,
|
|
borderRightWidth: 1,
|
|
},
|
|
createBtn: {
|
|
width: 40,
|
|
},
|
|
})
|