about summary refs log tree commit diff
path: root/src/view/com/profile/FollowButton.tsx
blob: 71462bea89503ed152a8ae2771fba0ba45460c97 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {Text} from '../util/text/Text'
import {useStores} from 'state/index'
import * as apilib from 'lib/api/index'
import * as Toast from '../util/Toast'
import {usePalette} from 'lib/hooks/usePalette'

const FollowButton = observer(
  ({did, declarationCid}: {did: string; declarationCid: string}) => {
    const store = useStores()
    const pal = usePalette('default')
    const isFollowing = store.me.follows.isFollowing(did)

    const onToggleFollow = async () => {
      if (store.me.follows.isFollowing(did)) {
        try {
          await apilib.unfollow(store, store.me.follows.getFollowUri(did))
          store.me.follows.removeFollow(did)
        } catch (e: any) {
          store.log.error('Failed fo delete follow', e)
          Toast.show('An issue occurred, please try again.')
        }
      } else {
        try {
          const res = await apilib.follow(store, did, declarationCid)
          store.me.follows.addFollow(did, res.uri)
        } catch (e: any) {
          store.log.error('Failed fo create follow', e)
          Toast.show('An issue occurred, please try again.')
        }
      }
    }

    return (
      <TouchableOpacity onPress={onToggleFollow}>
        <View style={[styles.btn, pal.btn]}>
          <Text type="button" style={[pal.text]}>
            {isFollowing ? 'Unfollow' : 'Follow'}
          </Text>
        </View>
      </TouchableOpacity>
    )
  },
)

export default FollowButton

const styles = StyleSheet.create({
  btn: {
    paddingVertical: 7,
    borderRadius: 50,
    marginLeft: 6,
    paddingHorizontal: 14,
  },
})