taro/src/_moment/pages/relation.tsx

import { MainColorType } from "@/context/themes/color";
import { followUser, getMyFollowers, getMyFollowings, getMyFriends } from "@/services/friend";
import { View, Image, Text, ScrollView } from "@tarojs/components";
import { useEffect, useState } from "react";
import './relation.scss'
import NewButton, { NewButtonType } from "@/_health/base/new_button";
import { rpxToPx } from "@/utils/tools";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { IconArrow } from "@/components/basic/Icons";
import Taro from "@tarojs/taro";
import NoRecord from "@/_health/components/no_record";

export default function Relation() {
    const [count, setCount] = useState(0)
    const [friends, setFriends] = useState<any>([])
    const [followers, setFollowers] = useState<any>([])
    const [followings, setFollowings] = useState<any>([])
    const [index, setIndex] = useState(0)

    const [list, setList] = useState<any>([])
    const [loaded, setLoaded] = useState(false)
    const [page, setPage] = useState(1)
    const [isPulling, setIsPulling] = useState(false)
    const [isLoading, setIsLoading] = useState(false)
    const [total, setTotal] = useState(-1)

    const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
    const navigationBarHeight = systemInfo.statusBarHeight + 44;

    useEffect(() => {
        // getRelation()
        // getFollowers()
        // getFollowings()

        Taro.eventCenter.on('followUser', listenFollowUser)
        Taro.eventCenter.on('unfollowUser', listenUnfollowUser)

        setPage(1)
        getList(1)

        return () => {
            // Taro.eventCenter.off('followUser')
            // Taro.eventCenter.off('unfollowUser')
        }
    }, [])

    useEffect(() => {
        setPage(1)
        getList(1)
    }, [index])

    function getList(i) {
        setPage(i)
        if (index == 0) {
            getRelation(i)
        }
        else if (index == 1) {
            getFollowings(i)
        }
        else {
            getFollowers(i)
        }
    }

    function onRefresh() {
        setIsPulling(true)
        setPage(1)
        getList(1)
    }

    function more() {
        if (isLoading) return
        if (total == list.length) return
        var i = page + 1
        getList(i)
    }



    function listenFollowUser(e) {
        console.log('follow user', e)
        // getRelation()
        // getFollowers()
        // getFollowings()
        getList(1)
    }

    function listenUnfollowUser(e) {
        console.log('unfollow user', e)
        // getRelation()
        // getFollowers()
        // getFollowings()
        getList(1)
    }

    function getRelation(i) {
        setPage(i)
        setIsLoading(true)
        getMyFriends({
            page: i,
            limit: 20
        }).then(res => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
            setCount((res as any).total)
            // setFriends((res as any).data)
            if (i == 1) {
                setList((res as any).data)
            }
            else {
                setList([...list, ...(res as any).data])
            }
        }).catch(e => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
        })
    }
    function getFollowers(i) {
        setPage(i)
        setIsLoading(true)
        getMyFollowers({
            page: i,
            limit: 20
        }).then(res => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
            setCount((res as any).total)
            // setFollowers((res as any).data)
            if (i == 1) {
                setList((res as any).data)
            }
            else {
                setList([...list, ...(res as any).data])
            }
        }).catch(e => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
        })
    }
    function getFollowings(i) {
        setPage(i)
        setIsLoading(true)
        getMyFollowings({
            page: i,
            limit: 20
        }).then(res => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
            setCount((res as any).total)
            // setFollowings((res as any).data)
            if (i == 1) {
                setList((res as any).data)
            }
            else {
                setList([...list, ...(res as any).data])
            }
        }).catch(e => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
        })
    }

    function friendsList() {
        return <View>
            {/* <View>好友数量{count}</View> */}
            {
                friends.map((item, index) => {
                    return followItem(item, index * 1000)
                })
            }
        </View>
    }

    function followerList() {
        return <View>
            {/* <View>我的关注{count2}</View> */}
            {
                followers.map((item, index) => {
                    return followItem(item, index * 1000)
                })
            }
        </View>
    }

    function followingList() {
        return <View>
            {/* <View>我的粉丝{count3}</View> */}
            {
                followings.map((item, index) => {
                    return followItem(item, index)
                })
            }
        </View>
    }

    function userList() {
        return <View>
            {/* <View>我的粉丝{count3}</View> */}
            {
                list.map((item, index) => {
                    return followItem(item, index)
                })
            }
        </View>
    }



    function tapFollow(item) {
        var params: any = {
            follow_origin: 'WECHAT_PRIVATE_CHAT',
            user_id: item.id,
        }
        followUser(params).then(res => {
            // getProfile()
            Taro.eventCenter.trigger('followUser', item.id)
            debugger
        })
    }

    function followItem(item, index) {
        return <View key={index} className="relation_item" onClick={() => {
            jumpPage('./home?uid=' + item.id)
        }}>
            <Image src={item.avatar} className="relation_avatar" />
            <Text className="h34" style={{ color: MainColorType.link, flex: 1 }}>{item.nickname}</Text>
            {/* <Text>{item.relation}</Text> */}
            {
                item.relation == 'FRIEND' && <Text className="h30 g02">Friend</Text>
            }
            {
                item.relation == 'FOLLOWING' && <Text className="h30 g02">Following</Text>
            }
            {
                item.relation == 'FOLLOWER' && <NewButton
                    title="Follow"
                    type={NewButtonType.alpha}
                    color={MainColorType.blue}
                    width={rpxToPx(136)}
                    height={rpxToPx(72)}
                    onClick={() => {
                        tapFollow(item)
                    }}
                />
            }
            <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
            <View className="border_footer_line" style={{ left: rpxToPx(150) }} />
        </View>
    }

    function onScroll() {

    }

    // if (loaded && list.length == 0)
    //     return <NoRecord />

    return <View >
        <View style={{
            position: 'fixed',
            top: 0,
            left: 0,
            zIndex: 10,
            height: navigationBarHeight, width: rpxToPx(750), backgroundColor: '#f5f5f5', display: 'flex',
            flexDirection: 'column', justifyContent: 'flex-end'
        }}>
            <View style={{ height: 44, width: rpxToPx(750), position: 'relative', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                {/* <View onClick={() => {
                            Taro.navigateBack()
                        }} style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 80, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Back</View> */}
                <Image src={require('@assets/_health/navi_back.png')} style={{
                    position: 'absolute',
                    width: rpxToPx(92),
                    height: rpxToPx(64),
                    left: 0,
                    top: 22 - rpxToPx(32)
                }}
                    onClick={() => {
                        Taro.navigateBack()
                    }}
                />
                <View style={{ display: 'flex', flexDirection: 'row', height: 44, alignItems: 'center', justifyContent: 'center' }}>
                    <View className="relation_tab_item" onClick={() => { setIndex(0) }}>
                        <View style={{ color: index == 0 ? '#000' : MainColorType.g02, fontWeight: 'bold' }}>搭子</View>
                        <View className={index == 0 ? 'sel_line1' : 'line'}></View>
                    </View>

                    <View className="relation_tab_item" onClick={() => { setIndex(1) }}>
                        <View style={{ color: index == 1 ? '#000' : MainColorType.g02, fontWeight: 'bold' }}>关注</View>
                        <View className={index == 1 ? 'sel_line1' : 'line'}></View>
                    </View>

                    <View className="relation_tab_item" onClick={() => { setIndex(2) }}>
                        <View style={{ color: index == 2 ? '#000' : MainColorType.g02, fontWeight: 'bold' }}>粉丝</View>
                        <View className={index == 2 ? 'sel_line1' : 'line'}></View>
                    </View>
                    {/* <View style={{ flex: 1, color: index == 0 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(0) }}>搭子</View>
                    <View style={{ flex: 1, color: index == 1 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(1) }}>关注</View>
                    <View style={{ flex: 1, color: index == 2 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(2) }}>粉丝</View> */}
                </View>
            </View>
        </View><ScrollView style={{
            marginTop: navigationBarHeight,
            height: '95vh'
        }}
            enableBackToTop
            scrollY={true}
            refresherEnabled={true}
            upperThreshold={70}
            lowerThreshold={140}
            refresherBackground={MainColorType.g05}
            onRefresherRefresh={onRefresh}
            refresherTriggered={isPulling}
            onScroll={onScroll}
            onScrollToUpper={() => {

            }}
            onScrollToLower={more}
        ><View >

                {
                    userList()
                }
                {
                    loaded && list.length == 0 && <NoRecord />
                }

                {/* {
            index == 0 && friendsList()
        }
        {
            index == 1 && followingList()
        }
        {
            index == 2 && followerList()
        } */}
            </View>
        </ScrollView>
    </View>

}