From a215e18fc52ebfe108dc956d087a58e2bc25686e Mon Sep 17 00:00:00 2001
From: Assaf Koren <assafnoahkoren@gmail.com>
Date: Sun, 4 Feb 2024 15:18:30 +0200
Subject: [PATCH] added chat refetch and smooth scroll to new messages

---
 services/client/package.json                  |  3 ++-
 .../view/pages/request-chat/RequestChat.tsx   | 20 ++++++++++++-------
 yarn.lock                                     | 12 +++++++++++
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/services/client/package.json b/services/client/package.json
index 491f0c6..28b90fc 100644
--- a/services/client/package.json
+++ b/services/client/package.json
@@ -35,7 +35,8 @@
 		"recoil": "^0.7.7",
 		"swiper": "^11.0.5",
 		"tailwind-safelist-generator": "^1.0.0",
-		"tailwindcss": "^3.3.5"
+		"tailwindcss": "^3.3.5",
+		"usehooks-ts": "^2.12.1"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.15",
diff --git a/services/client/src/view/pages/request-chat/RequestChat.tsx b/services/client/src/view/pages/request-chat/RequestChat.tsx
index f16d57d..cfd453f 100644
--- a/services/client/src/view/pages/request-chat/RequestChat.tsx
+++ b/services/client/src/view/pages/request-chat/RequestChat.tsx
@@ -4,6 +4,7 @@ import { AppForm } from '../../../core/form/AppForm';
 import { Avatar, Button, CircularProgress, Grow } from '@mui/material';
 import moment from 'moment';
 import { useMutation_CreateOfferMessage, useQuery_MessagesByOfferId, useQuery_ProfileId } from '../../../core/api/api';
+import { useInterval } from 'usehooks-ts';
 
 interface RequestChatProps extends React.PropsWithChildren {
 	contact?: {
@@ -17,7 +18,9 @@ interface RequestChatProps extends React.PropsWithChildren {
 
 export const RequestChat: FC<RequestChatProps> = React.memo(props => {
 	const mutation_createMessage = useMutation_CreateOfferMessage();
-	const query_message = useQuery_MessagesByOfferId(props.requestId);
+	const query_messages = useQuery_MessagesByOfferId(props.requestId);
+	useInterval(() => query_messages.refetch(), 3000);
+
 	const profileId = useQuery_ProfileId();
 	const form = useForm({ defaultValues: { message: '' } });
 	const onSubmit = form.handleSubmit(data => {
@@ -37,10 +40,13 @@ export const RequestChat: FC<RequestChatProps> = React.memo(props => {
 	});
 
 	useEffect(() => {
-		if (query_message.data) {
-			msgsContainer.current?.scrollTo(0, msgsContainer.current?.scrollHeight);
+		if (query_messages.data) {
+			msgsContainer.current?.scrollTo({
+				top: msgsContainer.current.scrollHeight,
+				behavior: 'smooth'
+			});
 		}
-	}, [query_message.data]);
+	}, [query_messages.data?.OfferMessage.length]);
 
 	const msgsContainer = React.useRef<HTMLDivElement>(null);
 
@@ -55,13 +61,13 @@ export const RequestChat: FC<RequestChatProps> = React.memo(props => {
 				</div>
 			</div>
 			<div ref={msgsContainer} className="flex-1 w-full p-2 overflow-auto">
-				{query_message.data?.OfferMessage.map((msg, i) => (
+				{query_messages.data?.OfferMessage.map((msg, i) => (
 					<Message
 						key={msg.id}
 						message={msg.message}
 						time={msg.created_at}
 						mine={msg.profile_id === profileId}
-						prevMessage={query_message.data?.OfferMessage[i - 1]}
+						prevMessage={query_messages.data?.OfferMessage[i - 1]}
 					/>
 				))}
 			</div>
@@ -140,7 +146,7 @@ const Message: FC<{ message?: string; time?: Date; seen?: boolean; mine?: boolea
 				style={{ transformOrigin: `center ${props.mine ? 'right' : 'left'}` }}
 				{...(checked ? { timeout: 1000 } : {})}
 			>
-				<div className={`${msgClass} max-w-[60%] w-max p-2 mb-4 rounded-lg `}>
+				<div className={`${msgClass} max-w-[60%] w-max p-2 mb-2 rounded-lg `}>
 					{props.message}
 					<span className="opacity-50 ms-2 text-xs">{moment(props.time).format('HH:mm')}</span>
 					{props.seen && <i className="opacity-25 ms-1 text-xs fas fa-eye"></i>}
diff --git a/yarn.lock b/yarn.lock
index 72bc11f..2c4acf6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5025,6 +5025,11 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
 lodash.memoize@4.x:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -6780,6 +6785,13 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+usehooks-ts@^2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.12.1.tgz#7ede7a33e4e22067bec616e8983933445d182b6b"
+  integrity sha512-meo93qn2hyBJdHVczbalnsU2FU2WQ1ZVRmppRn8+P6TXo9hORNe10pFVKJfIBYfb2FFapqNuF5vUviLRSy/vAw==
+  dependencies:
+    lodash.debounce "^4.0.8"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"