editSchool
parent
7ffba324e6
commit
dd3c5a829f
|
@ -13,6 +13,7 @@
|
|||
"@types/react": "18.2.0",
|
||||
"@types/react-dom": "18.2.1",
|
||||
"autoprefixer": "10.4.14",
|
||||
"csv-parser": "^3.0.0",
|
||||
"eslint": "8.39.0",
|
||||
"eslint-config-next": "13.3.1",
|
||||
"formidable": "^2.1.1",
|
||||
|
|
|
@ -1,71 +1,74 @@
|
|||
import NavBar from '../components/NavBar'
|
||||
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'
|
||||
import PhoneInput from 'react-phone-number-input'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
|
||||
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)
|
||||
}
|
||||
const router = useRouter()
|
||||
let sid= router.query.school
|
||||
// const sid= router.query.school
|
||||
// const query = useQuery();
|
||||
|
||||
|
||||
|
||||
if(sid){
|
||||
const [school, setSchool] = useState([]);
|
||||
const fetchData = async () => {
|
||||
const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school="+sid);
|
||||
const data = await response.json();
|
||||
return setSchool(data.data);
|
||||
}
|
||||
console.log(school)
|
||||
// if(sid){console.log(sid)}
|
||||
// const getSchoolData = async (sid) => {
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
},[])
|
||||
|
||||
// let getSchoolApi=`https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school=${sid}`
|
||||
// console.log(sid)
|
||||
// const response = await fetch(getSchoolApi);
|
||||
// const data = await response.json();
|
||||
// let schoolData = data && data.length > 0
|
||||
// return setSchool(schoolData.data);
|
||||
|
||||
// }
|
||||
// console.log(sid)
|
||||
// useEffect(() => {
|
||||
// // async function getSchoolData() {
|
||||
// // // You can await here
|
||||
// // const response = await MyAPI.getData(someId);
|
||||
// // // ...
|
||||
// // }
|
||||
// // getSchoolData();
|
||||
// // if(!router.isReady) return;
|
||||
// // const { sid } = router.query;
|
||||
// // console.log(sid);
|
||||
// // // getSchoolData();
|
||||
// // let getSchoolApi=`https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school=${sid}`
|
||||
// // console.log(sid)
|
||||
// // await fetch(getSchoolApi);
|
||||
// if (!query) {
|
||||
// return;
|
||||
// }
|
||||
// fetch(`https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school=${sid}`)
|
||||
// .then(res => res.json())
|
||||
// .then(data => {
|
||||
// console.log("handleSelectAllStates:", data, options)
|
||||
// let newData = data && data.length > 0
|
||||
// setSchool(newData)
|
||||
// })
|
||||
// },[])
|
||||
useEffect(()=>{
|
||||
// if(router.query.school<1) {
|
||||
// const { sid } = router.query;
|
||||
// setSchool(sid)
|
||||
if(router.query.school && router.query.school>1 ){
|
||||
fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
|
||||
// console.log("handleSelectAllStates:", data, options)
|
||||
// let newData = data && data.length > 0
|
||||
console.log(router.query.school); setSchool(data)
|
||||
})
|
||||
}
|
||||
|
||||
}, [router.query.school]);
|
||||
|
||||
console.log(school);
|
||||
// console.log(phoneValue)
|
||||
// const selectCountry = countryValue => {
|
||||
// setCountryValue(countryValue)
|
||||
|
@ -126,32 +129,22 @@ export default function addSchoolForm() {
|
|||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<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}/>
|
||||
<input type="text" name="country" />
|
||||
|
||||
</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 &&
|
||||
<input type="text" name="state" />
|
||||
|
||||
</div>
|
||||
<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>}
|
||||
<input type="text" name="cities" />
|
||||
|
||||
</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}/>
|
||||
<input type="text" name="phone" />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="anual" className='text-xl font-bold'>Anual</label>
|
||||
|
|
|
@ -933,6 +933,13 @@ csstype@^3.0.2:
|
|||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
|
||||
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
|
||||
|
||||
csv-parser@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/csv-parser/-/csv-parser-3.0.0.tgz#b88a6256d79e090a97a1b56451f9327b01d710e7"
|
||||
integrity sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==
|
||||
dependencies:
|
||||
minimist "^1.2.0"
|
||||
|
||||
damerau-levenshtein@^1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
|
||||
|
|
Loading…
Reference in New Issue