[APP-635] Mutelists (#601)
* Add lists and profilelist screens * Implement lists screen and lists-list in profiles * Add empty states to the lists screen * Switch (mostly) from blocklists to mutelists * Rework: create a new moderation screen and move everything related under it * Fix moderation screen on desktop web * Tune the empty state code * Change content moderation modal to content filtering * Add CreateMuteList modal * Implement mutelist creation * Add lists listings * Add the ability to create new mutelists * Add 'add to list' tool * Satisfy the hashtag hyphen haters * Add update/delete/subscribe/unsubscribe to lists * Show which list caused a mute * Add list un/subscribe * Add the mute override when viewing a profile's posts * Update to latest backend * Add simulation tests and tune some behaviors * Fix lint * Bump deps * Fix list refresh after creation * Mute list subscriptions -> Mute lists
This commit is contained in:
Paul Frazee
GitHub
parent
34d8fa5991
commit
ebcd633386
48 changed files with 2984 additions and 151 deletions
155
src/view/com/lists/ListCard.tsx
Normal file
155
src/view/com/lists/ListCard.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, View} from 'react-native'
|
||||
import {AtUri, AppBskyGraphDefs, RichText} from '@atproto/api'
|
||||
import {Link} from '../util/Link'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {RichText as RichTextCom} from '../util/text/RichText'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {s} from 'lib/styles'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useStores} from 'state/index'
|
||||
import {sanitizeDisplayName} from 'lib/strings/display-names'
|
||||
|
||||
export const ListCard = ({
|
||||
testID,
|
||||
list,
|
||||
noBg,
|
||||
noBorder,
|
||||
renderButton,
|
||||
}: {
|
||||
testID?: string
|
||||
list: AppBskyGraphDefs.ListView
|
||||
noBg?: boolean
|
||||
noBorder?: boolean
|
||||
renderButton?: () => JSX.Element
|
||||
}) => {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
|
||||
const rkey = React.useMemo(() => {
|
||||
try {
|
||||
const urip = new AtUri(list.uri)
|
||||
return urip.rkey
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}, [list])
|
||||
|
||||
const descriptionRichText = React.useMemo(() => {
|
||||
if (list.description) {
|
||||
return new RichText({
|
||||
text: list.description,
|
||||
facets: list.descriptionFacets,
|
||||
})
|
||||
}
|
||||
return undefined
|
||||
}, [list])
|
||||
|
||||
return (
|
||||
<Link
|
||||
testID={testID}
|
||||
style={[
|
||||
styles.outer,
|
||||
pal.border,
|
||||
noBorder && styles.outerNoBorder,
|
||||
!noBg && pal.view,
|
||||
]}
|
||||
href={`/profile/${list.creator.did}/lists/${rkey}`}
|
||||
title={list.name}
|
||||
asAnchor
|
||||
anchorNoUnderline>
|
||||
<View style={styles.layout}>
|
||||
<View style={styles.layoutAvi}>
|
||||
<UserAvatar size={40} avatar={list.avatar} />
|
||||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<Text
|
||||
type="lg"
|
||||
style={[s.bold, pal.text]}
|
||||
numberOfLines={1}
|
||||
lineHeight={1.2}>
|
||||
{sanitizeDisplayName(list.name)}
|
||||
</Text>
|
||||
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
|
||||
{list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list'} by{' '}
|
||||
{list.creator.did === store.me.did
|
||||
? 'you'
|
||||
: `@${list.creator.handle}`}
|
||||
</Text>
|
||||
{!!list.viewer?.muted && (
|
||||
<View style={s.flexRow}>
|
||||
<View style={[s.mt5, pal.btn, styles.pill]}>
|
||||
<Text type="xs" style={pal.text}>
|
||||
Subscribed
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
{renderButton ? (
|
||||
<View style={styles.layoutButton}>{renderButton()}</View>
|
||||
) : undefined}
|
||||
</View>
|
||||
{descriptionRichText ? (
|
||||
<View style={styles.details}>
|
||||
<RichTextCom
|
||||
style={pal.text}
|
||||
numberOfLines={20}
|
||||
richText={descriptionRichText}
|
||||
/>
|
||||
</View>
|
||||
) : undefined}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
borderTopWidth: 1,
|
||||
paddingHorizontal: 6,
|
||||
},
|
||||
outerNoBorder: {
|
||||
borderTopWidth: 0,
|
||||
},
|
||||
layout: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
layoutAvi: {
|
||||
width: 54,
|
||||
paddingLeft: 4,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
avi: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
resizeMode: 'cover',
|
||||
},
|
||||
layoutContent: {
|
||||
flex: 1,
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
layoutButton: {
|
||||
paddingRight: 10,
|
||||
},
|
||||
details: {
|
||||
paddingLeft: 54,
|
||||
paddingRight: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
pill: {
|
||||
borderRadius: 4,
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
},
|
||||
btn: {
|
||||
paddingVertical: 7,
|
||||
borderRadius: 50,
|
||||
marginLeft: 6,
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
})
|
||||
387
src/view/com/lists/ListItems.tsx
Normal file
387
src/view/com/lists/ListItems.tsx
Normal file
|
|
@ -0,0 +1,387 @@
|
|||
import React, {MutableRefObject} from 'react'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
RefreshControl,
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
View,
|
||||
ViewStyle,
|
||||
} from 'react-native'
|
||||
import {AppBskyActorDefs, AppBskyGraphDefs, RichText} from '@atproto/api'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {FlatList} from '../util/Views'
|
||||
import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
|
||||
import {ProfileCard} from '../profile/ProfileCard'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {RichText as RichTextCom} from '../util/text/RichText'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {TextLink} from '../util/Link'
|
||||
import {ListModel} from 'state/models/content/list'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useStores} from 'state/index'
|
||||
import {s} from 'lib/styles'
|
||||
import {isDesktopWeb} from 'platform/detection'
|
||||
|
||||
const LOADING_ITEM = {_reactKey: '__loading__'}
|
||||
const HEADER_ITEM = {_reactKey: '__header__'}
|
||||
const EMPTY_ITEM = {_reactKey: '__empty__'}
|
||||
const ERROR_ITEM = {_reactKey: '__error__'}
|
||||
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
|
||||
|
||||
export const ListItems = observer(
|
||||
({
|
||||
list,
|
||||
style,
|
||||
scrollElRef,
|
||||
onPressTryAgain,
|
||||
onToggleSubscribed,
|
||||
onPressEditList,
|
||||
onPressDeleteList,
|
||||
renderEmptyState,
|
||||
testID,
|
||||
headerOffset = 0,
|
||||
}: {
|
||||
list: ListModel
|
||||
style?: StyleProp<ViewStyle>
|
||||
scrollElRef?: MutableRefObject<FlatList<any> | null>
|
||||
onPressTryAgain?: () => void
|
||||
onToggleSubscribed?: () => void
|
||||
onPressEditList?: () => void
|
||||
onPressDeleteList?: () => void
|
||||
renderEmptyState?: () => JSX.Element
|
||||
testID?: string
|
||||
headerOffset?: number
|
||||
}) => {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const {track} = useAnalytics()
|
||||
const [isRefreshing, setIsRefreshing] = React.useState(false)
|
||||
|
||||
const data = React.useMemo(() => {
|
||||
let items: any[] = [HEADER_ITEM]
|
||||
if (list.hasLoaded) {
|
||||
if (list.hasError) {
|
||||
items = items.concat([ERROR_ITEM])
|
||||
}
|
||||
if (list.isEmpty) {
|
||||
items = items.concat([EMPTY_ITEM])
|
||||
} else {
|
||||
items = items.concat(list.items)
|
||||
}
|
||||
if (list.loadMoreError) {
|
||||
items = items.concat([LOAD_MORE_ERROR_ITEM])
|
||||
}
|
||||
} else if (list.isLoading) {
|
||||
items = items.concat([LOADING_ITEM])
|
||||
}
|
||||
return items
|
||||
}, [
|
||||
list.hasError,
|
||||
list.hasLoaded,
|
||||
list.isLoading,
|
||||
list.isEmpty,
|
||||
list.items,
|
||||
list.loadMoreError,
|
||||
])
|
||||
|
||||
// events
|
||||
// =
|
||||
|
||||
const onRefresh = React.useCallback(async () => {
|
||||
track('Lists:onRefresh')
|
||||
setIsRefreshing(true)
|
||||
try {
|
||||
await list.refresh()
|
||||
} catch (err) {
|
||||
list.rootStore.log.error('Failed to refresh lists', err)
|
||||
}
|
||||
setIsRefreshing(false)
|
||||
}, [list, track, setIsRefreshing])
|
||||
|
||||
const onEndReached = React.useCallback(async () => {
|
||||
track('Lists:onEndReached')
|
||||
try {
|
||||
await list.loadMore()
|
||||
} catch (err) {
|
||||
list.rootStore.log.error('Failed to load more lists', err)
|
||||
}
|
||||
}, [list, track])
|
||||
|
||||
const onPressRetryLoadMore = React.useCallback(() => {
|
||||
list.retryLoadMore()
|
||||
}, [list])
|
||||
|
||||
const onPressEditMembership = React.useCallback(
|
||||
(profile: AppBskyActorDefs.ProfileViewBasic) => {
|
||||
store.shell.openModal({
|
||||
name: 'list-add-remove-user',
|
||||
subject: profile.did,
|
||||
displayName: profile.displayName || profile.handle,
|
||||
onUpdate() {
|
||||
list.refresh()
|
||||
},
|
||||
})
|
||||
},
|
||||
[store, list],
|
||||
)
|
||||
|
||||
// rendering
|
||||
// =
|
||||
|
||||
const renderMemberButton = React.useCallback(
|
||||
(profile: AppBskyActorDefs.ProfileViewBasic) => {
|
||||
if (!list.isOwner) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
type="default"
|
||||
label="Edit"
|
||||
onPress={() => onPressEditMembership(profile)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
[list, onPressEditMembership],
|
||||
)
|
||||
|
||||
const renderItem = React.useCallback(
|
||||
({item}: {item: any}) => {
|
||||
if (item === EMPTY_ITEM) {
|
||||
if (renderEmptyState) {
|
||||
return renderEmptyState()
|
||||
}
|
||||
return <View />
|
||||
} else if (item === HEADER_ITEM) {
|
||||
return list.list ? (
|
||||
<ListHeader
|
||||
list={list.list}
|
||||
isOwner={list.isOwner}
|
||||
onToggleSubscribed={onToggleSubscribed}
|
||||
onPressEditList={onPressEditList}
|
||||
onPressDeleteList={onPressDeleteList}
|
||||
/>
|
||||
) : null
|
||||
} else if (item === ERROR_ITEM) {
|
||||
return (
|
||||
<ErrorMessage
|
||||
message={list.error}
|
||||
onPressTryAgain={onPressTryAgain}
|
||||
/>
|
||||
)
|
||||
} else if (item === LOAD_MORE_ERROR_ITEM) {
|
||||
return (
|
||||
<LoadMoreRetryBtn
|
||||
label="There was an issue fetching the list. Tap here to try again."
|
||||
onPress={onPressRetryLoadMore}
|
||||
/>
|
||||
)
|
||||
} else if (item === LOADING_ITEM) {
|
||||
return <ProfileCardFeedLoadingPlaceholder />
|
||||
}
|
||||
return (
|
||||
<ProfileCard
|
||||
testID={`user-${
|
||||
(item as AppBskyGraphDefs.ListItemView).subject.handle
|
||||
}`}
|
||||
profile={(item as AppBskyGraphDefs.ListItemView).subject}
|
||||
renderButton={renderMemberButton}
|
||||
/>
|
||||
)
|
||||
},
|
||||
[
|
||||
list,
|
||||
onPressTryAgain,
|
||||
onPressRetryLoadMore,
|
||||
renderMemberButton,
|
||||
onPressEditList,
|
||||
onPressDeleteList,
|
||||
onToggleSubscribed,
|
||||
renderEmptyState,
|
||||
],
|
||||
)
|
||||
|
||||
const Footer = React.useCallback(
|
||||
() =>
|
||||
list.isLoading ? (
|
||||
<View style={styles.feedFooter}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
) : (
|
||||
<View />
|
||||
),
|
||||
[list],
|
||||
)
|
||||
|
||||
return (
|
||||
<View testID={testID} style={style}>
|
||||
{data.length > 0 && (
|
||||
<FlatList
|
||||
testID={testID ? `${testID}-flatlist` : undefined}
|
||||
ref={scrollElRef}
|
||||
data={data}
|
||||
keyExtractor={item => item._reactKey}
|
||||
renderItem={renderItem}
|
||||
ListFooterComponent={Footer}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={isRefreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={pal.colors.text}
|
||||
titleColor={pal.colors.text}
|
||||
progressViewOffset={headerOffset}
|
||||
/>
|
||||
}
|
||||
contentContainerStyle={s.contentContainer}
|
||||
style={{paddingTop: headerOffset}}
|
||||
onEndReached={onEndReached}
|
||||
onEndReachedThreshold={0.6}
|
||||
removeClippedSubviews={true}
|
||||
contentOffset={{x: 0, y: headerOffset * -1}}
|
||||
// @ts-ignore our .web version only -prf
|
||||
desktopFixedHeight
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
const ListHeader = observer(
|
||||
({
|
||||
list,
|
||||
isOwner,
|
||||
onToggleSubscribed,
|
||||
onPressEditList,
|
||||
onPressDeleteList,
|
||||
}: {
|
||||
list: AppBskyGraphDefs.ListView
|
||||
isOwner: boolean
|
||||
onToggleSubscribed?: () => void
|
||||
onPressEditList?: () => void
|
||||
onPressDeleteList?: () => void
|
||||
}) => {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const descriptionRT = React.useMemo(
|
||||
() =>
|
||||
list?.description &&
|
||||
new RichText({text: list.description, facets: list.descriptionFacets}),
|
||||
[list],
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<View style={[styles.header, pal.border]}>
|
||||
<View style={s.flex1}>
|
||||
<Text testID="listName" type="title-xl" style={[pal.text, s.bold]}>
|
||||
{list.name}
|
||||
</Text>
|
||||
{list && (
|
||||
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
|
||||
{list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list '}
|
||||
by{' '}
|
||||
{list.creator.did === store.me.did ? (
|
||||
'you'
|
||||
) : (
|
||||
<TextLink
|
||||
text={`@${list.creator.handle}`}
|
||||
href={`/profile/${list.creator.did}`}
|
||||
/>
|
||||
)}
|
||||
</Text>
|
||||
)}
|
||||
{descriptionRT && (
|
||||
<RichTextCom
|
||||
testID="listDescription"
|
||||
style={[pal.text, styles.headerDescription]}
|
||||
richText={descriptionRT}
|
||||
/>
|
||||
)}
|
||||
{isDesktopWeb && (
|
||||
<View style={styles.headerBtns}>
|
||||
{list.viewer?.muted ? (
|
||||
<Button
|
||||
type="inverted"
|
||||
label="Unsubscribe"
|
||||
accessibilityLabel="Unsubscribe from this list"
|
||||
accessibilityHint="Stops muting the users included in this list"
|
||||
onPress={onToggleSubscribed}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
type="primary"
|
||||
label="Subscribe & Mute"
|
||||
accessibilityLabel="Subscribe to this list"
|
||||
accessibilityHint="Mutes the users included in this list"
|
||||
onPress={onToggleSubscribed}
|
||||
/>
|
||||
)}
|
||||
{isOwner && (
|
||||
<Button
|
||||
type="default"
|
||||
label="Edit List"
|
||||
accessibilityLabel="Edit list"
|
||||
accessibilityHint="Opens a modal to edit the mutelist"
|
||||
onPress={onPressEditList}
|
||||
/>
|
||||
)}
|
||||
{isOwner && (
|
||||
<Button
|
||||
type="default"
|
||||
label="Delete List"
|
||||
accessibilityLabel="Delete list"
|
||||
accessibilityHint="Deletes the mutelist"
|
||||
onPress={onPressDeleteList}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View>
|
||||
<UserAvatar avatar={list.avatar} size={64} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={[styles.fakeSelector, pal.border]}>
|
||||
<View
|
||||
style={[styles.fakeSelectorItem, {borderColor: pal.colors.link}]}>
|
||||
<Text type="md-medium" style={[pal.text]}>
|
||||
Muted users
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 16,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
headerDescription: {
|
||||
marginTop: 8,
|
||||
},
|
||||
headerBtns: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
marginTop: 12,
|
||||
},
|
||||
fakeSelector: {
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: isDesktopWeb ? 16 : 6,
|
||||
},
|
||||
fakeSelectorItem: {
|
||||
paddingHorizontal: 12,
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 3,
|
||||
},
|
||||
feedFooter: {paddingTop: 20},
|
||||
})
|
||||
240
src/view/com/lists/ListsList.tsx
Normal file
240
src/view/com/lists/ListsList.tsx
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
import React, {MutableRefObject} from 'react'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
RefreshControl,
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
View,
|
||||
ViewStyle,
|
||||
} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIconStyle,
|
||||
} from '@fortawesome/react-native-fontawesome'
|
||||
import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
|
||||
import {FlatList} from '../util/Views'
|
||||
import {ListCard} from './ListCard'
|
||||
import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {ListsListModel} from 'state/models/lists/lists-list'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {s} from 'lib/styles'
|
||||
|
||||
const LOADING_ITEM = {_reactKey: '__loading__'}
|
||||
const CREATENEW_ITEM = {_reactKey: '__loading__'}
|
||||
const EMPTY_ITEM = {_reactKey: '__empty__'}
|
||||
const ERROR_ITEM = {_reactKey: '__error__'}
|
||||
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
|
||||
|
||||
export const ListsList = observer(
|
||||
({
|
||||
listsList,
|
||||
showAddBtns,
|
||||
style,
|
||||
scrollElRef,
|
||||
onPressTryAgain,
|
||||
onPressCreateNew,
|
||||
renderItem,
|
||||
renderEmptyState,
|
||||
testID,
|
||||
headerOffset = 0,
|
||||
}: {
|
||||
listsList: ListsListModel
|
||||
showAddBtns?: boolean
|
||||
style?: StyleProp<ViewStyle>
|
||||
scrollElRef?: MutableRefObject<FlatList<any> | null>
|
||||
onPressCreateNew: () => void
|
||||
onPressTryAgain?: () => void
|
||||
renderItem?: (list: GraphDefs.ListView) => JSX.Element
|
||||
renderEmptyState?: () => JSX.Element
|
||||
testID?: string
|
||||
headerOffset?: number
|
||||
}) => {
|
||||
const pal = usePalette('default')
|
||||
const {track} = useAnalytics()
|
||||
const [isRefreshing, setIsRefreshing] = React.useState(false)
|
||||
|
||||
const data = React.useMemo(() => {
|
||||
let items: any[] = []
|
||||
if (listsList.hasLoaded) {
|
||||
if (listsList.hasError) {
|
||||
items = items.concat([ERROR_ITEM])
|
||||
}
|
||||
if (listsList.isEmpty) {
|
||||
items = items.concat([EMPTY_ITEM])
|
||||
} else {
|
||||
if (showAddBtns) {
|
||||
items = items.concat([CREATENEW_ITEM])
|
||||
}
|
||||
items = items.concat(listsList.lists)
|
||||
}
|
||||
if (listsList.loadMoreError) {
|
||||
items = items.concat([LOAD_MORE_ERROR_ITEM])
|
||||
}
|
||||
} else if (listsList.isLoading) {
|
||||
items = items.concat([LOADING_ITEM])
|
||||
}
|
||||
return items
|
||||
}, [
|
||||
listsList.hasError,
|
||||
listsList.hasLoaded,
|
||||
listsList.isLoading,
|
||||
listsList.isEmpty,
|
||||
listsList.lists,
|
||||
listsList.loadMoreError,
|
||||
showAddBtns,
|
||||
])
|
||||
|
||||
// events
|
||||
// =
|
||||
|
||||
const onRefresh = React.useCallback(async () => {
|
||||
track('Lists:onRefresh')
|
||||
setIsRefreshing(true)
|
||||
try {
|
||||
await listsList.refresh()
|
||||
} catch (err) {
|
||||
listsList.rootStore.log.error('Failed to refresh lists', err)
|
||||
}
|
||||
setIsRefreshing(false)
|
||||
}, [listsList, track, setIsRefreshing])
|
||||
|
||||
const onEndReached = React.useCallback(async () => {
|
||||
track('Lists:onEndReached')
|
||||
try {
|
||||
await listsList.loadMore()
|
||||
} catch (err) {
|
||||
listsList.rootStore.log.error('Failed to load more lists', err)
|
||||
}
|
||||
}, [listsList, track])
|
||||
|
||||
const onPressRetryLoadMore = React.useCallback(() => {
|
||||
listsList.retryLoadMore()
|
||||
}, [listsList])
|
||||
|
||||
// rendering
|
||||
// =
|
||||
|
||||
const renderItemInner = React.useCallback(
|
||||
({item}: {item: any}) => {
|
||||
if (item === EMPTY_ITEM) {
|
||||
if (renderEmptyState) {
|
||||
return renderEmptyState()
|
||||
}
|
||||
return <View />
|
||||
} else if (item === CREATENEW_ITEM) {
|
||||
return <CreateNewItem onPress={onPressCreateNew} />
|
||||
} else if (item === ERROR_ITEM) {
|
||||
return (
|
||||
<ErrorMessage
|
||||
message={listsList.error}
|
||||
onPressTryAgain={onPressTryAgain}
|
||||
/>
|
||||
)
|
||||
} else if (item === LOAD_MORE_ERROR_ITEM) {
|
||||
return (
|
||||
<LoadMoreRetryBtn
|
||||
label="There was an issue fetching your lists. Tap here to try again."
|
||||
onPress={onPressRetryLoadMore}
|
||||
/>
|
||||
)
|
||||
} else if (item === LOADING_ITEM) {
|
||||
return <ProfileCardFeedLoadingPlaceholder />
|
||||
}
|
||||
return renderItem ? (
|
||||
renderItem(item)
|
||||
) : (
|
||||
<ListCard list={item} testID={`list-${item.name}`} />
|
||||
)
|
||||
},
|
||||
[
|
||||
listsList,
|
||||
onPressTryAgain,
|
||||
onPressRetryLoadMore,
|
||||
onPressCreateNew,
|
||||
renderItem,
|
||||
renderEmptyState,
|
||||
],
|
||||
)
|
||||
|
||||
const Footer = React.useCallback(
|
||||
() =>
|
||||
listsList.isLoading ? (
|
||||
<View style={styles.feedFooter}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
) : (
|
||||
<View />
|
||||
),
|
||||
[listsList],
|
||||
)
|
||||
|
||||
return (
|
||||
<View testID={testID} style={style}>
|
||||
{data.length > 0 && (
|
||||
<FlatList
|
||||
testID={testID ? `${testID}-flatlist` : undefined}
|
||||
ref={scrollElRef}
|
||||
data={data}
|
||||
keyExtractor={item => item._reactKey}
|
||||
renderItem={renderItemInner}
|
||||
ListFooterComponent={Footer}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={isRefreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={pal.colors.text}
|
||||
titleColor={pal.colors.text}
|
||||
progressViewOffset={headerOffset}
|
||||
/>
|
||||
}
|
||||
contentContainerStyle={s.contentContainer}
|
||||
style={{paddingTop: headerOffset}}
|
||||
onEndReached={onEndReached}
|
||||
onEndReachedThreshold={0.6}
|
||||
removeClippedSubviews={true}
|
||||
contentOffset={{x: 0, y: headerOffset * -1}}
|
||||
// @ts-ignore our .web version only -prf
|
||||
desktopFixedHeight
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
function CreateNewItem({onPress}: {onPress: () => void}) {
|
||||
const pal = usePalette('default')
|
||||
|
||||
return (
|
||||
<View style={[styles.createNewContainer]}>
|
||||
<Button type="default" onPress={onPress} style={styles.createNewButton}>
|
||||
<FontAwesomeIcon icon="plus" style={pal.text as FontAwesomeIconStyle} />
|
||||
<Text type="button" style={pal.text}>
|
||||
New Mute List
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
createNewContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 18,
|
||||
paddingTop: 18,
|
||||
paddingBottom: 16,
|
||||
},
|
||||
createNewButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
feedFooter: {paddingTop: 20},
|
||||
})
|
||||
|
|
@ -21,8 +21,8 @@ export function Component({}: {}) {
|
|||
}, [store])
|
||||
|
||||
return (
|
||||
<View testID="contentModerationModal" style={[pal.view, styles.container]}>
|
||||
<Text style={[pal.text, styles.title]}>Content Moderation</Text>
|
||||
<View testID="contentFilteringModal" style={[pal.view, styles.container]}>
|
||||
<Text style={[pal.text, styles.title]}>Content Filtering</Text>
|
||||
<ScrollView style={styles.scrollContainer}>
|
||||
<ContentLabelPref
|
||||
group="nsfw"
|
||||
|
|
@ -50,7 +50,7 @@ export function Component({}: {}) {
|
|||
testID="sendReportBtn"
|
||||
onPress={onPressDone}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Confirm content moderation settings"
|
||||
accessibilityLabel="Confirm content filtering settings"
|
||||
accessibilityHint="">
|
||||
<LinearGradient
|
||||
colors={[gradients.blueLight.start, gradients.blueLight.end]}
|
||||
|
|
|
|||
273
src/view/com/modals/CreateOrEditMuteList.tsx
Normal file
273
src/view/com/modals/CreateOrEditMuteList.tsx
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
import React, {useState, useCallback} from 'react'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import LinearGradient from 'react-native-linear-gradient'
|
||||
import {Image as RNImage} from 'react-native-image-crop-picker'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {useStores} from 'state/index'
|
||||
import {ListModel} from 'state/models/content/list'
|
||||
import {s, colors, gradients} from 'lib/styles'
|
||||
import {enforceLen} from 'lib/strings/helpers'
|
||||
import {compressIfNeeded} from 'lib/media/manip'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useTheme} from 'lib/ThemeContext'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
import {cleanError, isNetworkError} from 'lib/strings/errors'
|
||||
import {isDesktopWeb} from 'platform/detection'
|
||||
|
||||
const MAX_NAME = 64 // todo
|
||||
const MAX_DESCRIPTION = 300 // todo
|
||||
|
||||
export const snapPoints = ['fullscreen']
|
||||
|
||||
export function Component({
|
||||
onSave,
|
||||
list,
|
||||
}: {
|
||||
onSave?: (uri: string) => void
|
||||
list?: ListModel
|
||||
}) {
|
||||
const store = useStores()
|
||||
const [error, setError] = useState<string>('')
|
||||
const pal = usePalette('default')
|
||||
const theme = useTheme()
|
||||
const {track} = useAnalytics()
|
||||
|
||||
const [isProcessing, setProcessing] = useState<boolean>(false)
|
||||
const [name, setName] = useState<string>(list?.list.name || '')
|
||||
const [description, setDescription] = useState<string>(
|
||||
list?.list.description || '',
|
||||
)
|
||||
const [avatar, setAvatar] = useState<string | undefined>(list?.list.avatar)
|
||||
const [newAvatar, setNewAvatar] = useState<RNImage | undefined | null>()
|
||||
|
||||
const onPressCancel = useCallback(() => {
|
||||
store.shell.closeModal()
|
||||
}, [store])
|
||||
|
||||
const onSelectNewAvatar = useCallback(
|
||||
async (img: RNImage | null) => {
|
||||
if (!img) {
|
||||
setNewAvatar(null)
|
||||
setAvatar(null)
|
||||
return
|
||||
}
|
||||
track('CreateMuteList:AvatarSelected')
|
||||
try {
|
||||
const finalImg = await compressIfNeeded(img, 1000000)
|
||||
setNewAvatar(finalImg)
|
||||
setAvatar(finalImg.path)
|
||||
} catch (e: any) {
|
||||
setError(cleanError(e))
|
||||
}
|
||||
},
|
||||
[track, setNewAvatar, setAvatar, setError],
|
||||
)
|
||||
|
||||
const onPressSave = useCallback(async () => {
|
||||
track('CreateMuteList:Save')
|
||||
const nameTrimmed = name.trim()
|
||||
if (!nameTrimmed) {
|
||||
setError('Name is required')
|
||||
return
|
||||
}
|
||||
setProcessing(true)
|
||||
if (error) {
|
||||
setError('')
|
||||
}
|
||||
try {
|
||||
if (list) {
|
||||
await list.updateMetadata({
|
||||
name: nameTrimmed,
|
||||
description: description.trim(),
|
||||
avatar: newAvatar,
|
||||
})
|
||||
Toast.show('Mute list updated')
|
||||
onSave?.(list.uri)
|
||||
} else {
|
||||
const res = await ListModel.createModList(store, {
|
||||
name,
|
||||
description,
|
||||
avatar: newAvatar,
|
||||
})
|
||||
Toast.show('Mute list created')
|
||||
onSave?.(res.uri)
|
||||
}
|
||||
store.shell.closeModal()
|
||||
} catch (e: any) {
|
||||
if (isNetworkError(e)) {
|
||||
setError(
|
||||
'Failed to create the mute list. Check your internet connection and try again.',
|
||||
)
|
||||
} else {
|
||||
setError(cleanError(e))
|
||||
}
|
||||
}
|
||||
setProcessing(false)
|
||||
}, [
|
||||
track,
|
||||
setProcessing,
|
||||
setError,
|
||||
error,
|
||||
onSave,
|
||||
store,
|
||||
name,
|
||||
description,
|
||||
newAvatar,
|
||||
list,
|
||||
])
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView behavior="height">
|
||||
<ScrollView
|
||||
style={[pal.view, styles.container]}
|
||||
testID="createOrEditMuteListModal">
|
||||
<Text style={[styles.title, pal.text]}>
|
||||
{list ? 'Edit Mute List' : 'New Mute List'}
|
||||
</Text>
|
||||
{error !== '' && (
|
||||
<View style={styles.errorContainer}>
|
||||
<ErrorMessage message={error} />
|
||||
</View>
|
||||
)}
|
||||
<Text style={[styles.label, pal.text]}>List Avatar</Text>
|
||||
<View style={[styles.avi, {borderColor: pal.colors.background}]}>
|
||||
<UserAvatar
|
||||
size={80}
|
||||
avatar={avatar}
|
||||
onSelectNewAvatar={onSelectNewAvatar}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.form}>
|
||||
<View>
|
||||
<Text style={[styles.label, pal.text]}>List Name</Text>
|
||||
<TextInput
|
||||
testID="editNameInput"
|
||||
style={[styles.textInput, pal.border, pal.text]}
|
||||
placeholder="e.g. Spammers"
|
||||
placeholderTextColor={colors.gray4}
|
||||
value={name}
|
||||
onChangeText={v => setName(enforceLen(v, MAX_NAME))}
|
||||
accessible={true}
|
||||
accessibilityLabel="Name"
|
||||
accessibilityHint="Set the list's name"
|
||||
/>
|
||||
</View>
|
||||
<View style={s.pb10}>
|
||||
<Text style={[styles.label, pal.text]}>Description</Text>
|
||||
<TextInput
|
||||
testID="editDescriptionInput"
|
||||
style={[styles.textArea, pal.border, pal.text]}
|
||||
placeholder="e.g. Users that repeatedly reply with ads."
|
||||
placeholderTextColor={colors.gray4}
|
||||
keyboardAppearance={theme.colorScheme}
|
||||
multiline
|
||||
value={description}
|
||||
onChangeText={v => setDescription(enforceLen(v, MAX_DESCRIPTION))}
|
||||
accessible={true}
|
||||
accessibilityLabel="Description"
|
||||
accessibilityHint="Edit your list's description"
|
||||
/>
|
||||
</View>
|
||||
{isProcessing ? (
|
||||
<View style={[styles.btn, s.mt10, {backgroundColor: colors.gray2}]}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
testID="saveBtn"
|
||||
style={s.mt10}
|
||||
onPress={onPressSave}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Save"
|
||||
accessibilityHint="Creates the mute list">
|
||||
<LinearGradient
|
||||
colors={[gradients.blueLight.start, gradients.blueLight.end]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 1}}
|
||||
style={[styles.btn]}>
|
||||
<Text style={[s.white, s.bold]}>Save</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
testID="cancelBtn"
|
||||
style={s.mt5}
|
||||
onPress={onPressCancel}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Cancel creating the mute list"
|
||||
accessibilityHint=""
|
||||
onAccessibilityEscape={onPressCancel}>
|
||||
<View style={[styles.btn]}>
|
||||
<Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingHorizontal: isDesktopWeb ? 0 : 16,
|
||||
},
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 24,
|
||||
marginBottom: 18,
|
||||
},
|
||||
label: {
|
||||
fontWeight: 'bold',
|
||||
paddingHorizontal: 4,
|
||||
paddingBottom: 4,
|
||||
marginTop: 20,
|
||||
},
|
||||
form: {
|
||||
paddingHorizontal: 6,
|
||||
},
|
||||
textInput: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
},
|
||||
textArea: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 12,
|
||||
paddingTop: 10,
|
||||
fontSize: 16,
|
||||
height: 100,
|
||||
textAlignVertical: 'top',
|
||||
},
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
borderRadius: 32,
|
||||
padding: 10,
|
||||
marginBottom: 10,
|
||||
},
|
||||
avi: {
|
||||
width: 84,
|
||||
height: 84,
|
||||
borderWidth: 2,
|
||||
borderRadius: 42,
|
||||
marginTop: 4,
|
||||
},
|
||||
errorContainer: {marginTop: 20},
|
||||
})
|
||||
255
src/view/com/modals/ListAddRemoveUser.tsx
Normal file
255
src/view/com/modals/ListAddRemoveUser.tsx
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
import React, {useCallback} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {Pressable, StyleSheet, View} from 'react-native'
|
||||
import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
|
||||
import {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIconStyle,
|
||||
} from '@fortawesome/react-native-fontawesome'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {ListsList} from '../lists/ListsList'
|
||||
import {ListsListModel} from 'state/models/lists/lists-list'
|
||||
import {ListMembershipModel} from 'state/models/content/list-membership'
|
||||
import {EmptyStateWithButton} from '../util/EmptyStateWithButton'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {useStores} from 'state/index'
|
||||
import {sanitizeDisplayName} from 'lib/strings/display-names'
|
||||
import {s} from 'lib/styles'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {isDesktopWeb, isAndroid} from 'platform/detection'
|
||||
|
||||
export const snapPoints = ['fullscreen']
|
||||
|
||||
export const Component = observer(
|
||||
({
|
||||
subject,
|
||||
displayName,
|
||||
onUpdate,
|
||||
}: {
|
||||
subject: string
|
||||
displayName: string
|
||||
onUpdate?: () => void
|
||||
}) => {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
const palPrimary = usePalette('primary')
|
||||
const palInverted = usePalette('inverted')
|
||||
const [selected, setSelected] = React.useState([])
|
||||
|
||||
const listsList: ListsListModel = React.useMemo(
|
||||
() => new ListsListModel(store, store.me.did),
|
||||
[store],
|
||||
)
|
||||
const memberships: ListMembershipModel = React.useMemo(
|
||||
() => new ListMembershipModel(store, subject),
|
||||
[store, subject],
|
||||
)
|
||||
React.useEffect(() => {
|
||||
listsList.refresh()
|
||||
memberships.fetch().then(
|
||||
() => {
|
||||
setSelected(memberships.memberships.map(m => m.value.list))
|
||||
},
|
||||
err => {
|
||||
store.log.error('Failed to fetch memberships', {err})
|
||||
},
|
||||
)
|
||||
}, [memberships, listsList, store, setSelected])
|
||||
|
||||
const onPressCancel = useCallback(() => {
|
||||
store.shell.closeModal()
|
||||
}, [store])
|
||||
|
||||
const onPressSave = useCallback(async () => {
|
||||
try {
|
||||
await memberships.updateTo(selected)
|
||||
} catch (err) {
|
||||
store.log.error('Failed to update memberships', {err})
|
||||
return
|
||||
}
|
||||
Toast.show('Lists updated')
|
||||
onUpdate?.()
|
||||
store.shell.closeModal()
|
||||
}, [store, selected, memberships, onUpdate])
|
||||
|
||||
const onPressNewMuteList = useCallback(() => {
|
||||
store.shell.openModal({
|
||||
name: 'create-or-edit-mute-list',
|
||||
onSave: (_uri: string) => {
|
||||
listsList.refresh()
|
||||
},
|
||||
})
|
||||
}, [store, listsList])
|
||||
|
||||
const onToggleSelected = useCallback(
|
||||
(uri: string) => {
|
||||
if (selected.includes(uri)) {
|
||||
setSelected(selected.filter(uri2 => uri2 !== uri))
|
||||
} else {
|
||||
setSelected([...selected, uri])
|
||||
}
|
||||
},
|
||||
[selected, setSelected],
|
||||
)
|
||||
|
||||
const renderItem = useCallback(
|
||||
(list: GraphDefs.ListView) => {
|
||||
const isSelected = selected.includes(list.uri)
|
||||
return (
|
||||
<Pressable
|
||||
testID={`toggleBtn-${list.name}`}
|
||||
style={[styles.listItem, pal.border]}
|
||||
accessibilityLabel={`${isSelected ? 'Remove from' : 'Add to'} ${
|
||||
list.name
|
||||
}`}
|
||||
accessibilityHint="Toggle their inclusion in this list"
|
||||
onPress={() => onToggleSelected(list.uri)}>
|
||||
<View style={styles.listItemAvi}>
|
||||
<UserAvatar size={40} avatar={list.avatar} />
|
||||
</View>
|
||||
<View style={styles.listItemContent}>
|
||||
<Text
|
||||
type="lg"
|
||||
style={[s.bold, pal.text]}
|
||||
numberOfLines={1}
|
||||
lineHeight={1.2}>
|
||||
{sanitizeDisplayName(list.name)}
|
||||
</Text>
|
||||
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
|
||||
{list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list'}{' '}
|
||||
by{' '}
|
||||
{list.creator.did === store.me.did
|
||||
? 'you'
|
||||
: `@${list.creator.handle}`}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
isSelected
|
||||
? [styles.checkbox, palPrimary.border, palPrimary.view]
|
||||
: [styles.checkbox, pal.borderDark]
|
||||
}>
|
||||
{isSelected && (
|
||||
<FontAwesomeIcon
|
||||
icon="check"
|
||||
style={palInverted.text as FontAwesomeIconStyle}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
},
|
||||
[pal, palPrimary, palInverted, onToggleSelected, selected, store.me.did],
|
||||
)
|
||||
|
||||
const renderEmptyState = React.useCallback(() => {
|
||||
return (
|
||||
<EmptyStateWithButton
|
||||
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])
|
||||
|
||||
return (
|
||||
<View testID="listAddRemoveUserModal" style={s.hContentRegion}>
|
||||
<Text style={[styles.title, pal.text]}>Add {displayName} to lists</Text>
|
||||
<ListsList
|
||||
listsList={listsList}
|
||||
showAddBtns
|
||||
onPressCreateNew={onPressNewMuteList}
|
||||
renderItem={renderItem}
|
||||
renderEmptyState={renderEmptyState}
|
||||
style={[styles.list, pal.border]}
|
||||
/>
|
||||
<View style={[styles.btns, pal.border]}>
|
||||
<Button
|
||||
testID="cancelBtn"
|
||||
type="default"
|
||||
onPress={onPressCancel}
|
||||
style={styles.footerBtn}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Cancel this modal"
|
||||
accessibilityHint=""
|
||||
onAccessibilityEscape={onPressCancel}
|
||||
label="Cancel"
|
||||
/>
|
||||
<Button
|
||||
testID="saveBtn"
|
||||
type="primary"
|
||||
onPress={onPressSave}
|
||||
style={styles.footerBtn}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Save these changes"
|
||||
accessibilityHint=""
|
||||
onAccessibilityEscape={onPressSave}
|
||||
label="Save Changes"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingHorizontal: isDesktopWeb ? 0 : 16,
|
||||
},
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 24,
|
||||
marginBottom: 10,
|
||||
},
|
||||
list: {
|
||||
flex: 1,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
btns: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: isAndroid ? 10 : 0,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
footerBtn: {
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
|
||||
listItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderTopWidth: 1,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
listItemAvi: {
|
||||
width: 54,
|
||||
paddingLeft: 4,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
listItemContent: {
|
||||
flex: 1,
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
checkbox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 6,
|
||||
marginRight: 8,
|
||||
},
|
||||
})
|
||||
|
|
@ -12,6 +12,8 @@ import * as EditProfileModal from './EditProfile'
|
|||
import * as ServerInputModal from './ServerInput'
|
||||
import * as ReportPostModal from './ReportPost'
|
||||
import * as RepostModal from './Repost'
|
||||
import * as CreateOrEditMuteListModal from './CreateOrEditMuteList'
|
||||
import * as ListAddRemoveUserModal from './ListAddRemoveUser'
|
||||
import * as AltImageModal from './AltImage'
|
||||
import * as ReportAccountModal from './ReportAccount'
|
||||
import * as DeleteAccountModal from './DeleteAccount'
|
||||
|
|
@ -66,6 +68,12 @@ export const ModalsContainer = observer(function ModalsContainer() {
|
|||
} else if (activeModal?.name === 'report-account') {
|
||||
snapPoints = ReportAccountModal.snapPoints
|
||||
element = <ReportAccountModal.Component {...activeModal} />
|
||||
} else if (activeModal?.name === 'create-or-edit-mute-list') {
|
||||
snapPoints = CreateOrEditMuteListModal.snapPoints
|
||||
element = <CreateOrEditMuteListModal.Component {...activeModal} />
|
||||
} else if (activeModal?.name === 'list-add-remove-user') {
|
||||
snapPoints = ListAddRemoveUserModal.snapPoints
|
||||
element = <ListAddRemoveUserModal.Component {...activeModal} />
|
||||
} else if (activeModal?.name === 'delete-account') {
|
||||
snapPoints = DeleteAccountModal.snapPoints
|
||||
element = <DeleteAccountModal.Component />
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import * as EditProfileModal from './EditProfile'
|
|||
import * as ServerInputModal from './ServerInput'
|
||||
import * as ReportPostModal from './ReportPost'
|
||||
import * as ReportAccountModal from './ReportAccount'
|
||||
import * as CreateOrEditMuteListModal from './CreateOrEditMuteList'
|
||||
import * as ListAddRemoveUserModal from './ListAddRemoveUser'
|
||||
import * as DeleteAccountModal from './DeleteAccount'
|
||||
import * as RepostModal from './Repost'
|
||||
import * as CropImageModal from './crop-image/CropImage.web'
|
||||
|
|
@ -69,6 +71,10 @@ function Modal({modal}: {modal: ModalIface}) {
|
|||
element = <ReportPostModal.Component {...modal} />
|
||||
} else if (modal.name === 'report-account') {
|
||||
element = <ReportAccountModal.Component {...modal} />
|
||||
} else if (modal.name === 'create-or-edit-mute-list') {
|
||||
element = <CreateOrEditMuteListModal.Component {...modal} />
|
||||
} else if (modal.name === 'list-add-remove-user') {
|
||||
element = <ListAddRemoveUserModal.Component {...modal} />
|
||||
} else if (modal.name === 'crop-image') {
|
||||
element = <CropImageModal.Component {...modal} />
|
||||
} else if (modal.name === 'delete-account') {
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export function TabBar({
|
|||
],
|
||||
}
|
||||
|
||||
const onLayout = () => {
|
||||
const onLayout = React.useCallback(() => {
|
||||
const promises = []
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
promises.push(
|
||||
|
|
@ -86,14 +86,17 @@ export function TabBar({
|
|||
Promise.all(promises).then((layouts: Layout[]) => {
|
||||
setItemLayouts(layouts)
|
||||
})
|
||||
}
|
||||
}, [containerRef, itemRefs, setItemLayouts, items.length])
|
||||
|
||||
const onPressItem = (index: number) => {
|
||||
onSelect?.(index)
|
||||
if (index === selectedPage) {
|
||||
onPressSelected?.()
|
||||
}
|
||||
}
|
||||
const onPressItem = React.useCallback(
|
||||
(index: number) => {
|
||||
onSelect?.(index)
|
||||
if (index === selectedPage) {
|
||||
onPressSelected?.()
|
||||
}
|
||||
},
|
||||
[onSelect, onPressSelected, selectedPage],
|
||||
)
|
||||
|
||||
return (
|
||||
<View
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
FontAwesomeIconStyle,
|
||||
} from '@fortawesome/react-native-fontawesome'
|
||||
import {PostsFeedItemModel} from 'state/models/feeds/posts'
|
||||
import {ModerationBehaviorCode} from 'lib/labeling/types'
|
||||
import {Link, DesktopWebTextLink} from '../util/Link'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {UserInfoText} from '../util/UserInfoText'
|
||||
|
|
@ -31,13 +32,14 @@ export const FeedItem = observer(function ({
|
|||
isThreadChild,
|
||||
isThreadParent,
|
||||
showFollowBtn,
|
||||
ignoreMuteFor,
|
||||
}: {
|
||||
item: PostsFeedItemModel
|
||||
isThreadChild?: boolean
|
||||
isThreadParent?: boolean
|
||||
showReplyLine?: boolean
|
||||
showFollowBtn?: boolean
|
||||
ignoreMuteFor?: string // NOTE currently disabled, will be addressed in the next PR -prf
|
||||
ignoreMuteFor?: string
|
||||
}) {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
|
|
@ -142,12 +144,22 @@ export const FeedItem = observer(function ({
|
|||
isThreadParent ? styles.outerNoBottom : undefined,
|
||||
]
|
||||
|
||||
// moderation override
|
||||
let moderation = item.moderation.list
|
||||
if (
|
||||
ignoreMuteFor === item.post.author.did &&
|
||||
moderation.isMute &&
|
||||
!moderation.noOverride
|
||||
) {
|
||||
moderation = {behavior: ModerationBehaviorCode.Show}
|
||||
}
|
||||
|
||||
return (
|
||||
<PostHider
|
||||
testID={`feedItem-by-${item.post.author.handle}`}
|
||||
style={outerStyles}
|
||||
href={itemHref}
|
||||
moderation={item.moderation.list}>
|
||||
moderation={moderation}>
|
||||
{isThreadChild && (
|
||||
<View
|
||||
style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
|
||||
|
|
@ -237,7 +249,7 @@ export const FeedItem = observer(function ({
|
|||
</View>
|
||||
)}
|
||||
<ContentHider
|
||||
moderation={item.moderation.list}
|
||||
moderation={moderation}
|
||||
containerStyle={styles.contentHider}>
|
||||
{item.richText?.text ? (
|
||||
<View style={styles.postTextContainer}>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@ export function FeedSlice({
|
|||
ignoreMuteFor?: string
|
||||
}) {
|
||||
if (slice.moderation.list.behavior === ModerationBehaviorCode.Hide) {
|
||||
return null
|
||||
if (!ignoreMuteFor && !slice.moderation.list.noOverride) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
if (slice.isThread && slice.items.length > 3) {
|
||||
const last = slice.items.length - 1
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export const ProfileCard = observer(
|
|||
noBorder?: boolean
|
||||
followers?: AppBskyActorDefs.ProfileView[] | undefined
|
||||
overrideModeration?: boolean
|
||||
renderButton?: () => JSX.Element
|
||||
renderButton?: (profile: AppBskyActorDefs.ProfileViewBasic) => JSX.Element
|
||||
}) => {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
|
|
@ -92,7 +92,7 @@ export const ProfileCard = observer(
|
|||
)}
|
||||
</View>
|
||||
{renderButton ? (
|
||||
<View style={styles.layoutButton}>{renderButton()}</View>
|
||||
<View style={styles.layoutButton}>{renderButton(profile)}</View>
|
||||
) : undefined}
|
||||
</View>
|
||||
{profile.description ? (
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import {DropdownButton, DropdownItem} from '../util/forms/DropdownButton'
|
|||
import * as Toast from '../util/Toast'
|
||||
import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {TextLink} from '../util/Link'
|
||||
import {RichText} from '../util/text/RichText'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {UserBanner} from '../util/UserBanner'
|
||||
|
|
@ -30,6 +31,7 @@ import {ProfileHeaderWarnings} from '../util/moderation/ProfileHeaderWarnings'
|
|||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {listUriToHref} from 'lib/strings/url-helpers'
|
||||
import {isDesktopWeb, isNative} from 'platform/detection'
|
||||
import {FollowState} from 'state/models/cache/my-follows'
|
||||
import {shareUrl} from 'lib/sharing'
|
||||
|
|
@ -146,12 +148,21 @@ const ProfileHeaderLoaded = observer(
|
|||
navigation.push('ProfileFollows', {name: view.handle})
|
||||
}, [track, navigation, view])
|
||||
|
||||
const onPressShare = React.useCallback(async () => {
|
||||
const onPressShare = React.useCallback(() => {
|
||||
track('ProfileHeader:ShareButtonClicked')
|
||||
const url = toShareUrl(`/profile/${view.handle}`)
|
||||
shareUrl(url)
|
||||
}, [track, view])
|
||||
|
||||
const onPressAddRemoveLists = React.useCallback(() => {
|
||||
track('ProfileHeader:AddToListsButtonClicked')
|
||||
store.shell.openModal({
|
||||
name: 'list-add-remove-user',
|
||||
subject: view.did,
|
||||
displayName: view.displayName || view.handle,
|
||||
})
|
||||
}, [track, view, store])
|
||||
|
||||
const onPressMuteAccount = React.useCallback(async () => {
|
||||
track('ProfileHeader:MuteAccountButtonClicked')
|
||||
try {
|
||||
|
|
@ -233,6 +244,11 @@ const ProfileHeaderLoaded = observer(
|
|||
label: 'Share',
|
||||
onPress: onPressShare,
|
||||
},
|
||||
{
|
||||
testID: 'profileHeaderDropdownListAddRemoveBtn',
|
||||
label: 'Add to Lists',
|
||||
onPress: onPressAddRemoveLists,
|
||||
},
|
||||
]
|
||||
if (!isMe) {
|
||||
items.push({sep: true})
|
||||
|
|
@ -269,6 +285,7 @@ const ProfileHeaderLoaded = observer(
|
|||
onPressUnblockAccount,
|
||||
onPressBlockAccount,
|
||||
onPressReportAccount,
|
||||
onPressAddRemoveLists,
|
||||
])
|
||||
|
||||
const blockHide = !isMe && (view.viewer.blocking || view.viewer.blockedBy)
|
||||
|
|
@ -422,31 +439,42 @@ const ProfileHeaderLoaded = observer(
|
|||
{view.viewer.blocking ? (
|
||||
<View
|
||||
testID="profileHeaderBlockedNotice"
|
||||
style={[styles.moderationNotice, pal.view, pal.border]}>
|
||||
<FontAwesomeIcon icon="ban" style={[pal.text, s.mr5]} />
|
||||
<Text type="md" style={[s.mr2, pal.text]}>
|
||||
style={[styles.moderationNotice, pal.viewLight]}>
|
||||
<FontAwesomeIcon icon="ban" style={[pal.text]} />
|
||||
<Text type="lg-medium" style={pal.text}>
|
||||
Account blocked
|
||||
</Text>
|
||||
</View>
|
||||
) : view.viewer.muted ? (
|
||||
<View
|
||||
testID="profileHeaderMutedNotice"
|
||||
style={[styles.moderationNotice, pal.view, pal.border]}>
|
||||
style={[styles.moderationNotice, pal.viewLight]}>
|
||||
<FontAwesomeIcon
|
||||
icon={['far', 'eye-slash']}
|
||||
style={[pal.text, s.mr5]}
|
||||
style={[pal.text]}
|
||||
/>
|
||||
<Text type="md" style={[s.mr2, pal.text]}>
|
||||
Account muted
|
||||
<Text type="lg-medium" style={pal.text}>
|
||||
Account muted{' '}
|
||||
{view.viewer.mutedByList && (
|
||||
<Text type="lg-medium" style={pal.text}>
|
||||
by{' '}
|
||||
<TextLink
|
||||
type="lg-medium"
|
||||
style={pal.link}
|
||||
href={listUriToHref(view.viewer.mutedByList.uri)}
|
||||
text={view.viewer.mutedByList.name}
|
||||
/>
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
) : undefined}
|
||||
{view.viewer.blockedBy && (
|
||||
<View
|
||||
testID="profileHeaderBlockedNotice"
|
||||
style={[styles.moderationNotice, pal.view, pal.border]}>
|
||||
<FontAwesomeIcon icon="ban" style={[pal.text, s.mr5]} />
|
||||
<Text type="md" style={[s.mr2, pal.text]}>
|
||||
style={[styles.moderationNotice, pal.viewLight]}>
|
||||
<FontAwesomeIcon icon="ban" style={[pal.text]} />
|
||||
<Text type="lg-medium" style={pal.text}>
|
||||
This account has blocked you
|
||||
</Text>
|
||||
</View>
|
||||
|
|
@ -595,10 +623,10 @@ const styles = StyleSheet.create({
|
|||
moderationNotice: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
gap: 8,
|
||||
},
|
||||
|
||||
br40: {borderRadius: 40},
|
||||
|
|
|
|||
|
|
@ -10,17 +10,19 @@ import {UserGroupIcon} from 'lib/icons'
|
|||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
|
||||
export function EmptyState({
|
||||
testID,
|
||||
icon,
|
||||
message,
|
||||
style,
|
||||
}: {
|
||||
testID?: string
|
||||
icon: IconProp | 'user-group'
|
||||
message: string
|
||||
style?: StyleProp<ViewStyle>
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<View style={[styles.container, style]}>
|
||||
<View testID={testID} style={[styles.container, style]}>
|
||||
<View style={styles.iconContainer}>
|
||||
{icon === 'user-group' ? (
|
||||
<UserGroupIcon size="64" style={styles.icon} />
|
||||
|
|
|
|||
88
src/view/com/util/EmptyStateWithButton.tsx
Normal file
88
src/view/com/util/EmptyStateWithButton.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, View} from 'react-native'
|
||||
import {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIconStyle,
|
||||
} from '@fortawesome/react-native-fontawesome'
|
||||
import {IconProp} from '@fortawesome/fontawesome-svg-core'
|
||||
import {Text} from './text/Text'
|
||||
import {Button} from './forms/Button'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {s} from 'lib/styles'
|
||||
|
||||
interface Props {
|
||||
testID?: string
|
||||
icon: IconProp
|
||||
message: string
|
||||
buttonLabel: string
|
||||
onPress: () => void
|
||||
}
|
||||
|
||||
export function EmptyStateWithButton(props: Props) {
|
||||
const pal = usePalette('default')
|
||||
const palInverted = usePalette('inverted')
|
||||
|
||||
return (
|
||||
<View testID={props.testID} style={styles.container}>
|
||||
<View style={styles.iconContainer}>
|
||||
<FontAwesomeIcon
|
||||
icon={props.icon}
|
||||
style={[styles.icon, pal.text]}
|
||||
size={62}
|
||||
/>
|
||||
</View>
|
||||
<Text type="xl-medium" style={[s.textCenter, pal.text]}>
|
||||
{props.message}
|
||||
</Text>
|
||||
<View style={styles.btns}>
|
||||
<Button
|
||||
testID={props.testID ? `${props.testID}-button` : undefined}
|
||||
type="inverted"
|
||||
style={styles.btn}
|
||||
onPress={props.onPress}>
|
||||
<FontAwesomeIcon
|
||||
icon="plus"
|
||||
style={palInverted.text as FontAwesomeIconStyle}
|
||||
size={14}
|
||||
/>
|
||||
<Text type="lg-medium" style={palInverted.text}>
|
||||
{props.buttonLabel}
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
height: '100%',
|
||||
paddingVertical: 40,
|
||||
paddingHorizontal: 30,
|
||||
},
|
||||
iconContainer: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
icon: {
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
},
|
||||
btns: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
btn: {
|
||||
gap: 10,
|
||||
marginVertical: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 24,
|
||||
borderRadius: 30,
|
||||
},
|
||||
notice: {
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
marginHorizontal: 30,
|
||||
},
|
||||
})
|
||||
|
|
@ -20,11 +20,13 @@ export const ViewHeader = observer(function ({
|
|||
canGoBack,
|
||||
hideOnScroll,
|
||||
showOnDesktop,
|
||||
renderButton,
|
||||
}: {
|
||||
title: string
|
||||
canGoBack?: boolean
|
||||
hideOnScroll?: boolean
|
||||
showOnDesktop?: boolean
|
||||
renderButton?: () => JSX.Element
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
|
|
@ -46,7 +48,7 @@ export const ViewHeader = observer(function ({
|
|||
|
||||
if (isDesktopWeb) {
|
||||
if (showOnDesktop) {
|
||||
return <DesktopWebHeader title={title} />
|
||||
return <DesktopWebHeader title={title} renderButton={renderButton} />
|
||||
}
|
||||
return null
|
||||
} else {
|
||||
|
|
@ -79,13 +81,23 @@ export const ViewHeader = observer(function ({
|
|||
{title}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={canGoBack ? styles.backBtn : styles.backBtnWide} />
|
||||
{renderButton ? (
|
||||
renderButton()
|
||||
) : (
|
||||
<View style={canGoBack ? styles.backBtn : styles.backBtnWide} />
|
||||
)}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
function DesktopWebHeader({title}: {title: string}) {
|
||||
function DesktopWebHeader({
|
||||
title,
|
||||
renderButton,
|
||||
}: {
|
||||
title: string
|
||||
renderButton?: () => JSX.Element
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<CenteredView style={[styles.header, styles.desktopHeader, pal.border]}>
|
||||
|
|
@ -94,6 +106,7 @@ function DesktopWebHeader({title}: {title: string}) {
|
|||
{title}
|
||||
</Text>
|
||||
</View>
|
||||
{renderButton?.()}
|
||||
</CenteredView>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue