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

feature/IO-3000-messaging-sockets-migrations2 -

Browse Source 
- Fix Chat Icon logger error
- Fix Socket Robustness
- added additional wss status for error
- Installed ant-design icons

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-11-21 12:03:01 -08:00
parent 5392659db6
commit 12aec3e3a0
7 changed files with 180 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,6 @@
import Icon from "@ant-design/icons";
import { Tooltip } from "antd";
import i18n from "i18next";
import dayjs from "../../utils/day";
import React, { useRef, useEffect } from "react";
import { MdDone, MdDoneAll } from "react-icons/md";
import React, { useEffect, useRef } from "react";
import { Virtuoso } from "react-virtuoso";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import { renderMessage } from "./renderMessage";
import "./chat-message-list.styles.scss";
export default function ChatMessageListComponent({ messages }) {
@@ -21,7 +16,7 @@ export default function ChatMessageListComponent({ messages }) {
});
}
}, 100); // Delay of 100ms to allow rendering
return () => clearTimeout(timer); // Cleanup the timer on unmount
return () => clearTimeout(timer);
}, [messages.length]); // Run only once on component mount
// Scroll to the bottom after the new messages are rendered
@@ -37,52 +32,13 @@ export default function ChatMessageListComponent({ messages }) {
}, 50); // Slight delay to ensure layout recalculates
}
}, [messages]); // Triggered when new messages are added
//TODO: Does this one need to come into the render of the method?
const renderMessage = (index) => {
const message = messages[index];
return (
<div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
<div className="message msgmargin">
<Tooltip title={DateTimeFormatter({ children: message.created_at })}>
<div>
{message.image_path &&
message.image_path.map((i, idx) => (
<div key={idx} style={{ display: "flex", justifyContent: "center" }}>
<a href={i} target="__blank" rel="noopener noreferrer">
<img alt="Received" className="message-img" src={i} />
</a>
</div>
))}
<div>{message.text}</div>
</div>
</Tooltip>
{message.status && (
<div className="message-status">
<Icon
component={message.status === "sent" ? MdDone : message.status === "delivered" ? MdDoneAll : null}
className="message-icon"
/>
</div>
)}
</div>
{message.isoutbound && (
<div style={{ fontSize: 10 }}>
{i18n.t("messaging.labels.sentby", {
by: message.userid,
time: dayjs(message.created_at).format("MM/DD/YYYY @ hh:mm a")
})}
</div>
)}
</div>
);
};
return (
<div className="chat">
<Virtuoso
ref={virtuosoRef}
data={messages}
itemContent={(index) => renderMessage(index)}
itemContent={(index) => renderMessage(messages, index)} // Pass `messages` to renderMessage
followOutput="smooth" // Ensure smooth scrolling when new data is appended
style={{ height: "100%", width: "100%" }}
/>

42
client/src/components/chat-messages-list/renderMessage.jsx Normal file
View File

@@ -0,0 +1,42 @@
import Icon from "@ant-design/icons";
import { Tooltip } from "antd";
import i18n from "i18next";
import dayjs from "../../utils/day";
import { MdDone, MdDoneAll } from "react-icons/md";
import { DateTimeFormatter } from "../../utils/DateFormatter";
export const renderMessage = (messages, index) => {
const message = messages[index];
return (
<div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
<div className="message msgmargin">
<Tooltip title={DateTimeFormatter({ children: message.created_at })}>
<div>
{message.image_path &&
message.image_path.map((i, idx) => (
<div key={idx} style={{ display: "flex", justifyContent: "center" }}>
<a href={i} target="__blank" rel="noopener noreferrer">
<img alt="Received" className="message-img" src={i} />
</a>
</div>
))}
<div>{message.text}</div>
</div>
</Tooltip>
{message.status && (message.status === "sent" || message.status === "delivered") && (
<div className="message-status">
<Icon component={message.status === "sent" ? MdDone : MdDoneAll} className="message-icon" />
</div>
)}
</div>
{message.isoutbound && (
<div style={{ fontSize: 10 }}>
{i18n.t("messaging.labels.sentby", {
by: message.userid,
time: dayjs(message.created_at).format("MM/DD/YYYY @ hh:mm a")
})}
</div>
)}
</div>
);
};

29
client/src/components/wss-status-display/wss-status-display.component.jsx
View File

@@ -1,18 +1,33 @@
import { connect } from "react-redux";
import { GlobalOutlined } from "@ant-design/icons";
import { GlobalOutlined, WarningOutlined } from "@ant-design/icons";
import { createStructuredSelector } from "reselect";
import React from "react";
import { selectWssStatus } from "../../redux/application/application.selectors";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
wssStatus: selectWssStatus
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(WssStatusDisplay);
const mapDispatchToProps = (dispatch) => ({});
export function WssStatusDisplay({ wssStatus }) {
console.log("🚀 ~ WssStatusDisplay ~ wssStatus:", wssStatus);
return <GlobalOutlined style={{ color: wssStatus === "connected" ? "green" : "red", marginRight: ".5rem" }} />;
let icon;
let color;
if (wssStatus === "connected") {
icon = <GlobalOutlined />;
color = "green";
} else if (wssStatus === "error") {
icon = <WarningOutlined />;
color = "red";
} else {
icon = <GlobalOutlined />;
color = "gray"; // Default for other statuses like "disconnected"
}
return <span style={{ color, marginRight: ".5rem" }}>{icon}</span>;
}
export default connect(mapStateToProps, mapDispatchToProps)(WssStatusDisplay);