work-on-file-upload
This commit is contained in:
@@ -1,8 +1,5 @@
|
||||
// import React, { useState } from 'react';
|
||||
// import Image from 'next/image'
|
||||
import NavBar from '../components/NavBar'
|
||||
|
||||
import { useId,useState, useEffect,useMemo } from 'react';
|
||||
import { useId, useState, useEffect, useMemo } from 'react';
|
||||
import Select from 'react-select'
|
||||
import countryList from 'react-select-country-list'
|
||||
import 'react-phone-number-input/style.css'
|
||||
@@ -12,23 +9,61 @@ export default function addSchoolForm() {
|
||||
const [countryValue, setCountryValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
const [phoneValue, setphoneValue] = useState()
|
||||
const [allStates, setAllStates] = useState([])
|
||||
const [allCities, setAllCities] = useState([])
|
||||
|
||||
const handleSelectAllStates = stateCode => {
|
||||
setAllCities([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log("handleSelectAllStates:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.name
|
||||
}
|
||||
})
|
||||
setAllCities(newData)
|
||||
})
|
||||
}
|
||||
const selectCountry = countryValue => {
|
||||
setAllStates([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log("countryValue:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.iso2
|
||||
}
|
||||
})
|
||||
setAllStates(newData)
|
||||
setAllCities([])
|
||||
})
|
||||
setCountryValue(countryValue)
|
||||
}
|
||||
// console.log(phoneValue)
|
||||
const selectCountry = countryValue => {
|
||||
setCountryValue(countryValue)
|
||||
}
|
||||
// const selectCountry = countryValue => {
|
||||
// setCountryValue(countryValue)
|
||||
// }
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status":"published",
|
||||
name: event.target.schoolName.value,
|
||||
country: event.target.country.value,
|
||||
state: event.target.state.value,
|
||||
cities: event.target.cities.value,
|
||||
anual: event.target.anual.value,
|
||||
toddlers: event.target.toddlers.value,
|
||||
early_start_programme: event.target.early_start_programme.value,
|
||||
interakto: event.target.interakto.value,
|
||||
// school_agreement: event.target.school_agreement,
|
||||
// school_contact_number : event.target.school_contact_number,
|
||||
// school_email_id : event.target.school_email_id,
|
||||
agreement_expiry_date: event.target.agreement_expiry_date.value,
|
||||
school_agreement: event.target.school_agreement.value,
|
||||
school_contact_number: event.target.school_contact_number.value,
|
||||
school_email_id: event.target.school_email_id.value,
|
||||
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
@@ -47,6 +82,7 @@ export default function addSchoolForm() {
|
||||
// alert(`Is this your full name: ${result.data}`)
|
||||
alert(`School Saved`)
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<div>
|
||||
@@ -64,12 +100,33 @@ export default function addSchoolForm() {
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="school_email_id" className='text-xl font-bold'> Email ID</label>
|
||||
<input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID ' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
<input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="email" className='text-xl font-bold'>Country</label>
|
||||
<Select className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="country" instanceId={useId()} options={options} value={countryValue} onChange={selectCountry} />
|
||||
</div>
|
||||
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="country" instanceId={useId()} options={options} value={countryValue}
|
||||
onChange={selectCountry}/>
|
||||
</div>
|
||||
{allStates && allStates.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="state" className='text-xl font-bold'>State</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="state" options={allStates} value={allStates[0].name}
|
||||
onChange={handleSelectAllStates}/>
|
||||
</div>}
|
||||
{
|
||||
allCities && allCities.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="cities" options={allCities} value={allCities[0].name}
|
||||
// onChange={() => {}}
|
||||
/>
|
||||
</div>}
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
|
||||
<PhoneInput className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="phone" placeholder="Enter phone number" value={phoneValue} onChange={setphoneValue}/>
|
||||
@@ -145,6 +202,10 @@ export default function addSchoolForm() {
|
||||
<option value="December"> December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
|
||||
<input type="date" name="agreement_expiry_date" id="agreement_expiry_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
|
||||
<input type="file" name="school_agreement" id="school_agreement" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
|
||||
Reference in New Issue
Block a user