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
fda4e3ac
Commit
fda4e3ac
authored
May 27, 2022
by
Balasuriya D.A.M.
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Create Group Chat Modal Part 2
parent
da4148ab
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
106 additions
and
4 deletions
+106
-4
IT18021080/Telemedicine-Chat-App/frontend/src/components/UserAvatar/UserBadgeItem.js
...t-App/frontend/src/components/UserAvatar/UserBadgeItem.js
+28
-0
IT18021080/Telemedicine-Chat-App/frontend/src/components/miscellaneous/GroupChatModal.js
...p/frontend/src/components/miscellaneous/GroupChatModal.js
+78
-4
No files found.
IT18021080/Telemedicine-Chat-App/frontend/src/components/UserAvatar/UserBadgeItem.js
0 → 100644
View file @
fda4e3ac
import
React
from
"
react
"
;
import
{
Box
}
from
"
@chakra-ui/react
"
;
import
{
CloseIcon
}
from
"
@chakra-ui/icons
"
;
const
UserBadgeItem
=
({
user
,
handleFunction
})
=>
{
return
(
<
Box
px
=
{
2
}
py
=
{
1
}
borderRadius
=
"
lg
"
m
=
{
1
}
mb
=
{
2
}
variant
=
"
solid
"
fontSize
=
{
12
}
backgroundColor
=
"
purple
"
color
=
"
white
"
cursor
=
"
pointer
"
onClick
=
{
handleFunction
}
>
{
user
.
name
}
<
CloseIcon
pl
=
{
1
}
/
>
<
/Box
>
);
};
export
default
UserBadgeItem
;
\ No newline at end of file
IT18021080/Telemedicine-Chat-App/frontend/src/components/miscellaneous/GroupChatModal.js
View file @
fda4e3ac
import
React
,
{
useState
}
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
useDisclosure
,
Modal
,
ModalBody
,
ModalCloseButton
,
ModalContent
,
ModalFooter
,
ModalHeader
,
ModalOverlay
,
Button
,
useToast
,
FormControl
,
Input
}
from
"
@chakra-ui/react
"
;
import
{
useDisclosure
,
Modal
,
ModalBody
,
ModalCloseButton
,
ModalContent
,
ModalFooter
,
ModalHeader
,
ModalOverlay
,
Button
,
useToast
,
FormControl
,
Input
,
Box
}
from
"
@chakra-ui/react
"
;
import
{
ChatState
}
from
"
../../Context/ChatProvider
"
;
import
{
ChatState
}
from
"
../../Context/ChatProvider
"
;
import
axios
from
"
axios
"
;
import
axios
from
"
axios
"
;
import
UserListItem
from
"
../UserAvatar/UserListItem
"
;
import
UserListItem
from
"
../UserAvatar/UserListItem
"
;
import
UserBadgeItem
from
"
../UserAvatar/UserBadgeItem
"
;
...
@@ -50,9 +51,73 @@ const GroupChatModal = ({ children }) => {
...
@@ -50,9 +51,73 @@ const GroupChatModal = ({ children }) => {
}
}
};
};
const
handleSubmit
=
()
=>
{
};
const
handleSubmit
=
async
()
=>
{
if
(
!
groupChatName
||
!
selectedUsers
)
{
toast
({
title
:
"
Please fill all the feilds
"
,
status
:
"
warning
"
,
duration
:
5000
,
isClosable
:
true
,
position
:
"
top
"
,
});
return
;
}
const
handleGroup
=
()
=>
{
};
try
{
const
config
=
{
headers
:
{
Authorization
:
`Bearer
${
user
.
token
}
`
,
},
};
const
{
data
}
=
await
axios
.
post
(
"
/api/chat/group
"
,
{
name
:
groupChatName
,
users
:
JSON
.
stringify
(
selectedUsers
.
map
((
u
)
=>
u
.
_id
)),
},
config
);
setChats
([
data
,
...
chats
]);
onClose
();
toast
({
title
:
"
New Organization Chat Created!
"
,
status
:
"
success
"
,
duration
:
5000
,
isClosable
:
true
,
position
:
"
bottom
"
,
});
}
catch
(
error
)
{
toast
({
title
:
"
Failed to Create the Organization Chat!
"
,
description
:
error
.
response
.
data
,
status
:
"
error
"
,
duration
:
5000
,
isClosable
:
true
,
position
:
"
bottom
"
,
});
}
};
const
handleDelete
=
(
delUser
)
=>
{
setSelectedUsers
(
selectedUsers
.
filter
((
sel
)
=>
sel
.
_id
!==
delUser
.
_id
));
};
const
handleGroup
=
(
userToAdd
)
=>
{
if
(
selectedUsers
.
includes
(
userToAdd
))
{
toast
({
title
:
"
User already added
"
,
status
:
"
warning
"
,
duration
:
5000
,
isClosable
:
true
,
position
:
"
top
"
,
});
return
;
}
setSelectedUsers
([...
selectedUsers
,
userToAdd
]);
};
return
(
return
(
<>
<>
...
@@ -85,7 +150,16 @@ const GroupChatModal = ({ children }) => {
...
@@ -85,7 +150,16 @@ const GroupChatModal = ({ children }) => {
onChange
=
{(
e
)
=>
handleSearch
(
e
.
target
.
value
)}
onChange
=
{(
e
)
=>
handleSearch
(
e
.
target
.
value
)}
/>
/>
<
/FormControl
>
<
/FormControl
>
{
/* selected users */
}
<
Box
w
=
"
100%
"
display
=
"
flex
"
flexWrap
=
"
wrap
"
>
{
selectedUsers
.
map
((
u
)
=>
(
<
UserBadgeItem
key
=
{
user
.
_id
}
user
=
{
u
}
handleFunction
=
{()
=>
handleDelete
(
u
)}
/
>
))}
<
/Box
>
{
loading
?
(
{
loading
?
(
<
div
>
loading
<
/div
>
<
div
>
loading
<
/div
>
)
:
(
)
:
(
...
...
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