utils#scrollToBottom TypeScript Examples

The following examples show how to use utils#scrollToBottom. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SendMessage.tsx    From convoychat with GNU General Public License v3.0 5 votes vote down vote up 
SendMessage: React.FC<ISendMessage> = ({ roomId, bodyRef, members }) => {
  const { user } = useAuthContext();

  const {
    value,
    setValue,
    textareaRef,
    handleChange,
    handleEmojiClick,
  } = useMessageInput();

  // send message mutation
  const [sendMessage, { error: sendError }] = useSendMessageMutation({
    optimisticResponse: sendMessageOptimisticResponse(roomId, value, user),
    onError(err) {
      console.log(err);
    },
    update: updateCacheAfterSendMessage,
  });

  // submit message
  const onMessageSubmit = useCallback(
    (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      sendMessage({
        variables: {
          content: (event.target as any).message.value,
          roomId: roomId,
        },
      });
      setValue("");
      window.setTimeout(() => {
        scrollToBottom(bodyRef?.current);
      }, 50);
    },
    []
  );

  return (
    <React.Fragment>
      {sendError && <span>{sendError?.message}</span>}

      <MessageInput
        value={value}
        setValue={setValue}
        innerRef={textareaRef}
        handleSubmit={onMessageSubmit}
        handleChange={handleChange}
        onEmojiClick={handleEmojiClick}
        mentionSuggestions={members}
      />
    </React.Fragment>
  );
}
Example #2
Source File: subscribeToMessages.tsx    From convoychat with GNU General Public License v3.0 5 votes vote down vote up 
subscribeToMessages = (
  subscribeToMore: any,
  variables: any,
  user: Me,
  bodyRef: any
) => {
  // new message subscription
  subscribeToMore({
    variables: variables,
    document: OnNewMessageDocument,
    updateQuery: (prev: GetRoomQuery, data: any) => {
      const newData = data.subscriptionData;
      const newMessage: IMessage = newData.data.onNewMessage;
      if (!newMessage || newMessage.author.id === user.id) return prev;

      window.setTimeout(() => {
        scrollToBottom(bodyRef?.current);
      }, 50);

      return update(prev, {
        messages: {
          edges: {
            $push: [
              {
                __typename: "MessageEdge",
                node: newMessage,
                cursor: newMessage.id,
              },
            ],
          },
        },
      });
    },
  });

  // deleteMessage subscription
  subscribeToMore({
    variables: variables,
    document: OnDeleteMessageDocument,
    updateQuery: (prev: GetRoomQuery, data: any) => {
      const newData = data.subscriptionData;
      const deletedMessage: IMessage = newData.data.onDeleteMessage;
      if (!deletedMessage || deletedMessage.author.id === user.id) {
        return prev;
      }

      return update(prev, {
        messages: {
          edges: e => e.filter(edge => edge.node.id !== deletedMessage.id),
        },
      });
    },
  });

  // update message subscription
  subscribeToMore({
    variables: variables,
    document: OnUpdateMessageDocument,
  });
}
Example #3
Source File: Room.tsx    From convoychat with GNU General Public License v3.0 4 votes vote down vote up 
Room: React.FC = () => {
  const { user } = useAuthContext();
  const { roomId } = useParams();
  const bodyRef = useRef<HTMLElement>();

  const { isDocked, isOpen, setIsOpen } = useResponsiveSidebar();
  const [isFetchingMore, setIsFetchingMore] = useState<boolean>(false);

  // fetch room query
  const {
    fetchMore,
    subscribeToMore,
    data: roomData,
    error: fetchRoomError,
    loading: fetchRoomLoading,
  } = useGetRoomQuery({
    notifyOnNetworkStatusChange: true,
    onCompleted() {
      if (!isFetchingMore) {
        window.setTimeout(() => {
          scrollToBottom(bodyRef?.current);
        }, 10);
      }
    },
    variables: {
      roomId: roomId,
      limit: MAX_MESSAGES,
    },
  });

  useEffect(() => {
    subscribeToMessages(
      subscribeToMore,
      { roomId, limit: MAX_MESSAGES },
      user,
      bodyRef
    );
  }, []);

  const fetchPreviousMessages = async () => {
    setIsFetchingMore(true);
    await fetchMore({
      variables: {
        limit: MAX_MESSAGES,
        before: roomData?.messages?.edges[0].cursor,
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prev;
        const updatedData = update(prev, {
          messages: {
            pageInfo: { $set: fetchMoreResult.messages?.pageInfo },
            edges: {
              $unshift: fetchMoreResult.messages?.edges,
            },
          },
        });

        setIsFetchingMore(false);
        return updatedData;
      },
    });
  };

  const handleOnReachTop = (restoreScroll: () => void) => {
    if (roomData?.messages?.pageInfo?.hasNext) {
      fetchPreviousMessages().then(restoreScroll);
    }
  };

  return (
    <>
      <Sidebar
        touch
        pullRight
        open={isOpen}
        docked={isDocked}
        onSetOpen={setIsOpen}
        styles={sidebarStyles}
        sidebar={
          <RightSidebar roomId={roomId} members={roomData?.room?.members} />
        }
      >
        <RoomBody>
          {fetchRoomError && <span>{fetchRoomError?.message}</span>}

          <Flex
            nowrap
            direction="column"
            justify="space-between"
            className="room__body--flex"
          >
            <MessagesWrapper nowrap direction="column">
              <RoomHeader name={roomData?.room?.name} />

              <BidirectionalScroller
                innerRef={bodyRef}
                topLoading={isFetchingMore}
                onReachTop={handleOnReachTop}
              >
                <MessageList
                  isLoading={fetchRoomLoading && !isFetchingMore}
                  messages={roomData?.messages?.edges}
                />
              </BidirectionalScroller>

              <SendMessage
                roomId={roomId}
                bodyRef={bodyRef}
                members={roomData?.room?.members}
              />
            </MessagesWrapper>
          </Flex>
        </RoomBody>
      </Sidebar>
    </>
  );
}