Chat.js - Load Messages - React Native Gifted Chat App

Chat.js

...
const Chat = () => {
  ...
  const { cometChat, selectedConversation, user } = useContext(Context);

  const [messages, setMessages] = useState([]);
  ...
  useEffect(() => {
    if (selectedConversation) {
      // get list of messages.
      loadMessages();
      ...
    }
    ...
  }, [selectedConversation]);
  ...
  const isValidMessage = (message) => {
    return message &&
      message.id &&
      message.sentAt &&
      message.sender &&
      message.sender.uid &&
      message.sender.name &&
      message.sender.avatar &&
      message.category &&
      message.category === 'message'
  };

  const transformSingleMessage = (message) => {
    if (isValidMessage(message)) {
      let transformedMessage = {
        _id: message.id ? message.id : uuidv4(),
        createdAt: new Date(message.sentAt * 1000),
        user: {
          _id: message.sender.uid,
          name: message.sender.name,
          avatar: message.sender.avatar,
        },
      }
      if (message.text) {
        transformedMessage.text = message.text;
      }
      if (message.data && message.data.url) {
        if (message.type && message.type === 'video') {
          transformedMessage.video = message.data.url;
        } else {
          transformedMessage.image = message.data.url;
        }
      }
      return transformedMessage;
    }
    return message;
  };

  const transformMessages = (messages) => {
    if (messages && messages.length !== 0) {
      const transformedMessages = [];
      for (const message of messages) {
        if (isValidMessage(message)) {
          transformedMessages.push(transformSingleMessage(message));
        }
      }
      return transformedMessages.sort(function (a, b) {
        // Turn your strings into dates, and then subtract them
        // to get a value that is either negative, positive, or zero.
        return new Date(b.createdAt) - new Date(a.createdAt);
      });;
    }
    return [];
  };
  ...
  const loadMessages = () => {
    const limit = 50;
    const messageRequestBuilder = new cometChat.MessagesRequestBuilder().setLimit(limit)
    if (selectedConversation.contactType === 1) {
      messageRequestBuilder.setGUID(selectedConversation.guid);
    } else if (selectedConversation.contactType === 0) {
      messageRequestBuilder.setUID(selectedConversation.uid);
    }
    const messagesRequest = messageRequestBuilder
      .setCategories(["message"])
      .build();
    messagesRequest
      .fetchPrevious()
      .then((messages) => {
        setMessages(() => transformMessages(messages));
      })
      .catch((error) => { });
  };
  ...
  const getSource = (message) => {
    if (message && message.currentMessage) {
      return message.currentMessage.audio ? message.currentMessage.audio : message.currentMessage.video ? message.currentMessage.video : null;
    }
    return null;
  }

  const renderVideo = (message) => {
    const source = getSource(message);
    if (source) {
      return (
        <View style={styles.videoContainer} key={message.currentMessage._id}>
          {Platform.OS === 'ios' ? <Video
            style={styles.videoElement}
            shouldPlay
            height={156}
            width={242}
            muted={true}
            source={{ uri: source }}
            allowsExternalPlayback={false}></Video> : <VideoPlayer
            style={styles.videoElement}
            source={{ uri: source }}
          />}
        </View>
      );
    }
    return <></>;
  };

  ...
  return (
    <>
      <View style={{ backgroundColor: '#fff', flex: 1 }}>
        <GiftedChat
          scrollToBottom
          messages={messages}
          onSend={messages => onSend(messages)}
          user={{
            _id: user.uid,
            name: user.name,
            avatar: user.avatar,
          }}
          renderActions={renderActions}
          renderMessageVideo={renderVideo}
        />
      </View>
    </>
  )
  ...
};
...
export default Chat;