editSchool

wip
Kar 2023-05-13 17:03:58 +05:30
parent 7ffba324e6
commit dd3c5a829f
4 changed files with 76 additions and 75 deletions

View File

@ -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",

View File

View File

@ -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) => {
// 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(()=>{
fetchData();
},[])
// 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>

View File

@ -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"