⚡️(frontend) search users with at least 5 characters

We now only search for users when the query
is at least 5 characters long.

src/frontend/apps/impress/src/features/docs/doc-share/api/useUsers.tsx

@@ -16,7 +16,7 @@ export const getUsers = async ({
   docId,
 }: UsersParams): Promise<UsersResponse> => {
   const queriesParams = [];
-  queriesParams.push(query ? `q=${query}` : '');
+  queriesParams.push(query ? `q=${encodeURIComponent(query)}` : '');
   queriesParams.push(docId ? `document_id=${docId}` : '');
   const queryParams = queriesParams.filter(Boolean).join('&');
 

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -58,6 +58,7 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
   const canViewAccesses = doc.abilities.accesses_view;
   const showMemberSection = inputValue === '' && selectedUsers.length === 0;
   const showFooter = selectedUsers.length === 0 && !inputValue;
+  const MIN_CHARACTERS_FOR_SEARCH = 4;
 
   const onSelect = (user: User) => {
     setSelectedUsers((prev) => [...prev, user]);
@@ -76,7 +77,7 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
   const searchUsersQuery = useUsers(
     { query: userQuery, docId: doc.id },
     {
-      enabled: !!userQuery,
+      enabled: userQuery?.length > MIN_CHARACTERS_FOR_SEARCH,
       queryKey: [KEY_LIST_USER, { query: userQuery }],
     },
   );