Adds support for searching user type in user creation form

src/Components/Users/UserAdd.tsx

@@ -41,6 +41,7 @@ import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 import useQuery from "../../Utils/request/useQuery";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import AutocompleteFormField from "../Form/FormFields/Autocomplete";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -266,6 +267,20 @@ export const UserAdd = (props: UserProps) => {
     },
   });
 
+  const { loading: isStateLoading } = useQuery(routes.statesList, {
+    onResponse: ({ data }) => {
+      if (!data) {
+        return;
+      }
+
+      if (userIndex <= USER_TYPES.indexOf("StateAdmin")) {
+        setStates([authUser.state_object!]);
+      } else {
+        setStates(data.results);
+      }
+    },
+  });
+
   const { loading: isLocalbodyLoading } = useQuery(
     routes.getAllLocalBodyByDistrict,
     {
@@ -282,17 +297,6 @@ export const UserAdd = (props: UserProps) => {
     }
   );
 
-  const { loading: isStateLoading } = useQuery(routes.statesList, {
-    onResponse: (result) => {
-      if (!result || !result.res || !result.data) return;
-      if (userIndex <= USER_TYPES.indexOf("StateAdmin")) {
-        setStates([authUser.state_object!]);
-      } else {
-        setStates(result.data.results);
-      }
-    },
-  });
-
   const handleDateChange = (e: FieldChangeEvent<Date>) => {
     if (dayjs(e.value).isValid()) {
       dispatch({
@@ -328,7 +332,7 @@ export const UserAdd = (props: UserProps) => {
     setSelectedFacility(selected as FacilityModel[]);
     const form = { ...state.form };
     form.facilities = selected
-      ? (selected as FacilityModel[]).map((i) => i.id ?? -1)
+      ? (selected as FacilityModel[]).map((i) => parseInt(i.id as string) ?? -1)
       : [];
     dispatch({ type: "set_form", form });
   };
@@ -583,10 +587,6 @@ export const UserAdd = (props: UserProps) => {
     }
   };
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   const field = (name: string) => {
     return {
       id: name,
@@ -597,14 +597,18 @@ export const UserAdd = (props: UserProps) => {
     };
   };
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <Page
       title={headerText}
       options={
         <Link
-          href="https://school.coronasafe.network/targets/12953"
+          href="https://school.coronasafe.network/targets/12953 "
           className="inline-block rounded border border-gray-600 bg-gray-50 px-4 py-2 text-gray-600 transition hover:bg-gray-100"
-          target="_blank"
+          target="_blank "
         >
           <CareIcon icon="l-info-circle" className="text-lg" /> &nbsp;Need Help?
         </Link>
@@ -631,13 +635,15 @@ export const UserAdd = (props: UserProps) => {
                 showAll={false}
               />
             </div>
-            <SelectFormField
+
+            <AutocompleteFormField
               {...field("user_type")}
-              required
               label="User Type"
-              options={userTypes}
+              placeholder="Search for a user type..."
+              options={userTypes ?? []}
               optionLabel={(o) => o.role + (o.readOnly ? " (Read Only)" : "")}
               optionValue={(o) => o.id}
+              required
             />
 
             {state.form.user_type === "Doctor" && (