verifying if user is admin when adding member

client/src/components/chat/AddGroupMember.tsx

@@ -4,7 +4,6 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { axiosClient } from '../../App.tsx';
 import { ContactsProps } from '../../pages/Chat.tsx';
 import { socket } from '../../socket/socket.tsx';
-import { AxiosResponse } from 'axios';
 import { UserRoundPlus } from 'lucide-react';
 
 type Inputs = {
@@ -23,17 +22,19 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [notFound, setNotFound] = useState<boolean>(false);
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchSuggestions = async () => {
       if (contactInput?.length >= 3) {
         try {
           setIsLoading(true);
-          const response: AxiosResponse<string[]> = await axiosClient.get(
+          setErrorMessage(null);
+          const response = await axiosClient.get(
             `/api/chat/contacts/suggestions/${contactInput}`,
           );
           setSuggestions(response.data);
-          setSelectedIndex(0); // Reset selection to first item when suggestions update
+          setSelectedIndex(0);
           if (response.data.length < 1) {
             setIsLoading(false);
             setNotFound(true);
@@ -41,9 +42,12 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
             setIsLoading(false);
             setNotFound(false);
           }
-        } catch (error) {
+        } catch (e) {
           setIsLoading(false);
-          console.error('Error fetching suggestions:', error);
+          console.error('Error fetching suggestions:', e);
+          setErrorMessage(
+            e.response?.data?.message || 'Failed to fetch suggestions',
+          );
         }
       } else {
         setNotFound(false);
@@ -60,6 +64,7 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
   }, [contactInput]);
 
   if (!socket) return;
+
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
     const contactToSubmit =
       suggestions.length > 0
@@ -68,19 +73,22 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
 
     try {
       setIsLoading(true);
+      setErrorMessage(null);
       const response = await axiosClient.post(`/api/chat/groups/addMember/`, {
         group_id: contact?.conversation_id,
         username: contactToSubmit,
       });
-      console.log(response.data);
+      console.log('Add member to group', response);
       setIsLoading(false);
       socket?.emit('added to group', { group_id: contact?.conversation_id });
       if (modalRef.current) {
         modalRef.current.close();
       }
+      reset();
     } catch (e) {
-      console.error('Failed to create group: ', e);
+      console.error('Failed to add group member: ', e);
       setIsLoading(false);
+      setErrorMessage(e.response?.data?.message || 'Failed to add member');
     }
   };
 
@@ -134,7 +142,7 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
               <div className="text-center">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <input
-                    className="text-black bg-green-50 pl-2 shadow-lg rounded-md h-8 mb-2 mt-2"
+                    className="text-black bg-green-50 pl-2 shadow-lg rounded-md h-10 mb-2 mt-2"
                     type="text"
                     onKeyDown={handleKeyDown}
                     {...register('username', {
@@ -155,7 +163,6 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
                               : 'hover:bg-gray-500'
                           }`}
                           onClick={() => {
-                            reset({ username: suggestion });
                             handleSubmit(() =>
                               onSubmit({ username: suggestion }),
                             )();
@@ -176,6 +183,11 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
                   ) : null}
                 </div>
               </div>
+              {errorMessage && (
+                <p className="text-red-500 mt-2 p-1 bg-gray-800  rounded-md w-full">
+                  {errorMessage}
+                </p>
+              )}
             </div>
 
             <div className="mt-4 flex justify-center">

client/src/components/chat/CreateGroupButton.tsx

@@ -14,6 +14,7 @@ function CreateGroupButton() {
   const {
     register,
     handleSubmit,
+    reset,
     formState: { errors },
   } = useForm<Inputs>();
 
@@ -28,6 +29,7 @@ function CreateGroupButton() {
           modalRef.current.close();
         }
       }
+      reset();
     } catch (e) {
       console.error('Failed to create group: ', e);
       setIsLoading(false);
@@ -62,7 +64,7 @@ function CreateGroupButton() {
                 className="w-full max-w-xs relative"
               >
                 <input
-                  className="input input-bordered bg-green-50 w-full text-black rounded-md text-center"
+                  className="input input-bordered bg-green-50 w-full h-10 text-black rounded-md text-center"
                   {...register('groupName', {
                     required: true,
                     minLength: 4,