Styling changes for messaging.

This commit is contained in:
Patrick Fic
2020-05-04 12:14:32 -07:00
parent f55f4775d4
commit 782b7fe7f3
14 changed files with 83 additions and 54 deletions

View File

@@ -1,10 +1,10 @@
import { Badge, Card } from "antd";
import React from "react";
import AlertComponent from "../alert/alert.component";
import ChatConversationTitle from "../chat-conversation-title/chat-conversation-title.component";
import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
import ChatSendMessage from "../chat-send-message/chat-send-message.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
import AlertComponent from "../alert/alert.component";
import ChatConversationTitle from "../chat-conversation-title/chat-conversation-title.component";
import "./chat-conversation.styles.scss";
export default function ChatConversationComponent({
subState,
@@ -14,30 +14,27 @@ export default function ChatConversationComponent({
const [loading, error] = subState;
if (loading) return <LoadingSkeleton />;
if (error) return <AlertComponent message={error.message} type='error' />;
if (error) return <AlertComponent message={error.message} type="error" />;
const unreadCount =
(conversation &&
conversation &&
conversation.messages_aggregate &&
conversation.messages_aggregate.aggregate &&
conversation.messages_aggregate.aggregate.count) ||
0;
// const unreadCount =
// (conversation &&
// conversation &&
// conversation.messages_aggregate &&
// conversation.messages_aggregate.aggregate &&
// conversation.messages_aggregate.aggregate.count) ||
// 0;
const messages = (conversation && conversation.messages) || [];
return (
<div
className='chat-conversation'
className="chat-conversation"
onMouseDown={handleMarkConversationAsRead}
onKeyDown={handleMarkConversationAsRead}>
<Badge count={unreadCount}>
<Card size='small'>
<ChatConversationTitle conversation={conversation} />
<ChatMessageListComponent messages={messages} />
<ChatSendMessage conversation={conversation} />
</Card>
</Badge>
onKeyDown={handleMarkConversationAsRead}
>
<ChatConversationTitle conversation={conversation} />
<ChatMessageListComponent messages={messages} />
<ChatSendMessage conversation={conversation} />
</div>
);
}