Update Invites & Team Membership (#206)

Co-authored-by: Luc <luc@lucemans.nl>

Author: waiscodes

web/src/components/select/UserSelect.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 
 import { useUsers } from '@/api';
+import { useTeamMembers } from '@/api/team';
 
 import {
     FieldSelect,
@@ -12,17 +13,25 @@ export const UserSelect: FC<
         value: string;
         name?: string;
         forceCategory?: string;
+        teamId: string;
         onChange: (_value: string) => void;
     } & Partial<FieldSelectProperties>
-> = ({ value, name, forceCategory, onChange, ...properties }) => {
+> = ({ value, name, forceCategory, teamId, onChange, ...properties }) => {
     const { data: users } = useUsers();
+    const { data: teamMembers } = useTeamMembers(teamId);
 
-    const options = (users || []).map((user) => {
-        return {
+    const options = (users || [])
+        .filter((user) => {
+            if (!teamMembers) return true;
+
+            return !teamMembers.some(
+                (member) => member.user_id === user.user_id
+            );
+        })
+        .map((user) => ({
             label: user.name,
             value: user.user_id,
-        };
-    });
+        }));
 
     return (
         <FieldSelect

web/src/gui/invite/InviteList.tsx

@@ -1,8 +1,10 @@
-import { Link } from '@tanstack/react-router';
 import { FC } from 'react';
+import { FiCopy } from 'react-icons/fi';
+import { toast } from 'sonner';
 
 import { Invite } from '@/api/invite';
 import { useTeamInvites } from '@/api/team/invite';
+import { useUser } from '@/api/user';
 
 import { UserPreview } from '../user/UserPreview';
 
@@ -19,44 +21,69 @@ export const InviteList: FC<{ team_id: string }> = ({ team_id }) => {
                 <h2 className="h2">Invites</h2>
             </div>
             {invites && (
-                <ul className="card divide-y">
-                    {invites.map((invite) => (
-                        <InviteListItem
-                            key={invite.invite_id}
-                            invite={invite}
-                        />
-                    ))}
-                </ul>
+                <div className="card no-padding">
+                    <ul className="divide-y">
+                        {invites.map((invite) => (
+                            <InviteListItem
+                                key={invite.invite_id}
+                                invite={invite}
+                            />
+                        ))}
+                    </ul>
+                </div>
             )}
         </div>
     );
 };
 
 const InviteListItem: FC<{ invite: Invite }> = ({ invite }) => {
+    const { data: user } = useUser(invite.sender_id);
+
+    const handleCopy = async () => {
+        const inviteUrl = `${window.location.origin}/invite/${invite.invite_id}`;
+
+        await navigator.clipboard.writeText(inviteUrl);
+        toast.success('Invite link copied to clipboard');
+    };
+
     return (
-        <li className="flex items-center justify-between py-2 first:pt-0 last:pb-0">
+        <li className="grid grid-cols-[1fr,1fr,1fr,32px] items-center gap-4 py-3 pl-4 pr-6">
             <div>
                 {invite.user_id ? (
-                    <div className="flex items-center gap-2">
-                        <UserPreview user_id={invite.user_id} />
-                        <div>invited by</div>
-                        <div>
-                            <UserPreview user_id={invite.sender_id} />
-                        </div>
-                    </div>
+                    <UserPreview variant="inline" user_id={invite.user_id} />
                 ) : (
-                    <>Anonymous Invite Link</>
+                    <span className="text-muted-foreground">
+                        Anonymous Invite Link
+                    </span>
                 )}
             </div>
+            {invite.sender_id !== user?.user_id ? (
+                <div className="flex flex-col text-center">
+                    <div className="text-sm">Invited By</div>
+                    <div>
+                        <UserPreview
+                            variant="inline"
+                            user_id={invite.sender_id}
+                        />
+                    </div>
+                </div>
+            ) : (
+                <div></div>
+            )}
+            <div className="text-center">
+                <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold capitalize">
+                    {invite.status}
+                </span>
+            </div>
             {invite.status === 'pending' && (
-                <>
-                    <Link
-                        to={'/invite/$inviteId'}
-                        params={{ inviteId: invite.invite_id }}
+                <div className="flex justify-end">
+                    <button
+                        onClick={handleCopy}
+                        className="text-primary hover:text-primary/80"
                     >
-                        {invite.invite_id}
-                    </Link>
-                </>
+                        <FiCopy className="size-4" />
+                    </button>
+                </div>
             )}
         </li>
     );

web/src/gui/invite/TeamInviteCreateModal.tsx

@@ -1,9 +1,11 @@
 import { FC, PropsWithChildren, useState } from 'react';
 import { FiLink, FiUserPlus } from 'react-icons/fi';
+import { toast } from 'sonner';
 
 import { useTeamInviteCreate } from '@/api/team';
 import { Button } from '@/components/button';
 import {
+    ModalClose,
     ModalContent,
     ModalDescription,
     ModalRoot,
@@ -21,6 +23,34 @@ export const TeamInviteCreateModal: FC<
     });
     const isDisabled = !userId;
 
+    const handleCreateInvite = (userId?: string) => {
+        createInvite(
+            { userId },
+            {
+                onSuccess: (data) => {
+                    if (!userId) {
+                        const inviteUrl = `${window.location.origin}/invite/${data.invite_id}`;
+
+                        navigator.clipboard.writeText(inviteUrl);
+                    }
+
+                    toast.success(
+                        userId
+                            ? 'Invite sent successfully'
+                            : 'Invite link copied to clipboard'
+                    );
+                    setUserId('');
+                },
+                onError: () =>
+                    toast.error(
+                        userId
+                            ? 'Failed to send invite'
+                            : 'Failed to create invite link'
+                    ),
+            }
+        );
+    };
+
     return (
         <>
             <ModalRoot>
@@ -35,6 +65,7 @@ export const TeamInviteCreateModal: FC<
                     <UserSelect
                         placeholder="Choose an individual"
                         value={userId}
+                        teamId={team_id}
                         onChange={(user) => {
                             setUserId(user);
 
@@ -43,25 +74,27 @@ export const TeamInviteCreateModal: FC<
                     />
 
                     <div className="flex flex-row gap-2">
-                        <Button
-                            className="w-full"
-                            onClick={() => createInvite({})}
-                        >
-                            <FiLink /> Copy link
-                        </Button>
-                        <Button
-                            className="w-full"
-                            variant="primary"
-                            disabled={isDisabled}
-                            onClick={() => {
-                                if (isDisabled) return;
-
-                                createInvite({ userId });
-                            }}
-                        >
-                            <FiUserPlus />
-                            Send
-                        </Button>
+                        <ModalClose asChild>
+                            <Button
+                                className="w-full"
+                                onClick={() => handleCreateInvite()}
+                            >
+                                <FiLink /> Copy link
+                            </Button>
+                        </ModalClose>
+                        <ModalClose asChild>
+                            <Button
+                                className="w-full"
+                                variant="primary"
+                                disabled={isDisabled}
+                                onClick={() => {
+                                    handleCreateInvite(userId);
+                                }}
+                            >
+                                <FiUserPlus />
+                                Send
+                            </Button>
+                        </ModalClose>
                     </div>
                 </ModalContent>
             </ModalRoot>

web/src/gui/user/MemberList.tsx

@@ -8,16 +8,16 @@ export const MemberList: FC<{ team_id: string }> = ({ team_id }) => {
     const { data: members } = useTeamMembers(team_id);
 
     return (
-        <div className="space-y-2">
+        <>
             {members && (
-                <ul className="divide-y">
+                <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
                     {members.map((member) => (
                         <li key={member.user_id}>
                             <UserPreview user={member} />
                         </li>
                     ))}
                 </ul>
             )}
-        </div>
+        </>
     );
 };