fix group

apps/client/src/features/group/components/multi-user-select.tsx

@@ -2,23 +2,24 @@ import React, { useEffect, useState } from "react";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query.ts";
 import { IUser } from "@/features/user/types/user.types.ts";
-import {
-  Avatar,
-  Group,
-  MultiSelect,
-  MultiSelectProps,
-  Text,
-} from "@mantine/core";
+import { Group, MultiSelect, MultiSelectProps, Text } from "@mantine/core";
+import { UserAvatar } from "@/components/ui/user-avatar.tsx";
 
 interface MultiUserSelectProps {
   onChange: (value: string[]) => void;
+  label?: string;
 }
 
 const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
   option,
 }) => (
   <Group gap="sm">
-    <Avatar src={option?.["avatarUrl"]} size={36} radius="xl" />
+    <UserAvatar
+      avatarUrl={option?.["avatarUrl"]}
+      name={option.label}
+      size={36}
+      radius="xl"
+    />
     <div>
       <Text size="sm">{option.label}</Text>
       <Text size="xs" opacity={0.5}>
@@ -28,7 +29,7 @@ const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
   </Group>
 );
 
-export function MultiUserSelect({ onChange }: MultiUserSelectProps) {
+export function MultiUserSelect({ onChange, label }: MultiUserSelectProps) {
   const [searchValue, setSearchValue] = useState("");
   const [debouncedQuery] = useDebouncedValue(searchValue, 500);
   const { data: users, isLoading } = useWorkspaceMembersQuery({
@@ -47,9 +48,15 @@ export function MultiUserSelect({ onChange }: MultiUserSelectProps) {
           email: user.email,
         };
       });
-      if (usersData.length > 0) {
-        setData(usersData);
-      }
+
+      // Filter out existing users by their ids
+      const filteredUsersData = usersData.filter(
+        (user) =>
+          !data.find((existingUser) => existingUser.value === user.value),
+      );
+
+      // Combine existing data with new search data
+      setData((prevData) => [...prevData, ...filteredUsersData]);
     }
   }, [users]);
 
@@ -59,7 +66,7 @@ export function MultiUserSelect({ onChange }: MultiUserSelectProps) {
       renderOption={renderMultiSelectOption}
       hidePickedOptions
       maxDropdownHeight={300}
-      label="Add group members"
+      label={label || "Add members"}
       placeholder="Search for users"
       searchable
       searchValue={searchValue}