Remove the desktop right column for now
Paul Frazee
parent
fa115c1cba
commit
80bd3398d7
|
|
@ -1,190 +0,0 @@
|
|||
import React, {useEffect, useState} from 'react'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import _omit from 'lodash.omit'
|
||||
import {Link} from '../util/Link'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {useStores} from 'state/index'
|
||||
import * as apilib from 'lib/api/index'
|
||||
import {
|
||||
SuggestedActorsViewModel,
|
||||
SuggestedActor,
|
||||
} from 'state/models/suggested-actors-view'
|
||||
import {s, gradients} from 'lib/styles'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
|
||||
export const LiteSuggestedFollows = observer(() => {
|
||||
const store = useStores()
|
||||
const [suggestions, setSuggestions] = useState<SuggestedActor[] | undefined>(
|
||||
undefined,
|
||||
)
|
||||
const [follows, setFollows] = useState<Record<string, string>>({})
|
||||
|
||||
useEffect(() => {
|
||||
const view = new SuggestedActorsViewModel(store)
|
||||
view.loadMore().then(
|
||||
() => {
|
||||
setSuggestions(view.suggestions.slice().sort(randomize).slice(0, 3))
|
||||
},
|
||||
(err: any) => {
|
||||
setSuggestions([])
|
||||
store.log.error('Failed to fetch suggestions', err)
|
||||
},
|
||||
)
|
||||
}, [store, store.log])
|
||||
|
||||
const onPressFollow = async (item: SuggestedActor) => {
|
||||
try {
|
||||
const res = await apilib.follow(store, item.did, item.declaration.cid)
|
||||
setFollows({[item.did]: res.uri, ...follows})
|
||||
} catch (e: any) {
|
||||
store.log.error('Failed fo create follow', e)
|
||||
Toast.show('An issue occurred, please try again.')
|
||||
}
|
||||
}
|
||||
const onPressUnfollow = async (item: SuggestedActor) => {
|
||||
try {
|
||||
await apilib.unfollow(store, follows[item.did])
|
||||
setFollows(_omit(follows, [item.did]))
|
||||
} catch (e: any) {
|
||||
store.log.error('Failed fo delete follow', e)
|
||||
Toast.show('An issue occurred, please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
{!suggestions ? (
|
||||
<View>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
) : (
|
||||
<View>
|
||||
{suggestions.map(item => (
|
||||
<Link
|
||||
key={item.did}
|
||||
href={`/profile/${item.handle}`}
|
||||
title={item.displayName || item.handle}>
|
||||
<User
|
||||
item={item}
|
||||
follow={follows[item.did]}
|
||||
onPressFollow={onPressFollow}
|
||||
onPressUnfollow={onPressUnfollow}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
const User = ({
|
||||
item,
|
||||
follow,
|
||||
onPressFollow,
|
||||
onPressUnfollow,
|
||||
}: {
|
||||
item: SuggestedActor
|
||||
follow: string | undefined
|
||||
onPressFollow: (item: SuggestedActor) => void
|
||||
onPressUnfollow: (item: SuggestedActor) => void
|
||||
}) => {
|
||||
const pal = usePalette('default')
|
||||
const palInverted = usePalette('inverted')
|
||||
return (
|
||||
<View style={[styles.actor]}>
|
||||
<View style={styles.actorMeta}>
|
||||
<View style={styles.actorAvi}>
|
||||
<UserAvatar
|
||||
size={40}
|
||||
displayName={item.displayName}
|
||||
handle={item.handle}
|
||||
avatar={item.avatar}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.actorContent}>
|
||||
<Text type="lg-medium" style={pal.text} numberOfLines={1}>
|
||||
{item.displayName || item.handle}
|
||||
</Text>
|
||||
<Text type="sm" style={pal.textLight} numberOfLines={1}>
|
||||
@{item.handle}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.actorBtn}>
|
||||
{follow ? (
|
||||
<TouchableOpacity onPress={() => onPressUnfollow(item)}>
|
||||
<View style={[styles.btn, pal.btn]}>
|
||||
<Text type="button" style={pal.text}>
|
||||
Unfollow
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
onPress={() => onPressFollow(item)}
|
||||
style={[styles.btn, palInverted.view]}>
|
||||
<Text type="sm-medium" style={palInverted.text}>
|
||||
Follow
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function randomize() {
|
||||
return Math.random() > 0.5 ? 1 : -1
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
footer: {
|
||||
height: 200,
|
||||
paddingTop: 20,
|
||||
},
|
||||
|
||||
actor: {},
|
||||
actorMeta: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
actorAvi: {
|
||||
width: 50,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
actorContent: {
|
||||
flex: 1,
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
},
|
||||
actorBtn: {
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
},
|
||||
|
||||
gradientBtn: {
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
secondaryBtn: {
|
||||
paddingHorizontal: 8,
|
||||
},
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 7,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 50,
|
||||
marginLeft: 6,
|
||||
},
|
||||
})
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, View} from 'react-native'
|
||||
import {Text} from '../../com/util/text/Text'
|
||||
import {LiteSuggestedFollows} from '../../com/discover/LiteSuggestedFollows'
|
||||
import {s} from 'lib/styles'
|
||||
|
||||
export const DesktopRightColumn: React.FC = () => {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text type="lg-bold" style={s.mb10}>
|
||||
Suggested Follows
|
||||
</Text>
|
||||
<LiteSuggestedFollows />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 60,
|
||||
width: '400px',
|
||||
paddingHorizontal: 16,
|
||||
paddingRight: 32,
|
||||
paddingTop: 20,
|
||||
},
|
||||
})
|
||||
|
|
@ -6,7 +6,6 @@ import {useStores} from 'state/index'
|
|||
import {NavigationModel} from 'state/models/navigation'
|
||||
import {match, MatchResult} from '../../routes'
|
||||
import {DesktopHeader} from './DesktopHeader'
|
||||
import {DesktopRightColumn} from './DesktopRightColumn'
|
||||
import {Onboard} from '../../screens/Onboard'
|
||||
import {Login} from '../../screens/Login'
|
||||
import {ErrorBoundary} from '../../com/util/ErrorBoundary'
|
||||
|
|
@ -58,7 +57,6 @@ export const WebShell: React.FC = observer(() => {
|
|||
</ErrorBoundary>
|
||||
</View>
|
||||
))}
|
||||
<DesktopRightColumn />
|
||||
<Composer
|
||||
active={store.shell.isComposerActive}
|
||||
onClose={() => store.shell.closeComposer()}
|
||||
|
|
|
|||
Loading…
Reference in New Issue