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 {NavigationModel} from 'state/models/navigation'
|
||||||
import {match, MatchResult} from '../../routes'
|
import {match, MatchResult} from '../../routes'
|
||||||
import {DesktopHeader} from './DesktopHeader'
|
import {DesktopHeader} from './DesktopHeader'
|
||||||
import {DesktopRightColumn} from './DesktopRightColumn'
|
|
||||||
import {Onboard} from '../../screens/Onboard'
|
import {Onboard} from '../../screens/Onboard'
|
||||||
import {Login} from '../../screens/Login'
|
import {Login} from '../../screens/Login'
|
||||||
import {ErrorBoundary} from '../../com/util/ErrorBoundary'
|
import {ErrorBoundary} from '../../com/util/ErrorBoundary'
|
||||||
|
|
@ -58,7 +57,6 @@ export const WebShell: React.FC = observer(() => {
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
</View>
|
</View>
|
||||||
))}
|
))}
|
||||||
<DesktopRightColumn />
|
|
||||||
<Composer
|
<Composer
|
||||||
active={store.shell.isComposerActive}
|
active={store.shell.isComposerActive}
|
||||||
onClose={() => store.shell.closeComposer()}
|
onClose={() => store.shell.closeComposer()}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue