Likes.js

---

await persistCache({
cache,
storage: new ~~~
serialize: false,
})

==> Query를 수정했을때, error가 뜰 경우 serialize: false를 넣는다.
==>예를 들어 seeFeed Query에서 data를 받는 값을 추가했을때...

---

들어가기
3likes 를 클릭했을때, like를 click한 user를 볼 수 있음.
그 user들을 follow, unfollow할 수 있고 그 user들의 profile을 볼 수 있음.

1. screens/Likes.js

import { gql, useQuery } from '@apollo/client'
import React, { useState } from 'react'
import { FlatList, Text, View } from 'react-native'
import ScreenLayout from '../components/ScreenLayout'
import UserRow from '../components/UseRow'

const LIKES_QUERY = gql`      ///photo에 like를 누른 사람들을 보는 Query
  query seePhotoLikes($id: Int!) {
    seePhotoLikes(id: $id) {
      id
      username
      avatar
      isFollowing
      isMe
    }
  }
`

export default function Likes({ route }) {
  const [refreshing, setRefreshing] = useState(false)
  const { data, loading, refetch } = useQuery(LIKES_QUERY, {
    variables: {
      id: route?.params?.photoId,
    },
    skip: !route?.params?.photoId,  ///photoId가 없을 경우 skip함.건너뜀
  })
  const onRefresh = async () => {
    setRefreshing(true)
    await refetch()
    setRefreshing(false)
  }

  const renderUser = ({ item: user }) => <UserRow {...user} />
  //UserRow component를 만들어 rendering함. data는 ...user로 보내줌.

  return (
    <ScreenLayout loading={loading}>
      <FlatList
        ItemSeparatorComponent={() => (  ///각각의 user들 사이에 구분선을 넣어줌.
          <View
            style={{
              widht: '100%',
              height: 1,
              backgroundColor: 'rgba(255,255,255,0.2)',
            }}
          ></View>
        )}
        refreshing={refreshing}
        onRefresh={onRefresh}
        data={data?.seePhotoLikes}
        keyExtractor={(item) => '' + item.id}
        renderItem={renderUser}
        style={{ width: '100%' }}
      />
    </ScreenLayout>
  )
}

2. components/UseRow.js

import { useNavigation } from '@react-navigation/native'
import React from 'react'
import styled from 'styled-components/native'

const Column = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
`

const Avatar = styled.Image`
  width: 40px;
  height: 40px;
  border-radius: 25px;
  margin-right: 10px;
`

const Username = styled.Text`
  font-weight: 600;
  color: white;
`

const Wrapper = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
`
const FollowBtn = styled.TouchableOpacity`
  background-color: skyblue;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 5px;
`
const FollowBtnText = styled.Text`
  color: white;
  font-weight: 600;
`

export default function UserRow({ id, avatar, username, isFollowing, isMe }) {
  const navigation = useNavigation()
  return (
    <Wrapper> ///avatar나 username을 클릭하면, profile page로 이동함. username, id
              ///도 같이 보내줌.
      <Column onPress={() => navigation.navigate('Profile', { username, id })}>
        <Avatar source={{ uri: avatar }} />
        <Username>{username}</Username>
      </Column>
      {!isMe ? (
        <FollowBtn>
          <FollowBtnText>{isFollowing ? 'Unfollow' : 'Follow'}</FollowBtnText>
          ///following중이면 unfollow가 보이고, 아니면, follow 버튼이 보이게 설정함.
        </FollowBtn>
      ) : null}
    </Wrapper>
  )
}