Onboarding recommended follows (#1457)
* upgrade api package * add RecommendedFollows as a step in onboarding * add list of recommended follows from suggested actor model * remove dead code * hoist suggestedActors into onboarding model * add comments * load more suggested follows on follow * styling changes * add animation * tweak animations * adjust styling slightly * adjust styles on mobile * styling improvements for web * fix text alignment in RecommendedFollows * dedupe inserted suggestions * fix animation duration * Minor spacing tweak --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com> and Eric Bailey <git@esb.lol>
This commit is contained in:
		
							parent
							
								
									da8499c881
								
							
						
					
					
						commit
						859588c3f6
					
				
					 11 changed files with 450 additions and 20 deletions
				
			
		| 
						 | 
				
			
			@ -1,5 +1,5 @@
 | 
			
		|||
import React from 'react'
 | 
			
		||||
import {View} from 'react-native'
 | 
			
		||||
import {StyleProp, TextStyle, View} from 'react-native'
 | 
			
		||||
import {observer} from 'mobx-react-lite'
 | 
			
		||||
import {Button, ButtonType} from '../util/forms/Button'
 | 
			
		||||
import {useStores} from 'state/index'
 | 
			
		||||
| 
						 | 
				
			
			@ -11,11 +11,13 @@ export const FollowButton = observer(function FollowButtonImpl({
 | 
			
		|||
  followedType = 'default',
 | 
			
		||||
  did,
 | 
			
		||||
  onToggleFollow,
 | 
			
		||||
  labelStyle,
 | 
			
		||||
}: {
 | 
			
		||||
  unfollowedType?: ButtonType
 | 
			
		||||
  followedType?: ButtonType
 | 
			
		||||
  did: string
 | 
			
		||||
  onToggleFollow?: (v: boolean) => void
 | 
			
		||||
  labelStyle?: StyleProp<TextStyle>
 | 
			
		||||
}) {
 | 
			
		||||
  const store = useStores()
 | 
			
		||||
  const followState = store.me.follows.getFollowState(did)
 | 
			
		||||
| 
						 | 
				
			
			@ -28,18 +30,18 @@ export const FollowButton = observer(function FollowButtonImpl({
 | 
			
		|||
    const updatedFollowState = await store.me.follows.fetchFollowState(did)
 | 
			
		||||
    if (updatedFollowState === FollowState.Following) {
 | 
			
		||||
      try {
 | 
			
		||||
        onToggleFollow?.(false)
 | 
			
		||||
        await store.agent.deleteFollow(store.me.follows.getFollowUri(did))
 | 
			
		||||
        store.me.follows.removeFollow(did)
 | 
			
		||||
        onToggleFollow?.(false)
 | 
			
		||||
      } catch (e: any) {
 | 
			
		||||
        store.log.error('Failed to delete follow', e)
 | 
			
		||||
        Toast.show('An issue occurred, please try again.')
 | 
			
		||||
      }
 | 
			
		||||
    } else if (updatedFollowState === FollowState.NotFollowing) {
 | 
			
		||||
      try {
 | 
			
		||||
        onToggleFollow?.(true)
 | 
			
		||||
        const res = await store.agent.follow(did)
 | 
			
		||||
        store.me.follows.addFollow(did, res.uri)
 | 
			
		||||
        onToggleFollow?.(true)
 | 
			
		||||
      } catch (e: any) {
 | 
			
		||||
        store.log.error('Failed to create follow', e)
 | 
			
		||||
        Toast.show('An issue occurred, please try again.')
 | 
			
		||||
| 
						 | 
				
			
			@ -52,8 +54,10 @@ export const FollowButton = observer(function FollowButtonImpl({
 | 
			
		|||
      type={
 | 
			
		||||
        followState === FollowState.Following ? followedType : unfollowedType
 | 
			
		||||
      }
 | 
			
		||||
      labelStyle={labelStyle}
 | 
			
		||||
      onPress={onToggleFollowInner}
 | 
			
		||||
      label={followState === FollowState.Following ? 'Unfollow' : 'Follow'}
 | 
			
		||||
      withLoading={true}
 | 
			
		||||
    />
 | 
			
		||||
  )
 | 
			
		||||
})
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue