Skip to content

Commit

Permalink
Add 'follows you' to followers and follows (close #103)
Browse files Browse the repository at this point in the history
  • Loading branch information
pfrazee committed Feb 16, 2023
1 parent 52434af commit b329971
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 111 deletions.
81 changes: 78 additions & 3 deletions src/view/com/profile/ProfileCard.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
import {UserAvatar} from '../util/UserAvatar'
import {s} from '../../lib/styles'
import {usePalette} from '../../lib/hooks/usePalette'
import {useStores} from '../../../state'

export function ProfileCard({
handle,
displayName,
avatar,
description,
isFollowedBy,
renderButton,
}: {
handle: string
displayName?: string
avatar?: string
description?: string
isFollowedBy?: boolean
renderButton?: () => JSX.Element
}) {
const pal = usePalette('default')
Expand All @@ -36,12 +39,19 @@ export function ProfileCard({
/>
</View>
<View style={styles.layoutContent}>
<Text style={[s.bold, pal.text]} numberOfLines={1}>
<Text type="lg" style={[s.bold, pal.text]} numberOfLines={1}>
{displayName || handle}
</Text>
<Text type="sm" style={[pal.textLight]} numberOfLines={1}>
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
@{handle}
</Text>
{isFollowedBy && (
<View style={s.flexRow}>
<View style={[s.mt5, pal.btn, styles.pill]}>
<Text type="xs">Follows You</Text>
</View>
</View>
)}
</View>
{renderButton ? (
<View style={styles.layoutButton}>{renderButton()}</View>
Expand All @@ -58,6 +68,60 @@ export function ProfileCard({
)
}

export function ProfileCardWithFollowBtn({
handle,
displayName,
avatar,
description,
isFollowedBy,
}: {
handle: string
displayName?: string
avatar?: string
description?: string
isFollowedBy?: boolean
}) {
const store = useStores()
const isMe = store.me.handle === handle
const isFollowing = false // TODO
const onToggleFollow = () => {} // TODO
return (
<ProfileCard
handle={handle}
displayName={displayName}
avatar={avatar}
description={description}
isFollowedBy={isFollowedBy}
renderButton={
isMe
? undefined
: () => (
<FollowBtn isFollowing={isFollowing} onPress={onToggleFollow} />
)
}
/>
)
}

function FollowBtn({
isFollowing,
onPress,
}: {
isFollowing: boolean
onPress: () => void
}) {
const pal = usePalette('default')
return (
<TouchableOpacity onPress={onPress}>
<View style={[styles.btn, pal.btn]}>
<Text type="button" style={[pal.text]}>
{isFollowing ? 'Unfollow' : 'Follow'}
</Text>
</View>
</TouchableOpacity>
)
}

const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
Expand Down Expand Up @@ -93,4 +157,15 @@ const styles = StyleSheet.create({
paddingRight: 10,
paddingBottom: 10,
},
pill: {
borderRadius: 4,
paddingHorizontal: 6,
paddingVertical: 2,
},
btn: {
paddingVertical: 7,
borderRadius: 50,
marginLeft: 6,
paddingHorizontal: 14,
},
})
62 changes: 8 additions & 54 deletions src/view/com/profile/ProfileFollowers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,9 @@ import {
UserFollowersViewModel,
FollowerItem,
} from '../../../state/models/user-followers-view'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {UserAvatar} from '../util/UserAvatar'
import {ProfileCardWithFollowBtn} from './ProfileCard'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import {usePalette} from '../../lib/hooks/usePalette'

export const ProfileFollowers = observer(function ProfileFollowers({
name,
Expand Down Expand Up @@ -62,7 +58,13 @@ export const ProfileFollowers = observer(function ProfileFollowers({
// loaded
// =
const renderItem = ({item}: {item: FollowerItem}) => (
<User key={item.did} item={item} />
<ProfileCardWithFollowBtn
key={item.did}
handle={item.handle}
displayName={item.displayName}
avatar={item.avatar}
isFollowedBy={!!item.viewer?.followedBy}
/>
)
return (
<FlatList
Expand All @@ -83,55 +85,7 @@ export const ProfileFollowers = observer(function ProfileFollowers({
)
})

const User = ({item}: {item: FollowerItem}) => {
const pal = usePalette('default')
return (
<Link
style={[styles.outer, pal.view, pal.border]}
href={`/profile/${item.handle}`}
title={item.handle}
noFeedback>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<UserAvatar
size={40}
displayName={item.displayName}
handle={item.handle}
avatar={item.avatar}
/>
</View>
<View style={styles.layoutContent}>
<Text style={[s.bold, pal.text]}>
{item.displayName || item.handle}
</Text>
<Text type="sm" style={[pal.textLight]}>
@{item.handle}
</Text>
</View>
</View>
</Link>
)
}

const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
},
layout: {
flexDirection: 'row',
},
layoutAvi: {
width: 60,
paddingLeft: 10,
paddingTop: 10,
paddingBottom: 10,
},
layoutContent: {
flex: 1,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
footer: {
height: 200,
paddingTop: 20,
Expand Down
62 changes: 8 additions & 54 deletions src/view/com/profile/ProfileFollows.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,9 @@ import {
UserFollowsViewModel,
FollowItem,
} from '../../../state/models/user-follows-view'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {UserAvatar} from '../util/UserAvatar'
import {ProfileCardWithFollowBtn} from './ProfileCard'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import {usePalette} from '../../lib/hooks/usePalette'

export const ProfileFollows = observer(function ProfileFollows({
name,
Expand Down Expand Up @@ -62,7 +58,13 @@ export const ProfileFollows = observer(function ProfileFollows({
// loaded
// =
const renderItem = ({item}: {item: FollowItem}) => (
<User key={item.did} item={item} />
<ProfileCardWithFollowBtn
key={item.did}
handle={item.handle}
displayName={item.displayName}
avatar={item.avatar}
isFollowedBy={!!item.viewer?.followedBy}
/>
)
return (
<FlatList
Expand All @@ -83,55 +85,7 @@ export const ProfileFollows = observer(function ProfileFollows({
)
})

const User = ({item}: {item: FollowItem}) => {
const pal = usePalette('default')
return (
<Link
style={[styles.outer, pal.view, pal.border]}
href={`/profile/${item.handle}`}
title={item.handle}
noFeedback>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<UserAvatar
size={40}
displayName={item.displayName}
handle={item.handle}
avatar={item.avatar}
/>
</View>
<View style={styles.layoutContent}>
<Text style={[s.bold, pal.text]}>
{item.displayName || item.handle}
</Text>
<Text type="sm" style={[pal.textLight]}>
@{item.handle}
</Text>
</View>
</View>
</Link>
)
}

const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
},
layout: {
flexDirection: 'row',
},
layoutAvi: {
width: 60,
paddingLeft: 10,
paddingTop: 10,
paddingBottom: 10,
},
layoutContent: {
flex: 1,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
footer: {
height: 200,
paddingTop: 20,
Expand Down

0 comments on commit b329971

Please sign in to comment.