admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling changes for messaging.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
View File

@@ -4,7 +4,7 @@ import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conv
export default function ChatConversationTitle({ conversation }) {
return (
<div>
<div style={{ display: "flex" }}>
{conversation.phone_num}
<ChatConversationTitleTags
jobConversations={conversation.job_conversations || []}

37
client/src/components/chat-conversation/chat-conversation.component.jsx
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>
);
}

5
client/src/components/chat-conversation/chat-conversation.styles.scss Normal file
View File

@@ -0,0 +1,5 @@
.chat-conversation {
display: flex;
height: 100%;
flex-direction: column;
}

27
client/src/components/chat-messages-list/chat-message-list.component.jsx
View File

@@ -1,7 +1,7 @@
import { CheckCircleOutlined, CheckOutlined } from "@ant-design/icons";
import React, { useEffect, useRef } from "react";
import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from "react-virtualized";
import "./chat-message-list.styles.scss";
import { List, CellMeasurer, CellMeasurerCache } from "react-virtualized";
export default function ChatMessageListComponent({ messages }) {
const virtualizedListRef = useRef(null);
@@ -29,7 +29,8 @@ export default function ChatMessageListComponent({ messages }) {
<li
ref={registerChild}
style={style}
className={`${messages[index].isoutbound ? "replies" : "sent"}`}>
className={`${messages[index].isoutbound ? "replies" : "sent"}`}
>
<p onLoad={measure}>
{messages[index].text}
{StatusRender(messages[index].status)}
@@ -41,16 +42,20 @@ export default function ChatMessageListComponent({ messages }) {
};
return (
<div className='messages'>
<div className="messages">
<ul>
<List
ref={virtualizedListRef}
width={300}
height={300}
rowHeight={_cache.rowHeight}
rowRenderer={_rowRenderer}
rowCount={messages.length}
/>
<AutoSizer>
{({ height, width }) => (
<List
ref={virtualizedListRef}
width={width}
height={height}
rowHeight={_cache.rowHeight}
rowRenderer={_rowRenderer}
rowCount={messages.length}
/>
)}
</AutoSizer>
</ul>
</div>
);

28
client/src/components/chat-messages-list/chat-message-list.styles.scss
View File

@@ -1,10 +1,13 @@
// .messages {
// height: 300px;
// min-height: calc(100% - 10px);
// max-height: calc(100% - 93px);
// overflow-y: scroll;
// overflow-x: hidden;
// }
.messages {
//flex-grow: 1;
flex: 1;
// height: 100%;
// min-height: calc(100% - 10px);
// max-height: calc(100% - 93px);
// // overflow-y: scroll;
// // overflow-x: hidden;
}
// @media screen and (max-width: 735px) {
// .messages {
// max-height: calc(100% - 105px);
@@ -17,13 +20,16 @@
// .messages::-webkit-scrollbar-thumb {
// background-color: rgba(0, 0, 0, 0.3);
// }
.messages ul {
height: 100%;
}
.messages ul li {
display: inline-block;
clear: both;
// clear: both;
//float: left;
margin: 5px;
width: calc(100% - 25px);
font-size: 0.9em;
// margin: 5px;
//width: calc(100% - 25px);
// font-size: 0.9em;
}
.messages ul li:nth-last-child(1) {
margin-bottom: 20px;

8
client/src/components/chat-open-button/chat-open-button.component.jsx
View File

@@ -1,15 +1,15 @@
import { MessageFilled } from "@ant-design/icons";
import React from "react";
import { connect } from "react-redux";
import { openChatByPhone } from "../../redux/messaging/messaging.actions";
const mapDispatchToProps = (dispatch) => ({
//openConversation: (phone) => dispatch(openConversation(phone)),
openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
});
export function ChatOpenButton({ phone }) {
export function ChatOpenButton({ phone, openChatByPhone }) {
return (
<MessageFilled
style={{ margin: 4 }}
onClick={() => alert("TODO FIX ME" + phone)}
onClick={() => openChatByPhone(phone)}
/>
);
}

4
client/src/components/chat-popup/chat-popup.component.jsx
View File

@@ -24,7 +24,7 @@ export function ChatPopupComponent({
}) {
const { t } = useTranslation();
return (
<div className='chat-popup'>
<div className="chat-popup">
<div style={{ overflow: "auto" }}>
<strong style={{ float: "left" }}>
{t("messaging.labels.messaging")}
@@ -35,7 +35,7 @@ export function ChatPopupComponent({
/>
</div>
<Row>
<Row className="chat-popup-content">
<Col span={8}>
<ChatConversationListComponent conversationList={conversationList} />
</Col>

4
client/src/components/chat-popup/chat-popup.styles.scss
View File

@@ -2,3 +2,7 @@
width: 40vw;
height: 50vh;
}
.chat-popup-content {
height: 100%;
}

2
client/src/components/chat-send-message/chat-send-message.component.jsx
View File

@@ -42,7 +42,7 @@ function ChatSendMessageComponent({
};
return (
<div style={{ display: "flex " }}>
<div style={{ display: "flex ", padding: "1em" }}>
<Input.TextArea
allowClear
autoFocus

1
client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
View File

@@ -8,7 +8,6 @@ import { useTranslation } from "react-i18next";
import { PlusOutlined } from "@ant-design/icons";
export default function ChatTagRoContainer({ conversation }) {
console.log("ChatTagRoContainer -> conversation", conversation);
const { t } = useTranslation();
const [visible, setVisible] = useState(false);
const searchQueryState = useState("");

5
client/src/redux/messaging/messaging.actions.js
View File

@@ -23,3 +23,8 @@ export const setSelectedConversation = (conversationId) => ({
type: MessagingActionTypes.SET_SELECTED_CONVERSATION,
payload: conversationId,
});
export const openChatByPhone = (phoneNumber) => ({
type: MessagingActionTypes.OPEN_CHAT_BY_PHONE,
payload: phoneNumber,
});

9
client/src/redux/messaging/messaging.sagas.js
View File

@@ -3,7 +3,14 @@ import { sendMessageFailure, sendMessageSuccess } from "./messaging.actions";
import MessagingActionTypes from "./messaging.types";
import axios from "axios";
import { sendEmailFailure } from "../email/email.actions";
import { withApollo } from "react-apollo";
export function* onOpenChatByPhone() {
yield takeLatest(MessagingActionTypes.OPEN_CHAT_BY_PHONE, openChatByPhone);
}
export function* openChatByPhone({ payload: phone, client }) {
console.log("Payload: Phone, Client", phone, client);
}
export function* onSendMessage() {
yield takeLatest(MessagingActionTypes.SEND_MESSAGE, sendMessage);
}
@@ -22,5 +29,5 @@ export function* sendMessage({ payload }) {
}
export function* messagingSagas() {
yield all([call(onSendMessage)]);
yield all([call(onSendMessage), call(onOpenChatByPhone)]);
}

3
client/src/redux/messaging/messaging.types.js
View File

@@ -3,6 +3,7 @@ const MessagingActionTypes = {
SEND_MESSAGE: "SEND_MESSAGE",
SEND_MESSAGE_SUCCESS: "SEND_MESSAGE_SUCCESS",
SEND_MESSAGE_FAILURE: "SEND_MESSAGE_FAILURE",
SET_SELECTED_CONVERSATION: 'SET_SELECTED_CONVERSATION'
SET_SELECTED_CONVERSATION: "SET_SELECTED_CONVERSATION",
OPEN_CHAT_BY_PHONE: "OPEN_CHAT_BY_PHONE",
};
export default MessagingActionTypes;

2
client/src/serviceWorker.js
View File

@@ -55,7 +55,7 @@ export function register(config) {
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("./firebase-messaging-sw.js")
.register("/firebase-messaging-sw.js")
.then(function (registration) {
console.log(
"FCM Registration successful, scope is:",