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
f4716df8
Commit
f4716df8
authored
May 28, 2022
by
Balasuriya D.A.M.
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Chat Box UI
parent
fda4e3ac
Changes
6
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
102 additions
and
14 deletions
+102
-14
IT18021080/Telemedicine-Chat-App/frontend/src/Pages/ChatPage.js
...1080/Telemedicine-Chat-App/frontend/src/Pages/ChatPage.js
+6
-2
IT18021080/Telemedicine-Chat-App/frontend/src/components/ChatBox.js
.../Telemedicine-Chat-App/frontend/src/components/ChatBox.js
+20
-2
IT18021080/Telemedicine-Chat-App/frontend/src/components/MyChats.js
.../Telemedicine-Chat-App/frontend/src/components/MyChats.js
+2
-2
IT18021080/Telemedicine-Chat-App/frontend/src/components/SingleChat.js
...lemedicine-Chat-App/frontend/src/components/SingleChat.js
+61
-0
IT18021080/Telemedicine-Chat-App/frontend/src/components/miscellaneous/GroupChatModal.js
...p/frontend/src/components/miscellaneous/GroupChatModal.js
+8
-8
IT18021080/Telemedicine-Chat-App/frontend/src/config/ChatLogics.js
...0/Telemedicine-Chat-App/frontend/src/config/ChatLogics.js
+5
-0
No files found.
IT18021080/Telemedicine-Chat-App/frontend/src/Pages/ChatPage.js
View file @
f4716df8
...
@@ -4,11 +4,13 @@ import { ChatState } from "../Context/ChatProvider";
...
@@ -4,11 +4,13 @@ import { ChatState } from "../Context/ChatProvider";
import
SideDrawer
from
"
../components/miscellaneous/SideDrawer
"
;
import
SideDrawer
from
"
../components/miscellaneous/SideDrawer
"
;
import
MyChats
from
"
../components/MyChats
"
;
import
MyChats
from
"
../components/MyChats
"
;
import
ChatBox
from
"
../components/ChatBox
"
;
import
ChatBox
from
"
../components/ChatBox
"
;
import
{
useState
}
from
"
react
"
;
const
ChatPage
=
()
=>
{
const
ChatPage
=
()
=>
{
const
{
user
}
=
ChatState
();
const
{
user
}
=
ChatState
();
const
[
fetchAgain
,
setFetchAgain
]
=
useState
(
false
);
return
(
return
(
...
@@ -21,8 +23,10 @@ const ChatPage = () => {
...
@@ -21,8 +23,10 @@ const ChatPage = () => {
height
=
"
91.5vh
"
height
=
"
91.5vh
"
padding
=
"
10px
"
padding
=
"
10px
"
>
>
{
user
&&
<
MyChats
/>
}
{
user
&&
<
MyChats
fetchAgain
=
{
fetchAgain
}
/>
}
{
user
&&
<
ChatBox
/>
}
{
user
&&
(
<
ChatBox
fetchAgain
=
{
fetchAgain
}
setFetchAgain
=
{
setFetchAgain
}
/
>
)}
<
/Box
>
<
/Box
>
<
/div
>
<
/div
>
...
...
IT18021080/Telemedicine-Chat-App/frontend/src/components/ChatBox.js
View file @
f4716df8
import
React
from
"
react
"
;
import
React
from
"
react
"
;
import
{
ChatState
}
from
"
../Context/ChatProvider
"
;
import
{
Box
}
from
"
@chakra-ui/react
"
;
import
SingleChat
from
"
./SingleChat
"
;
const
ChatBox
=
({
fetchAgain
,
setFetchAgain
})
=>
{
const
{
selectedChat
}
=
ChatState
();
const
ChatBox
=
()
=>
{
return
(
return
(
<
div
>
ChatBox
<
/div
>
<
Box
display
=
{{
base
:
selectedChat
?
"
flex
"
:
"
none
"
,
md
:
"
flex
"
}}
alignItems
=
"
center
"
flexDir
=
"
column
"
p
=
{
3
}
bg
=
"
white
"
w
=
{{
base
:
"
100%
"
,
md
:
"
68%
"
}}
borderRadius
=
"
lg
"
borderWidth
=
"
1px
"
>
<
SingleChat
fetchAgain
=
{
fetchAgain
}
setFetchAgain
=
{
setFetchAgain
}
/
>
<
/Box
>
);
);
};
};
...
...
IT18021080/Telemedicine-Chat-App/frontend/src/components/MyChats.js
View file @
f4716df8
...
@@ -7,7 +7,7 @@ import ChatLoading from "./ChatLoading";
...
@@ -7,7 +7,7 @@ import ChatLoading from "./ChatLoading";
import
{
getSender
}
from
"
../config/ChatLogics
"
;
import
{
getSender
}
from
"
../config/ChatLogics
"
;
import
GroupChatModal
from
"
./miscellaneous/GroupChatModal
"
;
import
GroupChatModal
from
"
./miscellaneous/GroupChatModal
"
;
const
MyChats
=
()
=>
{
const
MyChats
=
(
{
fetchAgain
}
)
=>
{
const
[
loggedUser
,
setLoggedUser
]
=
useState
();
const
[
loggedUser
,
setLoggedUser
]
=
useState
();
const
{
user
,
selectedChat
,
setSelectedChat
,
chats
,
setChats
}
=
ChatState
();
const
{
user
,
selectedChat
,
setSelectedChat
,
chats
,
setChats
}
=
ChatState
();
...
@@ -42,7 +42,7 @@ const MyChats = () => {
...
@@ -42,7 +42,7 @@ const MyChats = () => {
useEffect
(()
=>
{
useEffect
(()
=>
{
setLoggedUser
(
JSON
.
parse
(
localStorage
.
getItem
(
"
userInfo
"
)));
setLoggedUser
(
JSON
.
parse
(
localStorage
.
getItem
(
"
userInfo
"
)));
fetchChats
();
fetchChats
();
},
[])
},
[
fetchAgain
]);
return
(
return
(
<
Box
<
Box
...
...
IT18021080/Telemedicine-Chat-App/frontend/src/components/SingleChat.js
0 → 100644
View file @
f4716df8
import
{
Box
,
IconButton
,
Text
}
from
"
@chakra-ui/react
"
;
import
React
from
"
react
"
;
import
{
ChatState
}
from
"
../Context/ChatProvider
"
;
import
{
ArrowBackIcon
}
from
"
@chakra-ui/icons
"
;
import
{
getSender
,
getSenderFull
}
from
"
../config/ChatLogics
"
;
import
ProfileModal
from
"
./miscellaneous/ProfileModal
"
;
const
SingleChat
=
({
fetchAgain
,
setFetchAgain
})
=>
{
const
{
user
,
selectedChat
,
setSelectedChat
}
=
ChatState
();
return
(
<>
{
selectedChat
?
(
<>
<
Text
fontSize
=
{{
base
:
"
28px
"
,
md
:
"
30px
"
}}
pb
=
{
3
}
px
=
{
2
}
w
=
"
100%
"
fontFamily
=
"
Work sans
"
display
=
"
flex
"
justifyContent
=
{{
base
:
"
space-between
"
}}
alignItems
=
"
center
"
>
<
IconButton
display
=
{{
base
:
"
flex
"
,
md
:
"
none
"
}}
icon
=
{
<
ArrowBackIcon
/>
}
onClick
=
{()
=>
setSelectedChat
(
""
)}
/
>
{
!
selectedChat
.
isGroupChat
?
(
<>
{
getSender
(
user
,
selectedChat
.
users
)}
<
ProfileModal
user
=
{
getSenderFull
(
user
,
selectedChat
.
users
)}
/
>
<
/
>
)
:
(
<>
{
selectedChat
.
chatName
.
toUpperCase
()}
{
/* <UpdateGroupChatModal
fetchAgain={fetchAgain}
setFetchAgain={setSelectedChat}
/>*/
}
<
/
>
)}
<
/Text
>
<
/
>
)
:
(
<
Box
display
=
"
flex
"
alignItems
=
"
center
"
justifyContent
=
"
center
"
height
=
"
100%
"
>
<
Text
fontSize
=
"
3xl
"
pb
=
{
3
}
fontFamily
=
"
Work sans
"
>
Click
on
a
user
to
start
chatting
<
/Text>
<
/Box>
)}
<
/
>
);
};
export
default
SingleChat
;
\ No newline at end of file
IT18021080/Telemedicine-Chat-App/frontend/src/components/miscellaneous/GroupChatModal.js
View file @
f4716df8
...
@@ -66,15 +66,15 @@ const GroupChatModal = ({ children }) => {
...
@@ -66,15 +66,15 @@ const GroupChatModal = ({ children }) => {
try
{
try
{
const
config
=
{
const
config
=
{
headers
:
{
headers
:
{
Authorization
:
`Bearer
${
user
.
token
}
`
,
Authorization
:
`Bearer
${
user
.
token
}
`
,
},
},
};
};
const
{
data
}
=
await
axios
.
post
(
const
{
data
}
=
await
axios
.
post
(
"
/api/chat/group
"
,
"
/api/chat/group
"
,
{
{
name
:
groupChatName
,
name
:
groupChatName
,
users
:
JSON
.
stringify
(
selectedUsers
.
map
((
u
)
=>
u
.
_id
)),
users
:
JSON
.
stringify
(
selectedUsers
.
map
((
u
)
=>
u
.
_id
)),
},
},
config
config
);
);
...
@@ -178,7 +178,7 @@ const GroupChatModal = ({ children }) => {
...
@@ -178,7 +178,7 @@ const GroupChatModal = ({ children }) => {
<
/ModalBody
>
<
/ModalBody
>
<
ModalFooter
>
<
ModalFooter
>
<
Button
colorScheme
=
"
blue
"
onClick
=
{
handleSubmit
}
>
<
Button
onClick
=
{
handleSubmit
}
colorScheme
=
"
blue
"
>
Create
Organization
Create
Organization
<
/Button
>
<
/Button
>
<
/ModalFooter
>
<
/ModalFooter
>
...
...
IT18021080/Telemedicine-Chat-App/frontend/src/config/ChatLogics.js
View file @
f4716df8
...
@@ -2,3 +2,8 @@ export const getSender = (loggedUser, users) => {
...
@@ -2,3 +2,8 @@ export const getSender = (loggedUser, users) => {
return
users
[
0
].
_id
===
loggedUser
.
_id
?
users
[
1
].
name
:
users
[
0
].
name
;
return
users
[
0
].
_id
===
loggedUser
.
_id
?
users
[
1
].
name
:
users
[
0
].
name
;
};
};
export
const
getSenderFull
=
(
loggedUser
,
users
)
=>
{
return
users
[
0
].
_id
===
loggedUser
.
_id
?
users
[
1
]
:
users
[
0
];
};
\ 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