Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 1x 1x 1x 1x 1x 31x 1x 45x 31x 31x 45x | import { styled } from "@mui/material";
import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
import InfiniteMessageLoader from "features/messages/messagelist/InfiniteMessageLoader";
import MessageList from "features/messages/messagelist/MessageList";
import { GetGroupChatMessagesRes } from "proto/conversations_pb";
import { HostRequest } from "proto/requests_pb";
import { InfiniteData } from "react-query";
const StyledInfiniteMessageLoader = styled(InfiniteMessageLoader)(
({ theme }) => ({
padding: theme.spacing(2, 2),
[theme.breakpoints.down("md")]: {
padding: theme.spacing(1, 1),
},
})
);
const ChatContent = ({
isHostRequest,
isLoading,
hostRequest,
messages,
fetchNextPage,
isFetchingNextPage,
hasNextPage,
markLastSeen,
isError,
}: {
isHostRequest: boolean;
isLoading: boolean;
hostRequest?: HostRequest.AsObject | undefined;
messages: InfiniteData<GetGroupChatMessagesRes.AsObject> | undefined;
fetchNextPage: () => void;
isFetchingNextPage: boolean;
hasNextPage: boolean;
markLastSeen: (messageId: number) => void;
isError: boolean;
}) => {
if (isLoading) {
return <CenteredSpinner minHeight="100%" />;
}
Iif (!messages || (isHostRequest && !hostRequest)) {
return null;
}
return (
<StyledInfiniteMessageLoader
earliestMessageId={
messages.pages[messages.pages.length - 1].lastMessageId
}
latestMessage={messages.pages[0].messagesList[0]}
fetchNextPage={fetchNextPage}
isFetchingNextPage={isFetchingNextPage}
hasNextPage={!!hasNextPage}
isError={isError}
>
<MessageList
markLastSeen={markLastSeen}
messages={messages.pages.map((page) => page.messagesList).flat()}
/>
</StyledInfiniteMessageLoader>
);
};
export default ChatContent;
|