Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
I_Helmet
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
21_22-J 62
I_Helmet
Commits
f200c973
Commit
f200c973
authored
Jun 17, 2022
by
Balasuriya D.A.M.
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
rendaring all messages
parent
012d0369
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
93 additions
and
1 deletion
+93
-1
IT18021080/Telemedicine-Chat-App/frontend/src/components/ScrollableChat.js
...dicine-Chat-App/frontend/src/components/ScrollableChat.js
+49
-0
IT18021080/Telemedicine-Chat-App/frontend/src/components/SingleChat.js
...lemedicine-Chat-App/frontend/src/components/SingleChat.js
+4
-1
IT18021080/Telemedicine-Chat-App/frontend/src/config/ChatLogics.js
...0/Telemedicine-Chat-App/frontend/src/config/ChatLogics.js
+40
-0
No files found.
IT18021080/Telemedicine-Chat-App/frontend/src/components/ScrollableChat.js
0 → 100644
View file @
f200c973
import
{
Avatar
,
Tooltip
}
from
"
@chakra-ui/react
"
;
import
React
from
"
react
"
;
import
{
isLastMessage
,
isSameSender
,
isSameSenderMargin
,
isSameUser
}
from
"
../config/ChatLogics
"
;
import
{
ChatState
}
from
"
../Context/ChatProvider
"
;
const
ScrollableChat
=
({
messages
})
=>
{
const
{
user
}
=
ChatState
();
return
(
<>
{
messages
&&
messages
.
map
((
m
,
i
)
=>
(
<
div
style
=
{{
display
:
"
flex
"
}}
key
=
{
m
.
_id
}
>
{(
isSameSender
(
messages
,
m
,
i
,
user
.
_id
)
||
isLastMessage
(
messages
,
i
,
user
.
_id
))
&&
(
<
Tooltip
label
=
{
m
.
sender
.
name
}
placement
=
"
bottom-start
"
hasArrow
>
<
Avatar
mt
=
"
7px
"
mr
=
{
1
}
size
=
"
sm
"
cursor
=
"
pointer
"
name
=
{
m
.
sender
.
name
}
src
=
{
m
.
sender
.
pic
}
/
>
<
/Tooltip
>
)}
<
span
style
=
{{
backgroundColor
:
`
${
m
.
sender
.
_id
===
user
.
_id
?
"
#BEE3F8
"
:
"
#B9F5D0
"
}
`
,
borderRadius
:
"
20px
"
,
padding
:
"
5px 15px
"
,
maxWidth
:
"
75%
"
,
marginLeft
:
isSameSenderMargin
(
messages
,
m
,
i
,
user
.
_id
),
marginTop
:
isSameUser
(
messages
,
m
,
i
,
user
.
_id
)
?
3
:
10
,
}}
>
{
m
.
content
}
<
/span
>
<
/div
>
))}
<
/
>
);
};
export
default
ScrollableChat
;
\ No newline at end of file
IT18021080/Telemedicine-Chat-App/frontend/src/components/SingleChat.js
View file @
f200c973
...
@@ -7,6 +7,7 @@ import ProfileModal from "./miscellaneous/ProfileModal";
...
@@ -7,6 +7,7 @@ import ProfileModal from "./miscellaneous/ProfileModal";
import
UpdateGroupChatModal
from
"
./miscellaneous/UpdateGroupChatModal
"
;
import
UpdateGroupChatModal
from
"
./miscellaneous/UpdateGroupChatModal
"
;
import
axios
from
"
axios
"
;
import
axios
from
"
axios
"
;
import
"
./styles.css
"
;
import
"
./styles.css
"
;
import
ScrollableChat
from
"
./ScrollableChat
"
;
const
SingleChat
=
({
fetchAgain
,
setFetchAgain
})
=>
{
const
SingleChat
=
({
fetchAgain
,
setFetchAgain
})
=>
{
...
@@ -154,7 +155,9 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
...
@@ -154,7 +155,9 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
margin
=
"
auto
"
margin
=
"
auto
"
/>
/>
)
:
(
)
:
(
<
div
className
=
"
messages
"
>
{
/* Messages */
}
<
/div
>
<
div
className
=
"
messages
"
>
<
ScrollableChat
messages
=
{
messages
}
/
>
<
/div
>
)}
)}
<
FormControl
onKeyDown
=
{
sendMessage
}
isRequired
mt
=
{
3
}
>
<
FormControl
onKeyDown
=
{
sendMessage
}
isRequired
mt
=
{
3
}
>
...
...
IT18021080/Telemedicine-Chat-App/frontend/src/config/ChatLogics.js
View file @
f200c973
...
@@ -7,3 +7,43 @@ export const getSenderFull = (loggedUser, users) => {
...
@@ -7,3 +7,43 @@ export const getSenderFull = (loggedUser, users) => {
return
users
[
0
].
_id
===
loggedUser
.
_id
?
users
[
1
]
:
users
[
0
];
return
users
[
0
].
_id
===
loggedUser
.
_id
?
users
[
1
]
:
users
[
0
];
};
};
export
const
isSameSender
=
(
messages
,
m
,
i
,
userId
)
=>
{
return
(
i
<
messages
.
length
-
1
&&
(
messages
[
i
+
1
].
sender
.
_id
!==
m
.
sender
.
_id
||
messages
[
i
+
1
].
sender
.
_id
===
undefined
)
&&
messages
[
i
].
sender
.
_id
!==
userId
);
};
export
const
isLastMessage
=
(
messages
,
i
,
userId
)
=>
{
return
(
i
===
messages
.
length
-
1
&&
messages
[
messages
.
length
-
1
].
sender
.
_id
!==
userId
&&
messages
[
messages
.
length
-
1
].
sender
.
_id
);
};
export
const
isSameSenderMargin
=
(
messages
,
m
,
i
,
userId
)
=>
{
if
(
i
<
messages
.
length
-
1
&&
messages
[
i
+
1
].
sender
.
_id
===
m
.
sender
.
_id
&&
messages
[
i
].
sender
.
_id
!==
userId
)
return
33
;
else
if
(
(
i
<
messages
.
length
-
1
&&
messages
[
i
+
1
].
sender
.
_id
!==
m
.
sender
.
_id
&&
messages
[
i
].
sender
.
_id
!==
userId
)
||
(
i
===
messages
.
length
-
1
&&
messages
[
i
].
sender
.
_id
!==
userId
)
)
return
0
;
else
return
"
auto
"
;
};
export
const
isSameUser
=
(
messages
,
m
,
i
)
=>
{
return
i
>
0
&&
messages
[
i
-
1
].
sender
.
_id
===
m
.
sender
.
_id
;
};
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment