Add country select dropdown (#230)

Co-authored-by: Anjula Shanaka <[email protected]>
sef-global · Dec 7, 2024 · 2d4093f · 2d4093f
1 parent 991d87b
commit 2d4093f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/src/hooks/useCountries.ts b/src/hooks/useCountries.ts
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { API_URL } from '../constants';
+import axios from 'axios';
+
+const useCountries = () => {
+  const { isLoading, error, data } = useQuery({
+    queryKey: ['countries'],
+    initialData: [],
+    queryFn: async () => {
+      const { data } = await axios.get(`${API_URL}/countries`);
+      return data.data;
+    },
+  });
+
+  return {
+    isLoading,
+    error,
+    data,
+  };
+};
+
+export default useCountries;
diff --git a/src/pages/MentorRegistration/MentorRegistration.component.tsx b/src/pages/MentorRegistration/MentorRegistration.component.tsx
@@ -14,6 +14,7 @@ import { useLoginModalContext } from '../../contexts/LoginModalContext';
 import useMentor from '../../hooks/useMentor';
 import { Link } from 'react-router-dom';
 import TermsAgreementModalMentor from '../../components/TermsAgreementModal';
+import useCountries from '../../hooks/useCountries';
 
 const steps = [
   {
@@ -63,6 +64,12 @@ const MentorRegistrationPage: React.FC = () => {
     error: categoriesError,
   } = useCategories();
 
+  const {
+    data: allCountries,
+    isLoading: countriesLoading,
+    error: countriesError,
+  } = useCountries();
+
   const {
     createMentorApplication,
     applicationError,
@@ -265,14 +272,25 @@ const MentorRegistrationPage: React.FC = () => {
               register={register}
               error={errors.contactNo}
             />
-            <FormInput
-              type="text"
-              placeholder="United States"
-              name="country"
-              label="Country"
-              register={register}
-              error={errors.country}
-            />
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-600">
+                Country
+              </label>
+              {!countriesLoading && (
+                <select
+                  className="mt-1 p-2 w-1/2 border rounded-md"
+                  {...register('country')}
+                >
+                  {allCountries.map(
+                    (country: { uuid: string; name: string }) => (
+                      <option key={country.uuid} value={country.uuid}>
+                        {country.name}
+                      </option>
+                    )
+                  )}
+                </select>
+              )}
+            </div>
           </>
         )}
         {currentStep === 1 && (