Rooms.js

들어가기
채팅방 목록을 보는 Page
DM부분부터는 엄청 어렵고 헷갈리는게 너무 많기 때문에,
셈세하게 집중해서 공부해줘야함.

1.screens/Room.js

import { gql, useQuery } from '@apollo/client'
import React, { useState } from 'react'
import { FlatList, View } from 'react-native'
import styled from 'styled-components/native'
import ScreenLayout from '../components/ScreenLayout'
import useMe from '../hooks/useMe'

const SEE_ROOMS_QUERY = gql`   ///1)seeRooms Query를 server로 부터 불러줌.
  query seeRooms {
    seeRooms {
      id
      unreadTotal
      users {
        avatar
        username
      }
    }
  }
`

const RoomContainer = styled.TouchableOpacity`
  width: 100%;
  padding: 15px 10px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`
const Column = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`
const Avatar = styled.Image`
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin: 0px 20px;
  background-color: yellowgreen;
`
const Data = styled.View``
const UnreadDot = styled.View`
  width: 10px;
  border-radius: 5px;
  height: 10px;
  background-color: skyblue;
`
const Username = styled.Text`
  color: white;
  font-weight: 600;
  font-size: 16px;
`
const UnreadText = styled.Text`
  color: white;
  margin-top: 2px;
  font-weight: 500;
`

export default function Rooms({ navigation }) {
  const { data, loading, refetch } = useQuery(SEE_ROOMS_QUERY, {
    variables: {
      id: meData?.me?.id,
    },
  })
///2)seeRooms query는 위애서 보다시피 variabes가 팔요하지 않음.
///근데, 왜 넣어줬는지 모르겠음.
///아래 seeRooms.resolvers.js를 보면, loggedInUser를 받아서 자동적으로
///loggedInUser.id가 있는 방을 불러오게 되어있음.
///loading이 잘 되지않아서 일단은, refresh, refetch를 만들어서 
///loading이 되지 않을 경우 refresh하도록 함.

  console.log(data)
  const { data: meData } = useMe()
  const refresh = async () => {
    setRefreshing(true)
    await refetch()
    setRefreshing(false)
  }
  ///3)refresh 관련부분.
  
  const [refreshing, setRefreshing] = useState(false)
  
  const renderItem = ({ item: room }) => {
    const talkingTo = room.users.find(
      (user) => user.username !== meData?.me?.username
    )
    ///talkingTo는 대화방에 있는 상대방을 찾는 로직.
    
    return (
      <RoomContainer
        onPress={() =>
          navigation.navigate('Room', {
            id: room.id,
            talkingTo,
          })
        }
      > 
      ///list를 누르면, 대화방(Room.js)으로 이동하게 되는데, 
      ///대화방의 id와 대화방에 참여한 사람(나 말고)의 정보를 같이 보내준다.
      
        <Column>
          <Avatar source={{ uri: talkingTo.avatar }} />
          <Data>
            <Username>{talkingTo.username}</Username>
            <UnreadText>
              {room.unreadTotal} unread{' '}
              {room.unreadTotal === 1 ? 'message' : 'messages'}
            </UnreadText>
          </Data>
        </Column>
        ///대화방의 리스트에 상대방의 avatar를 띄워줌. 그리고 
        ///unreadMessage의 숫자를 화면에 띄워준다.
        
        <Column>{room.unreadTotal !== 0 ? <UnreadDot /> : null}</Column>
        ///unreadTotal이 존재하면, 빨간점을 띄워준다.
        
      </RoomContainer>
    )
  }
  ///4)FlatList에 들어갈 renderItem부분.
  ///
  
  return (
    <ScreenLayout loading={loading}>
      <FlatList
        ItemSeparatorComponent={() => (
          <View
            style={{
              widht: '100%',
              height: 1,
              backgroundColor: 'rgba(255,255,255,0.2)',
            }}
          ></View>  ///리스트사이에 구분선을 넣어주는 로직
        )}
        refreshing={refreshing}
        onRefresh={refresh}
        style={{ width: '100%' }} ///FlatList에서는 이게 들어가야 디자인이 깔끔해짐.
        data={data?.seeRooms}
        keyExtractor={(room) => '' + room.id}
        renderItem={renderItem}
      />
    </ScreenLayout>
  )
}

아래에 보다시피, seeRooms는 argument를 받지 않음. context로 loggedInUser를 받아
query를 바로 처리함.