From 69703a5422a629324101a34a07358a0f1fcd275f Mon Sep 17 00:00:00 2001
From: Avanish Singh <79073722+aaviix@users.noreply.github.com>
Date: Fri, 1 Dec 2023 12:04:15 +0100
Subject: [PATCH] Add files via upload
---
.../src/components/MessageSection.js | 76 ++++++++++---------
frontend-react/src/components/TextMessage.js | 20 +++++
2 files changed, 61 insertions(+), 35 deletions(-)
create mode 100644 frontend-react/src/components/TextMessage.js
diff --git a/frontend-react/src/components/MessageSection.js b/frontend-react/src/components/MessageSection.js
index bb95853..056b5cb 100644
--- a/frontend-react/src/components/MessageSection.js
+++ b/frontend-react/src/components/MessageSection.js
@@ -1,35 +1,41 @@
-import React, {useEffect, useRef} from 'react';
-import LeftMessage from "./LeftMessage";
-import RightMessage from "./RightMessage";
-import '../styles/style.css';
-
-const MessageArea = (props) => {
-
- const End = useRef(null)
-
- useEffect(() => {
- if(props.messages.length > 0) {
- scrollToBottom();
- }
- })
-
- function scrollToBottom() {
- End.current.scrollIntoView({behavior: "smooth"})
- }
-
- return (
- <div className={props.area}>
- {props.messages.map(mes => {
- switch (mes.type) {
- case "right":
- return <RightMessage right_message={mes}/>;
- case "left":
- return <LeftMessage left_message={mes}/>;
- }
- })}
- <div ref={End}></div>
- </div>
- );
-};
-
-export default MessageArea;
\ No newline at end of file
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import TextMessage from "./TextMessage";
+import '../styles/style.css';
+
+const MessageSection = (props) => {
+ const { area, messages } = props;
+ const End = useRef(null);
+
+ useEffect(() => {
+ if (messages.length > 0) {
+ scrollToBottom();
+ }
+ }, [messages]);
+
+ function scrollToBottom() {
+ End.current.scrollIntoView({ behavior: "smooth" });
+ }
+
+ return (
+ <div className={area}>
+ {messages.map((mes) => (
+ <TextMessage key={mes.id} message={mes} side={mes.type} />
+ ))}
+ <div ref={End}></div>
+ </div>
+ );
+};
+
+MessageSection.propTypes = {
+ area: PropTypes.string.isRequired,
+ messages: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ type: PropTypes.oneOf(['left', 'right']).isRequired,
+ // Add other message properties here
+ })
+ ).isRequired,
+};
+
+export default MessageSection;
diff --git a/frontend-react/src/components/TextMessage.js b/frontend-react/src/components/TextMessage.js
new file mode 100644
index 0000000..1820343
--- /dev/null
+++ b/frontend-react/src/components/TextMessage.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import '../styles/style.css';
+import Message from "./Message";
+
+const TextMessage = (props) => {
+ const { message, side } = props;
+
+ const messageClass = side === 'right' ? 'right_message' : 'left_message';
+
+ return (
+ <div className={messageClass}>
+ <div className={`icon ${side}`}></div>
+ <div className={`msg ${side}`}>
+ <Message message={message} />
+ </div>
+ </div>
+ );
+};
+
+export default TextMessage;
--
GitLab