#12 Show team invite list on front-end, implement invitation button

* Add separate property in Convex function invitations and show in separate list in team dashboard
* Style chat input and implement enter press handler

Components/Chat.tsx

@@ -1,17 +1,27 @@
-import { Button, Input, List } from 'reactstrap'
-import React, { useState } from 'react'
+import { Button, Container, Input, List } from 'reactstrap'
+import React, { useState, KeyboardEvent } from 'react'
 import { useMutation } from 'convex/react'
 import { api } from '../convex/_generated/api'
 import { Id } from '../convex/_generated/dataModel'
-import { UserBubble } from './User'
 import classnames from 'classnames'
+import { UserBubble } from './User'
 
 export default function Chat(props: { id: Id<'teams'>; messages: Array<any> }) {
   const sendMessage = useMutation(api.team.sendMessage)
   const [newMessage, setNewMessage] = useState('')
 
+  const handleMessageSend = () => {
+    if (!newMessage) return
+    setNewMessage('')
+    sendMessage({ teamId: props.id, message: newMessage })
+  }
+
+  const handleEnterPressed = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') handleMessageSend()
+  }
+
   return (
-    <>
+    <Container>
       <h1>Team Chat</h1>
       <List className="p-0 mt-2">
         {props.messages.map((item) => (
@@ -28,18 +38,18 @@ export default function Chat(props: { id: Id<'teams'>; messages: Array<any> }) {
           </li>
         ))}
       </List>
-      <Input
-        type="text"
-        value={newMessage}
-        onChange={(e) => setNewMessage(e.target.value)}
-      />
-      <Button
-        className="my-2"
-        color="primary"
-        onClick={() => sendMessage({ teamId: props.id, message: newMessage })}
-      >
-        Chat
-      </Button>
-    </>
+      <Container className="d-flex">
+        <Input
+          className="me-2 my-2"
+          type="text"
+          value={newMessage}
+          onChange={(e) => setNewMessage(e.target.value)}
+          onKeyDown={handleEnterPressed}
+        />
+        <Button className="my-2" color="primary" onClick={handleMessageSend}>
+          Chat
+        </Button>
+      </Container>
+    </Container>
   )
 }

Components/Teams.tsx

@@ -18,11 +18,8 @@ export default function Teams(props: any) {
     setJoinButtonMessage('Join requested!')
   }
 
-  const handleInviteClick = (
-    joinerId: Id<'users'>,
-    competitionId: Id<'competitions'>
-  ) => {
-    invite({ joinerId, competitionId })
+  const handleInviteClick = (joinerId: Id<'users'>) => {
+    invite({ joinerId, competitionId: props.competitionId })
     setInviteBtnMsg('Invite sent!')
   }
 
@@ -44,6 +41,19 @@ export default function Teams(props: any) {
                       alt={'Profile picture of ' + member.name}
                     />{' '}
                     {member.name}
+                    <Button
+                      className="ms-2"
+                      color="primary"
+                      hidden={
+                        participant &&
+                        participant.userMembership.team == item._id
+                      }
+                      onClick={() => {
+                        handleInviteClick(member._id)
+                      }}
+                    >
+                      {inviteButtonMessage}
+                    </Button>
                   </ListInlineItem>
                 ))}
               </List>
@@ -59,18 +69,6 @@ export default function Teams(props: any) {
               >
                 {joinButtonMessage}
               </Button>
-              <Button
-                className="ms-2"
-                color="primary"
-                hidden={
-                  participant && participant.userMembership.team == item._id
-                }
-                onClick={() => {
-                  handleInviteClick
-                }}
-              >
-                {inviteButtonMessage}
-              </Button>
             </li>
           ))}
         </List>

convex/participant.ts

@@ -130,7 +130,9 @@ export const inviteToTeam = mutation({
           userConsent: false,
           teamConsent: true,
         })
-        return await db.replace(inviterTeam._id, inviterTeam)
+        return await db.patch(inviterTeam._id, {
+          joinRequests: inviterTeam.joinRequests,
+        })
       case RequestValidity.REQUESTED:
         return addUserToTeam(db, joiner, inviterTeam)
       default:

convex/team.ts

@@ -46,7 +46,8 @@ export const get = query({
           }
         })
       ),
-      joinRequests,
+      joinRequests: joinRequests.filter((item) => item.userConsent),
+      invitations: joinRequests.filter((item) => item.teamConsent),
     }
   },
 })

pages/competitions/[id]/team.tsx

@@ -54,12 +54,19 @@ export default function Team(props: any) {
                         {teamInfo.joinRequests.map(request => (
                             <li className="border list-unstyled">
                                 <UserBubble {...request.user} />
-                                {request.teamConsent ? "Team Consent" : ""}
-                                {request.userConsent ? "User Consent" : ""}
                                 <Button onClick={() => handleAcceptJoin(request.user._id)}>Accept</Button>
                             </li>
                         ))}
                     </List>
+                    <h2>Pending Invitations</h2>
+                    <List className="p-2">
+                        {teamInfo.invitations.map(invitation => (
+                            <li className="border list-unstyled">
+                                <UserBubble {...invitation.user} />
+                                {invitation.user.name}
+                            </li>
+                        ))}
+                    </List>
                 </Col>
             </Row>
             <Row>