diff --git a/package.json b/package.json index 78985a100..f190d53b1 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "next-intl": "^3.17.2", "next-nprogress-bar": "^2.3.13", "react": "^18.3.1", + "react-country-state-city": "^1.1.3", "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-email": "2.1.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a058996d6..848fe6c10 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -137,6 +137,9 @@ importers: react: specifier: ^18.3.1 version: 18.3.1 + react-country-state-city: + specifier: ^1.1.3 + version: 1.1.3(react@18.3.1) react-day-picker: specifier: ^8.10.1 version: 8.10.1(date-fns@3.6.0)(react@18.3.1) @@ -4408,6 +4411,11 @@ packages: randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} + react-country-state-city@1.1.3: + resolution: {integrity: sha512-/P3afDKRJ6gMe4SfYZ8FockUDmQfjLNgxYzqYtsP0vPggFJyq1eI/XoV2ArdvV6ISsbE04dPO/PiKl5Y2LLIcA==} + peerDependencies: + react: '>=16' + react-day-picker@8.10.1: resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==} peerDependencies: @@ -9878,6 +9886,10 @@ snapshots: dependencies: safe-buffer: 5.2.1 + react-country-state-city@1.1.3(react@18.3.1): + dependencies: + react: 18.3.1 + react-day-picker@8.10.1(date-fns@3.6.0)(react@18.3.1): dependencies: date-fns: 3.6.0 diff --git a/src/app/dashboard/(user-dashboard)/_components/county.ts b/src/app/dashboard/(user-dashboard)/_components/county.ts deleted file mode 100644 index 88000d3aa..000000000 --- a/src/app/dashboard/(user-dashboard)/_components/county.ts +++ /dev/null @@ -1,176 +0,0 @@ -// country.ts - -export const countries = [ - { - name: "United States", - states: [ - "Alabama", - "Alaska", - "Arizona", - "Arkansas", - "California", - "Colorado", - "Connecticut", - "Delaware", - "Florida", - "Georgia", - "Hawaii", - "Idaho", - "Illinois", - "Indiana", - "Iowa", - "Kansas", - "Kentucky", - "Louisiana", - "Maine", - "Maryland", - "Massachusetts", - "Michigan", - "Minnesota", - "Mississippi", - "Missouri", - "Montana", - "Nebraska", - "Nevada", - "New Hampshire", - "New Jersey", - "New Mexico", - "New York", - "North Carolina", - "North Dakota", - "Ohio", - "Oklahoma", - "Oregon", - "Pennsylvania", - "Rhode Island", - "South Carolina", - "South Dakota", - "Tennessee", - "Texas", - "Utah", - "Vermont", - "Virginia", - "Washington", - "West Virginia", - "Wisconsin", - "Wyoming", - ], - }, - { - name: "Canada", - states: [ - "Alberta", - "British Columbia", - "Manitoba", - "New Brunswick", - "Newfoundland and Labrador", - "Northwest Territories", - "Nova Scotia", - "Nunavut", - "Ontario", - "Prince Edward Island", - "Quebec", - "Saskatchewan", - "Yukon", - ], - }, - { - name: "Australia", - states: [ - "Australian Capital Territory", - "New South Wales", - "Northern Territory", - "Queensland", - "South Australia", - "Tasmania", - "Victoria", - "Western Australia", - ], - }, - { - name: "India", - states: [ - "Andhra Pradesh", - "Arunachal Pradesh", - "Assam", - "Bihar", - "Chhattisgarh", - "Goa", - "Gujarat", - "Haryana", - "Himachal Pradesh", - "Jharkhand", - "Karnataka", - "Kerala", - "Madhya Pradesh", - "Maharashtra", - "Manipur", - "Meghalaya", - "Mizoram", - "Nagaland", - "Odisha", - "Punjab", - "Rajasthan", - "Sikkim", - "Tamil Nadu", - "Telangana", - "Tripura", - "Uttar Pradesh", - "Uttarakhand", - "West Bengal", - ], - }, - { - name: "Nigeria", - states: [ - "Abia", - "Adamawa", - "Akwa Ibom", - "Anambra", - "Bauchi", - "Bayelsa", - "Benue", - "Borno", - "Cross River", - "Delta", - "Ebonyi", - "Edo", - "Ekiti", - "Enugu", - "Gombe", - "Imo", - "Jigawa", - "Kaduna", - "Kano", - "Kogi", - "Kwara", - "Lagos", - "Nasarawa", - "Niger", - "Ogun", - "Ondo", - "Osun", - "Oyo", - "Plateau", - "Rivers", - "Sokoto", - "Taraba", - "Yobe", - "Zamfara", - ], - }, - { - name: "South Africa", - states: [ - "Eastern Cape", - "Free State", - "Gauteng", - "KwaZulu-Natal", - "Limpopo", - "Mpumalanga", - "North West", - "Northern Cape", - "Western Cape", - ], - }, -]; diff --git a/src/app/dashboard/(user-dashboard)/_components/create-organization.tsx b/src/app/dashboard/(user-dashboard)/_components/create-organization.tsx index ca35e4b57..12e90fbd7 100644 --- a/src/app/dashboard/(user-dashboard)/_components/create-organization.tsx +++ b/src/app/dashboard/(user-dashboard)/_components/create-organization.tsx @@ -1,7 +1,13 @@ "use client"; import { zodResolver } from "@hookform/resolvers/zod"; -import { useState, useTransition } from "react"; +import { useEffect, useState, useTransition } from "react"; +import { + GetCountries, + GetState, + type Country, + type State, +} from "react-country-state-city"; import { useForm } from "react-hook-form"; import * as z from "zod"; @@ -33,7 +39,6 @@ import { } from "~/components/ui/select"; import { useToast } from "~/components/ui/use-toast"; import { organizationSchema } from "~/schemas"; -import { countries } from "./county"; interface ModalProperties { isOpen: boolean; @@ -41,18 +46,19 @@ interface ModalProperties { } export const CreateOrganization = ({ isOpen, setIsOpen }: ModalProperties) => { - const [selectedCountry, setSelectedCountry] = useState(); - const [states, setStates] = useState([]); + const [countryid, setCountryid] = useState(0); + + const [countries, setCountries] = useState([]); + const [states, setStates] = useState([]); + + useEffect(() => { + GetCountries().then((result: Country[]) => { + setCountries(result); + }); + }, []); const [isLoading, startTransition] = useTransition(); const { toast } = useToast(); - const handleCountryChange = (value: string) => { - setSelectedCountry(value); - const country = countries.find((c) => c.name === value); - if (country) { - setStates(country.states); - } - }; const form = useForm>({ resolver: zodResolver(organizationSchema), defaultValues: { @@ -201,8 +207,14 @@ export const CreateOrganization = ({ isOpen, setIsOpen }: ModalProperties) => { { + field.onChange(value); + }} defaultValue={field.value} - disabled={!selectedCountry} + disabled={countryid === 0} > {states.map((state) => ( - - {state} + + {state.name} ))} diff --git a/src/types/react-country-state-city.d.ts b/src/types/react-country-state-city.d.ts new file mode 100644 index 000000000..40800d923 --- /dev/null +++ b/src/types/react-country-state-city.d.ts @@ -0,0 +1,31 @@ +declare module "react-country-state-city" { + export function GetCountries(): Promise; + export function GetState(countryId: number): Promise; + export type State = { + id: number; + name: string; + state_code: string; + latitude: string; + longitude: string; + }; + export type Country = { + id: number; + name: string; + iso3: string; + iso2: string; + numeric_code: string; + phone_code: number; + capital: string; + currency: string; + currency_name: string; + currency_symbol: string; + native: string; + region: string; + subregion: string; + emoji: string; + emojiU: string; + tld: string; + latitude: string; + longitude: string; + }; +}