code refactor

client/src/components/chat/ContactsSuggestions.tsx

@@ -1,90 +0,0 @@
-import LoadingWheel from './LoadingWheel.tsx';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { useEffect, useRef, useState } from 'react';
-import { AxiosResponse } from 'axios';
-import { axiosClient } from '../../App.tsx';
-import { ContactsProps } from '../../pages/Chat.tsx';
-import { socket } from '../../socket/socket.tsx';
-
-type ContactsSuggestionsProps = {
-  contact: ContactsProps;
-};
-
-function ContactsSuggestions({ contact }: ContactsSuggestionsProps) {
-  const { register, handleSubmit, reset, watch } = useForm<{
-    contact: string;
-  }>();
-
-  const submitContact: SubmitHandler<{ contact: string }> = async (data) => {
-    const contactToSubmit =
-      suggestions.length > 0 ? suggestions[selectedIndex] : data.contact.trim();
-
-    try {
-      setIsLoading(true);
-      const response = await axiosClient.post(`/api/chat/groups/addMember/`, {
-        group_id: contact?.conversation_id,
-        username: data.username,
-      });
-      console.log(response.data);
-      setIsLoading(false);
-      socket?.emit('added to group', { group_id: contact?.conversation_id });
-      if (modalRef.current) {
-        modalRef.current.close();
-      }
-    } catch (e) {
-      console.error('Failed to create group: ', e);
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <>
-      <div className="text-center">
-        <form onSubmit={handleSubmit(submitContact)}>
-          <input
-            className="text-black bg-green-50 pl-2 shadow-lg rounded-md h-8 mb-2 mt-2"
-            type="text"
-            placeholder="Enter contact"
-            onKeyDown={handleKeyDown}
-            {...register('contact', {
-              minLength: 4,
-              maxLength: 20,
-            })}
-          />
-        </form>
-        <div className="m-1">
-          {suggestions?.length > 0 ? (
-            <ul className="text-left p-2 bg-gray-900 shadow-md rounded-md w-full border">
-              {suggestions.map((suggestion, index) => (
-                <li
-                  key={suggestion}
-                  className={`p-1 cursor-pointer rounded-md mt-1 mb-1 ${
-                    index === selectedIndex
-                      ? 'bg-gray-500'
-                      : 'hover:bg-gray-500'
-                  }`}
-                  onClick={() => {
-                    reset({ contact: suggestion });
-                    handleSubmit(() =>
-                      submitContact({ contact: suggestion }),
-                    )();
-                    setSuggestions([]);
-                  }}
-                >
-                  {suggestion}
-                </li>
-              ))}
-            </ul>
-          ) : isLoading ? (
-            <LoadingWheel />
-          ) : null}
-          {notFound ? (
-            <p className="p-1 bg-gray-800 shadow-md rounded-md w-full border text-gray-400">
-              user not found
-            </p>
-          ) : null}
-        </div>
-      </div>
-    </>
-  );
-}

client/src/components/chat/CreateGroupButton.tsx

@@ -2,13 +2,12 @@ import LoadingWheel from './LoadingWheel.tsx';
 import { useRef, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { axiosClient } from '../../App.tsx';
-import { ContactsProps } from '../../pages/Chat.tsx';
 
 type Inputs = {
   groupName: string;
 };
 
-function createGroupButton() {
+function CreateGroupButton() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const modalRef = useRef<HTMLDialogElement | null>(null);
 
@@ -96,4 +95,4 @@ function createGroupButton() {
   );
 }
 
-export default createGroupButton;
+export default CreateGroupButton;